add company user registration, update phone validation
This commit is contained in:
smanylov
@@ -1,20 +1,18 @@
|
||||
'use client'
|
||||
|
||||
import styles from '@/app/styles/module/login.module.scss';
|
||||
import { useTranslations } from 'next-intl';
|
||||
import { useActionState, useEffect } from 'react';
|
||||
import { useActionState, useEffect, useRef, useState, ChangeEvent } from 'react';
|
||||
import { getUserData } from '@/app/actions/action';
|
||||
import { useQuery } from '@tanstack/react-query';
|
||||
import { companyUserRegistration } from '@/app/actions/companyActions';
|
||||
import { CompanyUserRegistrationFormState } from '@/app/actions/companyActions';
|
||||
import { SignupFormSchema } from '@/app/actions/definitions';
|
||||
import * as z from 'zod';
|
||||
import PhoneInput from '@/app/ui/inputs/phone-input';
|
||||
import { IconEye } from '@/app/ui/icons/icons';
|
||||
|
||||
export function CompanyUsersSettingPanel() {
|
||||
const t = useTranslations('Global');
|
||||
|
||||
const [errorMessage, formAction, isPending] = useActionState(
|
||||
(state: void | undefined, formData: FormData) => {
|
||||
console.log(formData);
|
||||
},
|
||||
undefined
|
||||
);
|
||||
|
||||
const {
|
||||
data: userData,
|
||||
isLoading,
|
||||
@@ -31,42 +29,269 @@ export function CompanyUsersSettingPanel() {
|
||||
return null
|
||||
}
|
||||
|
||||
const [state, formAction, isPending] = useActionState(
|
||||
companyUserRegistration,
|
||||
undefined
|
||||
);
|
||||
|
||||
const t = useTranslations('Login-register-form');
|
||||
const [showPassword, setShowPassword] = useState(false);
|
||||
const [showConfirmPassword, setShowConfirmPassword] = useState(false);
|
||||
const [formState, setFormState] = useState<CompanyUserRegistrationFormState | undefined>(undefined);
|
||||
const passwordRef = useRef<HTMLInputElement>(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (state) {
|
||||
setFormState(state);
|
||||
}
|
||||
|
||||
}, [state])
|
||||
|
||||
function validateField(
|
||||
fieldName: string,
|
||||
value: string,
|
||||
) {
|
||||
switch (fieldName) {
|
||||
case 'confirm_password':
|
||||
const baseSchema = SignupFormSchema.shape.confirm_password;
|
||||
const baseResult = baseSchema.safeParse(value);
|
||||
|
||||
if (!baseResult.success) {
|
||||
return baseResult;
|
||||
}
|
||||
|
||||
const currentPassword = passwordRef.current?.value || '';
|
||||
if (value !== currentPassword) {
|
||||
return {
|
||||
success: false,
|
||||
error: new z.ZodError([
|
||||
{
|
||||
code: z.ZodIssueCode.custom,
|
||||
message: 'repeat-password',
|
||||
path: ['confirm_password']
|
||||
}
|
||||
])
|
||||
};
|
||||
}
|
||||
|
||||
return { success: true, data: value };
|
||||
|
||||
case 'email':
|
||||
case 'fullName':
|
||||
case 'phone':
|
||||
case 'password':
|
||||
case 'companyName':
|
||||
case 'agree':
|
||||
const schema = SignupFormSchema.shape[fieldName];
|
||||
if (fieldName === 'phone') {
|
||||
console.log(schema.safeParse(value.replace(/[-\(\)\s]/g, '')));
|
||||
return schema.safeParse(value.replace(/[-\(\)\s]/g, ''));
|
||||
}
|
||||
if (fieldName === 'companyName') {
|
||||
return { success: true, data: value };
|
||||
}
|
||||
return schema.safeParse(value);
|
||||
|
||||
default:
|
||||
throw new Error(`Unknown field: ${fieldName}`);
|
||||
}
|
||||
}
|
||||
|
||||
function onChangeHandler(e: ChangeEvent<HTMLInputElement>): void {
|
||||
const fieldName = e.target.name;
|
||||
if (fieldName !== 'phone') {
|
||||
e.target.value = e.target.value.replace(/([^a-zA-Zа-яёА-ЯЁ0-9@.!#$%&"'*+/=?^_{|}~\-\s])/g, '');
|
||||
}
|
||||
const validatedField = validateField(fieldName, e.target.value);
|
||||
|
||||
if (validatedField.success) {
|
||||
setFormState(prevState => {
|
||||
if (!prevState?.error || !prevState?.error[fieldName]) {
|
||||
return prevState;
|
||||
}
|
||||
|
||||
const { [fieldName]: _, ...newError } = prevState.error;
|
||||
|
||||
return {
|
||||
...prevState,
|
||||
error: newError
|
||||
};
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function showPassowrd(target: 'password' | 'confirm-password') {
|
||||
if (target === 'password') {
|
||||
setShowPassword(!showPassword);
|
||||
} else {
|
||||
setShowConfirmPassword(!showConfirmPassword);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="settings-form">
|
||||
<div className="form-section">
|
||||
<h3 className="form-section-title">
|
||||
Добавление пользователей
|
||||
</h3>
|
||||
<form action={formAction}>
|
||||
<div className="form-group">
|
||||
<label className="form-label">
|
||||
<form action={(e) => {
|
||||
formAction(e);
|
||||
}}>
|
||||
<div className={`${styles['form-group']}`}>
|
||||
<label className={`${styles['form-label']} ${styles['required']}`}>
|
||||
{t('full-name')}:
|
||||
</label>
|
||||
<input type="text" name="full_name" className="form-input" />
|
||||
<input
|
||||
type="text"
|
||||
id="fullName"
|
||||
name="fullName"
|
||||
className={`${styles['form-input']}`}
|
||||
placeholder={t('name-placeholder')}
|
||||
defaultValue={formState?.previousState?.fullName ? formState?.previousState?.fullName : ''}
|
||||
onChange={onChangeHandler}
|
||||
/>
|
||||
{formState?.error?.fullName && (
|
||||
<p className="text-sm text-red-500">
|
||||
{
|
||||
formState?.error?.fullName.split('&').map((e, index) => {
|
||||
return (
|
||||
<span key={index}>
|
||||
{t(e)}
|
||||
<br />
|
||||
</span>
|
||||
)
|
||||
})
|
||||
}
|
||||
</p>
|
||||
)}
|
||||
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label className="form-label">
|
||||
{t('email')}:
|
||||
<div className={`${styles['form-group']}`}>
|
||||
<label className={`${styles['form-label']} ${styles['required']}`}>
|
||||
{t('email-adress')}:
|
||||
</label>
|
||||
<input type="text" name="email" className="form-input" />
|
||||
<input
|
||||
type="text"
|
||||
id="email"
|
||||
name="email"
|
||||
className={`${styles['form-input']}`}
|
||||
placeholder="ivan@example.com"
|
||||
defaultValue={formState?.previousState?.email ? formState?.previousState?.email : ''}
|
||||
onChange={(e) => {
|
||||
e.target.value = e.target.value.toLocaleLowerCase();
|
||||
onChangeHandler(e)
|
||||
}}
|
||||
/>
|
||||
{formState?.error?.email && (
|
||||
<p className="text-sm text-red-500">
|
||||
{
|
||||
formState?.error?.email.split('&').map((e, index) => {
|
||||
return (
|
||||
<span key={index}>
|
||||
{t(e)}
|
||||
<br />
|
||||
</span>
|
||||
)
|
||||
})
|
||||
}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label className="form-label">
|
||||
<div className={`${styles['form-group']}`}>
|
||||
<label className={`${styles['form-label']} ${styles['required']}`}>
|
||||
{t('phone')}:
|
||||
</label>
|
||||
<input type="phone" name="phone" className="form-input" />
|
||||
<PhoneInput
|
||||
phoneState={formState?.previousState?.phone}
|
||||
validateHandler={onChangeHandler}
|
||||
/>
|
||||
{formState?.error?.phone && (
|
||||
<p className="text-sm text-red-500">
|
||||
{
|
||||
formState?.error?.phone.split('&').map((e, index) => {
|
||||
return (
|
||||
<span key={index}>
|
||||
{t(e)}
|
||||
<br />
|
||||
</span>
|
||||
)
|
||||
})
|
||||
}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label className="form-label">
|
||||
Пароль
|
||||
<div className={`${styles['form-group']}`}>
|
||||
<label className={`${styles['form-label']} ${styles['required']}`}>
|
||||
{t('password')}:
|
||||
</label>
|
||||
<input type="text" name="password" className="form-input" />
|
||||
<div
|
||||
className={`${styles['password-wrapper']}`}
|
||||
>
|
||||
<input
|
||||
ref={passwordRef}
|
||||
type={showPassword ? "text" : "password"}
|
||||
id="password"
|
||||
name="password"
|
||||
className={`${styles['form-input']} ${styles['password']}`}
|
||||
placeholder={t('password-placeholder')}
|
||||
defaultValue={formState?.previousState?.password ? formState?.previousState?.password : ''}
|
||||
onChange={onChangeHandler}
|
||||
/>
|
||||
<button
|
||||
onClick={() => {
|
||||
showPassowrd('password')
|
||||
}}
|
||||
type="button"
|
||||
className={`show-password-button ${showPassword ? 'show' : ''}`}
|
||||
>
|
||||
<IconEye />
|
||||
</button>
|
||||
</div>
|
||||
{formState?.error?.password && (
|
||||
<p className="text-sm text-red-500">
|
||||
{
|
||||
formState?.error?.password.split('&').map((e, index) => {
|
||||
return (
|
||||
<span key={index}>
|
||||
{t(e)}
|
||||
<br />
|
||||
</span>
|
||||
)
|
||||
})
|
||||
}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label className="form-label">
|
||||
Повторите пароль
|
||||
|
||||
<div className={`${styles['form-group']}`}>
|
||||
<label className={`${styles['form-label']} ${styles['required']}`}>
|
||||
{t('confirm-password')}:
|
||||
</label>
|
||||
<input type="text" name="confirm-password" className="form-input" />
|
||||
<div className={`${styles['password-wrapper']}`}>
|
||||
<input
|
||||
type={showConfirmPassword ? "text" : "password"}
|
||||
id="confirm_password"
|
||||
name="confirm_password"
|
||||
className={`${styles['form-input']} ${styles['password']}`}
|
||||
placeholder={t('repeat-password')}
|
||||
defaultValue={formState?.previousState?.confirm_password ? formState?.previousState?.confirm_password : ''}
|
||||
onChange={onChangeHandler}
|
||||
/>
|
||||
<button
|
||||
onClick={() => {
|
||||
showPassowrd('confirm-password');
|
||||
}}
|
||||
type="button"
|
||||
className={`show-password-button ${showConfirmPassword ? 'show' : ''}`}
|
||||
>
|
||||
<IconEye />
|
||||
</button>
|
||||
</div>
|
||||
{formState?.error?.confirm_password && (
|
||||
<p className="text-sm text-red-500">
|
||||
{t(formState?.error?.confirm_password)}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<button type="submit" className="btn btn-primary">
|
||||
|
||||
Reference in New Issue
Block a user