logo and change password updated

app/(auth)/change-password/page.tsx

@@ -0,0 +1,60 @@
+import ComponentsAuthUnlockForm from '@/components/auth/components-auth-unlock-form';
+import { Metadata } from 'next';
+import Link from 'next/link';
+import React from 'react';
+
+export const metadata: Metadata = {
+    title: 'Unlock Cover',
+};
+
+const CoverLockScreen = () => {
+    return (
+        <div>
+            <div className="absolute inset-0">
+                <img src="/assets/images/auth/bg-gradient.png" alt="image" className="h-full w-full object-cover" />
+            </div>
+            <div className="relative flex min-h-screen items-center justify-center bg-[url(/assets/images/auth/map.png)] bg-cover bg-center bg-no-repeat px-6 py-10 dark:bg-[#060818] sm:px-16">
+                <img src="/assets/images/auth/coming-soon-object1.png" alt="image" className="absolute left-0 top-1/2 h-full max-h-[893px] -translate-y-1/2" />
+                <img src="/assets/images/auth/coming-soon-object2.png" alt="image" className="absolute left-24 top-0 h-40 md:left-[30%]" />
+                <img src="/assets/images/auth/coming-soon-object3.png" alt="image" className="absolute right-0 top-0 h-[300px]" />
+                <img src="/assets/images/auth/polygon-object.svg" alt="image" className="absolute bottom-0 end-[28%]" />
+                <div className="relative flex w-full max-w-[1502px] flex-col justify-between overflow-hidden rounded-md bg-white/60 backdrop-blur-lg dark:bg-black/50 lg:min-h-[758px] lg:flex-row lg:gap-10 xl:gap-0">
+                    <div className="relative hidden w-full items-center justify-center bg-[linear-gradient(225deg,rgba(239,18,98,1)_0%,rgba(67,97,238,1)_100%)] p-5 lg:inline-flex lg:max-w-[835px] xl:-ms-28 ltr:xl:skew-x-[14deg] rtl:xl:skew-x-[-14deg]">
+                        <div className="absolute inset-y-0 w-8 from-primary/10 via-transparent to-transparent ltr:-right-10 ltr:bg-gradient-to-r rtl:-left-10 rtl:bg-gradient-to-l xl:w-16 ltr:xl:-right-20 rtl:xl:-left-20"></div>
+                        <div className="ltr:xl:-skew-x-[14deg] rtl:xl:skew-x-[14deg]">
+                            <Link href="/" className="ms-10 block w-48 lg:w-72">
+                                <img src="/assets/images/auth/logo-white.svg" alt="Logo" className="w-full" />
+                            </Link>
+                            <div className="mt-24 hidden w-full max-w-[430px] lg:block">
+                                <img src="/assets/images/auth/unlock.svg" alt="Cover Image" className="w-full" />
+                            </div>
+                        </div>
+                    </div>
+                    <div className="relative flex w-full flex-col items-center justify-center gap-6 px-4 pb-16 pt-6 sm:px-6 lg:max-w-[667px]">
+                        {/* <div className="flex w-full max-w-[440px] items-center gap-2 lg:absolute lg:end-6 lg:top-6 lg:max-w-full">
+                            <Link href="/" className="block w-8 lg:hidden">
+                                <img src="/assets/images/logo.svg" alt="Logo" className="mx-auto w-10" />
+                            </Link>
+                            <LanguageDropdown className="ms-auto w-max" />
+                        </div> */}
+                        <div className="w-full max-w-[440px] lg:mt-16">
+                            <div className="mb-10 flex items-center">
+                                <div className="flex h-16 w-16 items-end justify-center overflow-hidden rounded-full bg-[#00AB55] ltr:mr-4 rtl:ml-4">
+                                    <img src="/assets/images/auth/user.png" className="w-full object-cover" alt="images" />
+                                </div>
+                                <div className="flex-1">
+                                    <h4 className="text-2xl dark:text-white">Shaun Park</h4>
+                                    <p className="text-white-dark">Enter your password to unlock your ID</p>
+                                </div>
+                            </div>
+                            <ComponentsAuthUnlockForm />
+                        </div>
+                        <p className="absolute bottom-6 w-full text-center dark:text-white">© {new Date().getFullYear()}.VRISTO All Rights Reserved.</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default CoverLockScreen;

app/(auth)/login/page.tsx

@@ -29,7 +29,7 @@ const CoverLogin = () => {
                         <div className="absolute inset-y-0 w-8 from-primary/10 via-transparent to-transparent ltr:-right-10 ltr:bg-gradient-to-r rtl:-left-10 rtl:bg-gradient-to-l xl:w-16 ltr:xl:-right-20 rtl:xl:-left-20"></div>
                         <div className="ltr:xl:-skew-x-[14deg] rtl:xl:skew-x-[14deg]">
                             <Link href="/" className="ms-10 block w-48 lg:w-72">
-                                <img src="/assets/images/auth/logo-white.svg" alt="Logo" className="w-full" />
+                                <img src="/assets/images/white-logo.png" alt="Logo" className="w-full" />
                             </Link>
                             <div className="mt-24 hidden w-full max-w-[430px] lg:block">
                                 <img src="/assets/images/auth/login.svg" alt="Cover Image" className="w-full" />

app/(auth)/register/page.tsx

@@ -29,7 +29,7 @@ const CoverRegister = () => {
                         <div className="absolute inset-y-0 w-8 from-primary/10 via-transparent to-transparent ltr:-right-10 ltr:bg-gradient-to-r rtl:-left-10 rtl:bg-gradient-to-l xl:w-16 ltr:xl:-right-20 rtl:xl:-left-20"></div>
                         <div className="ltr:xl:-skew-x-[14deg] rtl:xl:skew-x-[14deg]">
                             <Link href="/" className="ms-10 block w-48 lg:w-72">
-                                <img src="/assets/images/auth/logo-white.svg" alt="Logo" className="w-full" />
+                                <img src="/assets/images/white-logo.png" alt="Logo" className="w-full" />
                             </Link>
                             <div className="mt-24 hidden w-full max-w-[430px] lg:block">
                                 <img src="/assets/images/auth/register.svg" alt="Cover Image" className="w-full" />
@@ -101,7 +101,7 @@ const CoverRegister = () => {
                                 </Link>
                             </div>
                         </div>
-                        <p className="absolute bottom-6 w-full text-center dark:text-white">© {new Date().getFullYear()}.CrawlerX All Rights Reserved.</p>
+                        <p className="absolute bottom-6 w-full text-center dark:text-white">© {new Date().getFullYear()}.Metatroncube All Rights Reserved.</p>
                     </div>
                 </div>
             </div>

components/auth/components-auth-unlock-form.tsx

@@ -0,0 +1,118 @@
+'use client';
+
+import IconLockDots from '@/components/icon/icon-lock-dots';
+import { useRouter } from 'next/navigation';
+import React, { useState } from 'react';
+import axios from 'axios';
+
+const ComponentsAuthChangePasswordForm = () => {
+    const router = useRouter();
+
+    const [currentPassword, setCurrentPassword] = useState('');
+    const [newPassword, setNewPassword] = useState('');
+    const [loading, setLoading] = useState(false);
+    const [error, setError] = useState('');
+    const [success, setSuccess] = useState('');
+
+    const submitForm = async (e: React.FormEvent) => {
+        e.preventDefault();
+        setError('');
+        setSuccess('');
+        setLoading(true);
+
+        try {
+            const token = localStorage.getItem('token');
+            if (!token) {
+                setError('You are not logged in.');
+                setLoading(false);
+                return;
+            }
+
+            // 👉 Create FormData and append fields
+            const formData = new FormData();
+            formData.append('currentPassword', currentPassword);
+            formData.append('newPassword', newPassword);
+
+            // 👉 Axios call with Bearer token
+            const res = await axios.post(
+                `http://localhost:3020/api/auth/change-password`,
+                formData,
+                {
+                    headers: {
+                        Authorization: `Bearer ${token}`,
+                        "Content-Type": "application/json",                        // axios will set correct multipart/form-data boundary automatically
+                    },
+                }
+            );
+
+            setSuccess(res.data.message || 'Password updated successfully!');
+            // Optional: force user to re-login after password change
+            localStorage.removeItem('token');
+            router.push('/login');
+        } catch (err: any) {
+            const msg = err.response?.data?.error || err.message;
+            setError(msg);
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    return (
+        <form className="space-y-5" onSubmit={submitForm}>
+            {/* Current password */}
+            <div>
+                <label htmlFor="currentPassword" className="dark:text-white">
+                    Current Password
+                </label>
+                <div className="relative text-white-dark">
+                    <input
+                        id="currentPassword"
+                        type="password"
+                        placeholder="Enter Current Password"
+                        className="form-input ps-10 placeholder:text-white-dark"
+                        value={currentPassword}
+                        onChange={(e) => setCurrentPassword(e.target.value)}
+                        required
+                    />
+                    <span className="absolute start-4 top-1/2 -translate-y-1/2">
+                        <IconLockDots fill={true} />
+                    </span>
+                </div>
+            </div>
+
+            {/* New password */}
+            <div>
+                <label htmlFor="newPassword" className="dark:text-white">
+                    New Password
+                </label>
+                <div className="relative text-white-dark">
+                    <input
+                        id="newPassword"
+                        type="password"
+                        placeholder="Enter New Password"
+                        className="form-input ps-10 placeholder:text-white-dark"
+                        value={newPassword}
+                        onChange={(e) => setNewPassword(e.target.value)}
+                        required
+                    />
+                    <span className="absolute start-4 top-1/2 -translate-y-1/2">
+                        <IconLockDots fill={true} />
+                    </span>
+                </div>
+            </div>
+
+            {error && <p className="text-red-500 text-sm">{error}</p>}
+            {success && <p className="text-green-500 text-sm">{success}</p>}
+
+            <button
+                type="submit"
+                disabled={loading}
+                className="btn btn-gradient !mt-6 w-full border-0 uppercase shadow-[0_10px_20px_-10px_rgba(67,97,238,0.44)]"
+            >
+                {loading ? 'UPDATING…' : 'CHANGE PASSWORD'}
+            </button>
+        </form>
+    );
+};
+
+export default ComponentsAuthChangePasswordForm;

components/layouts/footer.tsx

@@ -1,6 +1,6 @@
 const Footer = () => {
     return (
-            <div className="p-6 pt-0 mt-auto text-center dark:text-white-dark ltr:sm:text-left rtl:sm:text-right">© {new Date().getFullYear()}. CrawlerX All rights reserved.</div>
+            <div className="p-6 pt-0 mt-auto text-center dark:text-white-dark ltr:sm:text-left rtl:sm:text-right">© {new Date().getFullYear()}.Metatroncube All rights reserved.</div>
     );
 };
 

components/layouts/header.tsx

@@ -162,8 +162,8 @@ const Header = () => {
                 <div className="relative flex w-full items-center bg-white px-5 py-2.5 dark:bg-black">
                     <div className="horizontal-logo flex items-center justify-between ltr:mr-2 rtl:ml-2 lg:hidden">
                         <Link href="/" className="main-logo flex shrink-0 items-center">
-                            <img className="inline w-8 ltr:-ml-1 rtl:-mr-1" src="/assets/images/logo.svg" alt="logo" />
+                            <img className="" src="/assets/images/black-logo.png" alt="logo" />
-                            <span className="hidden align-middle text-2xl  font-semibold  transition-all duration-300 ltr:ml-1.5 rtl:mr-1.5 dark:text-white-light md:inline">CrawlerX</span>
+                            {/* <span className="hidden align-middle text-2xl  font-semibold  transition-all duration-300 ltr:ml-1.5 rtl:mr-1.5 dark:text-white-light md:inline">CrawlerX</span> */}
                         </Link>
                         <button
                             type="button"
@@ -174,7 +174,7 @@ const Header = () => {
                         </button>
                     </div>
 
-                    <div className="hidden ltr:mr-2 rtl:ml-2 sm:block">
+                    {/* <div className="hidden ltr:mr-2 rtl:ml-2 sm:block">
                         <ul className="flex items-center space-x-2 rtl:space-x-reverse dark:text-[#d0d2d6]">
                             <li>
                                 <Link href="/apps/calendar" className="block rounded-full bg-white-light/40 p-2 hover:bg-white-light/90 hover:text-primary dark:bg-dark/40 dark:hover:bg-dark/60">
@@ -192,9 +192,9 @@ const Header = () => {
                                 </Link>
                             </li>
                         </ul>
-                    </div>
+                    </div> */}
-                    <div className="flex items-center space-x-1.5 ltr:ml-auto rtl:mr-auto rtl:space-x-reverse dark:text-[#d0d2d6] sm:flex-1 ltr:sm:ml-0 sm:rtl:mr-0 lg:space-x-2">
+                    <div className="flex items-center justify-end space-x-1.5 ltr:ml-auto rtl:mr-auto rtl:space-x-reverse dark:text-[#d0d2d6] sm:flex-1 ltr:sm:ml-0 sm:rtl:mr-0 lg:space-x-2">
-                        <div className="sm:ltr:mr-auto sm:rtl:ml-auto">
+                        {/* <div className="sm:ltr:mr-auto sm:rtl:ml-auto">
                             <form
                                 className={`${search && '!block'} absolute inset-x-0 top-1/2 z-10 mx-4 hidden -translate-y-1/2 sm:relative sm:top-0 sm:mx-0 sm:block sm:translate-y-0`}
                                 onSubmit={() => setSearch(false)}
@@ -220,7 +220,7 @@ const Header = () => {
                             >
                                 <IconSearch className="mx-auto h-4.5 w-4.5 dark:text-[#d0d2d6]" />
                             </button>
-                        </div>
+                        </div> */}
                         <div>
                             {themeConfig.theme === 'light' ? (
                                 <button
@@ -255,7 +255,7 @@ const Header = () => {
                                 </button>
                             )}
                         </div>
-                        <div className="dropdown shrink-0">
+                        {/* <div className="dropdown shrink-0">
                             <Dropdown
                                 offset={[0, 8]}
                                 placement={`${isRtl ? 'bottom-start' : 'bottom-end'}`}
@@ -411,7 +411,7 @@ const Header = () => {
                                     )}
                                 </ul>
                             </Dropdown>
-                        </div>
+                        </div> */}
                         <div className="dropdown flex shrink-0">
                             <Dropdown
                                 offset={[0, 8]}
@@ -440,7 +440,7 @@ const Header = () => {
                                             Profile
                                         </Link>
                                     </li>
-                                    <li>
+                                    {/* <li>
                                         <Link href="/apps/mailbox" className="dark:hover:text-white">
                                             <IconMail className="h-4.5 w-4.5 shrink-0 ltr:mr-2 rtl:ml-2" />
                                             Inbox
@@ -451,7 +451,18 @@ const Header = () => {
                                             <IconLockDots className="h-4.5 w-4.5 shrink-0 ltr:mr-2 rtl:ml-2" />
                                             Lock Screen
                                         </Link>
+                                    </li> */}
+                                    {
+                                        token && (
+                                            <li>
+                                                <Link href="/change-password" className="dark:hover:text-white">
+                                                    <IconLockDots className="h-4.5 w-4.5 shrink-0 ltr:mr-2 rtl:ml-2" />
+                                                    Change Password
+                                                </Link>
                                             </li>
+                                        )
+                                    }
+
                                     <li className="border-t border-white-light dark:border-white-light/10">
                                         <li className="border-t border-white-light dark:border-white-light/10">
                                             {token ? (

components/layouts/loading.tsx

@@ -3,14 +3,15 @@ import React from 'react';
 const Loading = () => {
     return (
         <div className="screen_loader animate__animated fixed inset-0 z-[60] grid place-content-center bg-[#fafafa] dark:bg-[#060818]">
-            <svg width="64" height="64" viewBox="0 0 135 135" xmlns="http://www.w3.org/2000/svg" fill="#4361ee">
+            {/* <svg width="64" height="64" viewBox="0 0 135 135" xmlns="http://www.w3.org/2000/svg" fill="#4361ee">
                 <path d="M67.447 58c5.523 0 10-4.477 10-10s-4.477-10-10-10-10 4.477-10 10 4.477 10 10 10zm9.448 9.447c0 5.523 4.477 10 10 10 5.522 0 10-4.477 10-10s-4.478-10-10-10c-5.523 0-10 4.477-10 10zm-9.448 9.448c-5.523 0-10 4.477-10 10 0 5.522 4.477 10 10 10s10-4.478 10-10c0-5.523-4.477-10-10-10zM58 67.447c0-5.523-4.477-10-10-10s-10 4.477-10 10 4.477 10 10 10 10-4.477 10-10z">
                     <animateTransform attributeName="transform" type="rotate" from="0 67 67" to="-360 67 67" dur="2.5s" repeatCount="indefinite" />
                 </path>
                 <path d="M28.19 40.31c6.627 0 12-5.374 12-12 0-6.628-5.373-12-12-12-6.628 0-12 5.372-12 12 0 6.626 5.372 12 12 12zm30.72-19.825c4.686 4.687 12.284 4.687 16.97 0 4.686-4.686 4.686-12.284 0-16.97-4.686-4.687-12.284-4.687-16.97 0-4.687 4.686-4.687 12.284 0 16.97zm35.74 7.705c0 6.627 5.37 12 12 12 6.626 0 12-5.373 12-12 0-6.628-5.374-12-12-12-6.63 0-12 5.372-12 12zm19.822 30.72c-4.686 4.686-4.686 12.284 0 16.97 4.687 4.686 12.285 4.686 16.97 0 4.687-4.686 4.687-12.284 0-16.97-4.685-4.687-12.283-4.687-16.97 0zm-7.704 35.74c-6.627 0-12 5.37-12 12 0 6.626 5.373 12 12 12s12-5.374 12-12c0-6.63-5.373-12-12-12zm-30.72 19.822c-4.686-4.686-12.284-4.686-16.97 0-4.686 4.687-4.686 12.285 0 16.97 4.686 4.687 12.284 4.687 16.97 0 4.687-4.685 4.687-12.283 0-16.97zm-35.74-7.704c0-6.627-5.372-12-12-12-6.626 0-12 5.373-12 12s5.374 12 12 12c6.628 0 12-5.373 12-12zm-19.823-30.72c4.687-4.686 4.687-12.284 0-16.97-4.686-4.686-12.284-4.686-16.97 0-4.687 4.686-4.687 12.284 0 16.97 4.686 4.687 12.284 4.687 16.97 0z">
                     <animateTransform attributeName="transform" type="rotate" from="0 67 67" to="360 67 67" dur="8s" repeatCount="indefinite" />
                 </path>
-            </svg>
+            </svg> */}
+              <img src="/assets/images/black-logo.png" alt="logo" />
         </div>
     );
 };

components/layouts/sidebar.tsx

@@ -90,8 +90,8 @@ const Sidebar = () => {
                 <div className="h-full bg-white dark:bg-black">
                     <div className="flex items-center justify-between px-4 py-3">
                         <Link href="/" className="main-logo flex shrink-0 items-center">
-                            <img className="ml-[5px] w-8 flex-none" src="/assets/images/logo.svg" alt="logo" />
+                            <img src="/assets/images/black-logo.png" alt="logo" />
-                            <span className="align-middle text-2xl font-semibold ltr:ml-1.5 rtl:mr-1.5 dark:text-white-light lg:inline">CrawlerX</span>
+                            {/* <span className="align-middle text-2xl font-semibold ltr:ml-1.5 rtl:mr-1.5 dark:text-white-light lg:inline">CrawlerX</span> */}
                         </Link>
 
                         <button