feat: implement user registration functionality with form validation and API integration
This commit is contained in:
Ardeman
parent
fd745c20a0
commit
42eb159a52
20
app/apis/news/register.ts
Normal file
20
app/apis/news/register.ts
Normal file
@ -0,0 +1,20 @@
|
||||
import { z } from 'zod'
|
||||
|
||||
import type { TRegisterSchema } from '~/layouts/news/form-register'
|
||||
import { HttpServer } from '~/libs/http-server'
|
||||
|
||||
const loginResponseSchema = z.object({
|
||||
data: z.object({
|
||||
token: z.string(),
|
||||
}),
|
||||
})
|
||||
|
||||
export const newsRegisterRequest = async (payload: TRegisterSchema) => {
|
||||
try {
|
||||
const { data } = await HttpServer().post('/api/user/register', payload)
|
||||
return loginResponseSchema.parse(data)
|
||||
} catch (error) {
|
||||
// eslint-disable-next-line unicorn/no-useless-promise-resolve-reject
|
||||
return Promise.reject(error)
|
||||
}
|
||||
}
|
||||
@ -63,7 +63,7 @@ export const FormLogin = () => {
|
||||
>
|
||||
<Input
|
||||
id="email"
|
||||
label="Email / No Telepon"
|
||||
label="Email"
|
||||
placeholder="Contoh: legal@legalgo.id"
|
||||
name="email"
|
||||
/>
|
||||
@ -80,7 +80,6 @@ export const FormLogin = () => {
|
||||
<div className="text-sm text-red-500 capitalize">{error}</div>
|
||||
)}
|
||||
|
||||
{/* Lupa Kata Sandi */}
|
||||
<div className="flex items-center justify-between text-sm">
|
||||
<span className="text-gray-600">Lupa Kata Sandi?</span>
|
||||
<Button
|
||||
@ -96,7 +95,6 @@ export const FormLogin = () => {
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Tombol Masuk */}
|
||||
<Button
|
||||
disabled={disabled}
|
||||
type="submit"
|
||||
|
||||
@ -1,112 +1,120 @@
|
||||
import { useState } from 'react'
|
||||
import { zodResolver } from '@hookform/resolvers/zod'
|
||||
import { useEffect, useState } from 'react'
|
||||
import { useFetcher } from 'react-router'
|
||||
import { RemixFormProvider, useRemixForm } from 'remix-hook-form'
|
||||
import { z } from 'zod'
|
||||
|
||||
import { Button } from '~/components/ui/button'
|
||||
import { Input } from '~/components/ui/input'
|
||||
import { useNewsContext } from '~/contexts/news'
|
||||
|
||||
export const registerSchema = z
|
||||
.object({
|
||||
email: z.string().email('Email tidak valid'),
|
||||
password: z.string().min(6, 'Kata sandi minimal 6 karakter'),
|
||||
rePassword: z.string().min(6, 'Kata sandi minimal 6 karakter'),
|
||||
phone: z.string().min(10, 'No telepon tidak valid'),
|
||||
})
|
||||
.refine((field) => field.password === field.rePassword, {
|
||||
message: 'Kata sandi tidak sama',
|
||||
path: ['rePassword'],
|
||||
})
|
||||
|
||||
export type TRegisterSchema = z.infer<typeof registerSchema>
|
||||
|
||||
export const FormRegister = () => {
|
||||
const { setIsLoginOpen, setIsRegisterOpen } = useNewsContext()
|
||||
const [showPassword, setShowPassword] = useState(false)
|
||||
const [error, setError] = useState<string>()
|
||||
const [disabled, setDisabled] = useState(false)
|
||||
const fetcher = useFetcher()
|
||||
|
||||
const formMethods = useRemixForm<TRegisterSchema>({
|
||||
mode: 'onSubmit',
|
||||
fetcher,
|
||||
resolver: zodResolver(registerSchema),
|
||||
})
|
||||
|
||||
const { handleSubmit } = formMethods
|
||||
|
||||
useEffect(() => {
|
||||
if (!fetcher.data?.success) {
|
||||
setError(fetcher.data?.message)
|
||||
setDisabled(false)
|
||||
return
|
||||
}
|
||||
|
||||
setDisabled(true)
|
||||
setError(undefined)
|
||||
setIsRegisterOpen(false)
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [fetcher])
|
||||
|
||||
return (
|
||||
<div className="flex flex-col items-center justify-center">
|
||||
<div className="w-full max-w-md">
|
||||
<form>
|
||||
{/* Input Email / No Telepon */}
|
||||
<div className="mb-4">
|
||||
<label
|
||||
htmlFor="email"
|
||||
className="mb-1 block text-gray-700"
|
||||
>
|
||||
Email/No. Telepon
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
<RemixFormProvider {...formMethods}>
|
||||
<fetcher.Form
|
||||
method="post"
|
||||
onSubmit={handleSubmit}
|
||||
className="space-y-4"
|
||||
action="/actions/register"
|
||||
>
|
||||
<Input
|
||||
id="email"
|
||||
label="Email"
|
||||
placeholder="Contoh: legal@legalgo.id"
|
||||
className="focus:inheriten w-full rounded-md border border-[#DFDFDF] p-2"
|
||||
required
|
||||
name="email"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Input Password */}
|
||||
<div className="relative mb-4">
|
||||
<label
|
||||
htmlFor="password"
|
||||
className="mb-1 block text-gray-700 focus:outline-[#2E2F7C]"
|
||||
>
|
||||
Kata Sandi
|
||||
</label>
|
||||
<input
|
||||
type={showPassword ? 'text' : 'password'}
|
||||
<Input
|
||||
id="password"
|
||||
label="Kata Sandi"
|
||||
placeholder="Masukkan Kata Sandi"
|
||||
className="w-full rounded-md border border-[#DFDFDF] p-2 pr-10 focus:outline-[#2E2F7C]"
|
||||
required
|
||||
name="password"
|
||||
type="password"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
className="absolute top-9 right-3 text-gray-500"
|
||||
onClick={() => setShowPassword(!showPassword)}
|
||||
>
|
||||
{/* {showPassword ? <EyeOffIcon size={18} /> : <EyeIcon size={18} />} */}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Reinput Password */}
|
||||
<div className="relative mb-4">
|
||||
<label
|
||||
htmlFor="password"
|
||||
className="mb-1 block text-gray-700 focus:outline-[#2E2F7C]"
|
||||
>
|
||||
Ulangi Kata Sandi
|
||||
</label>
|
||||
<input
|
||||
type={showPassword ? 'text' : 'password'}
|
||||
<Input
|
||||
id="re-password"
|
||||
label="Ulangi Kata Sandi"
|
||||
placeholder="Masukkan Kata Sandi"
|
||||
className="w-full rounded-md border border-[#DFDFDF] p-2 pr-10 focus:outline-[#2E2F7C]"
|
||||
required
|
||||
name="rePassword"
|
||||
type="password"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
className="absolute top-9 right-3 text-gray-500"
|
||||
onClick={() => setShowPassword(!showPassword)}
|
||||
>
|
||||
{/* {showPassword ? <EyeOffIcon size={18} /> : <EyeIcon size={18} />} */}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* No Telepon */}
|
||||
<div className="mb-4">
|
||||
<label
|
||||
htmlFor="no-telpon"
|
||||
className="mb-1 block text-gray-700"
|
||||
>
|
||||
No. Telepon
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Contoh: legal@legalgo.id"
|
||||
className="focus:inheriten w-full rounded-md border border-[#DFDFDF] p-2"
|
||||
required
|
||||
<Input
|
||||
id="phone"
|
||||
label="No. Telepon"
|
||||
placeholder="Masukkan No. Telepon"
|
||||
name="phone"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Subscribe*/}
|
||||
<div className="mb-4">
|
||||
<label
|
||||
htmlFor="subscription"
|
||||
className="mb-1 block text-gray-700"
|
||||
{/* Subscribe*/}
|
||||
{/* <div className="mb-4">
|
||||
<label
|
||||
htmlFor="subscription"
|
||||
className="mb-1 block text-gray-700"
|
||||
>
|
||||
Subscription
|
||||
</label>
|
||||
<select className="focus:inheriten w-full rounded-md border border-[#DFDFDF] p-2">
|
||||
<option selected>Subscription</option>
|
||||
</select>
|
||||
</div> */}
|
||||
|
||||
{error && (
|
||||
<div className="text-sm text-red-500 capitalize">{error}</div>
|
||||
)}
|
||||
|
||||
<Button
|
||||
disabled={disabled}
|
||||
type="submit"
|
||||
className="w-full rounded-md bg-[#2E2F7C] py-2 text-white transition hover:bg-blue-800"
|
||||
>
|
||||
Subscription
|
||||
</label>
|
||||
<select className="focus:inheriten w-full rounded-md border border-[#DFDFDF] p-2">
|
||||
<option selected>Subscription</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{/* Tombol Masuk */}
|
||||
<Button className="mt-5 w-full rounded-md bg-[#2E2F7C] py-2 text-white transition hover:bg-blue-800">
|
||||
Daftar
|
||||
</Button>
|
||||
</form>
|
||||
Daftar
|
||||
</Button>
|
||||
</fetcher.Form>
|
||||
</RemixFormProvider>
|
||||
|
||||
{/* Link Login */}
|
||||
<div className="mt-4 text-center text-sm">
|
||||
|
||||
75
app/routes/actions.register.ts
Normal file
75
app/routes/actions.register.ts
Normal file
@ -0,0 +1,75 @@
|
||||
import { zodResolver } from '@hookform/resolvers/zod'
|
||||
import { data } from 'react-router'
|
||||
import { getValidatedFormData } from 'remix-hook-form'
|
||||
import { XiorError } from 'xior'
|
||||
|
||||
import { getUser } from '~/apis/news/get-user'
|
||||
import { newsRegisterRequest } from '~/apis/news/register'
|
||||
import {
|
||||
registerSchema,
|
||||
type TRegisterSchema,
|
||||
} from '~/layouts/news/form-register'
|
||||
import { generateTokenCookie } from '~/utils/token'
|
||||
|
||||
import type { Route } from './+types/actions.register'
|
||||
|
||||
export const action = async ({ request }: Route.ActionArgs) => {
|
||||
try {
|
||||
const {
|
||||
errors,
|
||||
data: payload,
|
||||
receivedValues: defaultValues,
|
||||
} = await getValidatedFormData<TRegisterSchema>(
|
||||
request,
|
||||
zodResolver(registerSchema),
|
||||
false,
|
||||
)
|
||||
|
||||
if (errors) {
|
||||
return data({ success: false, errors, defaultValues }, { status: 400 })
|
||||
}
|
||||
|
||||
const { data: registerData } = await newsRegisterRequest(payload)
|
||||
const { token } = registerData
|
||||
const { data: userData } = await getUser({
|
||||
accessToken: token,
|
||||
})
|
||||
const tokenCookie = generateTokenCookie({
|
||||
token,
|
||||
})
|
||||
|
||||
const headers = new Headers()
|
||||
headers.append('Set-Cookie', await tokenCookie)
|
||||
|
||||
return data(
|
||||
{
|
||||
success: true,
|
||||
user: userData,
|
||||
},
|
||||
{
|
||||
headers,
|
||||
status: 200,
|
||||
statusText: 'OK',
|
||||
},
|
||||
)
|
||||
} catch (error) {
|
||||
if (error instanceof XiorError) {
|
||||
return data(
|
||||
{
|
||||
success: false,
|
||||
message: error?.response?.data?.error?.message || error.message,
|
||||
},
|
||||
{
|
||||
status: error?.response?.status || 500,
|
||||
},
|
||||
)
|
||||
}
|
||||
return data(
|
||||
{
|
||||
success: false,
|
||||
message: 'Internal server error',
|
||||
},
|
||||
{ status: 500 },
|
||||
)
|
||||
}
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user