revamp template

src/pages/account/home/index.ts

@@ -0,0 +1 @@
+export * from './user-profile/AccountUserProfilePage';

src/pages/account/home/user-profile/AccountUserProfileContent.tsx

@@ -0,0 +1,16 @@
+import { BasicSettings, Password } from './blocks';
+import { AccountUserProfileContextProvider } from './hooks';
+
+const AccountUserProfileContent = () => {
+  return (
+    <div className="grid gap-5 lg:gap-7.5 xl:w-[38.75rem] mx-auto">
+      <AccountUserProfileContextProvider>
+        <BasicSettings />
+        <Password />
+        {/* <DeleteAccount /> */}
+      </AccountUserProfileContextProvider>
+    </div>
+  );
+};
+
+export { AccountUserProfileContent };

src/pages/account/home/user-profile/AccountUserProfilePage.tsx

@@ -0,0 +1,15 @@
+import { Fragment } from 'react';
+import { Container } from '@/components/container';
+import { AccountUserProfileContent } from '.';
+
+const AccountUserProfilePage = () => {
+  return (
+    <Fragment>
+      <Container>
+        <AccountUserProfileContent />
+      </Container>
+    </Fragment>
+  );
+};
+
+export { AccountUserProfilePage };

src/pages/account/home/user-profile/blocks/BasicSettings.tsx

