diff --git a/libs/auth/src/lib/pages/SignupPage.tsx b/libs/auth/src/lib/pages/SignupPage.tsx index 8542796b4..fd7231989 100644 --- a/libs/auth/src/lib/pages/SignupPage.tsx +++ b/libs/auth/src/lib/pages/SignupPage.tsx @@ -1,4 +1,4 @@ -import { useState } from "react"; +import { useState } from 'react'; import { Alert, Anchor, @@ -6,13 +6,12 @@ import { Checkbox, Group, PasswordInput, - Select, SimpleGrid, Stack, Text, TextInput, Title, -} from "@mantine/core"; +} from '@mantine/core'; import { IconArrowRight, IconAt, @@ -20,47 +19,33 @@ import { IconLock, IconMail, IconUser, -} from "@tabler/icons-react"; -import { Controller, useForm } from "react-hook-form"; -import { zodResolver } from "@hookform/resolvers/zod"; -import { z } from "zod"; -import { useNavigate, Link } from "react-router-dom"; -import { useDispatch } from "react-redux"; -import { useApiMutation } from "@ema-platform/api"; -// eslint-disable-next-line @nx/enforce-module-boundaries -import { useErrorHandler } from "@ema-platform/ui"; -import { AuthShell } from "../components/AuthShell"; -import { loginSuccess, setUser } from "../store/auth.slice"; -import type { AuthUser } from "../types/auth.types"; -import { useAuthConfig } from "../AuthConfig"; - -const USER_TYPE_OPTIONS = [ - { value: "cadet", label: "cadet" }, - { value: "logistics", label: "Logistics" }, - { value: "registration", label: "Registration" }, - { value: "transfer", label: "Transfer" }, -]; +} from '@tabler/icons-react'; +import { useForm } from 'react-hook-form'; +import { zodResolver } from '@hookform/resolvers/zod'; +import { z } from 'zod'; +import { useNavigate, Link } from 'react-router-dom'; +import { useDispatch } from 'react-redux'; +import { useApiMutation } from '@ema-platform/api'; +import { useErrorHandler } from '@ema-platform/ui'; +import { AuthShell } from '../components/AuthShell'; +import { loginSuccess, setUser } from '../store/auth.slice'; +import type { AuthUser } from '../types/auth.types'; +import { useAuthConfig } from '../AuthConfig'; const schema = z .object({ email: z.string().email(), - username: z - .string() - .min(3, { message: "Username must be at least 3 characters" }), - phoneNumber: z.string().min(1, { message: "Phone number is required" }), - userType: z.enum(["cadet", "logistics", "registration", "transfer"], { - message: "User type is required", - }), - nameEn: z.string().min(1, { message: "Name (English) is required" }), + username: z.string().min(3, { message: 'Username must be at least 3 characters' }), + phoneNumber: z.string().min(1, { message: 'Phone number is required' }), + userType: z.literal('individual'), + nameEn: z.string().min(1, { message: 'Name (English) is required' }), nameAm: z.string().optional(), - password: z - .string() - .min(8, { message: "Password must be at least 8 characters" }), - confirmPassword: z.string().min(8, { message: "Confirm your password" }), + password: z.string().min(8, { message: 'Password must be at least 8 characters' }), + confirmPassword: z.string().min(8, { message: 'Confirm your password' }), }) .refine((data) => data.password === data.confirmPassword, { - message: "Passwords do not match", - path: ["confirmPassword"], + message: 'Passwords do not match', + path: ['confirmPassword'], }); type FormValues = z.infer; @@ -95,10 +80,10 @@ export function SignupPage() { const { register, handleSubmit, - control, formState: { errors }, } = useForm({ resolver: zodResolver(schema), + defaultValues: { userType: 'individual' }, }); const onSubmit = async (values: FormValues) => { @@ -108,14 +93,14 @@ export function SignupPage() { username: values.username, phoneNumber: values.phoneNumber, userType: values.userType, - name: { en: values.nameEn, am: values.nameAm ?? "" }, + name: { en: values.nameEn, am: values.nameAm ?? '' }, password: values.password, confirmPassword: values.confirmPassword, }; const data = await signupTrigger({ - url: "/auth/signup-with-pwd", - method: "POST", + url: '/auth/signup-with-pwd', + method: 'POST', body: payload, }).unwrap(); @@ -127,13 +112,13 @@ export function SignupPage() { }), ); - const me = await meTrigger({ url: "/auth/me", method: "GET" }).unwrap(); + const me = await meTrigger({ url: '/auth/me', method: 'GET' }).unwrap(); dispatch(setUser(me)); if (data.isPhoneNumberVerified) { - navigate("/profile-setup"); + navigate('/profile-setup'); } else { - navigate("/otp-verify", { + navigate('/otp-verify', { state: { email: values.email, phoneNumber: values.phoneNumber, @@ -162,12 +147,7 @@ export function SignupPage() { {serverError && ( - setServerError(null)} - > + setServerError(null)}> {serverError} )} @@ -180,14 +160,14 @@ export function SignupPage() { placeholder="Abebe Bekele" leftSection={} error={errors.nameEn?.message} - {...register("nameEn")} + {...register('nameEn')} /> } error={errors.nameAm?.message} - {...register("nameAm")} + {...register('nameAm')} /> @@ -197,37 +177,23 @@ export function SignupPage() { placeholder="you@example.com" leftSection={} error={errors.email?.message} - {...register("email")} + {...register('email')} /> } error={errors.username?.message} - {...register("username")} + {...register('username')} /> - ( -