♻️ Add email pattern and refactor in frontend (#1138)

frontend/src/routes/login.tsx

@@ -25,6 +25,7 @@ import Logo from "../assets/images/fastapi-logo.svg"
 import type { ApiError } from "../client"
 import type { Body_login_login_access_token as AccessToken } from "../client/models/Body_login_login_access_token"
 import useAuth, { isLoggedIn } from "../hooks/useAuth"
+import { emailPattern } from "../utils"
 
 export const Route = createFileRoute("/login")({
   component: Login,
@@ -87,10 +88,7 @@ function Login() {
           <Input
             id="username"
             {...register("username", {
-              pattern: {
-                value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i,
-                message: "Invalid email address",
-              },
+              pattern: emailPattern,
             })}
             placeholder="Email"
             type="email"

frontend/src/routes/recover-password.tsx

@@ -13,6 +13,7 @@ import { type SubmitHandler, useForm } from "react-hook-form"
 import { LoginService } from "../client"
 import { isLoggedIn } from "../hooks/useAuth"
 import useCustomToast from "../hooks/useCustomToast"
+import { emailPattern } from "../utils"
 
 interface FormData {
   email: string
@@ -70,10 +71,7 @@ function RecoverPassword() {
           id="email"
           {...register("email", {
             required: "Email is required",
-            pattern: {
-              value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i,
-              message: "Invalid email address",
-            },
+            pattern: emailPattern,
           })}
           placeholder="Email"
           type="email"