@@ -0,0 +1,109 @@
+import { useState, useContext } from 'react';
+import { AccountUserProfileContext } from '../hooks';
+
+// import { KeenIcon } from '@/components';
+// import { toAbsoluteUrl } from '@/utils/Assets';
+import { getAuth, useAuthContext } from '@/auth';
+import { toast } from 'sonner';
+
+interface IBasicSettingsProps {
+  title: string;
+}
+
+const BasicSettings = () => {
+  // const user = localStorage.getItem('user');
+  // const parsedUser = user ? JSON.parse(user) : null;
+  const parsedUser = getAuth()?.user;
+  const [newUsername, setNewUsername] = useState<string>(parsedUser?.username || '');
+  const [newEmail, setNewEmail] = useState<string>(parsedUser?.email || '');
+  const [newName, setNewName] = useState<string>(parsedUser?.name || '');
+
+  const { setProfile } = useContext(AccountUserProfileContext);
+
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  const isChanged =
+    newUsername !== parsedUser?.username ||
+    newEmail !== parsedUser?.email ||
+    newName !== parsedUser?.name;
+
+  const handleChangeProfile = async () => {
+    setIsSubmitting(true);
+    try {
+      await setProfile({ name: newName, username: newUsername, email: newEmail });
+
+      const newCache = {
+        name: newName,
+        email: newEmail,
+        username: newUsername
+      };
+
+      localStorage.setItem('user', JSON.stringify(newCache));
+    } catch (error: any) {
+      const errorMessage =
+        error?.response?.data?.message ||
+        error?.message ||
+        'An error occurred while resetting the password.';
+      toast.error(errorMessage);
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  return (
+    <div className="card pb-2.5">
+      <div className="card-header" id="general_settings">
+        <h3 className="card-title">Account</h3>
+      </div>
+
+      <div className="card-body grid gap-5">
+        <div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
+          <label className="form-label max-w-56">Name</label>
+          <input
+            className="input"
+            type="text"
+            value={newName}
+            onChange={(e) => setNewName(e.target.value)}
+            disabled={isSubmitting}
+          />
+        </div>
+        <div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
+          <label className="form-label max-w-56">Username</label>
+          <input
+            className="input"
+            type="text"
+            value={newUsername}
+            onChange={(e) => setNewUsername(e.target.value)}
+            disabled={isSubmitting}
+          />
+        </div>
+
+        <div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
+          <label className="form-label max-w-56">Email</label>
+          <input
+            className="input"
+            type="email"
+            value={newEmail}
+            onChange={(e) => setNewEmail(e.target.value)}
+            disabled={isSubmitting}
+          />
+        </div>
+        {/* <div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
+          <label className="form-label max-w-56">Name</label>
+          <input className="input" type="text" value={parsedUser?.name} />
+        </div> */}
+        <div className="flex justify-end">
+          <button
+            className="btn btn-primary"
+            onClick={handleChangeProfile}
+            disabled={isSubmitting || !isChanged}
+          >
+            {isSubmitting ? 'loading...' : 'Save Change'}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export { BasicSettings, type IBasicSettingsProps };

src/pages/account/home/user-profile/blocks/Password.tsx

@@ -0,0 +1,200 @@
+import { useState, useContext, useEffect, useCallback, MouseEvent } from 'react';
+import { AccountUserProfileContext } from '../hooks';
+import { toast } from 'sonner';
+import { useAuthContext } from '@/auth';
+import { KeenIcon } from '@/components';
+import clsx from 'clsx';
+
+type PasswordType = 'password' | 'retype_password' | 'current_password';
+const Password = () => {
+  const { setPassword } = useContext(AccountUserProfileContext);
+  const { getUser } = useAuthContext();
+
+  const [newPassword, setNewPassword] = useState('');
+  const [currentPassword, setCurrentPassword] = useState('');
+  const [confirmPassword, setConfirmPassword] = useState('');
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [messagePassword, setMessagePassword] = useState(true);
+  const [showPassword, setShowPassword] = useState({
+    current_password: false,
+    password: false,
+    retype_password: false
+  });
+
+  const [passwordErrors, setPasswordErrors] = useState<string[]>([]);
+
+  const validatePassword = (password: string) => {
+    const hasSpecialChar = /[!@#$%^&*(),.?":{}|<>]/.test(password);
+    const hasCapitalLetter = /[A-Z]/.test(password);
+    const hasNumber = /[0-9]/.test(password);
+    return hasSpecialChar && hasCapitalLetter && hasNumber;
+  };
+
+  useEffect(() => {
+    const passwordsMatch = newPassword === confirmPassword;
+    const isPasswordValid = validatePassword(newPassword);
+    setMessagePassword(passwordsMatch && isPasswordValid);
+
+    const errors: string[] = [];
+    if (newPassword) {
+      if (!/[A-Z]/.test(newPassword)) {
+        errors.push('Password must contain at least one capital letter');
+      }
+      if (!/[0-9]/.test(newPassword)) {
+        errors.push('Password must contain at least one number');
+      }
+      if (!/[!@#$%^&*(),.?":{}|<>]/.test(newPassword)) {
+        errors.push('Password must contain at least one special character');
+      }
+      if (newPassword !== confirmPassword) {
+        errors.push('Passwords do not match');
+      }
+    }
+    setPasswordErrors(errors);
+  }, [newPassword, confirmPassword]);
+
+  const handleResetPassword = useCallback(async () => {
+    const user: any = await getUser();
+
+    if (!messagePassword) {
+      toast.error('Passwords do not match!');
+      return;
+    }
+
+    setIsSubmitting(true);
+
+    try {
+      await setPassword({
+        current_password: currentPassword,
+        password: newPassword,
+        retype_password: confirmPassword,
+        username: user.data.username ?? ''
+      });
+
+      setNewPassword('');
+      setConfirmPassword('');
+      setCurrentPassword('');
+    } catch (error: any) {
+      const errorMessage =
+        error?.response?.data?.message ||
+        error?.message ||
+        'An error occurred while resetting the password.';
+      toast.error(errorMessage);
+    } finally {
+      setIsSubmitting(false);
+    }
+  }, [currentPassword, newPassword, newPassword, messagePassword, getUser]);
+
+  const isButtonDisabled = isSubmitting || !newPassword || !confirmPassword || !messagePassword;
+
+  const togglePassword = useCallback((event: MouseEvent<HTMLButtonElement>, key: string) => {
+    event.preventDefault();
+    setShowPassword((prev) => ({ ...prev, [key]: !prev[key as PasswordType] }));
+  }, []);
+
+  return (
+    <div className="card pb-2.5">
+      <div className="card-header" id="password_settings">
+        <h3 className="card-title">Password</h3>
+      </div>
+      <div className="card-body grid gap-5">
+        <div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
+          <label className="form-label max-w-56">Current Password</label>
+          <div className="input">
+            <input
+              type={showPassword.current_password ? 'text' : 'password'}
+              className="form-control"
+              placeholder="Current password"
+              value={currentPassword}
+              onChange={(e) => setCurrentPassword(e.target.value)}
+              disabled={isSubmitting}
+            />
+            <button className="btn btn-icon" onClick={(e) => togglePassword(e, 'current_password')}>
+              <KeenIcon
+                icon="eye"
+                className={clsx('text-gray-500', { hidden: showPassword.current_password })}
+              />
+              <KeenIcon
+                icon="eye-slash"
+                className={clsx('text-gray-500', { hidden: !showPassword.current_password })}
+              />
+            </button>
+          </div>
+        </div>
+        <div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
+          <label className="form-label max-w-56">New Password</label>
+          <div className="input">
+            <input
+              className="form-control"
+              placeholder="New password"
+              value={newPassword}
+              onChange={(e) => setNewPassword(e.target.value)}
+              disabled={isSubmitting}
+              type={showPassword.password ? 'text' : 'password'}
+            />
+            <button className="btn btn-icon" onClick={(e) => togglePassword(e, 'password')}>
+              <KeenIcon
+                icon="eye"
+                className={clsx('text-gray-500', { hidden: showPassword.password })}
+              />
+              <KeenIcon
+                icon="eye-slash"
+                className={clsx('text-gray-500', { hidden: !showPassword.password })}
+              />
+            </button>
+          </div>
+        </div>
+        <div className="mb-2.5">
+          <div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
+            <label className="form-label max-w-56">Confirm New Password</label>
+            <div className="input">
+              <input
+                type={showPassword.retype_password ? 'text' : 'password'}
+                className="form-control"
+                placeholder="Confirm new password"
+                value={confirmPassword}
+                onChange={(e) => setConfirmPassword(e.target.value)}
+                disabled={isSubmitting}
+              />
+              <button
+                className="btn btn-icon"
+                onClick={(e) => togglePassword(e, 'retype_password')}
+              >
+                <KeenIcon
+                  icon="eye"
+                  className={clsx('text-gray-500', { hidden: showPassword.retype_password })}
+                />
+                <KeenIcon
+                  icon="eye-slash"
+                  className={clsx('text-gray-500', { hidden: !showPassword.retype_password })}
+                />
+              </button>
+            </div>
+          </div>
+          <div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
+            <label className="form-label max-w-56 text-white">Confirm New Password</label>
+            {passwordErrors.length > 0 && (
+              <div className="text-xs text-red-500 mt-1 ms-3">
+                {passwordErrors.map((error, index) => (
+                  <p key={index}>{error}</p>
+                ))}
+              </div>
+            )}
+          </div>
+        </div>
+
+        <div className="flex justify-end">
+          <button
+            className="btn btn-primary"
+            onClick={handleResetPassword}
+            disabled={isButtonDisabled}
+          >
+            {isSubmitting ? 'Updating...' : 'Update Password'}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export { Password };

src/pages/account/home/user-profile/blocks/index.ts

@@ -0,0 +1,2 @@
+export * from './BasicSettings';
+export * from './Password';

src/pages/account/home/user-profile/hooks/AccountUserProfileContext.tsx

@@ -0,0 +1,119 @@
+import React, { createContext, useState } from 'react';
+import { apiConfig } from '@/config/api.config';
+import { useCallApi } from '@/hooks';
+import { toast } from 'sonner';
+import axios from 'axios';
+import { useAuthContext } from '@/auth';
+
+interface Password {
+  password: string;
+  retype_password: string;
+  username: string;
+  current_password: string;
+}
+
+interface Profile {
+  name: string;
+  email: string;
+  username: string;
+}
+
+interface ContextProps {
+  password: Password | null;
+  profile: Profile | null;
+  setPassword: (password: Password) => Promise<void>;
+  setProfile: (profile: Profile) => Promise<void>;
+}
+
+const initialProps: ContextProps = {
+  profile: null,
+  password: null,
+  setPassword: async () => {},
+  setProfile: async () => {}
+};
+
+const AccountUserProfileContext = createContext<ContextProps>(initialProps);
+
+const API_URL = apiConfig.service_user;
+
+const AccountUserProfileContextProvider = ({ children }: { children: React.ReactNode }) => {
+  /* state */
+  const { login } = useAuthContext();
+  const [profile, setProfile] = useState<Profile | null>(null);
+  const [password, setPassword] = useState<Password | null>(null);
+  const [alert, setAlert] = useState({
+    show: false,
+    message: ''
+  });
+
+  const { PutData } = useCallApi();
+  const { PostData } = useCallApi();
+  const handleSetPassword = async (newPassword: Password) => {
+    setPassword(newPassword);
+
+    const handleError = (error: any, defaultMessage: string) => {
+      const errorMessage = error?.response?.data?.message || error?.message || defaultMessage;
+      setAlert({ show: true, message: errorMessage });
+      toast.error(errorMessage);
+    };
+
+    try {
+      const validate = await PostData(`${API_URL}/login`, {
+        password: newPassword.current_password,
+        username: newPassword.username,
+        application: 'credit'
+      });
+
+      if (!validate || !validate.status) {
+        toast.error('Current password validation failed.');
+        return;
+      }
+
+      const response = await PutData(`${API_URL}/user/update_password`, {
+        password: newPassword.password,
+        retype_password: newPassword.retype_password
+      });
+
+      if (response && response.status) {
+        toast.success('Password updated successfully!');
+      } else {
+        toast.error(response?.message || 'Failed to update password.');
+      }
+    } catch (error: any) {
+      handleError(error, 'Failed to update password. Please try again.');
+    }
+  };
+
+  const handleSetProfile = async (newProfile: Profile) => {
+    try {
+      setProfile(newProfile);
+
+      const response = await PutData(`${API_URL}/user/update_profile/`, {
+        name: newProfile.name,
+        email: newProfile.email,
+        username: newProfile.username
+      });
+
+      toast.success('Profile updated successfully.');
+    } catch (error: any) {
+      const errorMessage = error?.message || 'Failed to update Profile. Please try again.';
+      setAlert({ show: true, message: errorMessage });
+      toast.error(errorMessage);
+    }
+  };
+
+  return (
+    <AccountUserProfileContext.Provider
+      value={{
+        password,
+        profile,
+        setPassword: handleSetPassword,
+        setProfile: handleSetProfile
+      }}
+    >
+      {children}
+    </AccountUserProfileContext.Provider>
+  );
+};
+
+export { AccountUserProfileContextProvider, AccountUserProfileContext };

src/pages/account/home/user-profile/hooks/index.ts

@@ -0,0 +1,2 @@
+export * from './AccountUserProfileContext';
+export * from './useAccountUserProfileContext';

src/pages/account/home/user-profile/hooks/useAccountUserProfileContext.tsx

@@ -0,0 +1,12 @@
+import { useContext } from 'react';
+import { AccountUserProfileContext } from './AccountUserProfileContext';
+
+const useAccountUserProfileContext = () => {
+  const context = useContext(AccountUserProfileContext);
+
+  if (!context) throw new Error('useAccountUserProfileContext must be used within AuthProvider');
+
+  return context;
+};
+
+export { useAccountUserProfileContext };

src/pages/account/home/user-profile/index.ts

@@ -0,0 +1,3 @@
+export * from './AccountUserProfileContent';
+export * from './AccountUserProfilePage';
+export * from './blocks';

src/pages/account/index.ts

@@ -0,0 +1 @@
+export * from './home';