LumeWeb
/
skynet-webportal
Archived
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request #1982 from SkynetLabs/dashboard-v2-feedback-fixes-auth-pages 

Dashboard v2 -- Address feedback regarding /auth/ pages
This commit is contained in:
Karol Wypchło 2022-04-12 12:41:24 +02:00 committed by GitHub
parent 8c56fba6a8 d093577909
commit f7b7392449
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 75 additions and 92 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
packages/dashboard-v2/src/components/DropdownMenu/DropdownMenu.js
View File

@ -7,13 +7,10 @@ import { ChevronDownIcon } from "../Icons";
const dropDown = keyframes`
0% {
transform: scaleY(0);
}
80% {
transform: scaleY(1.1);
transform: rotateX(-90deg);
}
100% {
transform: scaleY(1);
transform: rotateX(0deg);
}
`;
@ -35,10 +32,11 @@ const Flyout = styled.div.attrs(({ open }) => ({
bg-white shadow-md shadow-palette-200/50
${open ? "visible" : "invisible"}`,
}))`
transform-origin: top center;
animation: ${({ open }) =>
open
? css`
${dropDown} 0.1s ease-in-out
${dropDown} .15s ease-in-out forwards;
`
: "none"};
`;

2
packages/dashboard-v2/src/components/forms/LoginForm.js
View File

@ -82,7 +82,7 @@ export const LoginForm = ({ onSuccess }) => {
</div>
<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>
</Form>
)}

9
packages/dashboard-v2/src/layouts/AuthLayout.js
View File

@ -33,7 +33,14 @@ const AuthLayout =
</h1>
</div>
</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>
</UserProvider>
</>

15
packages/dashboard-v2/src/pages/auth/login.js
View File

@ -22,16 +22,11 @@ const LoginPage = ({ location }) => {
<Metadata>
<title>Sign In</title>
</Metadata>
<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" />
</div>
<LoginForm
onSuccess={async () => {
await refreshUserState();
}}
/>
</div>
<LoginForm
onSuccess={async () => {
await refreshUserState();
}}
/>
</>
);
};

20
packages/dashboard-v2/src/pages/auth/signup.js → packages/dashboard-v2/src/pages/auth/registration.js
View File

@ -61,11 +61,7 @@ const SignUpPage = () => {
<Metadata>
<title>Sign Up</title>
</Metadata>
<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" />
</div>
<div className="flex flex-col">
{!settings.areAccountsEnabled && <Alert $variant="info">Accounts are not enabled on this portal.</Alert>}
{settings.areAccountsEnabled && (
@ -73,11 +69,17 @@ const SignUpPage = () => {
{settings.isSubscriptionRequired ? <PaidPortalHeader /> : <FreePortalHeader />}
{state !== State.Success && (
<SignUpForm onSuccess={() => setState(State.Success)} onFailure={() => setState(State.Failure)} />
<>
<SignUpForm onSuccess={() => setState(State.Success)} onFailure={() => setState(State.Failure)} />
<p className="text-sm text-center mt-8">
Already have an account? <HighlightedLink to="/auth/login">Sign in</HighlightedLink>
</p>
</>
)}
{state === State.Success && (
<div className="text-center">
<div>
<p className="text-primary font-semibold">Please check your inbox and confirm your email address.</p>
<p>You will be redirected to your dashboard shortly.</p>
<HighlightedLink to="/">Click here to go there now.</HighlightedLink>
@ -89,10 +91,6 @@ const SignUpPage = () => {
)}
</>
)}
<p className="text-sm text-center mt-8">
Already have an account? <HighlightedLink to="/auth/login">Sign in</HighlightedLink>
</p>
</div>
</PlansProvider>
);

37
packages/dashboard-v2/src/pages/auth/reset-password.js
View File

@ -20,30 +20,25 @@ const ResetPasswordPage = () => {
<Metadata>
<title>Reset Password</title>
</Metadata>
<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" />
</div>
{state !== State.Success && (
<RecoveryForm onSuccess={() => setState(State.Success)} onFailure={() => setState(State.Failure)} />
)}
{state !== State.Success && (
<RecoveryForm onSuccess={() => setState(State.Success)} onFailure={() => setState(State.Failure)} />
)}
{state === State.Success && (
<p className="text-primary text-center font-semibold">Please check your inbox for further instructions.</p>
)}
{state === State.Success && (
<p className="text-primary text-center font-semibold">Please check your inbox for further instructions.</p>
)}
{state === State.Failure && (
<p className="text-error text-center">Something went wrong, please try again later.</p>
)}
{state === State.Failure && (
<p className="text-error text-center">Something went wrong, please try again later.</p>
)}
<div className="text-sm text-center mt-8">
<p>
Suddenly remembered your password? <HighlightedLink to="/auth/login">Sign in</HighlightedLink>
</p>
<p>
Don't actually have an account? <HighlightedLink to="/auth/signup">Create one!</HighlightedLink>
</p>
</div>
<div className="text-sm text-center mt-8">
<p>
Suddenly remembered your password? <HighlightedLink to="/auth/login">Sign in</HighlightedLink>
</p>
<p>
Don't actually have an account? <HighlightedLink to="/auth/registration">Create one!</HighlightedLink>
</p>
</div>
</>
);

25
packages/dashboard-v2/src/pages/user/confirm.js
View File

@ -57,23 +57,18 @@ const EmailConfirmationPage = ({ location }) => {
<Metadata>
<title>Confirm E-mail Address</title>
</Metadata>
<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" />
</div>
<div className="text-center">
{state === State.Pure && <p>Please wait while we verify your account...</p>}
<div className="text-center">
{state === State.Pure && <p>Please wait while we verify your account...</p>}
{state === State.Success && (
<>
<p className="text-primary font-semibold">All done!</p>
<p>You will be redirected to your dashboard shortly.</p>
<HighlightedLink to="/">Redirect now.</HighlightedLink>
</>
)}
{state === State.Success && (
<>
<p className="text-primary font-semibold">All done!</p>
<p>You will be redirected to your dashboard shortly.</p>
<HighlightedLink to="/">Redirect now.</HighlightedLink>
</>
)}
{state === State.Failure && <p className="text-error">Something went wrong, please try again later.</p>}
</div>
{state === State.Failure && <p className="text-error">Something went wrong, please try again later.</p>}
</div>
</>
);

49
packages/dashboard-v2/src/pages/user/recover.js
View File

@ -24,35 +24,30 @@ const RecoverPage = ({ location }) => {
<Metadata>
<title>Recover Your Account</title>
</Metadata>
<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" />
</div>
{state !== State.Success && (
<ResetPasswordForm
token={token}
onSuccess={() => {
setState(State.Success);
navigate("/");
}}
onFailure={() => setState(State.Failure)}
/>
)}
{state !== State.Success && (
<ResetPasswordForm
token={token}
onSuccess={() => {
setState(State.Success);
navigate("/");
}}
onFailure={() => setState(State.Failure)}
/>
)}
{state === State.Success && (
<p className="text-primary text-center font-semibold">
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>
{state === State.Success && (
<p className="text-primary text-center font-semibold">
All done! You will be redirected to your dashboard shortly.
</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>
</>
);
};