update signup

src/components/Global/RegisterRequest.jsx

@@ -2,7 +2,7 @@ import axios from 'axios';
 
 const RegistrationRequest = async ({ method, prefix, params, headers = {} }) => {
     const baseURL = `${import.meta.env.VITE_API_SERVER}`;
-    
+
     try {
         const response = await axios({
             method: method,
@@ -12,7 +12,7 @@ const RegistrationRequest = async ({ method, prefix, params, headers = {} }) =>
                 'Accept-Language': 'en_US',
                 ...headers,
             },
-            withCredentials: true,
+            // withCredentials: true,
         });
 
         return response.data || {};
@@ -22,4 +22,4 @@ const RegistrationRequest = async ({ method, prefix, params, headers = {} }) =>
     }
 };
 
-export default RegistrationRequest;
+export default RegistrationRequest;

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';
@@ -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;