streamlined resend code buttons

apps/login/locales/de.json

@@ -24,6 +24,7 @@
       "title": "Passwort festlegen",
       "description": "Legen Sie das Passwort für Ihr Konto fest",
       "codeSent": "Ein Code wurde an Ihre E-Mail-Adresse gesendet.",
+      "noCodeReceived": "Keinen Code erhalten?",
       "resend": "Erneut senden",
       "submit": "Weiter"
     },
@@ -173,6 +174,7 @@
     "verify": {
       "title": "Benutzer verifizieren",
       "description": "Geben Sie den Code ein, der in der Bestätigungs-E-Mail angegeben ist.",
+      "noCodeReceived": "Keinen Code erhalten?",
       "resendCode": "Code erneut senden",
       "submit": "Weiter"
     }

apps/login/locales/en.json

@@ -24,6 +24,7 @@
       "title": "Set Password",
       "description": "Set the password for your account",
       "codeSent": "A code has been sent to your email address.",
+      "noCodeReceived": "Didn't receive a code?",
       "resend": "Resend code",
       "submit": "Continue"
     },
@@ -173,6 +174,7 @@
     "verify": {
       "title": "Verify user",
       "description": "Enter the Code provided in the verification email.",
+      "noCodeReceived": "Didn't receive a code?",
       "resendCode": "Resend code",
       "submit": "Continue"
     }

apps/login/locales/es.json

@@ -24,6 +24,7 @@
       "title": "Establecer Contraseña",
       "description": "Establece la contraseña para tu cuenta",
       "codeSent": "Se ha enviado un código a su correo electrónico.",
+      "noCodeReceived": "¿No recibiste un código?",
       "resend": "Reenviar código",
       "submit": "Continuar"
     },
@@ -173,6 +174,7 @@
     "verify": {
       "title": "Verificar usuario",
       "description": "Introduce el código proporcionado en el correo electrónico de verificación.",
+      "noCodeReceived": "¿No recibiste un código?",
       "resendCode": "Reenviar código",
       "submit": "Continuar"
     }

apps/login/locales/it.json

@@ -24,6 +24,7 @@
       "title": "Imposta Password",
       "description": "Imposta la password per il tuo account",
       "codeSent": "Un codice è stato inviato al tuo indirizzo email.",
+      "noCodeReceived": "Non hai ricevuto un codice?",
       "resend": "Invia di nuovo",
       "submit": "Continua"
     },
@@ -173,6 +174,7 @@
     "verify": {
       "title": "Verifica utente",
       "description": "Inserisci il codice fornito nell'email di verifica.",
+      "noCodeReceived": "Non hai ricevuto un codice?",
       "resendCode": "Invia di nuovo il codice",
       "submit": "Continua"
     }

apps/login/locales/zh.json

@@ -24,6 +24,7 @@
       "title": "设置密码",
       "description": "为您的账户设置密码",
       "codeSent": "验证码已发送到您的邮箱。",
+      "noCodeReceived": "没有收到验证码？",
       "resend": "重发验证码",
       "submit": "继续"
     },
@@ -173,6 +174,7 @@
     "verify": {
       "title": "验证用户",
       "description": "输入验证邮件中的验证码。",
+      "noCodeReceived": "没有收到验证码？",
       "resendCode": "重发验证码",
       "submit": "继续"
     }

apps/login/src/components/set-password-form.tsx

@@ -18,7 +18,7 @@ import { useTranslations } from "next-intl";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
 import { FieldValues, useForm } from "react-hook-form";
-import { Alert } from "./alert";
+import { Alert, AlertType } from "./alert";
 import { BackButton } from "./back-button";
 import { Button, ButtonVariants } from "./button";
 import { TextInput } from "./input";
@@ -192,31 +192,39 @@ export function SetPasswordForm({
     <form className="w-full">
       <div className="pt-4 grid grid-cols-1 gap-4 mb-4">
         {codeRequired && (
-          <div className="flex flex-row items-end">
-            <div className="flex-1">
-              <TextInput
-                type="text"
-                required
-                {...register("code", {
-                  required: "This field is required",
-                })}
-                label="Code"
-                autoComplete="one-time-code"
-                error={errors.code?.message as string}
-                data-testid="code-text-input"
-              />
-            </div>
-
-            <div className="ml-4 mb-1">
-              <Button
-                variant={ButtonVariants.Secondary}
-                data-testid="resend-button"
-                onClick={() => resendCode()}
+          <Alert type={AlertType.INFO}>
+            <div className="flex flex-row">
+              <span className="flex-1 mr-auto text-left">
+                {t("set.noCodeReceived")}
+              </span>
+              <button
+                aria-label="Resend OTP Code"
                 disabled={loading}
+                type="button"
+                className="ml-4 text-primary-light-500 dark:text-primary-dark-500 hover:dark:text-primary-dark-400 hover:text-primary-light-400 cursor-pointer disabled:cursor-default disabled:text-gray-400 dark:disabled:text-gray-700"
+                onClick={() => {
+                  resendCode();
+                }}
+                data-testid="resend-button"
               >
                 {t("set.resend")}
-              </Button>
+              </button>
             </div>
+          </Alert>
+        )}
+        {codeRequired && (
+          <div className="flex flex-row items-end">
+            <TextInput
+              type="text"
+              required
+              {...register("code", {
+                required: "This field is required",
+              })}
+              label="Code"
+              autoComplete="one-time-code"
+              error={errors.code?.message as string}
+              data-testid="code-text-input"
+            />
           </div>
         )}
         <div className="">

apps/login/src/components/verify-form.tsx

@@ -1,11 +1,12 @@
 "use client";
 
-import { Alert } from "@/components/alert";
+import { Alert, AlertType } from "@/components/alert";
 import { resendVerification, sendVerification } from "@/lib/server/email";
 import { useTranslations } from "next-intl";
 import { useRouter } from "next/navigation";
 import { useCallback, useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
+import { BackButton } from "./back-button";
 import { Button, ButtonVariants } from "./button";
 import { TextInput } from "./input";
 import { Spinner } from "./spinner";
@@ -96,6 +97,25 @@ export function VerifyForm({ userId, code, isInvite, params }: Props) {
   return (
     <>
       <form className="w-full">
+        <Alert type={AlertType.INFO}>
+          <div className="flex flex-row">
+            <span className="flex-1 mr-auto text-left">
+              {t("verify.noCodeReceived")}
+            </span>
+            <button
+              aria-label="Resend OTP Code"
+              disabled={loading}
+              type="button"
+              className="ml-4 text-primary-light-500 dark:text-primary-dark-500 hover:dark:text-primary-dark-400 hover:text-primary-light-400 cursor-pointer disabled:cursor-default disabled:text-gray-400 dark:disabled:text-gray-700"
+              onClick={() => {
+                resendCode();
+              }}
+              data-testid="resend-button"
+            >
+              {t("verify.resendCode")}
+            </button>
+          </div>
+        </Alert>
         <div className="">
           <TextInput
             type="text"
@@ -112,13 +132,7 @@ export function VerifyForm({ userId, code, isInvite, params }: Props) {
         )}
 
         <div className="mt-8 flex w-full flex-row items-center">
-          <Button
-            type="button"
-            onClick={() => resendCode()}
-            variant={ButtonVariants.Secondary}
-          >
-            {t("verify.resendCode")}
-          </Button>
+          <BackButton />
           <span className="flex-grow"></span>
           <Button
             type="submit"