add company user registration, update phone validation
This commit is contained in:
smanylov
@@ -16,7 +16,7 @@ export default function Page() {
|
||||
<Suspense fallback={<>...</>}>
|
||||
<PageTitleColorFrame title="refferal-program" description="referral-program-description" />
|
||||
<CommissionLevels />
|
||||
<ReferralStats />
|
||||
{/* <ReferralStats /> */}
|
||||
<ReferralLinkSection />
|
||||
<InvitationsTable />
|
||||
<IncomeAndPayments />
|
||||
|
||||
@@ -0,0 +1,180 @@
|
||||
'use server'
|
||||
|
||||
import { API_BASE_URL, getSignupFormSchema } from '@/app/actions/definitions';
|
||||
import { createSession } from '@/app/actions/session';
|
||||
import { redirect } from 'next/navigation';
|
||||
|
||||
export type CompanyUserRegistrationFormState = {
|
||||
previousState: {
|
||||
fullName: string;
|
||||
email: string;
|
||||
password: string;
|
||||
confirm_password: string;
|
||||
phone: string;
|
||||
},
|
||||
error: Record<string, string> | null
|
||||
} | undefined;
|
||||
|
||||
export async function companyUserRegistration(
|
||||
state: CompanyUserRegistrationFormState | undefined,
|
||||
formData: FormData,
|
||||
): Promise<CompanyUserRegistrationFormState> {
|
||||
const fullName = formData.get('fullName') as string || '';
|
||||
const email = formData.get('email') as string || '';
|
||||
const password = formData.get('password') as string || '';
|
||||
const confirm_password = formData.get('confirm_password') as string || '';
|
||||
const phone = formData.get('phone') as string || '';
|
||||
|
||||
const SignupFormSchema = await getSignupFormSchema('b2c');
|
||||
|
||||
const dataToValidate = {
|
||||
fullName,
|
||||
email,
|
||||
phone: phone.replace(/[-\(\)\s]/g, ''),
|
||||
password,
|
||||
confirm_password,
|
||||
agree: 'on'
|
||||
};
|
||||
|
||||
const validatedFields = SignupFormSchema.safeParse(dataToValidate);
|
||||
|
||||
console.log(`try to register company users ${email}`);
|
||||
|
||||
if (!validatedFields.success) {
|
||||
const errors: Record<string, string> = {}
|
||||
JSON.parse(validatedFields.error.message).forEach((obj: {
|
||||
message: string,
|
||||
path: string
|
||||
}) => {
|
||||
if (errors[obj.path[0]]) {
|
||||
errors[obj.path[0]] = `${errors[obj.path[0]]}&${obj.message}`;
|
||||
} else {
|
||||
errors[obj.path[0]] = obj.message;
|
||||
}
|
||||
});
|
||||
|
||||
console.log(errors);
|
||||
|
||||
return {
|
||||
previousState: {
|
||||
fullName,
|
||||
email,
|
||||
password,
|
||||
confirm_password,
|
||||
phone
|
||||
},
|
||||
error: errors
|
||||
};
|
||||
}
|
||||
|
||||
return {
|
||||
previousState: {
|
||||
fullName,
|
||||
email,
|
||||
password,
|
||||
confirm_password,
|
||||
phone
|
||||
},
|
||||
error: null
|
||||
};
|
||||
|
||||
try {
|
||||
const { fullName, email, password, phone } = validatedFields.data;
|
||||
const response = await fetch(`${API_BASE_URL}/api/v1/data`, {
|
||||
method: 'POST',
|
||||
body: JSON.stringify({
|
||||
version: 1,
|
||||
msg_id: 20002,
|
||||
message_body: {
|
||||
fullName: fullName,
|
||||
email,
|
||||
phone: phone,
|
||||
password
|
||||
}
|
||||
}),
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'Accept': 'application/json'
|
||||
}
|
||||
});
|
||||
|
||||
if (response.ok) {
|
||||
let parsed = await response.json() as {
|
||||
message_desc: string,
|
||||
message_body: { token: string },
|
||||
message_code: number
|
||||
};
|
||||
|
||||
if (parsed.message_code === 0) {
|
||||
console.log(`registration - ${email}`);
|
||||
console.log({
|
||||
fullName: fullName,
|
||||
email,
|
||||
phone: phone,
|
||||
password
|
||||
});
|
||||
await createSession(parsed.message_body.token, email as string);
|
||||
} else {
|
||||
throw parsed;
|
||||
}
|
||||
} else {
|
||||
throw (`${response.status}`);
|
||||
}
|
||||
|
||||
} catch (error: unknown) {
|
||||
const errors: Record<string, string> = {};
|
||||
if (error) {
|
||||
const typedError = error as any;
|
||||
|
||||
switch (typedError.message_code) {
|
||||
case 1:
|
||||
errors['server'] = 'email-or-already-registered'
|
||||
break;
|
||||
|
||||
case 2:
|
||||
if (typedError.message_body?.fieldErrors) {
|
||||
typedError.message_body?.fieldErrors?.forEach((obj: {
|
||||
code: string,
|
||||
field: string
|
||||
}) => {
|
||||
if (errors[obj.field]) {
|
||||
errors[obj.field] = `${errors[obj.field]}&${obj.code.replaceAll('.', '-')}`;
|
||||
} else {
|
||||
errors[obj.field] = obj.code.replaceAll('.', '-');
|
||||
}
|
||||
});
|
||||
|
||||
} else {
|
||||
errors['server'] = 'unknown-error'
|
||||
}
|
||||
break;
|
||||
|
||||
default:
|
||||
errors['server'] = 'request-ended-with-an-error'
|
||||
break;
|
||||
}
|
||||
|
||||
return {
|
||||
previousState: {
|
||||
fullName,
|
||||
email,
|
||||
password,
|
||||
confirm_password,
|
||||
phone
|
||||
},
|
||||
error: errors
|
||||
};
|
||||
}
|
||||
|
||||
return {
|
||||
previousState: {
|
||||
fullName,
|
||||
email,
|
||||
password,
|
||||
confirm_password,
|
||||
phone
|
||||
},
|
||||
error: errors
|
||||
};
|
||||
}
|
||||
}
|
||||
@@ -45,7 +45,7 @@ async function loadConfigFromBackend(accountType?: 'b2b' | 'b2c'): Promise<any>
|
||||
return await response.json();
|
||||
} catch (error) {
|
||||
//сейчас выполняем это пока бека нету
|
||||
console.error('Using default validation config:', error);
|
||||
/* console.error('Using default validation config:', error); */
|
||||
return defaultConfig;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -97,10 +97,13 @@ export function createValidationSchema(config: ValidationConfig, accountType?: '
|
||||
|
||||
// phone
|
||||
if (config.phone) {
|
||||
console.log('validate phone');
|
||||
|
||||
let phoneSchema = z.string();
|
||||
|
||||
// Минимальная длина
|
||||
if (config.phone.minSize) {
|
||||
console.log(config.phone.minSize.value);
|
||||
phoneSchema = phoneSchema.min(config.phone.minSize.value, {
|
||||
error: config.phone.minSize.message
|
||||
});
|
||||
|
||||
@@ -80,7 +80,7 @@
|
||||
"message": "register-error-phone-max"
|
||||
},
|
||||
"minSize": {
|
||||
"value": 2,
|
||||
"value": 12,
|
||||
"message": "register-error-phone-min"
|
||||
},
|
||||
"allowedSymbols": {
|
||||
|
||||
@@ -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