408 lines
12 KiB
TypeScript
408 lines
12 KiB
TypeScript
'use client'
|
|
|
|
import styles from '@/app/styles/module/login.module.scss'
|
|
import { useActionState, useState, useEffect } from 'react';
|
|
import { createStuff } from '@/app/actions/stuffActions';
|
|
import { useTranslations } from 'next-intl';
|
|
import { IconEye } from '@/app/ui/icons/icons';
|
|
import { useQueryClient } from '@tanstack/react-query';
|
|
import { toast } from 'sonner';
|
|
import { z } from 'zod';
|
|
|
|
const createStuffSchema = z.object({
|
|
fullName: z.string()
|
|
.min(2, 'full-name-too-short')
|
|
.max(100, 'full-name-too-long')
|
|
.trim(),
|
|
email: z.string()
|
|
.email('register-error-email-invalid')
|
|
.toLowerCase()
|
|
.trim(),
|
|
password: z.string()
|
|
.min(4, 'register-error-password-min')
|
|
.max(124, 'register-error-password-max'),
|
|
changePassword: z.boolean().default(true),
|
|
permissions: z.object({
|
|
subscriptions: z.number().min(0).max(3),
|
|
mailings: z.number().min(0).max(3),
|
|
complaints: z.number().min(0).max(3),
|
|
agreements: z.number().min(0).max(3),
|
|
staff: z.number().min(0).max(3),
|
|
content_moderation: z.number().min(0).max(3),
|
|
users: z.number().min(0).max(3),
|
|
money: z.number().min(0).max(3),
|
|
kyc: z.number().min(0).max(3),
|
|
claims: z.number().min(0).max(3),
|
|
api: z.number().min(0).max(3),
|
|
dash: z.number().min(0).max(3),
|
|
tariffs: z.number().min(0).max(3),
|
|
}).default({
|
|
subscriptions: 0,
|
|
mailings: 0,
|
|
complaints: 0,
|
|
agreements: 0,
|
|
staff: 0,
|
|
content_moderation: 0,
|
|
users: 0,
|
|
money: 0,
|
|
kyc: 0,
|
|
claims: 0,
|
|
api: 0,
|
|
dash: 0,
|
|
tariffs: 0,
|
|
})
|
|
})
|
|
|
|
export function CreateStaffForm({ onSuccess }: { onSuccess?: () => void }) {
|
|
const [state, formAction, isPending] = useActionState(
|
|
createStuffAction,
|
|
undefined,
|
|
);
|
|
const t = useTranslations('Login-register-form');
|
|
const tGeneral = useTranslations('Global');
|
|
const tPermissions = useTranslations('Permissions');
|
|
|
|
const [showPassword, setShowPassword] = useState(false);
|
|
const [changePassword, setChangePassword] = useState(true);
|
|
const [permissions, setPermissions] = useState({
|
|
subscriptions: 0,
|
|
mailings: 0,
|
|
complaints: 0,
|
|
agreements: 0,
|
|
staff: 0,
|
|
content_moderation: 0,
|
|
users: 0,
|
|
money: 0,
|
|
kyc: 0,
|
|
claims: 0,
|
|
api: 0,
|
|
dash: 0,
|
|
tariffs: 0,
|
|
});
|
|
|
|
const permissionsConfig = [
|
|
{ key: 'subscriptions', label: tPermissions('subscriptions'), description: tPermissions('subscriptions-desc') },
|
|
{ key: 'mailings', label: tPermissions('mailings'), description: tPermissions('mailings-desc') },
|
|
{ key: 'complaints', label: tPermissions('complaints'), description: tPermissions('complaints-desc') },
|
|
{ key: 'agreements', label: tPermissions('agreements'), description: tPermissions('agreements-desc') },
|
|
{ key: 'staff', label: tPermissions('staff'), description: tPermissions('staff-desc') },
|
|
{ key: 'content_moderation', label: tPermissions('content_moderation'), description: tPermissions('content_moderation-desc') },
|
|
{ key: 'users', label: tPermissions('users'), description: tPermissions('users-desc') },
|
|
{ key: 'kyc', label: tPermissions('kyc'), description: tPermissions('kyc-desc') },
|
|
{ key: 'money', label: tPermissions('money'), description: tPermissions('money-desc') },
|
|
{ key: 'claims', label: tPermissions('claims'), description: tPermissions('claims-desc') },
|
|
{ key: 'api', label: tPermissions('api'), description: tPermissions('api-desc') },
|
|
{ key: 'dash', label: tPermissions('dash'), description: tPermissions('dash-desc') },
|
|
{ key: 'tariffs', label: tPermissions('tariffs'), description: tPermissions('tariffs-desc') },
|
|
];
|
|
|
|
const handlePermissionChange = (key: keyof typeof permissions, value: number) => {
|
|
setPermissions(prev => ({
|
|
...prev,
|
|
[key]: value
|
|
}));
|
|
};
|
|
|
|
function toggleShowPassword() {
|
|
setShowPassword(!showPassword);
|
|
}
|
|
|
|
const queryClient = useQueryClient();
|
|
|
|
useEffect(() => {
|
|
if (state?.success) {
|
|
toast.success(tGeneral('staff-created-successfully'));
|
|
queryClient.invalidateQueries({ queryKey: ['stuffList'] });
|
|
if (onSuccess) {
|
|
onSuccess();
|
|
}
|
|
}
|
|
if (state?.error?.server) {
|
|
toast.error(t(state.error.server));
|
|
}
|
|
}, [state, queryClient, onSuccess, t, tGeneral]);
|
|
|
|
return (
|
|
<div
|
|
className="create-staff-window"
|
|
>
|
|
<form
|
|
className={`${styles['']}`}
|
|
action={formAction}
|
|
autoComplete="off"
|
|
>
|
|
{/* Поле Email */}
|
|
<div className={`${styles['form-group']}`}>
|
|
<label className={`${styles['form-label']}`}>
|
|
{t('email-adress')}
|
|
</label>
|
|
<input
|
|
type="email"
|
|
id="email"
|
|
name="email"
|
|
className={`${styles['form-input']}`}
|
|
placeholder={t('enter-email')}
|
|
defaultValue={state?.previousState?.email || ''}
|
|
autoComplete="off"
|
|
onChange={(e) => {
|
|
e.target.value = e.target.value.toLowerCase();
|
|
}}
|
|
/>
|
|
{state?.error?.email && (
|
|
<p className={`${styles['form-error']}`}>
|
|
{t(state?.error?.email)}
|
|
</p>
|
|
)}
|
|
</div>
|
|
|
|
{/* Поле Password */}
|
|
<div className={`${styles['form-group']}`}>
|
|
<label className={`${styles['form-label']}`}>
|
|
{t('password')}
|
|
</label>
|
|
<div className={`${styles['password-wrapper']}`}>
|
|
<input
|
|
type={showPassword ? "text" : "password"}
|
|
id="password"
|
|
name="password"
|
|
className={`${styles['form-input']} ${styles['password']}`}
|
|
placeholder={t('enter-password')}
|
|
autoComplete="new-password"
|
|
/>
|
|
<button
|
|
onClick={toggleShowPassword}
|
|
type="button"
|
|
className={`show-password-button ${showPassword ? 'show' : ''}`}
|
|
>
|
|
<IconEye />
|
|
</button>
|
|
</div>
|
|
{state?.error?.password && (
|
|
<p className={`${styles['form-error']}`}>
|
|
{t(state?.error?.password)}
|
|
</p>
|
|
)}
|
|
</div>
|
|
|
|
{/* Поле Full Name */}
|
|
<div className={`${styles['form-group']}`}>
|
|
<label className={`${styles['form-label']}`}>
|
|
{tGeneral('full-name')}
|
|
</label>
|
|
<input
|
|
type="text"
|
|
id="fullName"
|
|
name="fullName"
|
|
className={`${styles['form-input']}`}
|
|
placeholder={tGeneral('enter-full-name')}
|
|
defaultValue={state?.previousState?.fullName || ''}
|
|
autoComplete="off"
|
|
/>
|
|
{state?.error?.fullName && (
|
|
<p className={`${styles['form-error']}`}>
|
|
{t(state?.error?.fullName)}
|
|
</p>
|
|
)}
|
|
</div>
|
|
|
|
{/* Чекбокс */}
|
|
<div className={`${styles['form-group']}`}>
|
|
<label className={`${styles['form-label']} ${styles['checkbox-label']}`}>
|
|
<span>{tGeneral('require-password-change')}</span>
|
|
<input
|
|
type="checkbox"
|
|
name="changePassword"
|
|
checked={changePassword}
|
|
onChange={(e) => setChangePassword(e.target.checked)}
|
|
disabled={isPending}
|
|
/>
|
|
</label>
|
|
</div>
|
|
|
|
<div className="permissions-section">
|
|
<h3 className="permissions-section-title">
|
|
{tGeneral('permissions')}
|
|
</h3>
|
|
|
|
<div className="permissions-list">
|
|
{permissionsConfig.map((perm) => {
|
|
const currentValue = permissions[perm.key as keyof typeof permissions];
|
|
|
|
return (
|
|
<div key={perm.key} className="permission-item">
|
|
<div className="permission-header">
|
|
<div className="permission-info">
|
|
<h4 className="permission-title">{perm.label}</h4>
|
|
<p className="permission-description">{perm.description}</p>
|
|
</div>
|
|
<div className="permission-controls">
|
|
<div className="permission-level-buttons">
|
|
<input type="hidden" name={`permissions.${perm.key}`} value={currentValue} />
|
|
<button
|
|
type="button"
|
|
onClick={() => handlePermissionChange(perm.key as keyof typeof permissions, 0)}
|
|
className={`permission-level-btn ${currentValue === 0 ? 'active no-access' : ''}`}
|
|
title={tPermissions('no-access')}
|
|
disabled={isPending}
|
|
>
|
|
<span className="btn-text">{tPermissions('no-access')}</span>
|
|
</button>
|
|
|
|
<button
|
|
type="button"
|
|
onClick={() => handlePermissionChange(perm.key as keyof typeof permissions, 1)}
|
|
className={`permission-level-btn ${currentValue === 1 ? 'active read-only' : ''}`}
|
|
title={tPermissions('read-only')}
|
|
disabled={isPending}
|
|
>
|
|
<span className="btn-text">{tPermissions('read-only')}</span>
|
|
</button>
|
|
|
|
<button
|
|
type="button"
|
|
onClick={() => handlePermissionChange(perm.key as keyof typeof permissions, 3)}
|
|
className={`permission-level-btn ${currentValue === 3 ? 'active full-access' : ''}`}
|
|
title={tPermissions('full-access')}
|
|
disabled={isPending}
|
|
>
|
|
<span className="btn-text">{tPermissions('full-access')}</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
|
|
{state?.error?.server && !state.success && (
|
|
<p className={`${styles['form-error']}`}>
|
|
{t(state?.error?.server)}
|
|
</p>
|
|
)}
|
|
|
|
<button
|
|
type="submit"
|
|
className={`${styles['btn']}`}
|
|
disabled={isPending}
|
|
>
|
|
{tGeneral('create')}
|
|
{isPending && (
|
|
<div className="loading-animation">
|
|
<div className="global-spinner"></div>
|
|
</div>
|
|
)}
|
|
</button>
|
|
</form>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
async function createStuffAction(
|
|
state: {
|
|
previousState: {
|
|
fullName?: string;
|
|
email?: string;
|
|
password?: string;
|
|
}
|
|
error: Record<string, string>
|
|
success?: boolean;
|
|
} | undefined,
|
|
formData: FormData,
|
|
) {
|
|
const fullName = formData.get('fullName') as string || '';
|
|
const email = formData.get('email') as string || '';
|
|
const password = formData.get('password') as string || '';
|
|
const changePassword = formData.get('changePassword') === 'on';
|
|
|
|
const permissions = {
|
|
subscriptions: parseInt(formData.get('permissions.subscriptions') as string) || 0,
|
|
mailings: parseInt(formData.get('permissions.mailings') as string) || 0,
|
|
complaints: parseInt(formData.get('permissions.complaints') as string) || 0,
|
|
agreements: parseInt(formData.get('permissions.agreements') as string) || 0,
|
|
staff: parseInt(formData.get('permissions.staff') as string) || 0,
|
|
content_moderation: parseInt(formData.get('permissions.content_moderation') as string) || 0,
|
|
users: parseInt(formData.get('permissions.users') as string) || 0,
|
|
money: parseInt(formData.get('permissions.money') as string) || 0,
|
|
kyc: parseInt(formData.get('permissions.kyc') as string) || 0,
|
|
claims: parseInt(formData.get('permissions.claims') as string) || 0,
|
|
api: parseInt(formData.get('permissions.api') as string) || 0,
|
|
dash: parseInt(formData.get('permissions.dash') as string) || 0,
|
|
tariffs: parseInt(formData.get('permissions.tariffs') as string) || 0,
|
|
};
|
|
|
|
const validatedFields = createStuffSchema.safeParse({
|
|
fullName,
|
|
email,
|
|
password,
|
|
changePassword,
|
|
permissions
|
|
});
|
|
|
|
if (!validatedFields.success) {
|
|
const errors: Record<string, string> = {}
|
|
JSON.parse(validatedFields.error.message).forEach((obj: {
|
|
message: string,
|
|
path: string[]
|
|
}) => {
|
|
const fieldName = obj.path[0];
|
|
if (errors[fieldName]) {
|
|
errors[fieldName] = `${errors[fieldName]} ${obj.message}`;
|
|
} else {
|
|
errors[fieldName] = obj.message;
|
|
}
|
|
});
|
|
|
|
return {
|
|
previousState: {
|
|
fullName,
|
|
email,
|
|
password
|
|
},
|
|
error: errors,
|
|
success: false
|
|
};
|
|
}
|
|
|
|
try {
|
|
const { fullName, email, password, changePassword, permissions } = validatedFields.data;
|
|
|
|
const result = await createStuff(fullName, email, password, permissions, changePassword);
|
|
|
|
if (result) {
|
|
return {
|
|
previousState: {
|
|
fullName: '',
|
|
email: '',
|
|
password: ''
|
|
},
|
|
error: {},
|
|
success: true
|
|
};
|
|
} else {
|
|
throw new Error('creation-failed');
|
|
}
|
|
|
|
} catch (error) {
|
|
const errors: Record<string, string> = {}
|
|
|
|
if (error === 'email-already-exists') {
|
|
errors['email'] = 'email-already-exists';
|
|
} else if (error === 'invalid-email') {
|
|
errors['email'] = 'invalid-email';
|
|
} else {
|
|
errors['server'] = 'request-ended-with-an-error';
|
|
}
|
|
|
|
return {
|
|
previousState: {
|
|
fullName,
|
|
email,
|
|
password
|
|
},
|
|
error: errors,
|
|
success: false
|
|
};
|
|
}
|
|
} |