src/pages/auth/Signup.jsx

@@ -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';
@@ -8,8 +8,11 @@ import { NotifOk, NotifAlert } from '../../components/Global/ToastNotif';
 
 const SignUp = () => {
     const [loading, setLoading] = useState(false);
+    const [form] = Form.useForm();
     const navigate = useNavigate();
 
+    const [isRegistered, setIsRegistered] = useState(false);
+
     const moveToSignin = () => {
         navigate('/signin');
     };
@@ -17,15 +20,18 @@ const SignUp = () => {
     const handleSignUp = async (values) => {
         const { fullname, username, email, phone, password, confirmPassword } = values;
 
+        // 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;
         }
 
+        // Validasi nomor telepon Indonesia
         const phoneRegex = /^(?:\+62|62|0)8[1-9][0-9]{6,11}$/;
         if (!phoneRegex.test(phone)) {
             NotifAlert({
@@ -33,29 +39,30 @@ const SignUp = () => {
                 title: 'Format Telepon Salah',
                 message: 'Nomor telepon tidak valid (harus nomor Indonesia)',
             });
+            form.resetFields(['phone']);
             return;
         }
 
+        // 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 (!/[!@#$%^&*(),.?":{}|<>]/.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 });
-      // const user = res?.data?.user;
-      // // const tokens = res?.data?.tokens;
-
 
             NotifOk({
                 icon: 'success',
@@ -63,33 +70,21 @@ const SignUp = () => {
                 message: res?.data?.message || 'Berhasil menambahkan user.',
             });
 
-
+            form.resetFields();
-      // if (user) {
+            setIsRegistered(true);
-      //   // localStorage.setItem('token', tokens.accessToken);
-      //   // localStorage.setItem('refreshToken', tokens.refreshToken);
-      //   // localStorage.setItem('user', JSON.stringify(user));
-
-      //   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);
+            const errorMessage = err?.response?.data?.message || err.message || 'Terjadi kesalahan';
+
             NotifAlert({
                 icon: 'error',
                 title: 'Registrasi Gagal',
-        message: err?.response?.data?.message || err.message || 'Terjadi kesalahan',
+                message: errorMessage || 'Terjadi kesalahan',
             });
+            if (errorMessage.toLowerCase().includes('already')) {
+                form.resetFields();
+            }
         } finally {
             setLoading(false);
         }
@@ -117,20 +112,27 @@ const SignUp = () => {
                     textAlign: 'center',
                 }}
             >
-        {/* Logo di dalam Card */}
+                <Image src={logo} height={150} width={220} preview={false} alt="logo" />
-        <Image src={logo} height={120} width={180} preview={false} alt="logo"/>
 
                 <h2 style={{ marginBottom: '20px', color: '#1a3c34' }}>Registration</h2>
 
-        <Form onFinish={handleSignUp} layout="vertical">
+                <Form form={form} onFinish={handleSignUp} layout="vertical">
                     <Row gutter={16}>
                         <Col span={12}>
-              <Form.Item label="Full Name" name="fullname" rules={[{ required: true }]}>
+                            <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 }]}>
+                            <Form.Item
+                                label="Username"
+                                name="username"
+                                rules={[{ required: true }]}
+                            >
                                 <Input placeholder="Username" size="large" />
                             </Form.Item>
                         </Col>
@@ -141,7 +143,13 @@ const SignUp = () => {
                             <Form.Item
                                 label="Email"
                                 name="email"
-                rules={[{ required: true, type: 'email', message: 'Please input a valid email!' }]}
+                                rules={[
+                                    {
+                                        required: true,
+                                        type: 'email',
+                                        message: 'Please input a valid email!',
+                                    },
+                                ]}
                             >
                                 <Input placeholder="Email" size="large" />
                             </Form.Item>
@@ -157,24 +165,29 @@ const SignUp = () => {
                         <Input.Password placeholder="Password" size="large" />
                     </Form.Item>
 
-          <Form.Item label="Confirm Password" name="confirmPassword" rules={[{ required: true }]}>
+                    <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%' }} >
+                            <Button
+                                type="primary"
+                                htmlType="submit"
+                                loading={loading}
+                                style={{ width: '100%' }}
+                            >
                                 Sign Up
                             </Button>
                         </Space>
                     </Form.Item>
                 </Form>
 
-        <Button
+                <Button type="primary" style={{ width: '100%' }} onClick={moveToSignin}>
-          type="default"
-          style={{ width: '100%', marginTop: '10px' }}
-          onClick={moveToSignin}
-        >
                     Sign In
                 </Button>
             </Card>