From d0935779098ebfd842ef6f76a09512b1c4a03074 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Leszczyk?= <michasko37@gmail.com>
Date: Mon, 11 Apr 2022 12:37:14 +0200
Subject: [PATCH] dashboard-v2: move static elements of auth pages to
 AuthLayout

---
 .../src/components/forms/LoginForm.js         |  2 +-
 .../dashboard-v2/src/layouts/AuthLayout.js    |  9 +++-
 packages/dashboard-v2/src/pages/auth/login.js | 15 ++----
 .../src/pages/auth/registration.js            |  6 +--
 .../src/pages/auth/reset-password.js          | 37 ++++++--------
 .../dashboard-v2/src/pages/user/confirm.js    | 25 ++++------
 .../dashboard-v2/src/pages/user/recover.js    | 49 +++++++++----------
 7 files changed, 63 insertions(+), 80 deletions(-)

diff --git a/packages/dashboard-v2/src/components/forms/LoginForm.js b/packages/dashboard-v2/src/components/forms/LoginForm.js
index a5a1deeb..eeafc092 100644
--- a/packages/dashboard-v2/src/components/forms/LoginForm.js
+++ b/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>
       )}
diff --git a/packages/dashboard-v2/src/layouts/AuthLayout.js b/packages/dashboard-v2/src/layouts/AuthLayout.js
index 847562e5..8141e606 100644
--- a/packages/dashboard-v2/src/layouts/AuthLayout.js
+++ b/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>
       </>
diff --git a/packages/dashboard-v2/src/pages/auth/login.js b/packages/dashboard-v2/src/pages/auth/login.js
index 5812fd8f..8d51968d 100644
--- a/packages/dashboard-v2/src/pages/auth/login.js
+++ b/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">
-        <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();
+        }}
+      />
     </>
   );
 };
diff --git a/packages/dashboard-v2/src/pages/auth/registration.js b/packages/dashboard-v2/src/pages/auth/registration.js
index e8e67354..b58562fd 100644
--- a/packages/dashboard-v2/src/pages/auth/registration.js
+++ b/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="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 && (
diff --git a/packages/dashboard-v2/src/pages/auth/reset-password.js b/packages/dashboard-v2/src/pages/auth/reset-password.js
index 88db338a..74c40203 100644
--- a/packages/dashboard-v2/src/pages/auth/reset-password.js
+++ b/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">
-        <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>
     </>
   );
diff --git a/packages/dashboard-v2/src/pages/user/confirm.js b/packages/dashboard-v2/src/pages/user/confirm.js
index b4ce6bc1..1430a4f9 100644
--- a/packages/dashboard-v2/src/pages/user/confirm.js
+++ b/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="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>
     </>
   );
diff --git a/packages/dashboard-v2/src/pages/user/recover.js b/packages/dashboard-v2/src/pages/user/recover.js
index d8d02e8a..ddba982f 100644
--- a/packages/dashboard-v2/src/pages/user/recover.js
+++ b/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">
-        <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>
     </>
   );
 };