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

Author: alejsdev

.pre-commit-config.yaml

@@ -18,11 +18,6 @@ repos:
         args:
           - --fix
       - id: ruff-format
-  - repo: https://github.com/biomejs/pre-commit
-    rev: v0.1.0
-    hooks:
-      - id: biome-check
-        additional_dependencies: ["@biomejs/[email protected]"]
 
 ci:
   autofix_commit_msg: 🎨 [pre-commit.ci] Auto format from pre-commit.com hooks

frontend/src/components/Admin/AddUser.tsx

@@ -21,6 +21,7 @@ import { useMutation, useQueryClient } from "react-query"
 import { type UserCreate, UsersService } from "../../client"
 import type { ApiError } from "../../client/core/ApiError"
 import useCustomToast from "../../hooks/useCustomToast"
+import { emailPattern } from "../../utils"
 
 interface AddUserProps {
   isOpen: boolean
@@ -95,10 +96,7 @@ const AddUser: React.FC<AddUserProps> = ({ isOpen, onClose }) => {
                 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"

frontend/src/components/Admin/EditUser.tsx

@@ -25,6 +25,7 @@ import {
   UsersService,
 } from "../../client"
 import useCustomToast from "../../hooks/useCustomToast"
+import { emailPattern } from "../../utils"
 
 interface EditUserProps {
   user: UserOut
@@ -101,10 +102,7 @@ const EditUser: React.FC<EditUserProps> = ({ user, isOpen, onClose }) => {
                 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"

frontend/src/components/UserSettings/UserInformation.tsx

@@ -24,6 +24,7 @@ import {
 } from "../../client"
 import useAuth from "../../hooks/useAuth"
 import useCustomToast from "../../hooks/useCustomToast"
+import { emailPattern } from "../../utils"
 
 const UserInformation: React.FC = () => {
   const queryClient = useQueryClient()
@@ -114,10 +115,7 @@ const UserInformation: React.FC = () => {
                 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,
                 })}
                 type="email"
                 size="md"

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"

frontend/src/utils.ts

@@ -0,0 +1,4 @@
+export const emailPattern = {
+  value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i,
+  message: "Invalid email address",
+}