dashboard-v2: move static elements of auth pages to AuthLayout

This commit is contained in:
Michał Leszczyk 2022-04-11 12:37:14 +02:00
parent 9cfea2266a
commit d093577909
No known key found for this signature in database
GPG Key ID: FA123CA8BAA2FBF4
7 changed files with 63 additions and 80 deletions

View File

@ -82,7 +82,7 @@ export const LoginForm = ({ onSuccess }) => {
</div> </div>
<p className="text-sm text-center mt-8"> <p className="text-sm text-center mt-8">
Don't have an account? <HighlightedLink to="/auth/signup">Sign up</HighlightedLink> Don't have an account? <HighlightedLink to="/auth/registration">Sign up</HighlightedLink>
</p> </p>
</Form> </Form>
)} )}

View File

@ -33,7 +33,14 @@ const AuthLayout =
</h1> </h1>
</div> </div>
</SloganContainer> </SloganContainer>
<Content>{children}</Content> <Content>
<div className="bg-white px-8 py-10 md:py-32 lg:px-16 xl:px-28 min-h-screen">
<div className="mb-4 md:mb-16">
<img src="/images/logo-black-text.svg" alt="Skynet" className="-ml-2" />
</div>
{children}
</div>
</Content>
</Layout> </Layout>
</UserProvider> </UserProvider>
</> </>

View File

@ -22,16 +22,11 @@ const LoginPage = ({ location }) => {
<Metadata> <Metadata>
<title>Sign In</title> <title>Sign In</title>
</Metadata> </Metadata>
<div className="bg-white px-8 py-10 md:py-32 lg:px-16 xl:px-28 min-h-screen"> <LoginForm
<div className="mb-4 md:mb-16"> onSuccess={async () => {
<img src="/images/logo-black-text.svg" alt="Skynet" /> await refreshUserState();
</div> }}
<LoginForm />
onSuccess={async () => {
await refreshUserState();
}}
/>
</div>
</> </>
); );
}; };

View File

@ -61,11 +61,7 @@ const SignUpPage = () => {
<Metadata> <Metadata>
<title>Sign Up</title> <title>Sign Up</title>
</Metadata> </Metadata>
<div className="bg-white px-8 py-10 md:py-32 lg:px-16 xl:px-28 min-h-screen"> <div className="flex flex-col">
<div className="mb-4 md:mb-16">
<img src="/images/logo-black-text.svg" alt="Skynet" />
</div>
{!settings.areAccountsEnabled && <Alert $variant="info">Accounts are not enabled on this portal.</Alert>} {!settings.areAccountsEnabled && <Alert $variant="info">Accounts are not enabled on this portal.</Alert>}
{settings.areAccountsEnabled && ( {settings.areAccountsEnabled && (

View File

@ -20,30 +20,25 @@ const ResetPasswordPage = () => {
<Metadata> <Metadata>
<title>Reset Password</title> <title>Reset Password</title>
</Metadata> </Metadata>
<div className="bg-white px-8 py-10 md:py-32 lg:px-16 xl:px-28 min-h-screen"> {state !== State.Success && (
<div className="mb-4 md:mb-16"> <RecoveryForm onSuccess={() => setState(State.Success)} onFailure={() => setState(State.Failure)} />
<img src="/images/logo-black-text.svg" alt="Skynet" /> )}
</div>
{state !== State.Success && (
<RecoveryForm onSuccess={() => setState(State.Success)} onFailure={() => setState(State.Failure)} />
)}
{state === State.Success && ( {state === State.Success && (
<p className="text-primary text-center font-semibold">Please check your inbox for further instructions.</p> <p className="text-primary text-center font-semibold">Please check your inbox for further instructions.</p>
)} )}
{state === State.Failure && ( {state === State.Failure && (
<p className="text-error text-center">Something went wrong, please try again later.</p> <p className="text-error text-center">Something went wrong, please try again later.</p>
)} )}
<div className="text-sm text-center mt-8"> <div className="text-sm text-center mt-8">
<p> <p>
Suddenly remembered your password? <HighlightedLink to="/auth/login">Sign in</HighlightedLink> Suddenly remembered your password? <HighlightedLink to="/auth/login">Sign in</HighlightedLink>
</p> </p>
<p> <p>
Don't actually have an account? <HighlightedLink to="/auth/signup">Create one!</HighlightedLink> Don't actually have an account? <HighlightedLink to="/auth/registration">Create one!</HighlightedLink>
</p> </p>
</div>
</div> </div>
</> </>
); );

View File

@ -57,23 +57,18 @@ const EmailConfirmationPage = ({ location }) => {
<Metadata> <Metadata>
<title>Confirm E-mail Address</title> <title>Confirm E-mail Address</title>
</Metadata> </Metadata>
<div className="bg-white px-8 py-10 md:py-32 lg:px-16 xl:px-28 min-h-screen"> <div className="text-center">
<div className="mb-4 md:mb-16"> {state === State.Pure && <p>Please wait while we verify your account...</p>}
<img src="/images/logo-black-text.svg" alt="Skynet" />
</div>
<div className="text-center">
{state === State.Pure && <p>Please wait while we verify your account...</p>}
{state === State.Success && ( {state === State.Success && (
<> <>
<p className="text-primary font-semibold">All done!</p> <p className="text-primary font-semibold">All done!</p>
<p>You will be redirected to your dashboard shortly.</p> <p>You will be redirected to your dashboard shortly.</p>
<HighlightedLink to="/">Redirect now.</HighlightedLink> <HighlightedLink to="/">Redirect now.</HighlightedLink>
</> </>
)} )}
{state === State.Failure && <p className="text-error">Something went wrong, please try again later.</p>} {state === State.Failure && <p className="text-error">Something went wrong, please try again later.</p>}
</div>
</div> </div>
</> </>
); );

View File

@ -24,35 +24,30 @@ const RecoverPage = ({ location }) => {
<Metadata> <Metadata>
<title>Recover Your Account</title> <title>Recover Your Account</title>
</Metadata> </Metadata>
<div className="bg-white px-8 py-10 md:py-32 lg:px-16 xl:px-28 min-h-screen"> {state !== State.Success && (
<div className="mb-4 md:mb-16"> <ResetPasswordForm
<img src="/images/logo-black-text.svg" alt="Skynet" /> token={token}
</div> onSuccess={() => {
{state !== State.Success && ( setState(State.Success);
<ResetPasswordForm navigate("/");
token={token} }}
onSuccess={() => { onFailure={() => setState(State.Failure)}
setState(State.Success); />
navigate("/"); )}
}}
onFailure={() => setState(State.Failure)}
/>
)}
{state === State.Success && ( {state === State.Success && (
<p className="text-primary text-center font-semibold"> <p className="text-primary text-center font-semibold">
All done! You will be redirected to your dashboard shortly. All done! You will be redirected to your dashboard shortly.
</p>
)}
{state === State.Failure && (
<p className="text-error text-center">Something went wrong, please try again later.</p>
)}
<p className="text-sm text-center mt-8">
Suddenly remembered your old password? <HighlightedLink to="/auth/login">Sign in</HighlightedLink>
</p> </p>
</div> )}
{state === State.Failure && (
<p className="text-error text-center">Something went wrong, please try again later.</p>
)}
<p className="text-sm text-center mt-8">
Suddenly remembered your old password? <HighlightedLink to="/auth/login">Sign in</HighlightedLink>
</p>
</> </>
); );
}; };