feat: stepper iprovemnts and translations

easyflow-software · Jul 24, 2024 · e22fa3f · e22fa3f
1 parent 42a7377
commit e22fa3f
Show file tree

Hide file tree

Showing 6 changed files with 221 additions and 198 deletions.
diff --git a/public/locales/de/signup.json b/public/locales/de/signup.json
@@ -16,6 +16,12 @@
     "special": "Mindestens ein Sonderzeichen",
     "minLength": "Mindestens 12 Zeichen"
   },
+  "recoveryCodeInformation": "Dein Wiederherstellungscode wurde erfolgreich generiert. Um den Datenschutz zu gewährleisten, speichern wir deinen Wiederherstellungscode <strong>nicht</strong>. Ohne diesen Wiederherstellungscode kannst du dein Konto im Falle eines Passwortverlustes nicht wiederherstellen. Du kannst deinen WWIederherstellungscode hier <CopyLink>kopieren</CopyLink> oder <DownloadLink>herunterladen</DownloadLink>.",
+  "stepperTitles": {
+    "enterInformation": "Informationen eingeben",
+    "confirmEmail": "E-Mail bestätigen",
+    "recoveryCode": "Wiederherstellungscode"
+  },
   "title": "Registrieren",
   "validation": {
     "email": {

diff --git a/public/locales/en/signup.json b/public/locales/en/signup.json
@@ -15,6 +15,12 @@
     "special": "At least one special character",
     "minLength": "At least 12 characters long"
   },
+  "recoveryCodeInformation": "We successfully generated your recovery code. To ensure proper data protection we do <strong>not</strong> store your recovery code and without that recovery code you cannot restore your account in case of a password loss. <CopyLink>Copy</CopyLink> or <DownloadLink>donwload</DownloadLink> your Recovery Code.",
+  "stepperTitles": {
+    "enterInformation": "Enter Information",
+    "confirmEmail": "Confirm Email",
+    "recoveryCode": "Recovery Code"
+  },
   "title": "Sign Up",
   "validation": {
     "email": {

diff --git a/src/app/[locale]/signup/page.tsx b/src/app/[locale]/signup/page.tsx
@@ -30,7 +30,9 @@ const Home: FunctionComponent<HomeProps> = async ({ params: { locale } }) => {
           <CardHeader>
             <h3>{t('signup:title')}</h3>
           </CardHeader>
-          <SignupForm />
+          <div className="p-3">
+            <SignupForm />
+          </div>
         </Card>
       </div>
     </TranslationsProvider>

diff --git a/src/app/globals.css b/src/app/globals.css
@@ -2,7 +2,7 @@
 @tailwind components;
 @tailwind utilities;
 
-/* This are the headings still cause tailwind preflight removers defaults */
+/* This are the headings styles cause tailwind preflight removers defaults */
 @layer base {
   h1 {
     @apply text-4xl font-bold;

diff --git a/src/components/progress-stepper/Stepper.tsx b/src/components/progress-stepper/Stepper.tsx
@@ -43,7 +43,7 @@ const Stepper: ForwardRefExoticComponent<StepperProps & RefAttributes<StepperRef
     <div className="flex flex-col items-center">
       <div className="mb-4 flex w-full">
         {Children.map(props.children, (_, index) => (
-          <div className="flex w-full">
+          <div className={`flex ${index < Children.count(props.children) - 1 ? 'w-full' : ''}`}>
             <div className="flex flex-col items-center">
               <div
                 key={index}
@@ -56,16 +56,18 @@ const Stepper: ForwardRefExoticComponent<StepperProps & RefAttributes<StepperRef
               </div>
               <p className="mt-1 max-w-12 text-center text-sm">{props.titles[index]}</p>
             </div>
-            <div className="relative mx-2 mt-6 flex h-0.5 w-full flex-grow">
-              {index < Children.count(props.children) - 1 && (
-                <>
-                  <span className="absolute h-0.5 w-full bg-content3" />
-                  <span
-                    className={`${index < currentStep ? 'w-full' : 'w-0'} absolute h-0.5 bg-primary duration-[5s] ease-in-out transition-width`}
-                  />
-                </>
-              )}
-            </div>
+            {index < Children.count(props.children) - 1 && (
+              <div className="relative mx-2 mt-6 flex h-0.5 w-full flex-grow">
+                {index < Children.count(props.children) - 1 && (
+                  <>
+                    <span className="absolute h-0.5 w-full bg-content3" />
+                    <span
+                      className={`${index < currentStep ? 'w-full' : 'w-0'} absolute h-0.5 bg-primary duration-[5s] ease-in-out transition-width`}
+                    />
+                  </>
+                )}
+              </div>
+            )}
           </div>
         ))}
       </div>