mirror of
https://github.com/crocofied/CoreControl.git
synced 2025-12-24 02:46:28 +00:00
Split Settings Component into 2 cards
This commit is contained in:
headlesdev
parent
2e90bc42ca
commit
7551b0b494
@ -1,120 +1,56 @@
|
||||
"use client";
|
||||
// components/SettingsPage.tsx
|
||||
'use client';
|
||||
|
||||
import Sidebar from "@/components/Sidebar";
|
||||
import ErrorToast from "@/components/Error";
|
||||
import { useState } from "react";
|
||||
import axios from "axios";
|
||||
import Cookies from "js-cookie";
|
||||
import Sidebar from '@/components/Sidebar';
|
||||
import ErrorToast from '@/components/Error';
|
||||
import { ProfileSettings } from '@/components/settings/ProfileSettings';
|
||||
import { PasswordSettings } from '@/components/settings/PasswordSettings';
|
||||
import { useState } from 'react';
|
||||
|
||||
interface SettingsPageProps {
|
||||
username: string;
|
||||
name: string;
|
||||
email: string;
|
||||
username: string;
|
||||
name: string;
|
||||
email: string;
|
||||
}
|
||||
|
||||
export default function SettingsPage({ username, name, email }: SettingsPageProps) {
|
||||
const [profileUsername, setProfileUsername] = useState(username);
|
||||
const [profileName, setProfileName] = useState(name);
|
||||
const [profileEmail, setProfileEmail] = useState(email);
|
||||
const [oldPassword, setOldPassword] = useState("");
|
||||
const [password, setPassword] = useState("");
|
||||
const [passwordConfirm, setPasswordConfirm] = useState("");
|
||||
export default function SettingsPage({ username, name, email }: SettingsPageProps) {
|
||||
const [error, setError] = 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 () => {
|
||||
try {
|
||||
const response = await axios.post("/api/user/change/profile", { token: Cookies.get("token"), username: profileUsername, name: profileName, email: profileEmail });
|
||||
if (response.data.message !== "Profile updated successfully") {
|
||||
setError("Failed to update profile");
|
||||
} else {
|
||||
window.location.reload();
|
||||
}
|
||||
} catch (error: any) {
|
||||
setError(error.response.data.error);
|
||||
}
|
||||
}
|
||||
|
||||
const savePassword = async () => {
|
||||
if (password !== passwordConfirm) {
|
||||
setError("Passwords do not match");
|
||||
return;
|
||||
}
|
||||
if (oldPassword === password) {
|
||||
setError("Old password and new password cannot be the same");
|
||||
return;
|
||||
}
|
||||
try {
|
||||
const response = await axios.post("/api/user/change/password", { token: Cookies.get("token"), old_password: oldPassword, password: password });
|
||||
if (response.data.message !== "Password updated successfully") {
|
||||
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>
|
||||
);
|
||||
<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">
|
||||
<ProfileSettings
|
||||
initialUsername={username}
|
||||
initialName={name}
|
||||
initialEmail={email}
|
||||
onError={setError}
|
||||
/>
|
||||
<PasswordSettings onError={setError} />
|
||||
</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>
|
||||
);
|
||||
};
|
||||
Loading…
x
Reference in New Issue
Block a user