From 8c20158e589e29bf3ddc15b9075343619bb5ed80 Mon Sep 17 00:00:00 2001 From: Dane Everitt Date: Sat, 4 Jul 2020 14:21:28 -0700 Subject: [PATCH] Fix login form --- .../scripts/components/FlashMessageRender.tsx | 25 +++----- resources/scripts/components/MessageBox.tsx | 61 +++++++++++++++++-- .../auth/ForgotPasswordContainer.tsx | 25 ++++---- .../components/auth/LoginContainer.tsx | 33 +++++----- .../components/auth/LoginFormContainer.tsx | 24 ++++---- .../scripts/components/elements/Input.tsx | 2 +- 6 files changed, 106 insertions(+), 64 deletions(-) diff --git a/resources/scripts/components/FlashMessageRender.tsx b/resources/scripts/components/FlashMessageRender.tsx index ed6671e80..1b449ecbf 100644 --- a/resources/scripts/components/FlashMessageRender.tsx +++ b/resources/scripts/components/FlashMessageRender.tsx @@ -1,29 +1,22 @@ import React from 'react'; import MessageBox from '@/components/MessageBox'; -import { State, useStoreState } from 'easy-peasy'; -import { ApplicationStore } from '@/state'; +import { useStoreState } from 'easy-peasy'; import tw from 'twin.macro'; type Props = Readonly<{ byKey?: string; + className?: string; }>; -export default ({ byKey }: Props) => { - const flashes = useStoreState((state: State) => state.flashes.items); - - let filtered = flashes; - if (byKey) { - filtered = flashes.filter(flash => flash.key === byKey); - } - - if (filtered.length === 0) { - return null; - } +const FlashMessageRender = ({ byKey, className }: Props) => { + const flashes = useStoreState(state => state.flashes.items.filter( + flash => byKey ? flash.key === byKey : true, + )); return ( -
+
{ - filtered.map((flash, index) => ( + flashes.map((flash, index) => ( {index > 0 &&
} @@ -35,3 +28,5 @@ export default ({ byKey }: Props) => {
); }; + +export default FlashMessageRender; diff --git a/resources/scripts/components/MessageBox.tsx b/resources/scripts/components/MessageBox.tsx index a962afb88..e16986ed5 100644 --- a/resources/scripts/components/MessageBox.tsx +++ b/resources/scripts/components/MessageBox.tsx @@ -1,4 +1,6 @@ import * as React from 'react'; +import tw, { TwStyle } from 'twin.macro'; +import styled from 'styled-components/macro'; export type FlashMessageType = 'success' | 'info' | 'warning' | 'error'; @@ -8,11 +10,60 @@ interface Props { type?: FlashMessageType; } -export default ({ title, children, type }: Props) => ( -
- {title && {title}} - +const styling = (type?: FlashMessageType): TwStyle | string => { + switch (type) { + case 'error': + return tw`bg-red-600 border-red-800`; + case 'info': + return tw`bg-primary-600 border-primary-800`; + case 'success': + return tw`bg-green-600 border-green-800`; + case 'warning': + return tw`bg-yellow-600 border-yellow-800`; + default: + return ''; + } +}; + +const getBackground = (type?: FlashMessageType): TwStyle | string => { + switch (type) { + case 'error': + return tw`bg-red-500`; + case 'info': + return tw`bg-primary-500`; + case 'success': + return tw`bg-green-500`; + case 'warning': + return tw`bg-yellow-500`; + default: + return ''; + } +}; + +const Container = styled.div<{ $type?: FlashMessageType }>` + ${tw`p-2 border items-center leading-normal rounded flex w-full text-sm text-white`}; + ${props => styling(props.$type)}; +`; +Container.displayName = 'MessageBox.Container'; + +const MessageBox = ({ title, children, type }: Props) => ( + + {title && + + {title} + + } + {children} -
+ ); +MessageBox.displayName = 'MessageBox'; + +export default MessageBox; diff --git a/resources/scripts/components/auth/ForgotPasswordContainer.tsx b/resources/scripts/components/auth/ForgotPasswordContainer.tsx index 0f923eb38..dbd4ed469 100644 --- a/resources/scripts/components/auth/ForgotPasswordContainer.tsx +++ b/resources/scripts/components/auth/ForgotPasswordContainer.tsx @@ -8,6 +8,8 @@ import { ApplicationStore } from '@/state'; import Field from '@/components/elements/Field'; import { Formik, FormikHelpers } from 'formik'; import { object, string } from 'yup'; +import tw from 'twin.macro'; +import Button from '@/components/elements/Button'; interface Values { email: string; @@ -43,33 +45,30 @@ export default () => { {({ isSubmitting }) => ( -
- + Send Email +
-
+
Return to Login diff --git a/resources/scripts/components/auth/LoginContainer.tsx b/resources/scripts/components/auth/LoginContainer.tsx index e3eda3fc2..b38f23a93 100644 --- a/resources/scripts/components/auth/LoginContainer.tsx +++ b/resources/scripts/components/auth/LoginContainer.tsx @@ -11,6 +11,8 @@ import { httpErrorToHuman } from '@/api/http'; import { FlashMessage } from '@/state/flashes'; import ReCAPTCHA from 'react-google-recaptcha'; import Spinner from '@/components/elements/Spinner'; +import tw from 'twin.macro'; +import Button from '@/components/elements/Button'; type OwnProps = RouteComponentProps & { clearFlashes: ActionCreator; @@ -36,36 +38,29 @@ const LoginContainer = ({ isSubmitting, setFieldValue, values, submitForm, handl {ref.current && ref.current.render()} - -
- +
-
- +
+
{recaptchaEnabled && setFieldValue('recaptchaData', null)} /> } -
+
Forgot password? diff --git a/resources/scripts/components/auth/LoginFormContainer.tsx b/resources/scripts/components/auth/LoginFormContainer.tsx index 541763dc0..2423e0251 100644 --- a/resources/scripts/components/auth/LoginFormContainer.tsx +++ b/resources/scripts/components/auth/LoginFormContainer.tsx @@ -1,7 +1,7 @@ import React, { forwardRef } from 'react'; import { Form } from 'formik'; import styled from 'styled-components/macro'; -import { breakpoint } from 'styled-components-breakpoint'; +import { breakpoint } from '@/theme'; import FlashMessageRender from '@/components/FlashMessageRender'; import tw from 'twin.macro'; @@ -30,27 +30,29 @@ const Container = styled.div` export default forwardRef(({ title, ...props }, ref) => ( - {title &&

+ {title && +

{title} -

} - + + } +
-
-
- +
+
+
-
+
{props.children}
-

+

© 2015 - 2020  Pterodactyl Software diff --git a/resources/scripts/components/elements/Input.tsx b/resources/scripts/components/elements/Input.tsx index 066d980a0..129249ba9 100644 --- a/resources/scripts/components/elements/Input.tsx +++ b/resources/scripts/components/elements/Input.tsx @@ -22,7 +22,6 @@ const inputStyle = css` ${tw`p-3 border rounded text-sm transition-all duration-150`}; ${tw`bg-neutral-600 border-neutral-500 hover:border-neutral-400 text-neutral-200 shadow-none`}; - ${props => props.hasError && tw`text-red-600 border-red-500 hover:border-red-600`}; & + .input-help { ${tw`mt-1 text-xs`}; ${props => props.hasError ? tw`text-red-400` : tw`text-neutral-400`}; @@ -41,6 +40,7 @@ const inputStyle = css` } ${props => props.isLight && light}; + ${props => props.hasError && tw`text-red-600 border-red-500 hover:border-red-600`}; `; const Input = styled.input`${inputStyle}`;