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

Dashboard v2 -- Address feedback regarding /auth/ pages

packages/dashboard-v2/src/components/DropdownMenu/DropdownMenu.js

@@ -7,13 +7,10 @@ import { ChevronDownIcon } from "../Icons";
 
 const dropDown = keyframes`
   0% {
-    transform: scaleY(0);
+    transform: rotateX(-90deg);
-  }
-  80% {
-    transform: scaleY(1.1);
   }
   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"};
 `;

packages/dashboard-v2/src/components/forms/LoginForm.js

@@ -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>
       )}

packages/dashboard-v2/src/layouts/AuthLayout.js

@@ -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>
       </>

packages/dashboard-v2/src/pages/auth/login.js

@@ -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">
+      <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>
     </>
   );
 };

packages/dashboard-v2/src/pages/auth/registration.js

@@ -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="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 && (
@@ -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>
   );

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

@@ -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">
+      {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>
     </>
   );

packages/dashboard-v2/src/pages/user/confirm.js

@@ -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="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>
     </>
   );

packages/dashboard-v2/src/pages/user/recover.js

@@ -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">
+      {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>
-      </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>
     </>
   );
 };