lavoce #2
@@ -1,5 +1,5 @@
|
||||
import React, { useState } from 'react';
|
||||
import { Flex, Input, Form, Button, Card, Space, Image, Row, Col, Typography } from 'antd';
|
||||
import { Flex, Input, Form, Button, Card, Space, Image, Row, Col } from 'antd';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import sypiu_ggcp from 'assets/sypiu_ggcp.jpg';
|
||||
import logo from 'assets/freepik/LOGOPIU.png';
|
||||
@@ -7,179 +7,192 @@ import { register } from '../../api/auth';
|
||||
import { NotifOk, NotifAlert } from '../../components/Global/ToastNotif';
|
||||
|
||||
const SignUp = () => {
|
||||
const [loading, setLoading] = useState(false);
|
||||
const navigate = useNavigate();
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [form] = Form.useForm();
|
||||
const navigate = useNavigate();
|
||||
|
||||
const moveToSignin = () => {
|
||||
navigate('/signin');
|
||||
};
|
||||
const [isRegistered, setIsRegistered] = useState(false);
|
||||
|
||||
const handleSignUp = async (values) => {
|
||||
const { fullname, username, email, phone, password, confirmPassword } = values;
|
||||
const moveToSignin = () => {
|
||||
navigate('/signin');
|
||||
};
|
||||
|
||||
if (password !== confirmPassword) {
|
||||
NotifAlert({
|
||||
icon: 'error',
|
||||
title: 'Password Tidak Sama',
|
||||
message: 'Password dan confirm password harus sama',
|
||||
});
|
||||
return;
|
||||
}
|
||||
const handleSignUp = async (values) => {
|
||||
const { fullname, username, email, phone, password, confirmPassword } = values;
|
||||
|
||||
const phoneRegex = /^(?:\+62|62|0)8[1-9][0-9]{6,11}$/;
|
||||
if (!phoneRegex.test(phone)) {
|
||||
NotifAlert({
|
||||
icon: 'error',
|
||||
title: 'Format Telepon Salah',
|
||||
message: 'Nomor telepon tidak valid (harus nomor Indonesia)',
|
||||
});
|
||||
return;
|
||||
}
|
||||
// Validasi confirm password
|
||||
if (password !== confirmPassword) {
|
||||
NotifAlert({
|
||||
icon: 'error',
|
||||
title: 'Password Tidak Sama',
|
||||
message: 'Password dan confirm password harus sama',
|
||||
});
|
||||
form.resetFields(['password', 'confirmPassword']);
|
||||
return;
|
||||
}
|
||||
|
||||
const passwordErrors = [];
|
||||
if (password.length < 8) passwordErrors.push('Minimal 8 karakter');
|
||||
if (!/[A-Z]/.test(password)) passwordErrors.push('Harus ada huruf kapital');
|
||||
if (!/[0-9]/.test(password)) passwordErrors.push('Harus ada angka');
|
||||
if (!/[!@#$%^&*(),.?":{}|<>]/.test(password)) passwordErrors.push('Harus ada karakter spesial');
|
||||
if (passwordErrors.length) {
|
||||
NotifAlert({
|
||||
icon: 'error',
|
||||
title: 'Password Tidak Valid',
|
||||
message: passwordErrors.join(', '),
|
||||
});
|
||||
return;
|
||||
}
|
||||
// Validasi nomor telepon Indonesia
|
||||
const phoneRegex = /^(?:\+62|62|0)8[1-9][0-9]{6,11}$/;
|
||||
if (!phoneRegex.test(phone)) {
|
||||
NotifAlert({
|
||||
icon: 'error',
|
||||
title: 'Format Telepon Salah',
|
||||
message: 'Nomor telepon tidak valid (harus nomor Indonesia)',
|
||||
});
|
||||
form.resetFields(['phone']);
|
||||
return;
|
||||
}
|
||||
|
||||
setLoading(true);
|
||||
try {
|
||||
const res = await register({ fullname, username, email, phone, password });
|
||||
// const user = res?.data?.user;
|
||||
// // const tokens = res?.data?.tokens;
|
||||
// Validasi password kompleks
|
||||
const passwordErrors = [];
|
||||
if (password.length < 8) passwordErrors.push('Minimal 8 karakter');
|
||||
if (!/[A-Z]/.test(password)) passwordErrors.push('Harus ada huruf kapital');
|
||||
if (!/[0-9]/.test(password)) passwordErrors.push('Harus ada angka');
|
||||
if (!/[!@#$%^&*(),.?":{}|<>]/.test(password))
|
||||
passwordErrors.push('Harus ada karakter spesial');
|
||||
if (passwordErrors.length) {
|
||||
NotifAlert({
|
||||
icon: 'error',
|
||||
title: 'Password Tidak Valid',
|
||||
message: passwordErrors.join(', '),
|
||||
});
|
||||
form.resetFields(['password', 'confirmPassword']);
|
||||
return;
|
||||
}
|
||||
|
||||
setLoading(true);
|
||||
try {
|
||||
const res = await register({ fullname, username, email, phone, password });
|
||||
|
||||
NotifOk({
|
||||
icon: 'success',
|
||||
title: 'Registrasi Berhasil',
|
||||
message: res?.data?.message || 'Berhasil menambahkan user.',
|
||||
});
|
||||
NotifOk({
|
||||
icon: 'success',
|
||||
title: 'Registrasi Berhasil',
|
||||
message: res?.data?.message || 'Berhasil menambahkan user.',
|
||||
});
|
||||
|
||||
form.resetFields();
|
||||
setIsRegistered(true);
|
||||
// navigate('/signin');
|
||||
} catch (err) {
|
||||
console.error('Register error:', err);
|
||||
const errorMessage = err?.response?.data?.message || err.message || 'Terjadi kesalahan';
|
||||
|
||||
// if (user) {
|
||||
// // localStorage.setItem('token', tokens.accessToken);
|
||||
// // localStorage.setItem('refreshToken', tokens.refreshToken);
|
||||
// // localStorage.setItem('user', JSON.stringify(user));
|
||||
NotifAlert({
|
||||
icon: 'error',
|
||||
title: 'Registrasi Gagal',
|
||||
message: errorMessage || 'Terjadi kesalahan',
|
||||
});
|
||||
if (errorMessage.toLowerCase().includes('already')) {
|
||||
form.resetFields();
|
||||
}
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
// NotifOk({
|
||||
// icon: 'success',
|
||||
// title: 'Registrasi Berhasil',
|
||||
// message: res?.data?.message || 'Selamat datang! Anda akan diarahkan ke dashboard.',
|
||||
// });
|
||||
|
||||
// navigate('/signin');
|
||||
// } else {
|
||||
// NotifAlert({
|
||||
// icon: 'error',
|
||||
// title: 'Registrasi Gagal',
|
||||
// message: res?.data?.message || 'Terjadi kesalahan',
|
||||
// });
|
||||
// }
|
||||
} catch (err) {
|
||||
console.error('Register error:', err);
|
||||
NotifAlert({
|
||||
icon: 'error',
|
||||
title: 'Registrasi Gagal',
|
||||
message: err?.response?.data?.message || err.message || 'Terjadi kesalahan',
|
||||
});
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Flex
|
||||
align="center"
|
||||
justify="center"
|
||||
style={{
|
||||
minHeight: '100vh',
|
||||
backgroundImage: `url(${sypiu_ggcp})`,
|
||||
backgroundSize: 'cover',
|
||||
backgroundPosition: 'center',
|
||||
padding: '20px',
|
||||
}}
|
||||
>
|
||||
<Card
|
||||
style={{
|
||||
width: '100%',
|
||||
maxWidth: 450,
|
||||
borderRadius: '12px',
|
||||
boxShadow: '0 8px 16px rgba(0, 0, 0, 0.1)',
|
||||
padding: '10px',
|
||||
textAlign: 'center',
|
||||
}}
|
||||
>
|
||||
{/* Logo di dalam Card */}
|
||||
<Image src={logo} height={120} width={180} preview={false} alt="logo"/>
|
||||
|
||||
<h2 style={{ marginBottom: '20px', color: '#1a3c34' }}>Registration</h2>
|
||||
|
||||
<Form onFinish={handleSignUp} layout="vertical">
|
||||
<Row gutter={16}>
|
||||
<Col span={12}>
|
||||
<Form.Item label="Full Name" name="fullname" rules={[{ required: true }]}>
|
||||
<Input placeholder="Full Name" size="large" />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={12}>
|
||||
<Form.Item label="Username" name="username" rules={[{ required: true }]}>
|
||||
<Input placeholder="Username" size="large" />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
<Row gutter={16}>
|
||||
<Col span={12}>
|
||||
<Form.Item
|
||||
label="Email"
|
||||
name="email"
|
||||
rules={[{ required: true, type: 'email', message: 'Please input a valid email!' }]}
|
||||
>
|
||||
<Input placeholder="Email" size="large" />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={12}>
|
||||
<Form.Item label="Phone" name="phone" rules={[{ required: true }]}>
|
||||
<Input placeholder="Phone" size="large" />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
<Form.Item label="Password" name="password" rules={[{ required: true }]}>
|
||||
<Input.Password placeholder="Password" size="large" />
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item label="Confirm Password" name="confirmPassword" rules={[{ required: true }]}>
|
||||
<Input.Password placeholder="Confirm Password" size="large" />
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item>
|
||||
<Space direction="vertical" style={{ width: '100%' }}>
|
||||
<Button type="primary" htmlType="submit" loading={loading} style={{ width: '100%' }} >
|
||||
Sign Up
|
||||
</Button>
|
||||
</Space>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
|
||||
<Button
|
||||
type="default"
|
||||
style={{ width: '100%', marginTop: '10px' }}
|
||||
onClick={moveToSignin}
|
||||
return (
|
||||
<Flex
|
||||
align="center"
|
||||
justify="center"
|
||||
style={{
|
||||
minHeight: '100vh',
|
||||
backgroundImage: `url(${sypiu_ggcp})`,
|
||||
backgroundSize: 'cover',
|
||||
backgroundPosition: 'center',
|
||||
padding: '20px',
|
||||
}}
|
||||
>
|
||||
Sign In
|
||||
</Button>
|
||||
</Card>
|
||||
</Flex>
|
||||
);
|
||||
<Card
|
||||
style={{
|
||||
width: '100%',
|
||||
maxWidth: 450,
|
||||
borderRadius: '12px',
|
||||
boxShadow: '0 8px 16px rgba(0, 0, 0, 0.1)',
|
||||
padding: '10px',
|
||||
textAlign: 'center',
|
||||
}}
|
||||
>
|
||||
<Image src={logo} height={150} width={220} preview={false} alt="logo" />
|
||||
|
||||
<h2 style={{ marginBottom: '20px', color: '#1a3c34' }}>Registration</h2>
|
||||
|
||||
<Form form={form} onFinish={handleSignUp} layout="vertical">
|
||||
<Row gutter={16}>
|
||||
<Col span={12}>
|
||||
<Form.Item
|
||||
label="Full Name"
|
||||
name="fullname"
|
||||
rules={[{ required: true }]}
|
||||
>
|
||||
<Input placeholder="Full Name" size="large" />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={12}>
|
||||
<Form.Item
|
||||
label="Username"
|
||||
name="username"
|
||||
rules={[{ required: true }]}
|
||||
>
|
||||
<Input placeholder="Username" size="large" />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
<Row gutter={16}>
|
||||
<Col span={12}>
|
||||
<Form.Item
|
||||
label="Email"
|
||||
name="email"
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
type: 'email',
|
||||
message: 'Please input a valid email!',
|
||||
},
|
||||
]}
|
||||
>
|
||||
<Input placeholder="Email" size="large" />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={12}>
|
||||
<Form.Item label="Phone" name="phone" rules={[{ required: true }]}>
|
||||
<Input placeholder="Phone" size="large" />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
<Form.Item label="Password" name="password" rules={[{ required: true }]}>
|
||||
<Input.Password placeholder="Password" size="large" />
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
label="Confirm Password"
|
||||
name="confirmPassword"
|
||||
rules={[{ required: true }]}
|
||||
>
|
||||
<Input.Password placeholder="Confirm Password" size="large" />
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item>
|
||||
<Space direction="vertical" style={{ width: '100%' }}>
|
||||
<Button
|
||||
type="primary"
|
||||
htmlType="submit"
|
||||
loading={loading}
|
||||
style={{ width: '100%' }}
|
||||
>
|
||||
Sign Up
|
||||
</Button>
|
||||
</Space>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
|
||||
<Button type="primary" style={{ width: '100%' }} onClick={moveToSignin}>
|
||||
Sign In
|
||||
</Button>
|
||||
</Card>
|
||||
</Flex>
|
||||
);
|
||||
};
|
||||
|
||||
export default SignUp;
|
||||
|
||||
Reference in New Issue
Block a user