mirror of
https://github.com/crocofied/CoreControl.git
synced 2025-12-29 16:14:43 +00:00
Split Settings Component into 2 cards
This commit is contained in:
headlesdev
@@ -1,120 +1,56 @@
|
|||||||
"use client";
|
// components/SettingsPage.tsx
|
||||||
|
'use client';
|
||||||
|
|
||||||
import Sidebar from "@/components/Sidebar";
|
import Sidebar from '@/components/Sidebar';
|
||||||
import ErrorToast from "@/components/Error";
|
import ErrorToast from '@/components/Error';
|
||||||
import { useState } from "react";
|
import { ProfileSettings } from '@/components/settings/ProfileSettings';
|
||||||
import axios from "axios";
|
import { PasswordSettings } from '@/components/settings/PasswordSettings';
|
||||||
import Cookies from "js-cookie";
|
import { useState } from 'react';
|
||||||
|
|
||||||
interface SettingsPageProps {
|
interface SettingsPageProps {
|
||||||
username: string;
|
username: string;
|
||||||
name: string;
|
name: string;
|
||||||
email: string;
|
email: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
export default function SettingsPage({ username, name, email }: SettingsPageProps) {
|
export default function SettingsPage({ username, name, email }: SettingsPageProps) {
|
||||||
const [profileUsername, setProfileUsername] = useState(username);
|
const [error, setError] = useState('');
|
||||||
const [profileName, setProfileName] = useState(name);
|
|
||||||
const [profileEmail, setProfileEmail] = useState(email);
|
|
||||||
const [oldPassword, setOldPassword] = useState("");
|
|
||||||
const [password, setPassword] = useState("");
|
|
||||||
const [passwordConfirm, setPasswordConfirm] = useState("");
|
|
||||||
|
|
||||||
const [error, setError] = useState("");
|
return (
|
||||||
|
<div>
|
||||||
|
<Sidebar
|
||||||
|
username={username}
|
||||||
|
fullName={name}
|
||||||
|
breadcrumbPath={['/', 'Dashboard', 'Settings']}
|
||||||
|
>
|
||||||
|
<main>
|
||||||
|
<h1 className="text-2xl font-bold">Settings</h1>
|
||||||
|
<p className="text-sm opacity-70">Manage your instance settings</p>
|
||||||
|
|
||||||
const saveProfile = async () => {
|
<div className="tabs tabs-border pt-8">
|
||||||
try {
|
<input
|
||||||
const response = await axios.post("/api/user/change/profile", { token: Cookies.get("token"), username: profileUsername, name: profileName, email: profileEmail });
|
type="radio"
|
||||||
if (response.data.message !== "Profile updated successfully") {
|
name="user_settings"
|
||||||
setError("Failed to update profile");
|
className="tab text-primary z-10"
|
||||||
} else {
|
aria-label="User Settings"
|
||||||
window.location.reload();
|
defaultChecked
|
||||||
}
|
/>
|
||||||
} catch (error: any) {
|
<div className="tab-content relative bg-base-100 pl-4 pt-4">
|
||||||
setError(error.response.data.error);
|
<div className="absolute -top-[3px] left-6 right-0 h-[2px] bg-stone-800"></div>
|
||||||
}
|
<div className="flex flex-col gap-4">
|
||||||
}
|
<ProfileSettings
|
||||||
|
initialUsername={username}
|
||||||
const savePassword = async () => {
|
initialName={name}
|
||||||
if (password !== passwordConfirm) {
|
initialEmail={email}
|
||||||
setError("Passwords do not match");
|
onError={setError}
|
||||||
return;
|
/>
|
||||||
}
|
<PasswordSettings onError={setError} />
|
||||||
if (oldPassword === password) {
|
</div>
|
||||||
setError("Old password and new password cannot be the same");
|
</div>
|
||||||
return;
|
</div>
|
||||||
}
|
</main>
|
||||||
try {
|
</Sidebar>
|
||||||
const response = await axios.post("/api/user/change/password", { token: Cookies.get("token"), old_password: oldPassword, password: password });
|
<ErrorToast message={error} show={error !== ''} onClose={() => setError('')} />
|
||||||
if (response.data.message !== "Password updated successfully") {
|
</div>
|
||||||
setError("Failed to update password");
|
);
|
||||||
}
|
|
||||||
} catch (error: any) {
|
|
||||||
setError(error.response.data.error);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div>
|
|
||||||
<Sidebar
|
|
||||||
username={username}
|
|
||||||
fullName={name}
|
|
||||||
breadcrumbPath={['/', 'Dashboard', 'Settings']}
|
|
||||||
>
|
|
||||||
<main>
|
|
||||||
<h1 className="text-2xl font-bold">Settings</h1>
|
|
||||||
<p className="text-sm opacity-70">Manage your instance settings</p>
|
|
||||||
|
|
||||||
<div className="tabs tabs-border pt-8">
|
|
||||||
<input type="radio" name="user_settings" className="tab text-primary z-10" aria-label="User Settings" defaultChecked/>
|
|
||||||
<div className="tab-content relative bg-base-100 pl-4 pt-4">
|
|
||||||
<div className="absolute -top-[3px] left-6 right-0 h-[2px] bg-stone-800"></div>
|
|
||||||
<div className="flex flex-col gap-4">
|
|
||||||
<div className="w-full bg-base-200 p-4 rounded-2xl border border-stone-800">
|
|
||||||
<h2 className="text-lg font-bold">Profile Settings</h2>
|
|
||||||
<p className="text-sm opacity-70">Manage your profile settings</p>
|
|
||||||
<div className="flex flex-col gap-2 pt-8">
|
|
||||||
<div className="flex flex-col gap-1">
|
|
||||||
<label htmlFor="username" className="text-sm font-bold">Username</label>
|
|
||||||
<input type="text" id="username" value={profileUsername} onChange={(e) => setProfileUsername(e.target.value)} className="input w-full" />
|
|
||||||
</div>
|
|
||||||
<div className="flex flex-col gap-1">
|
|
||||||
<label htmlFor="name" className="text-sm font-bold">Name</label>
|
|
||||||
<input type="text" id="name" value={profileName} onChange={(e) => setProfileName(e.target.value)} className="input w-full" />
|
|
||||||
</div>
|
|
||||||
<div className="flex flex-col gap-1">
|
|
||||||
<label htmlFor="email" className="text-sm font-bold">Email</label>
|
|
||||||
<input type="email" id="email" value={profileEmail} onChange={(e) => setProfileEmail(e.target.value)} className="input w-full" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<button className="btn btn-primary mt-8 w-full" onClick={saveProfile}>Save Changes</button>
|
|
||||||
</div>
|
|
||||||
<div className="w-full bg-base-200 p-4 rounded-2xl border border-stone-800">
|
|
||||||
<h2 className="text-lg font-bold">Password Settings</h2>
|
|
||||||
<p className="text-sm opacity-70">Manage your password</p>
|
|
||||||
<div className="flex flex-col gap-4 pt-8">
|
|
||||||
<div className="flex flex-col gap-2">
|
|
||||||
<label htmlFor="oldPassword" className="text-sm font-bold">Old Password</label>
|
|
||||||
<input type="password" id="oldPassword" value={oldPassword} onChange={(e) => setOldPassword(e.target.value)} className="input w-full" />
|
|
||||||
</div>
|
|
||||||
<div className="flex flex-col gap-2">
|
|
||||||
<label htmlFor="password" className="text-sm font-bold">Password</label>
|
|
||||||
<input type="password" id="password" value={password} onChange={(e) => setPassword(e.target.value)} className="input w-full" />
|
|
||||||
</div>
|
|
||||||
<div className="flex flex-col gap-2">
|
|
||||||
<label htmlFor="passwordConfirm" className="text-sm font-bold">Confirm Password</label>
|
|
||||||
<input type="password" id="passwordConfirm" value={passwordConfirm} onChange={(e) => setPasswordConfirm(e.target.value)} className="input w-full" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<button className="btn btn-primary mt-8 w-full" onClick={savePassword}>Save Changes</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</main>
|
|
||||||
</Sidebar>
|
|
||||||
<ErrorToast message={error} show={error !== ""} onClose={() => setError("")} />
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
74
components/settings/PasswordSettings.tsx
Normal file
74
components/settings/PasswordSettings.tsx
Normal file
@@ -0,0 +1,74 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import { useState } from 'react';
|
||||||
|
import axios from 'axios';
|
||||||
|
import Cookies from 'js-cookie';
|
||||||
|
|
||||||
|
export const PasswordSettings = ({ onError }: { onError: (message: string) => void }) => {
|
||||||
|
const [oldPassword, setOldPassword] = useState('');
|
||||||
|
const [password, setPassword] = useState('');
|
||||||
|
const [passwordConfirm, setPasswordConfirm] = useState('');
|
||||||
|
|
||||||
|
const handleSave = async () => {
|
||||||
|
if (password !== passwordConfirm) return onError('Passwords do not match');
|
||||||
|
if (oldPassword === password) return onError('New password must be different');
|
||||||
|
|
||||||
|
try {
|
||||||
|
const response = await axios.post('/api/user/change/password', {
|
||||||
|
token: Cookies.get('token'),
|
||||||
|
old_password: oldPassword,
|
||||||
|
password,
|
||||||
|
});
|
||||||
|
|
||||||
|
if (response.data.message !== 'Password updated successfully') {
|
||||||
|
onError('Failed to update password');
|
||||||
|
}
|
||||||
|
} catch (error: any) {
|
||||||
|
onError(error.response?.data?.error || 'An error occurred');
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="w-full bg-base-200 p-4 rounded-2xl border border-stone-800">
|
||||||
|
<h2 className="text-lg font-bold">Password Settings</h2>
|
||||||
|
<p className="text-sm opacity-70">Manage your password</p>
|
||||||
|
|
||||||
|
<div className="flex flex-col gap-4 pt-8">
|
||||||
|
<div className="flex flex-col gap-2">
|
||||||
|
<label htmlFor="oldPassword" className="text-sm font-bold">Old Password</label>
|
||||||
|
<input
|
||||||
|
type="password"
|
||||||
|
id="oldPassword"
|
||||||
|
value={oldPassword}
|
||||||
|
onChange={(e) => setOldPassword(e.target.value)}
|
||||||
|
className="input w-full"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="flex flex-col gap-2">
|
||||||
|
<label htmlFor="password" className="text-sm font-bold">Password</label>
|
||||||
|
<input
|
||||||
|
type="password"
|
||||||
|
id="password"
|
||||||
|
value={password}
|
||||||
|
onChange={(e) => setPassword(e.target.value)}
|
||||||
|
className="input w-full"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="flex flex-col gap-2">
|
||||||
|
<label htmlFor="passwordConfirm" className="text-sm font-bold">Confirm Password</label>
|
||||||
|
<input
|
||||||
|
type="password"
|
||||||
|
id="passwordConfirm"
|
||||||
|
value={passwordConfirm}
|
||||||
|
onChange={(e) => setPasswordConfirm(e.target.value)}
|
||||||
|
className="input w-full"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button className="btn btn-primary mt-8 w-full" onClick={handleSave}>
|
||||||
|
Save Changes
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
86
components/settings/ProfileSettings.tsx
Normal file
86
components/settings/ProfileSettings.tsx
Normal file
@@ -0,0 +1,86 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import { useState } from 'react';
|
||||||
|
import axios from 'axios';
|
||||||
|
import Cookies from 'js-cookie';
|
||||||
|
|
||||||
|
interface ProfileSettingsProps {
|
||||||
|
initialUsername: string;
|
||||||
|
initialName: string;
|
||||||
|
initialEmail: string;
|
||||||
|
onError: (message: string) => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const ProfileSettings = ({
|
||||||
|
initialUsername,
|
||||||
|
initialName,
|
||||||
|
initialEmail,
|
||||||
|
onError,
|
||||||
|
}: ProfileSettingsProps) => {
|
||||||
|
const [username, setUsername] = useState(initialUsername);
|
||||||
|
const [name, setName] = useState(initialName);
|
||||||
|
const [email, setEmail] = useState(initialEmail);
|
||||||
|
|
||||||
|
const handleSave = async () => {
|
||||||
|
try {
|
||||||
|
const response = await axios.post('/api/user/change/profile', {
|
||||||
|
token: Cookies.get('token'),
|
||||||
|
username,
|
||||||
|
name,
|
||||||
|
email,
|
||||||
|
});
|
||||||
|
|
||||||
|
if (response.data.message === 'Profile updated successfully') {
|
||||||
|
window.location.reload();
|
||||||
|
} else {
|
||||||
|
onError('Failed to update profile');
|
||||||
|
}
|
||||||
|
} catch (error: any) {
|
||||||
|
onError(error.response?.data?.error || 'An error occurred');
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="w-full bg-base-200 p-4 rounded-2xl border border-stone-800">
|
||||||
|
<h2 className="text-lg font-bold">Profile Settings</h2>
|
||||||
|
<p className="text-sm opacity-70">Manage your profile settings</p>
|
||||||
|
|
||||||
|
<div className="flex flex-col gap-2 pt-8">
|
||||||
|
<div className="flex flex-col gap-1">
|
||||||
|
<label htmlFor="username" className="text-sm font-bold">Username</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
id="username"
|
||||||
|
value={username}
|
||||||
|
onChange={(e) => setUsername(e.target.value)}
|
||||||
|
className="input w-full"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="flex flex-col gap-1">
|
||||||
|
<label htmlFor="name" className="text-sm font-bold">Name</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
id="name"
|
||||||
|
value={name}
|
||||||
|
onChange={(e) => setName(e.target.value)}
|
||||||
|
className="input w-full"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="flex flex-col gap-1">
|
||||||
|
<label htmlFor="email" className="text-sm font-bold">Email</label>
|
||||||
|
<input
|
||||||
|
type="email"
|
||||||
|
id="email"
|
||||||
|
value={email}
|
||||||
|
onChange={(e) => setEmail(e.target.value)}
|
||||||
|
className="input w-full"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button className="btn btn-primary mt-8 w-full" onClick={handleSave}>
|
||||||
|
Save Changes
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
Reference in New Issue
Block a user