>;
+};
+
+const FullNameInput = ({ changeCurrentPage }: Props) => {
+ const [fullName, setFullName] = useState("");
+
+ return (
+ <>
+ changeCurrentPage(
+
+ );
+};
+
+export default FullNameInput;
diff --git a/features/auth/ui/components/OAuthProviders.tsx b/features/auth/ui/components/OAuthProviders.tsx
index 1bfbb4e..2072282 100644
--- a/features/auth/ui/components/OAuthProviders.tsx
+++ b/features/auth/ui/components/OAuthProviders.tsx
@@ -1,85 +1,85 @@
-"use client";
-
-import React, { useEffect, useState } from "react";
-import { OauthProviders } from "../../types/oauthProvidersList";
-import { ResponseRequestOauthUrl } from "../../types/responseRequestOauthUrl";
-import { Button } from "@heroui/react";
-import { Icon } from "@iconify/react";
-import getOauthProviderList from "../../lib/getOauthProviderList";
-import requestOauthUrl from "../../lib/requestOauthUrl";
-
-const OAuthProviders = () => {
- // Set initial state for OAuth providers list
- const [oauthProvidersList, setOauthProvidersList] = useState<
- OauthProviders[]
- >([]);
-
- /**
- * Fetch the list of OAuth providers from backend API
- * and update the state if OAuth providers list is available
- */
- useEffect(() => {
- (async () => {
- try {
- const res = (await getOauthProviderList()) as OauthProviders[];
- setOauthProvidersList(res);
- } catch (err) {
- console.error(err);
- }
- })();
- }, []);
-
- const [loadingButton, setLoadingButton] = useState(false);
-
- /**
- * Start the authentication process using oAuth by sending the endpoint URL to the backend for processing.
- *
- * @param providerRequestEndpoint The request endpoint for the OAuth provider
- */
- const startOauthProcess = async (providerData: {
- name: string;
- endpoint: string;
- }) => {
- try {
- setLoadingButton(true);
-
- (await requestOauthUrl(providerData)) as ResponseRequestOauthUrl;
- } catch (err) {
- setLoadingButton(false);
- console.error(err);
- }
- };
-
- return (
-
- {/* Render OAuth provider buttons */}
- {oauthProvidersList.length > 0 ? (
- oauthProvidersList.map((provider, index) => {
- return (
-
- No login options available via third-party providers
-
- )}
-
- );
-};
-
-export default OAuthProviders;
+"use client";
+
+import React, { useEffect, useState } from "react";
+import { OauthProviders } from "../../types/oauthProvidersList";
+import { ResponseRequestOauthUrl } from "../../types/responseRequestOauthUrl";
+import { Button } from "@heroui/react";
+import { Icon } from "@iconify/react";
+import getOauthProviderList from "../../lib/getOauthProviderList";
+import requestOauthUrl from "../../lib/requestOauthUrl";
+
+const OAuthProviders = () => {
+ // Set initial state for OAuth providers list
+ const [oauthProvidersList, setOauthProvidersList] = useState<
+ OauthProviders[]
+ >([]);
+
+ /**
+ * Fetch the list of OAuth providers from backend API
+ * and update the state if OAuth providers list is available
+ */
+ useEffect(() => {
+ (async () => {
+ try {
+ const res = (await getOauthProviderList()) as OauthProviders[];
+ setOauthProvidersList(res);
+ } catch (err) {
+ console.error(err);
+ }
+ })();
+ }, []);
+
+ const [loadingButton, setLoadingButton] = useState(false);
+
+ /**
+ * Start the authentication process using oAuth by sending the endpoint URL to the backend for processing.
+ *
+ * @param providerRequestEndpoint The request endpoint for the OAuth provider
+ */
+ const startOauthProcess = async (providerData: {
+ name: string;
+ endpoint: string;
+ }) => {
+ try {
+ setLoadingButton(true);
+
+ (await requestOauthUrl(providerData)) as ResponseRequestOauthUrl;
+ } catch (err) {
+ setLoadingButton(false);
+ console.error(err);
+ }
+ };
+
+ return (
+
+ {/* Render OAuth provider buttons */}
+ {oauthProvidersList.length > 0 ? (
+ oauthProvidersList.map((provider, index) => {
+ return (
+
+ No login options available via third-party providers
+
+ )}
+
+ );
+};
+
+export default OAuthProviders;
diff --git a/features/auth/ui/components/ProvisionInput.tsx b/features/auth/ui/components/ProvisionInput.tsx
index 7a4b2bb..66cef51 100644
--- a/features/auth/ui/components/ProvisionInput.tsx
+++ b/features/auth/ui/components/ProvisionInput.tsx
@@ -1,103 +1,118 @@
-"use client";
-
-import React, { useState } from "react";
-import { addToast, Button, Form, Input } from "@heroui/react";
-import { SubmitHandler, useForm } from "react-hook-form";
-import { submitRegisterForm } from "../../lib/submitRegisterForm";
-
-type Props = {
- fullname: string;
-};
-
-export type RegisterInputs = {
- fullname: string;
- email: string;
- password: string;
- confirmPassword: string;
-};
-
-const ProvisionInput = ({ fullname }: Props) => {
- const { register, handleSubmit, setValue } = useForm();
- setValue("fullname", fullname);
-
- const [submitStatus, setSubmitStatus] = useState(false);
- const onSubmit: SubmitHandler = async (data) => {
- setSubmitStatus(true);
-
- try {
- const returnData = await submitRegisterForm(data);
- if (!returnData.success) {
- setSubmitStatus(false);
- addToast({
- color: "danger",
- title: "😬 Oops, something went wrong!",
- description: returnData.text.message,
- });
- } else {
- setSubmitStatus(false);
- addToast({
- color: "success",
- title: "OKKE!",
- description: returnData.text.message,
- });
- }
- } catch (error) {
- setSubmitStatus(false);
- addToast({
- color: "danger",
- title: "😬 Oops, something went wrong!",
- description: "Internal server error",
- });
- }
- };
-
- return (
-
-
-
- );
-};
-
-export default ProvisionInput;
+"use client";
+
+import React, { useState } from "react";
+import { addToast, Button, Form, Input } from "@heroui/react";
+import { SubmitHandler, useForm } from "react-hook-form";
+import { submitRegisterForm } from "../../lib/submitRegisterForm";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { registerFormSchema } from "../../models/registerForm.schema";
+
+type Props = {
+ fullname: string;
+};
+
+export type RegisterInputs = {
+ fullname: string;
+ email: string;
+ password: string;
+ confirmPassword: string;
+};
+
+const ProvisionInput = ({ fullname }: Props) => {
+ const {
+ register,
+ handleSubmit,
+ setValue,
+ formState: { errors },
+ } = useForm({
+ resolver: zodResolver(registerFormSchema),
+ });
+ setValue("fullname", fullname);
+
+ const [submitStatus, setSubmitStatus] = useState(false);
+ const onSubmit: SubmitHandler = async (data) => {
+ setSubmitStatus(true);
+
+ try {
+ const returnData = await submitRegisterForm(data);
+ if (!returnData.success) {
+ setSubmitStatus(false);
+ addToast({
+ color: "danger",
+ title: "😬 Oops, something went wrong!",
+ description: returnData.text.message,
+ });
+ } else {
+ setSubmitStatus(false);
+ addToast({
+ color: "success",
+ title: "OKKE!",
+ description: returnData.text.message,
+ });
+ }
+ } catch (error) {
+ setSubmitStatus(false);
+ addToast({
+ color: "danger",
+ title: "😬 Oops, something went wrong!",
+ description: "Connection to server lost",
+ });
+ }
+ };
+
+ return (
+
+
+
+ );
+};
+
+export default ProvisionInput;
diff --git a/features/oauth-callback/lib/sendCallbackToServer.ts b/features/oauth-callback/lib/sendCallbackToServer.ts
index 2e01020..4637b41 100644
--- a/features/oauth-callback/lib/sendCallbackToServer.ts
+++ b/features/oauth-callback/lib/sendCallbackToServer.ts
@@ -1,83 +1,83 @@
-"use server";
-import { api } from "@/shared/lib/ky/connector";
-import { apiErrorHandler } from "@/shared/lib/ky/errorHandler";
-import { ServerRequestCallback } from "@/shared/types/serverRequestCallback";
-
-/**
- * @function SendCallbackToServer
- * @description Proxies OAuth callback requests from the frontend to the main backend system.
- * Acts as an intermediary between the client Next.js application and the Elysia server.
- * Handles the forwarding of OAuth provider callback data for authentication processing.
- *
- * @param {string} data - The OAuth callback data received from the provider, typically containing
- * query parameters such as authorization code, user consent, scopes, state,
- * and other OAuth-specific information. Usually obtained from
- * `window.location.search` in browser environments.
- * @param {string} provider - The name of the OAuth provider/service (e.g., "google", "github",
- * "facebook"). Used to construct the appropriate backend API endpoint.
- *
- * @returns {Promise} The response data from the backend server after processing the
- * OAuth callback. Typically contains authentication tokens, user
- * information, or session data.
- *
- * @throws {Error} If the network request fails or the backend returns an error response.
- * @throws {Error} If the required environment variable APP_DOMAIN is not defined.
- * @throws {Error} If the provided parameters are invalid or missing.
- *
- * @example
- * // Handling OAuth callback in a React component
- * useEffect(() => {
- * const handleOAuthCallback = async () => {
- * try {
- * const result = await SendCallbackToServer(window.location.search, "google");
- * // Handle successful authentication (e.g., store tokens, redirect user)
- * console.log("Authentication successful:", result);
- * } catch (error) {
- * // Handle authentication errors
- * console.error("Authentication failed:", error);
- * }
- * };
- *
- * handleOAuthCallback();
- * }, []);
- *
- * @example
- * // Usage with different providers
- * await SendCallbackToServer(window.location.search, "github");
- * await SendCallbackToServer(window.location.search, "facebook");
- * await SendCallbackToServer(window.location.search, "microsoft");
- *
- * @remarks
- * - This function is specifically designed for OAuth callback handling in a Next.js frontend
- * acting as a proxy to an Elysia backend.
- * - The `data` parameter should include the complete query string from the OAuth redirect.
- * - The callback URI is automatically constructed using the APP_DOMAIN environment variable.
- * - Ensure APP_DOMAIN is properly configured in your environment variables.
- */
-export const SendCallbackToServer = async (
- data: string,
- provider: string
-): Promise => {
- // Construct the backend and frontend handler URLs
- const backendHandlerUrl = `auth/${provider}/callback/`;
- const frontendHandlerUrl = `${process.env
- .APP_DOMAIN!}/auth/callback/${provider}`;
-
- try {
- // Forward the OAuth callback data to the backend for processing
- const response = await api.get(
- `${backendHandlerUrl}${data}&callbackURI=${frontendHandlerUrl}`
- );
-
- // Parse the JSON response from the backend and return the result
- const result = await response.json();
- return {
- success: true,
- status: response.status,
- text: { message: "Callback processed successfully" },
- data: result,
- };
- } catch (error) {
- return apiErrorHandler(error);
- }
-};
+"use server";
+import { api } from "@/shared/lib/ky/connector";
+import { apiErrorHandler } from "@/shared/lib/ky/errorHandler";
+import { ServerRequestCallback } from "@/shared/types/serverRequestCallback";
+
+/**
+ * @function SendCallbackToServer
+ * @description Proxies OAuth callback requests from the frontend to the main backend system.
+ * Acts as an intermediary between the client Next.js application and the Elysia server.
+ * Handles the forwarding of OAuth provider callback data for authentication processing.
+ *
+ * @param {string} data - The OAuth callback data received from the provider, typically containing
+ * query parameters such as authorization code, user consent, scopes, state,
+ * and other OAuth-specific information. Usually obtained from
+ * `window.location.search` in browser environments.
+ * @param {string} provider - The name of the OAuth provider/service (e.g., "google", "github",
+ * "facebook"). Used to construct the appropriate backend API endpoint.
+ *
+ * @returns {Promise} The response data from the backend server after processing the
+ * OAuth callback. Typically contains authentication tokens, user
+ * information, or session data.
+ *
+ * @throws {Error} If the network request fails or the backend returns an error response.
+ * @throws {Error} If the required environment variable APP_DOMAIN is not defined.
+ * @throws {Error} If the provided parameters are invalid or missing.
+ *
+ * @example
+ * // Handling OAuth callback in a React component
+ * useEffect(() => {
+ * const handleOAuthCallback = async () => {
+ * try {
+ * const result = await SendCallbackToServer(window.location.search, "google");
+ * // Handle successful authentication (e.g., store tokens, redirect user)
+ * console.log("Authentication successful:", result);
+ * } catch (error) {
+ * // Handle authentication errors
+ * console.error("Authentication failed:", error);
+ * }
+ * };
+ *
+ * handleOAuthCallback();
+ * }, []);
+ *
+ * @example
+ * // Usage with different providers
+ * await SendCallbackToServer(window.location.search, "github");
+ * await SendCallbackToServer(window.location.search, "facebook");
+ * await SendCallbackToServer(window.location.search, "microsoft");
+ *
+ * @remarks
+ * - This function is specifically designed for OAuth callback handling in a Next.js frontend
+ * acting as a proxy to an Elysia backend.
+ * - The `data` parameter should include the complete query string from the OAuth redirect.
+ * - The callback URI is automatically constructed using the APP_DOMAIN environment variable.
+ * - Ensure APP_DOMAIN is properly configured in your environment variables.
+ */
+export const SendCallbackToServer = async (
+ data: string,
+ provider: string
+): Promise => {
+ // Construct the backend and frontend handler URLs
+ const backendHandlerUrl = `auth/${provider}/callback/`;
+ const frontendHandlerUrl = `${process.env
+ .APP_DOMAIN!}/auth/callback/${provider}`;
+
+ try {
+ // Forward the OAuth callback data to the backend for processing
+ const response = await api.get(
+ `${backendHandlerUrl}${data}&callbackURI=${frontendHandlerUrl}`
+ );
+
+ // Parse the JSON response from the backend and return the result
+ const result = await response.json();
+ return {
+ success: true,
+ status: response.status,
+ text: { message: "Callback processed successfully" },
+ data: result,
+ };
+ } catch (error) {
+ return apiErrorHandler(error);
+ }
+};
diff --git a/features/oauth-callback/pages/callbackHandler.tsx b/features/oauth-callback/pages/callbackHandler.tsx
index e38ee3b..39f64bc 100644
--- a/features/oauth-callback/pages/callbackHandler.tsx
+++ b/features/oauth-callback/pages/callbackHandler.tsx
@@ -1,56 +1,56 @@
-"use client";
-
-import { redirect } from "next/navigation";
-import React, { useEffect, useState } from "react";
-import SecurityCheckup from "@/shared/auth/ui/SecurityCheckup";
-import SecurityCheckupFailed from "@/shared/auth/ui/SecurityCheckupFailed";
-import LoadingProcess from "../ui/LoadingProcess";
-
-const OauthCallbackHandler = () => {
- /**
- * Create a lit component that will be used in popp, consisting of 3 component flows:
- * 1. When the user opens it, a browser environment check will be performed.
- * 2. If it passes, the login component will appear and the user will perform authentication.
- * 3. If it fails, stop the authentication process and display the warning component, then return the user to the homepage.
- */
- const componentFlowList = {
- securityCheckup: {componentFlow}
-
- );
-};
-
-export default OauthCallbackHandler;
+"use client";
+
+import { redirect } from "next/navigation";
+import React, { useEffect, useState } from "react";
+import SecurityCheckup from "@/shared/auth/ui/SecurityCheckup";
+import SecurityCheckupFailed from "@/shared/auth/ui/SecurityCheckupFailed";
+import LoadingProcess from "../ui/LoadingProcess";
+
+const OauthCallbackHandler = () => {
+ /**
+ * Create a lit component that will be used in popp, consisting of 3 component flows:
+ * 1. When the user opens it, a browser environment check will be performed.
+ * 2. If it passes, the login component will appear and the user will perform authentication.
+ * 3. If it fails, stop the authentication process and display the warning component, then return the user to the homepage.
+ */
+ const componentFlowList = {
+ securityCheckup: {componentFlow}
+
+ );
+};
+
+export default OauthCallbackHandler;
diff --git a/features/oauth-callback/types/ParamProps.ts b/features/oauth-callback/types/ParamProps.ts
index a0c74af..a06ad16 100644
--- a/features/oauth-callback/types/ParamProps.ts
+++ b/features/oauth-callback/types/ParamProps.ts
@@ -1,9 +1,9 @@
-export interface ParamProps {
- params: { provider: string[] };
- searchParams:
- | string
- | string[][]
- | Record
- | URLSearchParams
- | undefined;
-}
+export interface ParamProps {
+ params: { provider: string[] };
+ searchParams:
+ | string
+ | string[][]
+ | Record
+ | URLSearchParams
+ | undefined;
+}
diff --git a/features/oauth-callback/ui/LoadingProcess.tsx b/features/oauth-callback/ui/LoadingProcess.tsx
index fbb3667..076e270 100644
--- a/features/oauth-callback/ui/LoadingProcess.tsx
+++ b/features/oauth-callback/ui/LoadingProcess.tsx
@@ -1,73 +1,73 @@
-"use client";
-
-import React from "react";
-import { addToast, Button, CircularProgress, Link } from "@heroui/react";
-import { SendCallbackToServer } from "../lib/sendCallbackToServer";
-import { useParams } from "next/navigation";
-import { useRunOnce } from "@/shared/hooks/useRunOnce";
-import { routes } from "@/shared/config/routes";
-
-const LoadingProcess = () => {
- // Access the URL parameters
- const params = useParams();
-
- // Forward the callback response to the backend server
- useRunOnce("forwardCallbackResponseToBackend", async () => {
- try {
- const response = await SendCallbackToServer(
- window.location.search,
- params.provider as string
- );
-
- if (response.success) {
- window.close();
- } else {
- addToast({
- title: "😬 Oops, there's a problem!",
- description: response.text.message,
- color: "danger",
- timeout: 0,
- endContent: (
- (window.location.href = routes.login)}
- >
- Try again
-
- ),
- });
- }
- } catch (error) {
- console.log(error);
- addToast({
- title: "😵💫 Oops, lost connection!",
- description: "Check your internet and try again",
- color: "danger",
- timeout: 0,
- endContent: (
- (window.location.href = routes.login)}
- >
- Reload
-
- ),
- });
- }
- });
- return (
-
-
-
-
Please wait...
-
- Your request is being processed
-
-
-
(window.location.href = routes.login)}
+ >
+ Try again
+
+ ),
+ });
+ }
+ } catch (error) {
+ console.log(error);
+ addToast({
+ title: "😵💫 Oops, lost connection!",
+ description: "Check your internet and try again",
+ color: "danger",
+ timeout: 0,
+ endContent: (
+ (window.location.href = routes.login)}
+ >
+ Reload
+
+ ),
+ });
+ }
+ });
+ return (
+
+
+
+
Please wait...
+
+ Your request is being processed
+
+
+
-
- {children}
-
- ) : (
- {children}
- )}
-
- );
-};
-
-export default HeroUIWrapper;
+"use client";
+
+import React, { useEffect, useState } from "react";
+import { HeroUIProvider, ToastProvider } from "@heroui/react";
+import { ThemeProvider as NextThemesProvider } from "next-themes";
+import { useRouter } from "next/navigation";
+
+const HeroUIWrapper = ({
+ children,
+}: Readonly<{ children: React.ReactNode }>) => {
+ const [mounted, setMounted] = useState(false);
+ useEffect(() => {
+ setMounted(true);
+ }, []);
+
+ const router = useRouter();
+
+ return (
+
+
+ {children}
+
+ ) : (
+ {children}
+ )}
+
+ );
+};
+
+export default HeroUIWrapper;
diff --git a/providers/fonts/GeistFontProvider.tsx b/providers/fonts/GeistFontProvider.tsx
index 1788c27..991c930 100644
--- a/providers/fonts/GeistFontProvider.tsx
+++ b/providers/fonts/GeistFontProvider.tsx
@@ -1,60 +1,60 @@
-import React from "react";
-import localFont from "next/font/local";
-
-const Geist = localFont({
- src: [
- {
- path: "../../fonts/Geist-Black.ttf",
- weight: "900",
- style: "normal",
- },
- {
- path: "../../fonts/Geist-ExtraBold.ttf",
- weight: "800",
- style: "normal",
- },
- {
- path: "../../fonts/Geist-Bold.ttf",
- weight: "700",
- style: "normal",
- },
- {
- path: "../../fonts/Geist-SemiBold.ttf",
- weight: "600",
- style: "normal",
- },
- {
- path: "../../fonts/Geist-Medium.ttf",
- weight: "500",
- style: "normal",
- },
- {
- path: "../../fonts/Geist-Regular.ttf",
- weight: "400",
- style: "normal",
- },
- {
- path: "../../fonts/Geist-Light.ttf",
- weight: "300",
- style: "normal",
- },
- {
- path: "../../fonts/Geist-ExtraLight.ttf",
- weight: "200",
- style: "normal",
- },
- {
- path: "../../fonts/Geist-Thin.ttf",
- weight: "100",
- style: "normal",
- },
- ],
-});
-
-const GeistFontProvider = ({
- children,
-}: Readonly<{ children: React.ReactNode }>) => {
- return {children}
;
-};
-
-export default GeistFontProvider;
+import React from "react";
+import localFont from "next/font/local";
+
+const Geist = localFont({
+ src: [
+ {
+ path: "../../fonts/Geist-Black.ttf",
+ weight: "900",
+ style: "normal",
+ },
+ {
+ path: "../../fonts/Geist-ExtraBold.ttf",
+ weight: "800",
+ style: "normal",
+ },
+ {
+ path: "../../fonts/Geist-Bold.ttf",
+ weight: "700",
+ style: "normal",
+ },
+ {
+ path: "../../fonts/Geist-SemiBold.ttf",
+ weight: "600",
+ style: "normal",
+ },
+ {
+ path: "../../fonts/Geist-Medium.ttf",
+ weight: "500",
+ style: "normal",
+ },
+ {
+ path: "../../fonts/Geist-Regular.ttf",
+ weight: "400",
+ style: "normal",
+ },
+ {
+ path: "../../fonts/Geist-Light.ttf",
+ weight: "300",
+ style: "normal",
+ },
+ {
+ path: "../../fonts/Geist-ExtraLight.ttf",
+ weight: "200",
+ style: "normal",
+ },
+ {
+ path: "../../fonts/Geist-Thin.ttf",
+ weight: "100",
+ style: "normal",
+ },
+ ],
+});
+
+const GeistFontProvider = ({
+ children,
+}: Readonly<{ children: React.ReactNode }>) => {
+ return {children}
;
+};
+
+export default GeistFontProvider;
diff --git a/scripts/create-env-example.ts b/scripts/create-env-example.ts
index 7628755..a3e228d 100644
--- a/scripts/create-env-example.ts
+++ b/scripts/create-env-example.ts
@@ -1,49 +1,49 @@
-import fs from "fs";
-import path from "path";
-
-// These keys will not be cleared in the .env.example file
-const PRESERVED_KEYS = ["APP_NAME", "APP_ENV", "APP_PORT"];
-
-/**
- * Script to create or update the .env.example file based on the .env file.
- * It preserves certain keys and clears their values in the .env.example file.
- */
-try {
- const envPath = path.join(process.cwd(), ".env");
- const envExamplePath = path.join(process.cwd(), ".env.example");
-
- if (!fs.existsSync(envPath)) {
- console.error(`.env file not found at ${envPath}`);
- process.exit(1);
- }
-
- const envContent = fs.readFileSync(envPath, "utf-8");
-
- const lines = envContent.split("\n");
- const processedLines = lines.map((line) => {
- const trimmedLine = line.trim();
-
- if (trimmedLine.startsWith("#") || trimmedLine === "") {
- return line;
- }
-
- const delimeterIndex = line.indexOf("=");
- if (delimeterIndex === -1) {
- return line;
- }
-
- const key = line.substring(0, delimeterIndex).trim();
- const value = line.substring(delimeterIndex + 1).trim();
-
- if (PRESERVED_KEYS.includes(key)) {
- return `${key}=${value}`;
- }
- return `${key}=`;
- });
-
- fs.writeFileSync(envExamplePath, processedLines.join("\n"));
- console.log("File .env.example berhasil diperbarui!");
-} catch (error) {
- console.error("Error while creating .env.example:", error);
- process.exit(1);
-}
+import fs from "fs";
+import path from "path";
+
+// These keys will not be cleared in the .env.example file
+const PRESERVED_KEYS = ["APP_NAME", "APP_ENV", "APP_PORT"];
+
+/**
+ * Script to create or update the .env.example file based on the .env file.
+ * It preserves certain keys and clears their values in the .env.example file.
+ */
+try {
+ const envPath = path.join(process.cwd(), ".env");
+ const envExamplePath = path.join(process.cwd(), ".env.example");
+
+ if (!fs.existsSync(envPath)) {
+ console.error(`.env file not found at ${envPath}`);
+ process.exit(1);
+ }
+
+ const envContent = fs.readFileSync(envPath, "utf-8");
+
+ const lines = envContent.split("\n");
+ const processedLines = lines.map((line) => {
+ const trimmedLine = line.trim();
+
+ if (trimmedLine.startsWith("#") || trimmedLine === "") {
+ return line;
+ }
+
+ const delimeterIndex = line.indexOf("=");
+ if (delimeterIndex === -1) {
+ return line;
+ }
+
+ const key = line.substring(0, delimeterIndex).trim();
+ const value = line.substring(delimeterIndex + 1).trim();
+
+ if (PRESERVED_KEYS.includes(key)) {
+ return `${key}=${value}`;
+ }
+ return `${key}=`;
+ });
+
+ fs.writeFileSync(envExamplePath, processedLines.join("\n"));
+ console.log("File .env.example berhasil diperbarui!");
+} catch (error) {
+ console.error("Error while creating .env.example:", error);
+ process.exit(1);
+}
diff --git a/scripts/git-multipush.example.ts b/scripts/git-multipush.example.ts
index 937ceed..3a54d5a 100644
--- a/scripts/git-multipush.example.ts
+++ b/scripts/git-multipush.example.ts
@@ -1,22 +1,22 @@
-import { execSync } from "child_process";
-
-/*
-This script pushes the current branch to multiple remotes in a Git repository.
-It is useful for deploying code to multiple servers or services at once.
-Make sure you've set up your remotes correctly before running this script and do commit your changes first!
-*/
-
-const remotes = ["origin"]; // Add your remote names here, e.g., "origin", "vps", etc. if you have multiple remotes
-
-// Start the push process
-for (const remote of remotes) {
- console.log(`Pushing to ${remote}...`);
- try {
- execSync(`git push ${remote} main`, { stdio: "inherit" });
- } catch (err) {
- console.error(`❌ Failed to push to ${remote}`);
- }
-}
-
-// All remotes processed
-console.log("✅ All remotes processed.");
+import { execSync } from "child_process";
+
+/*
+This script pushes the current branch to multiple remotes in a Git repository.
+It is useful for deploying code to multiple servers or services at once.
+Make sure you've set up your remotes correctly before running this script and do commit your changes first!
+*/
+
+const remotes = ["origin"]; // Add your remote names here, e.g., "origin", "vps", etc. if you have multiple remotes
+
+// Start the push process
+for (const remote of remotes) {
+ console.log(`Pushing to ${remote}...`);
+ try {
+ execSync(`git push ${remote} main`, { stdio: "inherit" });
+ } catch (err) {
+ console.error(`❌ Failed to push to ${remote}`);
+ }
+}
+
+// All remotes processed
+console.log("✅ All remotes processed.");
diff --git a/shared/auth/ui/SecurityCheckup.tsx b/shared/auth/ui/SecurityCheckup.tsx
index d778297..a794510 100644
--- a/shared/auth/ui/SecurityCheckup.tsx
+++ b/shared/auth/ui/SecurityCheckup.tsx
@@ -1,17 +1,17 @@
-import React from "react";
-
-const SecurityCheckup = () => {
- return (
-
-
-
Please wait...
-
- We want to ensure a secure authentication environment before
- proceeding for your safety.
-
-
-
+
+
Please wait...
+
+ We want to ensure a secure authentication environment before
+ proceeding for your safety.
+
+
+
-
-
- Your browser is not secure
-
-
- Sorry, we had to stop the authentication process and return you to the
- home page because your browser environment is not secure.
-
-
-
+
+
+ Your browser is not secure
+
+
+ Sorry, we had to stop the authentication process and return you to the
+ home page because your browser environment is not secure.
+
+
+
(
- path: string,
- init?: RequestInit
-): Promise => {
- const res = await fetch(`${API_BASE_URL}${path}`, {
- ...init,
- headers: {
- "Content-Type": "application/json",
- ...init?.headers,
- },
- cache: "no-store",
- });
-
- if (!res.ok) throw new Error(await res.text());
- return res.json();
-};
-
-export default apiFetch;
+export const API_BASE_URL =
+ process.env.MAIN_BACKEND_API_URL ?? "http://localhost";
+
+const apiFetch = async (
+ path: string,
+ init?: RequestInit
+): Promise => {
+ const res = await fetch(`${API_BASE_URL}${path}`, {
+ ...init,
+ headers: {
+ "Content-Type": "application/json",
+ ...init?.headers,
+ },
+ cache: "no-store",
+ });
+
+ if (!res.ok) throw new Error(await res.text());
+ return res.json();
+};
+
+export default apiFetch;
diff --git a/shared/helper/delayButtonClick.ts b/shared/helper/delayButtonClick.ts
index 64146e2..152d488 100644
--- a/shared/helper/delayButtonClick.ts
+++ b/shared/helper/delayButtonClick.ts
@@ -1,11 +1,11 @@
-import { useRouter } from "next/navigation";
-
-export const delayButtonClick = (
- router: ReturnType,
- href: string,
- timeout: number = 300
-) => {
- setTimeout(() => {
- router.push(href);
- }, timeout);
-};
+import { useRouter } from "next/navigation";
+
+export const delayButtonClick = (
+ router: ReturnType,
+ href: string,
+ timeout: number = 300
+) => {
+ setTimeout(() => {
+ router.push(href);
+ }, timeout);
+};
diff --git a/shared/hooks/useRunOnce.ts b/shared/hooks/useRunOnce.ts
index f7dbea5..f44c1c6 100644
--- a/shared/hooks/useRunOnce.ts
+++ b/shared/hooks/useRunOnce.ts
@@ -1,58 +1,58 @@
-"use client";
-import { useEffect, useRef } from "react";
-
-/**
- * @function useRunOnce
- * @description A custom React hook that ensures a function is executed only once
- * across the entire application, even in React Strict Mode or during
- * development hot reloads. Maintains a global registry to track
- * execution status using a unique key.
- *
- * Particularly useful for one-time initialization logic, analytics
- * tracking, or any operation that should not be duplicated.
- *
- * @param {string} key - A unique identifier for the process. Used to track execution
- * across component instances and prevent naming collisions.
- * Should be descriptive and unique (e.g., "user_analytics_init").
- * @param {function} fn - The function to be executed once. Should contain the logic
- * that needs to run only a single time.
- *
- * @returns {void}
- *
- * @throws {Error} If the provided key is not a string or is empty.
- * @throws {Error} If the provided function is not callable.
- *
- * @example
- * // One-time asynchronous operation
- * useRunOnce("async_operation", async () => {
- * await yourAsyncFunction();
- * });
- *
- * @example
- * // One-time synchronous operation
- * useRunOnce("sync_operation", () => {
- * yourFunction();
- * });
- *
- * @remarks
- * - The hook uses a global registry, so the same key across different components
- * will prevent duplicate execution.
- * - Safe to use in React Strict Mode and development environment with hot reload.
- * - The function will not execute if another instance with the same key has
- * already run in the application.
- */
-const registry = new Set();
-
-export function useRunOnce(key: string, fn: () => void) {
- const hasRun = useRef(false);
-
- useEffect(() => {
- if (hasRun.current) return;
- hasRun.current = true;
-
- if (registry.has(key)) return;
- registry.add(key);
-
- fn();
- }, [key, fn]);
-}
+"use client";
+import { useEffect, useRef } from "react";
+
+/**
+ * @function useRunOnce
+ * @description A custom React hook that ensures a function is executed only once
+ * across the entire application, even in React Strict Mode or during
+ * development hot reloads. Maintains a global registry to track
+ * execution status using a unique key.
+ *
+ * Particularly useful for one-time initialization logic, analytics
+ * tracking, or any operation that should not be duplicated.
+ *
+ * @param {string} key - A unique identifier for the process. Used to track execution
+ * across component instances and prevent naming collisions.
+ * Should be descriptive and unique (e.g., "user_analytics_init").
+ * @param {function} fn - The function to be executed once. Should contain the logic
+ * that needs to run only a single time.
+ *
+ * @returns {void}
+ *
+ * @throws {Error} If the provided key is not a string or is empty.
+ * @throws {Error} If the provided function is not callable.
+ *
+ * @example
+ * // One-time asynchronous operation
+ * useRunOnce("async_operation", async () => {
+ * await yourAsyncFunction();
+ * });
+ *
+ * @example
+ * // One-time synchronous operation
+ * useRunOnce("sync_operation", () => {
+ * yourFunction();
+ * });
+ *
+ * @remarks
+ * - The hook uses a global registry, so the same key across different components
+ * will prevent duplicate execution.
+ * - Safe to use in React Strict Mode and development environment with hot reload.
+ * - The function will not execute if another instance with the same key has
+ * already run in the application.
+ */
+const registry = new Set();
+
+export function useRunOnce(key: string, fn: () => void) {
+ const hasRun = useRef(false);
+
+ useEffect(() => {
+ if (hasRun.current) return;
+ hasRun.current = true;
+
+ if (registry.has(key)) return;
+ registry.add(key);
+
+ fn();
+ }, [key, fn]);
+}
diff --git a/shared/lib/ky/connector.ts b/shared/lib/ky/connector.ts
index aceb73a..6648056 100644
--- a/shared/lib/ky/connector.ts
+++ b/shared/lib/ky/connector.ts
@@ -1,12 +1,12 @@
-"use server";
-
-import ky from "ky";
-
-export const api = ky.create({
- prefixUrl: process.env.MAIN_BACKEND_API_URL,
- credentials: "include",
- headers: {
- access_token: process.env.MAIN_BACKEND_API_KEY,
- },
- retry: 0,
-});
+"use server";
+
+import ky from "ky";
+
+export const api = ky.create({
+ prefixUrl: process.env.MAIN_BACKEND_API_URL,
+ credentials: "include",
+ headers: {
+ access_token: process.env.MAIN_BACKEND_API_KEY,
+ },
+ retry: 0,
+});
diff --git a/shared/lib/ky/errorHandler.ts b/shared/lib/ky/errorHandler.ts
index e452faa..ddd17b8 100644
--- a/shared/lib/ky/errorHandler.ts
+++ b/shared/lib/ky/errorHandler.ts
@@ -1,34 +1,34 @@
-"use server";
-
-import { HTTPError } from "ky";
-
-export type CallApiErrorHandler = {
- success?: boolean;
- status?: number;
- text?: { message?: string };
-};
-
-export const apiErrorHandler = async (
- error: unknown,
- safeFail?: CallApiErrorHandler
-) => {
- if (error instanceof HTTPError) {
- return {
- success: false,
- status: error.response.status,
- text: await error.response.json(),
- };
- }
-
- if (safeFail) {
- return {
- success: safeFail.success || false,
- status: safeFail.status || 500,
- text: {
- message: safeFail.text?.message || "An unexpected error occurred",
- },
- };
- } else {
- throw error;
- }
-};
+"use server";
+
+import { HTTPError } from "ky";
+
+export type CallApiErrorHandler = {
+ success?: boolean;
+ status?: number;
+ text?: { message?: string };
+};
+
+export const apiErrorHandler = async (
+ error: unknown,
+ safeFail?: CallApiErrorHandler
+) => {
+ if (error instanceof HTTPError) {
+ return {
+ success: false,
+ status: error.response.status,
+ text: await error.response.json(),
+ };
+ }
+
+ if (safeFail) {
+ return {
+ success: safeFail.success || false,
+ status: safeFail.status || 500,
+ text: {
+ message: safeFail.text?.message || "An unexpected error occurred",
+ },
+ };
+ } else {
+ throw error;
+ }
+};
diff --git a/shared/types/ServerRequestCallback.ts b/shared/types/ServerRequestCallback.ts
index 7b33c27..b9a2cf9 100644
--- a/shared/types/ServerRequestCallback.ts
+++ b/shared/types/ServerRequestCallback.ts
@@ -1,7 +1,7 @@
-export type ServerRequestCallback = {
- success: boolean;
- status: number;
- text: { message: string };
- data?: any;
- error?: unknown;
-};
+export type ServerRequestCallback = {
+ success: boolean;
+ status: number;
+ text: { message: string };
+ data?: any;
+ error?: unknown;
+};
diff --git a/widgets/navbar/ui/LoginAndSignup.tsx b/widgets/navbar/ui/LoginAndSignup.tsx
index 617c50b..70bd638 100644
--- a/widgets/navbar/ui/LoginAndSignup.tsx
+++ b/widgets/navbar/ui/LoginAndSignup.tsx
@@ -1,37 +1,37 @@
-"use client";
-
-import { routes } from "@/shared/config/routes";
-import { Button, Link, NavbarItem } from "@heroui/react";
-import React from "react";
-
-const LoginAndSignup = () => {
- const openPopupWindow = (href: string) => {
- window.open(href, "popup", "width=500,height=600");
- };
- return (
- <>
-
- openPopupWindow(routes.login)}
- >
- Login
-
-
-
- openPopupWindow(routes.signup)}
- >
- Sign Up
-
-
-
- );
-};
-
-export default LoginAndSignup;
+"use client";
+
+import { routes } from "@/shared/config/routes";
+import { Button, Link, NavbarItem } from "@heroui/react";
+import React from "react";
+
+const LoginAndSignup = () => {
+ const openPopupWindow = (href: string) => {
+ window.open(href, "popup", "width=500,height=600");
+ };
+ return (
+ <>
+
+ openPopupWindow(routes.login)}
+ >
+ Login
+
+
+
+ openPopupWindow(routes.signup)}
+ >
+ Sign Up
+
+
+
+ );
+};
+
+export default LoginAndSignup;
diff --git a/widgets/navbar/ui/Navbar.tsx b/widgets/navbar/ui/Navbar.tsx
index c5c9587..6e3c5f3 100644
--- a/widgets/navbar/ui/Navbar.tsx
+++ b/widgets/navbar/ui/Navbar.tsx
@@ -1,111 +1,111 @@
-"use client";
-
-import {
- Link,
- Navbar,
- NavbarBrand,
- NavbarContent,
- NavbarItem,
- NavbarMenu,
- NavbarMenuItem,
- NavbarMenuToggle,
-} from "@heroui/react";
-import { usePathname } from "next/navigation";
-import React, { useState } from "react";
-import { routes } from "../../../shared/config/routes";
-import LoginAndSignup from "./LoginAndSignup";
-
-export const AcmeLogo = () => {
- return (
-
-
- );
-};
-
-const NavbarUI = () => {
- const pathNameNow = usePathname();
-
- const [isMenuOpen, setIsMenuOpen] = useState(false);
-
- const navbarItems = [
- {
- title: "Home",
- route: routes.home,
- },
- {
- title: "Explore",
- route: routes.explore,
- },
- {
- title: "Trending",
- route: routes.trending,
- },
- {
- title: "Genres",
- route: routes.genres,
- },
- {
- title: "Schedule",
- route: routes.schedule,
- },
- ];
-
- return (
-
-
-
- ACME
-
-
-
-
- {navbarItems.map((item, index) => {
- const isActive = item.route === pathNameNow;
-
- return (
-
-
- );
- })}
-
-
-
-
-
-
- {navbarItems.map((item, index) => (
-
-
- ))}
-
-
- );
-};
-
-export default NavbarUI;
+"use client";
+
+import {
+ Link,
+ Navbar,
+ NavbarBrand,
+ NavbarContent,
+ NavbarItem,
+ NavbarMenu,
+ NavbarMenuItem,
+ NavbarMenuToggle,
+} from "@heroui/react";
+import { usePathname } from "next/navigation";
+import React, { useState } from "react";
+import { routes } from "../../../shared/config/routes";
+import LoginAndSignup from "./LoginAndSignup";
+
+export const AcmeLogo = () => {
+ return (
+
+
+ );
+};
+
+const NavbarUI = () => {
+ const pathNameNow = usePathname();
+
+ const [isMenuOpen, setIsMenuOpen] = useState(false);
+
+ const navbarItems = [
+ {
+ title: "Home",
+ route: routes.home,
+ },
+ {
+ title: "Explore",
+ route: routes.explore,
+ },
+ {
+ title: "Trending",
+ route: routes.trending,
+ },
+ {
+ title: "Genres",
+ route: routes.genres,
+ },
+ {
+ title: "Schedule",
+ route: routes.schedule,
+ },
+ ];
+
+ return (
+
+
+
+ ACME
+
+
+
+
+ {navbarItems.map((item, index) => {
+ const isActive = item.route === pathNameNow;
+
+ return (
+
+
+ );
+ })}
+
+
+
+
+
+
+ {navbarItems.map((item, index) => (
+
+
+ ))}
+
+
+ );
+};
+
+export default NavbarUI;