feat(auth): add optional email to signup form

src/api/users.ts

@@ -63,6 +63,7 @@ export const registerWithOtp = async (
   re_password: string,
   first_name = "",
   last_name = "",
+  email = "",
 ) => {
   const normalizedMobile = normalizeDigits(mobile)
   const normalizedCode = normalizeDigits(code)
@@ -75,6 +76,7 @@ export const registerWithOtp = async (
       re_password,
       first_name,
       last_name,
+      email,
     }),
   })
   if (!response.ok) throw await buildApiError(response)

src/context/AuthFlowContext.tsx

@@ -35,6 +35,7 @@ interface SignupDetailsState {
   confirmation: string
   firstName: string
   lastName: string
+  email: string
 }
 
 interface AuthFlowContextValue {
@@ -87,6 +88,7 @@ const defaultSignupDetails: SignupDetailsState = {
   confirmation: "",
   firstName: "",
   lastName: "",
+  email: "",
 }
 
 const AuthFlowContext = createContext<AuthFlowContextValue | null>(null)

src/locales/en.ts

@@ -68,6 +68,7 @@ export const en = {
     passwordReuse: "New password must be different from your previous password.",
     firstNamePlaceholder: "First name",
     lastNamePlaceholder: "Last name",
+    emailPlaceholder: "Email (optional)",
     enterPassword: "Enter your password",
     verifyNumber: "Verify your number",
     enterMobileDesc: "Enter your mobile number to continue",

src/locales/fa.ts

@@ -67,6 +67,7 @@ export const fa = {
     passwordReuse: "رمز عبور جدید نباید با رمز عبور قبلی یکسان باشد.",
     firstNamePlaceholder: "نام",
     lastNamePlaceholder: "نام خانوادگی",
+    emailPlaceholder: "ایمیل (اختیاری)",
     welcome: (title: string = "Qlockifiy") => `به ${title} خوش آمدید`,
     enterPassword: "رمز عبور خود را وارد کنید",
     verifyNumber: "تایید شماره موبایل",

src/pages/auth/SignupOtpPage.tsx

@@ -132,6 +132,7 @@ export function SignupOtpPage() {
         signupDetails.confirmation,
         signupDetails.firstName,
         signupDetails.lastName,
+        signupDetails.email,
       )
       clearCooldown("signupOtpSend")
       clearSignupDetails()

src/pages/auth/SignupPasswordPage.tsx

@@ -24,6 +24,7 @@ export function SignupPasswordPage() {
   const isRtl = lang === "fa"
   const [firstName, setFirstName] = useState(signupDetails.firstName)
   const [lastName, setLastName] = useState(signupDetails.lastName)
+  const [email, setEmail] = useState(signupDetails.email)
   const [password, setPassword] = useState(signupDetails.password)
   const [confirmation, setConfirmation] = useState(signupDetails.confirmation)
   const textFallbackDirection = isRtl ? "rtl" : "ltr"
@@ -75,6 +76,7 @@ export function SignupPasswordPage() {
       confirmation,
       firstName: firstName.trim(),
       lastName: lastName.trim(),
+      email: email.trim(),
     })
     setCode("signup", "")
     clearOtpDelivery("signup")
@@ -100,7 +102,7 @@ export function SignupPasswordPage() {
             placeholder={t.login.firstNamePlaceholder}
             dir={firstNameDirection}
             required
-            className={'h-11'}
+            className={`h-11 ${firstNameDirection === "rtl" ? "text-end" : "text-start"}`}
           />
           <Input
             id="signup-last-name"
@@ -109,9 +111,18 @@ export function SignupPasswordPage() {
             placeholder={t.login.lastNamePlaceholder}
             dir={lastNameDirection}
             required
-            className={'h-11'}
+            className={`h-11 ${lastNameDirection === "rtl" ? "text-end" : "text-start"}`}
           />
         </div>
+        <Input
+          id="signup-email"
+          value={email}
+          onChange={(event) => setEmail(event.target.value)}
+          placeholder={t.login.emailPlaceholder}
+          type="email"
+          dir="ltr"
+          className="h-11 text-start"
+        />
         <AuthPasswordField
           id="signup-password"
           value={password}