Standardize the width of identity views (#151)

ValueMelody · Sep 12, 2024 · 962cab6 · 962cab6
1 parent 5848d93
commit 962cab6
Show file tree

Hide file tree

Showing 9 changed files with 132 additions and 124 deletions.
diff --git a/server/src/views/AuthorizeAccount.tsx b/server/src/views/AuthorizeAccount.tsx
@@ -36,13 +36,15 @@ const AuthorizeAccount = ({
     <Layout
       locales={locales}
       logoUrl={logoUrl}
-      locale={queryDto.locale}>
+      locale={queryDto.locale}
+    >
       <Title title={localeConfig.authorizeAccount.title[queryDto.locale]} />
+      <SubmitError />
       <form
         autocomplete='on'
         onsubmit='return handleSubmit(event)'
       >
-        <section class='flex-col gap-4'>
+        <section class='flex-col gap-2'>
           <Field
             label={localeConfig.authorizeAccount.email[queryDto.locale]}
             type='email'
@@ -64,9 +66,7 @@ const AuthorizeAccount = ({
             name='confirmPassword'
           />
           {enableNames && (
-            <section
-              id='row-names'
-              class='flex-row gap-4'>
+            <>
               <Field
                 label={localeConfig.authorizeAccount.firstName[queryDto.locale]}
                 type='text'
@@ -79,9 +79,8 @@ const AuthorizeAccount = ({
                 required={namesIsRequired}
                 name='lastName'
               />
-            </section>
+            </>
           )}
-          <SubmitError />
           <SubmitButton
             title={localeConfig.authorizeAccount.signUp[queryDto.locale]}
           />
@@ -118,7 +117,7 @@ const AuthorizeAccount = ({
         </section>
       </form>
       <a
-        class='button-text mt-4'
+        class='button-text'
         href={`${routeConfig.InternalRoute.Identity}/authorize-password?${queryString}`}
       >
         {localeConfig.authorizeAccount.signIn[queryDto.locale]}
@@ -138,18 +137,18 @@ const AuthorizeAccount = ({
             ${enableNames && namesIsRequired ? validateScript.firstName(queryDto.locale) : ''}
             ${enableNames && namesIsRequired ? validateScript.lastName(queryDto.locale) : ''}
             fetch('${routeConfig.InternalRoute.Identity}/authorize-account', {
-                method: 'POST',
-                headers: {
-                  'Accept': 'application/json',
-                  'Content-Type': 'application/json'
-                },
-                body: JSON.stringify({
-                  firstName: document.getElementById('form-firstName') ? document.getElementById('form-firstName').value : undefined,
-                  lastName: document.getElementById('form-lastName') ? document.getElementById('form-lastName').value : undefined,
-                  email: document.getElementById('form-email').value,
-                  password: document.getElementById('form-password').value,
-                  ${requestScript.parseAuthorizeBaseValues(queryDto)}
-                })
+              method: 'POST',
+              headers: {
+                'Accept': 'application/json',
+                'Content-Type': 'application/json'
+              },
+              body: JSON.stringify({
+                firstName: document.getElementById('form-firstName') ? document.getElementById('form-firstName').value : undefined,
+                lastName: document.getElementById('form-lastName') ? document.getElementById('form-lastName').value : undefined,
+                email: document.getElementById('form-email').value,
+                password: document.getElementById('form-password').value,
+                ${requestScript.parseAuthorizeBaseValues(queryDto)}
+              })
             })
             .then((response) => {
               ${responseScript.parseRes()}

diff --git a/server/src/views/AuthorizeEmailMfa.tsx b/server/src/views/AuthorizeEmailMfa.tsx
@@ -28,6 +28,7 @@ const AuthorizeEmailMfa = ({
       locale={queryDto.locale}
     >
       <h1 class='w-text text-center'>{localeConfig.authorizeEmailMfa.title[queryDto.locale]}</h1>
+      <SubmitError />
       <form
         onsubmit='return handleSubmit(event)'
       >
@@ -45,7 +46,6 @@ const AuthorizeEmailMfa = ({
           >
             {localeConfig.authorizeEmailMfa.resend[queryDto.locale]}
           </button>
-          <SubmitError />
           <SubmitButton
             title={localeConfig.authorizeEmailMfa.verify[queryDto.locale]}
           />

diff --git a/server/src/views/AuthorizeMfaEnroll.tsx b/server/src/views/AuthorizeMfaEnroll.tsx
@@ -23,37 +23,39 @@ const AuthorizeMfaEnroll = ({
       locale={queryDto.locale}
     >
       <Title title={localeConfig.authorizeMfaEnroll.title[queryDto.locale]} />
+      <SubmitError />
       <section class='flex-row justify-around w-full gap-8 mt-4'>
         <button
           class='button w-half'
           type='button'
-          onclick='handleSelect("email")'>
+          onclick='handleSelect("email")'
+        >
           {localeConfig.authorizeMfaEnroll.email[queryDto.locale]}
         </button>
         <button
           class='button w-half'
           type='button'
-          onclick='handleSelect("otp")'>
+          onclick='handleSelect("otp")'
+        >
           {localeConfig.authorizeMfaEnroll.otp[queryDto.locale]}
         </button>
       </section>
-      <SubmitError />
       {html`
         <script>
           function handleSelect(type) {
             fetch('${routeConfig.InternalRoute.Identity}/authorize-mfa-enroll', {
-                method: 'POST',
-                headers: {
-                  'Accept': 'application/json',
-                  'Content-Type': 'application/json'
-                },
-                body: JSON.stringify({
-                  state: "${queryDto.state}",
-                  code: "${queryDto.code}",
-                  redirectUri: "${queryDto.redirectUri}",
-                  locale: "${queryDto.locale}",
-                  type
-                })
+              method: 'POST',
+              headers: {
+                'Accept': 'application/json',
+                'Content-Type': 'application/json'
+              },
+              body: JSON.stringify({
+                state: "${queryDto.state}",
+                code: "${queryDto.code}",
+                redirectUri: "${queryDto.redirectUri}",
+                locale: "${queryDto.locale}",
+                type
+              })
             })
             .then((response) => {
               ${responseScript.parseRes()}

diff --git a/server/src/views/AuthorizeOtpMfa.tsx b/server/src/views/AuthorizeOtpMfa.tsx
@@ -36,6 +36,7 @@ const AuthorizeOtpMfa = ({
           <canvas id='qr-code' />
         </>
       )}
+      <SubmitError />
       <form
         onsubmit='return handleSubmit(event)'
       >
@@ -56,7 +57,6 @@ const AuthorizeOtpMfa = ({
               {localeConfig.authorizeOtpMfa.switchToEmail[queryDto.locale]}
             </button>
           )}
-          <SubmitError />
           <SubmitButton
             title={localeConfig.authorizeOtpMfa.verify[queryDto.locale]}
           />
@@ -76,18 +76,18 @@ const AuthorizeOtpMfa = ({
             e.preventDefault();
             ${validateScript.verificationOtp(queryDto.locale)}
             fetch('${routeConfig.InternalRoute.Identity}/authorize-otp-mfa', {
-                method: 'POST',
-                headers: {
-                  'Accept': 'application/json',
-                  'Content-Type': 'application/json'
-                },
-                body: JSON.stringify({
-                  state: "${queryDto.state}",
-                  code: "${queryDto.code}",
-                  locale: "${queryDto.locale}",
-                  redirectUri: "${queryDto.redirectUri}",
-                  mfaCode: document.getElementById('form-otp').value,
-                })
+              method: 'POST',
+              headers: {
+                'Accept': 'application/json',
+                'Content-Type': 'application/json'
+              },
+              body: JSON.stringify({
+                state: "${queryDto.state}",
+                code: "${queryDto.code}",
+                locale: "${queryDto.locale}",
+                redirectUri: "${queryDto.redirectUri}",
+                mfaCode: document.getElementById('form-otp').value,
+              })
             })
             .then((response) => {
               ${responseScript.parseRes()}

diff --git a/server/src/views/AuthorizePassword.tsx b/server/src/views/AuthorizePassword.tsx
@@ -41,11 +41,12 @@ const AuthorizePassword = ({
         </script>
       )}
       <Title title={localeConfig.authorizePassword.title[queryDto.locale]} />
+      <SubmitError />
       <form
         autocomplete='on'
         onsubmit='return handleSubmit(event)'
       >
-        <section class='flex-col gap-4'>
+        <section class='flex-col gap-2'>
           {enablePasswordSignIn && (
             <>
               <Field
@@ -64,7 +65,6 @@ const AuthorizePassword = ({
               />
             </>
           )}
-          <SubmitError />
           {enablePasswordSignIn && (
             <SubmitButton
               title={localeConfig.authorizePassword.submit[queryDto.locale]}
@@ -95,7 +95,7 @@ const AuthorizePassword = ({
         </section>
       </form>
       {(enableSignUp || enablePasswordReset) && (
-        <section class='flex-col gap-2 mt-4'>
+        <section class='flex-col gap-4'>
           {enableSignUp && (
             <a
               class='button-text'
@@ -121,15 +121,15 @@ const AuthorizePassword = ({
           function handleGoogleSignIn (response) {
             if (!response.credential) return false;
             fetch('${routeConfig.InternalRoute.Identity}/authorize-google', {
-                method: 'POST',
-                headers: {
-                  'Accept': 'application/json',
-                  'Content-Type': 'application/json'
-                },
-                body: JSON.stringify({
-                  credential: response.credential,
-                  ${requestScript.parseAuthorizeBaseValues(queryDto)}
-                })
+              method: 'POST',
+              headers: {
+                'Accept': 'application/json',
+                'Content-Type': 'application/json'
+              },
+              body: JSON.stringify({
+                credential: response.credential,
+                ${requestScript.parseAuthorizeBaseValues(queryDto)}
+              })
             })
             .then((response) => {
               ${responseScript.parseRes()}
@@ -146,16 +146,16 @@ const AuthorizePassword = ({
             ${validateScript.email(queryDto.locale)}
             ${validateScript.password(queryDto.locale)}
             fetch('${routeConfig.InternalRoute.Identity}/authorize-password', {
-                method: 'POST',
-                headers: {
-                  'Accept': 'application/json',
-                  'Content-Type': 'application/json'
-                },
-                body: JSON.stringify({
-                  email: document.getElementById('form-email').value,
-                  password: document.getElementById('form-password').value,
-                  ${requestScript.parseAuthorizeBaseValues(queryDto)}
-                })
+              method: 'POST',
+              headers: {
+                'Accept': 'application/json',
+                'Content-Type': 'application/json'
+              },
+              body: JSON.stringify({
+                email: document.getElementById('form-email').value,
+                password: document.getElementById('form-password').value,
+                ${requestScript.parseAuthorizeBaseValues(queryDto)}
+              })
             })
             .then((response) => {
               ${responseScript.parseRes()}

diff --git a/server/src/views/AuthorizeReset.tsx b/server/src/views/AuthorizeReset.tsx
@@ -12,6 +12,7 @@ import {
 import Title from 'views/components/Title'
 import Field from 'views/components/Field'
 import { oauthDto } from 'dtos'
+import SubmitButton from 'views/components/SubmitButton'
 
 const AuthorizeReset = ({
   logoUrl, queryString, queryDto, locales,
@@ -45,6 +46,7 @@ const AuthorizeReset = ({
       >
         <Title title={localeConfig.authorizeReset.title[queryDto.locale]} />
         <p class='mb-4 text-center w-text'>{localeConfig.authorizeReset.desc[queryDto.locale]}</p>
+        <SubmitError />
         <form
           onsubmit='return handleSubmit(event)'
         >
@@ -84,18 +86,13 @@ const AuthorizeReset = ({
               name='confirmPassword'
               className='hidden'
             />
-            <SubmitError />
-            <button
-              id='submit-btn'
-              class='button mt-4'
-              type='submit'
-            >
-              {localeConfig.authorizeReset.send[queryDto.locale]}
-            </button>
+            <SubmitButton
+              title={localeConfig.authorizeReset.send[queryDto.locale]}
+            />
           </section>
         </form>
         <a
-          class='button-text mt-4'
+          class='button-text'
           href={`${routeConfig.InternalRoute.Identity}/authorize-password?${queryString}`}
         >
           {localeConfig.authorizeReset.backSignIn[queryDto.locale]}
@@ -163,7 +160,7 @@ const AuthorizeReset = ({
                 document.getElementById('resend-btn').classList.remove('hidden');
                 document.getElementById('password-row').classList.remove('hidden');
                 document.getElementById('confirmPassword-row').classList.remove('hidden');
-                document.getElementById('submit-btn').innerHTML = '${localeConfig.authorizeReset.reset[queryDto.locale]}'
+                document.getElementById('submit-button').innerHTML = '${localeConfig.authorizeReset.reset[queryDto.locale]}'
               })
               .catch((error) => {
                 ${responseScript.handleSubmitError(queryDto.locale)}

diff --git a/server/src/views/VerifyEmail.tsx b/server/src/views/VerifyEmail.tsx
@@ -38,17 +38,17 @@ const VerifyEmail = ({
         class='flex-col items-center gap-4'
       >
         <Title title={localeConfig.verifyEmail.title[queryDto.locale]} />
-        <p class='mb-4 w-text text-center'>{localeConfig.verifyEmail.desc[queryDto.locale]}</p>
+        <p class='mb-2 w-text text-center'>{localeConfig.verifyEmail.desc[queryDto.locale]}</p>
+        <SubmitError />
         <form
           onsubmit='return handleSubmit(event)'
         >
-          <section class='flex-col gap-4'>
+          <section class='flex-col gap-2'>
             <Field
               type='text'
               required={false}
               name='code'
             />
-            <SubmitError />
             <SubmitButton
               title={localeConfig.verifyEmail.verify[queryDto.locale]}
             />
@@ -62,15 +62,15 @@ const VerifyEmail = ({
             e.preventDefault();
             ${validateScript.verificationCode(queryDto.locale)}
             fetch('${routeConfig.InternalRoute.Identity}/verify-email', {
-                method: 'POST',
-                headers: {
-                  'Accept': 'application/json',
-                  'Content-Type': 'application/json'
-                },
-                body: JSON.stringify({
-                  code: document.getElementById('form-code').value,
-                  id: '${queryDto.id}',
-                })
+              method: 'POST',
+              headers: {
+                'Accept': 'application/json',
+                'Content-Type': 'application/json'
+              },
+              body: JSON.stringify({
+                code: document.getElementById('form-code').value,
+                id: '${queryDto.id}',
+              })
             })
             .then((response) => {
               ${responseScript.parseRes()}