Dev

src/pages/public/LoginPage.jsx

@@ -74,11 +74,11 @@ export default class LoginPage extends Component {
           </Typography>
           <Button variant="contained">Masuk</Button>
           <Typography textAlign={"center"} marginTop={1} color="black">
-            <NavLink className="text-sm font-bold" to="/register">
+            <NavLink className="text-sm font-bold" to="/register-opd">
               Buat Akun <span className="font-thin">Di sini!</span>
             </NavLink>
           </Typography>
-          <hr className="border-[1px] border-main"/>
+          <hr className="border-[1px] border-main" />
           <Typography textAlign={"center"} color="black">
             <NavLink className="text-sm font-bold" to="/activation-account">
               Aktivasi Akun <span className="font-thin">Di sini!</span>

src/pages/public/RegisterPage.jsx

@@ -1,7 +1,7 @@
-import React, { Component } from "react";
+import React, { useEffect, useState } from "react";
+import { useLocation } from "react-router-dom"; // Import useLocation
 import logo from "../../assets/panic-button.svg";
 import {
-  Box,
   Button,
   FormControl,
   IconButton,
@@ -14,105 +14,130 @@ import {
 } from "@mui/material";
 import { NavLink } from "react-router-dom";
 import { Visibility, VisibilityOff } from "@mui/icons-material";
+import { GuidApp } from "../../helpers/GuidApplication";
 
-export default class RegisterPage extends Component {
-  constructor() {
-    super();
-    this.state = {
-      showPassword: false,
-    };
-  }
+const RegisterPage = () => {
+  const [showPassword, setShowPassword] = useState(false);
+  const location = useLocation();
+  const isOpd = location.pathname === "/register-opd";
+  const [role, setRole] = useState("");
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [phoneNumber, setPhoneNumber] = useState("");
+  const [name, setName] = useState("");
+  const [company, setCompany] = useState("");
+  const [guidAplication] = useState(GuidApp);
+  const [companies, setCompanies] = useState([]);
+  const [refferrer, setRefferrer] = useState(false);
+  const [loading, setLoading] = useState(false);
 
-  handleClickShowPassword = () => {
-    this.setState({ showPassword: !this.state.showPassword });
+  useEffect(() => {
+    getCompany();
+  }, []);
+
+  const getCompany = async () => {
+    try {
+      const res = await UserService.getCompanies();
+      if (res.data.success) {
+        setCompanies(res.data.data);
+      }
+    } catch (error) {
+      console.error("Failed to fetch companies:", error);
+    }
   };
 
-  render() {
-    return (
-      <div className="flex flex-col gap-3 justify-center items-center min-h-screen">
-        <img src={logo} alt="Panic Button 112" />
-        <h1 className="text-3xl text-main font-bold tracking-wider">
-          Panic Button
-        </h1>
-        <h2 className="text-xl font-bold tracking-wider">Register</h2>
-        <div className="min-w-[40%] flex flex-col gap-5 mt-5">
-          <FormControl fullWidth>
-            <InputLabel id="demo-simple-select-label" size="small">
-              Age
-            </InputLabel>
-            <Select
-              labelId="demo-simple-select-label"
-              id="demo-simple-select"
-              label="Age"
-              size="small"
-            >
-              <MenuItem value={10}>Ten</MenuItem>
-              <MenuItem value={20}>Twenty</MenuItem>
-              <MenuItem value={30}>Thirty</MenuItem>
-            </Select>
-          </FormControl>
-          <TextField
-            id="outlined-basic"
-            label="Nama Lengkap"
-            variant="outlined"
-            required
-            className="w-full"
-            size="small"
-          />
-          <TextField
-            id="outlined-basic"
-            label="No. Telepon"
-            variant="outlined"
-            required
-            className="w-full"
-            size="small"
-          />
-          <TextField
-            id="outlined-basic"
-            label="Email"
-            variant="outlined"
-            required
-            className="w-full"
-            size="small"
-          />
-          <TextField
-            id="outlined-password"
-            label="Password"
-            variant="outlined"
-            required
-            className="w-full"
+  // Constants for roles
+  const ADMIN_ROLE = "admin";
+  const SUPER_ADMIN_ROLE = "super_admin";
+
+  const handleClickShowPassword = () => {
+    setShowPassword((prev) => !prev);
+  };
+
+  useEffect(() => {
+    setRole(isOpd ? ADMIN_ROLE : SUPER_ADMIN_ROLE);
+  }, [isOpd]);
+
+  return (
+    <div className="flex flex-col gap-3 justify-center items-center min-h-screen">
+      <img src={logo} alt="Panic Button 112" />
+      <h1 className="text-3xl text-main font-bold tracking-wider">
+        Panic Button {isOpd && " - OPD"} {/* Menampilkan jika opd */}
+      </h1>
+      <h2 className="text-xl font-bold tracking-wider">Register</h2>
+      <div className="min-w-[40%] flex flex-col gap-5 mt-5">
+        <FormControl fullWidth>
+          <InputLabel id="demo-simple-select-label" size="small">
+            Asal Instansi
+          </InputLabel>
+          <Select
+            labelId="demo-simple-select-label"
+            id="demo-simple-select"
+            label="Age"
             size="small"
-            type={this.state.showPassword ? "text" : "password"}
-            InputProps={{
-              endAdornment: (
-                <InputAdornment position="end">
-                  <IconButton
-                    aria-label={
-                      this.state.showPassword
-                        ? "hide the password"
-                        : "display the password"
-                    }
-                    onClick={this.handleClickShowPassword}
-                    edge="end"
-                  >
-                    {this.state.showPassword ? (
-                      <Visibility />
-                    ) : (
-                      <VisibilityOff />
-                    )}
-                  </IconButton>
-                </InputAdornment>
-              ),
-            }}
-          />
-          <Button variant="contained">Masuk</Button>
-          <Typography textAlign={"center"} marginTop={1} color="black">
-            <NavLink className="text-sm font-bold" to="/">
-              Masuk <span className="font-thin">Di sini!</span>
-            </NavLink>
-          </Typography>
-        </div>
+          >
+            <MenuItem value={10}>Ten</MenuItem>
+            <MenuItem value={20}>Twenty</MenuItem>
+            <MenuItem value={30}>Thirty</MenuItem>
+          </Select>
+        </FormControl>
+        <TextField
+          id="outlined-basic"
+          label="Nama Lengkap"
+          variant="outlined"
+          required
+          className="w-full"
+          size="small"
+        />
+        <TextField
+          id="outlined-basic"
+          label="No. Telepon"
+          variant="outlined"
+          required
+          className="w-full"
+          size="small"
+        />
+        <TextField
+          id="outlined-basic"
+          label="Email"
+          variant="outlined"
+          required
+          className="w-full"
+          size="small"
+        />
+        <TextField
+          id="outlined-password"
+          label="Password"
+          variant="outlined"
+          required
+          className="w-full"
+          size="small"
+          type={showPassword ? "text" : "password"}
+          InputProps={{
+            endAdornment: (
+              <InputAdornment position="end">
+                <IconButton
+                  aria-label={
+                    showPassword ? "hide the password" : "display the password"
+                  }
+                  onClick={handleClickShowPassword}
+                  edge="end"
+                >
+                  {showPassword ? <Visibility /> : <VisibilityOff />}
+                </IconButton>
+              </InputAdornment>
+            ),
+          }}
+        />
+        <Button variant="contained">Masuk</Button>
+        <Typography textAlign={"center"} marginTop={1} color="black">
+          <NavLink className="text-sm font-bold" to="/">
+            Masuk <span className="font-thin">Di sini!</span>
+          </NavLink>
+        </Typography>
       </div>
-    );
-  }
-}
+    </div>
+  );
+};
+
+export default RegisterPage;

src/routers/router.jsx

@@ -1,8 +1,8 @@
-import { createBrowserRouter } from "react-router-dom";
+import { createHashRouter } from "react-router-dom";
 import { publicPages } from "../pages";
 // import RequireAuth from "./utils/requireAuth";
 
-const router = createBrowserRouter([
+const router = createHashRouter([
   {
     path: "/",
     element: publicPages.loginPage,
@@ -15,6 +15,10 @@ const router = createBrowserRouter([
     path: "/register",
     element: publicPages.registerPage,
   },
+  {
+    path: "/register-opd",
+    element: publicPages.registerPage,
+  },
   {
     path: "/activation-account",
     element: publicPages.activationAccount,

src/services/global/index.jsx

@@ -4,8 +4,7 @@ const { USER_URL, API_URL } = URL;
 
 const API_ENDPOINT = {
   LOGIN: `${USER_URL}users/login`,
-  SIGNUP: `${USER_URL}users/register`,
-  REGISTER: `${USER_URL}users/add`,
+  REGISTER: `${USER_URL}users/register`,
   ACTIVATE_ACCOUNT: `${USER_URL}users/activate`,
   FORGOT_PASSWORD: `${USER_URL}users/forgot-password`,
   UPDATE_PASSWORD: `${USER_URL}users/edit-password`,

src/services/service/UserService.jsx

@@ -26,13 +26,8 @@ class UserService {
     return res;
   }
 
-  static async signup(data) {
-    const res = await userApi.post(SIGNUP, data);
-    return res;
-  }
-
   static async register(data) {
-    const res = await userApi.post(REGISTER, data, { headers: AuthHeaders() });
+    const res = await userApi.post(REGISTER, data);
     return res;
   }
 
@@ -88,4 +83,4 @@ class UserService {
   }
 }
 
-export default UserService;
+export default UserService;