feat: add profile page for both user and admin with ability to change password
This commit is contained in:
Rio
@@ -3,7 +3,7 @@
|
||||
import Link from 'next/link';
|
||||
import { usePathname, useRouter } from 'next/navigation';
|
||||
import { useEffect, useState } from 'react';
|
||||
import { FaBus, FaChartBar, FaMapMarkedAlt, FaCalendarAlt, FaTicketAlt, FaShuttleVan, FaCog, FaSignOutAlt } from 'react-icons/fa';
|
||||
import { FaBus, FaChartBar, FaMapMarkedAlt, FaCalendarAlt, FaTicketAlt, FaShuttleVan, FaCog, FaSignOutAlt, FaUser } from 'react-icons/fa';
|
||||
import styles from './AdminLayout.module.css';
|
||||
|
||||
interface User {
|
||||
@@ -116,6 +116,9 @@ export default function AdminLayout({
|
||||
<Link href="/admin/settings" className={`${styles.navLink} ${pathname.startsWith('/admin/settings') ? styles.active : ''}`}>
|
||||
<span className={styles.navIcon}><FaCog /></span> Pengaturan Brand
|
||||
</Link>
|
||||
<Link href="/admin/profile" className={`${styles.navLink} ${pathname.startsWith('/admin/profile') ? styles.active : ''}`}>
|
||||
<span className={styles.navIcon}><FaUser /></span> Profil Saya
|
||||
</Link>
|
||||
</nav>
|
||||
|
||||
<div className={styles.sidebarFooter}>
|
||||
@@ -147,7 +150,9 @@ export default function AdminLayout({
|
||||
? 'Tata Letak Kursi Armada'
|
||||
: pathname.startsWith('/admin/settings')
|
||||
? 'Pengaturan Brand & Pembayaran'
|
||||
: 'Kelola Pemesanan Tiket'}
|
||||
: pathname.startsWith('/admin/profile')
|
||||
? 'Pengaturan Profil Admin'
|
||||
: 'Kelola Pemesanan Tiket'}
|
||||
</h2>
|
||||
<div className={styles.dateDisplay}>
|
||||
{new Date().toLocaleDateString('id-ID', { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' })}
|
||||
|
||||
@@ -0,0 +1,91 @@
|
||||
.container {
|
||||
animation: fadeIn 0.4s ease-out forwards;
|
||||
}
|
||||
|
||||
.profileGrid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 30px;
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.profileGrid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
.sectionTitle {
|
||||
font-size: 1.15rem;
|
||||
font-weight: 600;
|
||||
color: var(--text-white);
|
||||
margin-bottom: 24px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
border-bottom: 1px solid var(--border-light);
|
||||
padding-bottom: 12px;
|
||||
}
|
||||
|
||||
.form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.alert {
|
||||
padding: 14px 16px;
|
||||
border-radius: 8px;
|
||||
font-size: 0.9rem;
|
||||
margin-bottom: 25px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.alertSuccess {
|
||||
background: rgba(16, 185, 129, 0.15);
|
||||
color: var(--accent-emerald);
|
||||
border: 1px solid rgba(16, 185, 129, 0.3);
|
||||
}
|
||||
|
||||
.alertError {
|
||||
background: rgba(244, 63, 94, 0.15);
|
||||
color: var(--accent-rose);
|
||||
border: 1px solid rgba(244, 63, 94, 0.3);
|
||||
}
|
||||
|
||||
.loading {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 400px;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.spinner {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border: 3px solid rgba(255, 255, 255, 0.1);
|
||||
border-radius: 50%;
|
||||
border-top-color: var(--primary);
|
||||
animation: spin 1s ease-in-out infinite;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(10px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,253 @@
|
||||
'use client';
|
||||
|
||||
import { useEffect, useState } from 'react';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { FaUser, FaLock, FaCheckCircle, FaExclamationCircle } from 'react-icons/fa';
|
||||
import styles from './AdminProfile.module.css';
|
||||
|
||||
interface User {
|
||||
id: number;
|
||||
name: string;
|
||||
email: string;
|
||||
phone: string;
|
||||
role: string;
|
||||
createdAt: string;
|
||||
}
|
||||
|
||||
export default function AdminProfile() {
|
||||
const router = useRouter();
|
||||
const [user, setUser] = useState<User | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
// Profile form state
|
||||
const [name, setName] = useState('');
|
||||
const [phone, setPhone] = useState('');
|
||||
|
||||
// Password form state
|
||||
const [currentPassword, setCurrentPassword] = useState('');
|
||||
const [newPassword, setNewPassword] = useState('');
|
||||
const [confirmPassword, setConfirmPassword] = useState('');
|
||||
|
||||
const [savingProfile, setSavingProfile] = useState(false);
|
||||
const [savingPassword, setSavingPassword] = useState(false);
|
||||
const [successMsg, setSuccessMsg] = useState('');
|
||||
const [errorMsg, setErrorMsg] = useState('');
|
||||
|
||||
useEffect(() => {
|
||||
async function fetchProfile() {
|
||||
try {
|
||||
const res = await fetch('/api/user/profile');
|
||||
if (!res.ok) {
|
||||
router.push('/login?redirect=/admin/profile');
|
||||
return;
|
||||
}
|
||||
const data = await res.json();
|
||||
if (data.user.role !== 'ADMIN') {
|
||||
router.push('/');
|
||||
return;
|
||||
}
|
||||
setUser(data.user);
|
||||
setName(data.user.name);
|
||||
setPhone(data.user.phone);
|
||||
} catch (err) {
|
||||
console.error('Fetch profile error:', err);
|
||||
setErrorMsg('Gagal memuat profil administrator.');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}
|
||||
fetchProfile();
|
||||
}, [router]);
|
||||
|
||||
const handleUpdateProfile = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
setSavingProfile(true);
|
||||
setSuccessMsg('');
|
||||
setErrorMsg('');
|
||||
|
||||
try {
|
||||
const res = await fetch('/api/user/profile', {
|
||||
method: 'PUT',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ name, phone }),
|
||||
});
|
||||
|
||||
const data = await res.json();
|
||||
if (!res.ok) {
|
||||
throw new Error(data.error || 'Gagal memperbarui profil.');
|
||||
}
|
||||
|
||||
setUser(data.user);
|
||||
setSuccessMsg('Profil admin berhasil diperbarui!');
|
||||
setTimeout(() => setSuccessMsg(''), 3000);
|
||||
} catch (err: any) {
|
||||
setErrorMsg(err.message || 'Terjadi kesalahan.');
|
||||
} finally {
|
||||
setSavingProfile(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleChangePassword = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
setSavingPassword(true);
|
||||
setSuccessMsg('');
|
||||
setErrorMsg('');
|
||||
|
||||
if (newPassword !== confirmPassword) {
|
||||
setErrorMsg('Konfirmasi password baru tidak cocok.');
|
||||
setSavingPassword(false);
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const res = await fetch('/api/user/profile', {
|
||||
method: 'PUT',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ currentPassword, newPassword }),
|
||||
});
|
||||
|
||||
const data = await res.json();
|
||||
if (!res.ok) {
|
||||
throw new Error(data.error || 'Gagal mengubah password.');
|
||||
}
|
||||
|
||||
setSuccessMsg('Password admin berhasil diubah!');
|
||||
setCurrentPassword('');
|
||||
setNewPassword('');
|
||||
setConfirmPassword('');
|
||||
setTimeout(() => setSuccessMsg(''), 3000);
|
||||
} catch (err: any) {
|
||||
setErrorMsg(err.message || 'Terjadi kesalahan.');
|
||||
} finally {
|
||||
setSavingPassword(false);
|
||||
}
|
||||
};
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className={styles.loading}>
|
||||
<div className={styles.spinner}></div>
|
||||
<p>Memuat profil admin...</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (!user) return null;
|
||||
|
||||
return (
|
||||
<div className={styles.container}>
|
||||
{successMsg && (
|
||||
<div className={`${styles.alert} ${styles.alertSuccess}`}>
|
||||
<FaCheckCircle /> {successMsg}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{errorMsg && (
|
||||
<div className={`${styles.alert} ${styles.alertError}`}>
|
||||
<FaExclamationCircle /> {errorMsg}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className={styles.profileGrid}>
|
||||
{/* Profile Info Card */}
|
||||
<div className="glass-panel" style={{ padding: '24px' }}>
|
||||
<h3 className={styles.sectionTitle}>
|
||||
<FaUser style={{ color: 'var(--primary)' }} /> Informasi Akun Admin
|
||||
</h3>
|
||||
<form onSubmit={handleUpdateProfile} className={styles.form}>
|
||||
<div className="form-group">
|
||||
<label className="form-label">Nama Lengkap</label>
|
||||
<input
|
||||
type="text"
|
||||
className="form-input"
|
||||
value={name}
|
||||
onChange={(e) => setName(e.target.value)}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label className="form-label">Nomor Telepon</label>
|
||||
<input
|
||||
type="tel"
|
||||
className="form-input"
|
||||
value={phone}
|
||||
onChange={(e) => setPhone(e.target.value)}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label className="form-label">Alamat Email</label>
|
||||
<input
|
||||
type="email"
|
||||
className="form-input"
|
||||
value={user.email}
|
||||
disabled
|
||||
style={{ opacity: 0.6, cursor: 'not-allowed' }}
|
||||
/>
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label className="form-label">Hak Akses</label>
|
||||
<input
|
||||
type="text"
|
||||
className="form-input"
|
||||
value="Administrator Utama"
|
||||
disabled
|
||||
style={{ opacity: 0.6, cursor: 'not-allowed' }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<button type="submit" className="btn btn-primary" style={{ width: '100%', marginTop: '10px' }} disabled={savingProfile}>
|
||||
{savingProfile ? 'Menyimpan...' : 'Perbarui Info Profil'}
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
{/* Change Password Card */}
|
||||
<div className="glass-panel" style={{ padding: '24px' }}>
|
||||
<h3 className={styles.sectionTitle}>
|
||||
<FaLock style={{ color: 'var(--primary)' }} /> Ubah Password Keamanan
|
||||
</h3>
|
||||
<form onSubmit={handleChangePassword} className={styles.form}>
|
||||
<div className="form-group">
|
||||
<label className="form-label">Password Saat Ini</label>
|
||||
<input
|
||||
type="password"
|
||||
className="form-input"
|
||||
value={currentPassword}
|
||||
onChange={(e) => setCurrentPassword(e.target.value)}
|
||||
placeholder="Masukkan password admin saat ini"
|
||||
required={newPassword.length > 0}
|
||||
/>
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label className="form-label">Password Baru</label>
|
||||
<input
|
||||
type="password"
|
||||
className="form-input"
|
||||
value={newPassword}
|
||||
onChange={(e) => setNewPassword(e.target.value)}
|
||||
placeholder="Minimal 6 karakter"
|
||||
required={currentPassword.length > 0}
|
||||
/>
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label className="form-label">Konfirmasi Password Baru</label>
|
||||
<input
|
||||
type="password"
|
||||
className="form-input"
|
||||
value={confirmPassword}
|
||||
onChange={(e) => setConfirmPassword(e.target.value)}
|
||||
placeholder="Ulangi password baru"
|
||||
required={currentPassword.length > 0}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<button type="submit" className="btn btn-primary" style={{ width: '100%', marginTop: '10px' }} disabled={savingPassword}>
|
||||
{savingPassword ? 'Memperbarui...' : 'Ubah Password Admin'}
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,93 @@
|
||||
import { NextResponse } from 'next/server';
|
||||
import { prisma } from '@/lib/db';
|
||||
import { getSessionUser } from '@/lib/auth';
|
||||
import bcrypt from 'bcryptjs';
|
||||
|
||||
export const dynamic = 'force-dynamic';
|
||||
|
||||
export async function GET() {
|
||||
try {
|
||||
const session = await getSessionUser();
|
||||
if (!session) {
|
||||
return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
|
||||
}
|
||||
|
||||
const user = await prisma.user.findUnique({
|
||||
where: { id: session.userId },
|
||||
select: {
|
||||
id: true,
|
||||
name: true,
|
||||
email: true,
|
||||
phone: true,
|
||||
role: true,
|
||||
createdAt: true,
|
||||
},
|
||||
});
|
||||
|
||||
if (!user) {
|
||||
return NextResponse.json({ error: 'User tidak ditemukan.' }, { status: 404 });
|
||||
}
|
||||
|
||||
return NextResponse.json({ user });
|
||||
} catch (error) {
|
||||
console.error('Fetch profile error:', error);
|
||||
return NextResponse.json({ error: 'Gagal mengambil data profil.' }, { status: 500 });
|
||||
}
|
||||
}
|
||||
|
||||
export async function PUT(request: Request) {
|
||||
try {
|
||||
const session = await getSessionUser();
|
||||
if (!session) {
|
||||
return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
|
||||
}
|
||||
|
||||
const { name, phone, currentPassword, newPassword } = await request.json();
|
||||
|
||||
const user = await prisma.user.findUnique({
|
||||
where: { id: session.userId },
|
||||
});
|
||||
|
||||
if (!user) {
|
||||
return NextResponse.json({ error: 'User tidak ditemukan.' }, { status: 404 });
|
||||
}
|
||||
|
||||
const updateData: any = {};
|
||||
|
||||
if (name) updateData.name = name;
|
||||
if (phone) updateData.phone = phone;
|
||||
|
||||
// Handle password change if requested
|
||||
if (currentPassword && newPassword) {
|
||||
const isMatch = await bcrypt.compare(currentPassword, user.password);
|
||||
if (!isMatch) {
|
||||
return NextResponse.json({ error: 'Password saat ini salah.' }, { status: 400 });
|
||||
}
|
||||
|
||||
if (newPassword.length < 6) {
|
||||
return NextResponse.json({ error: 'Password baru minimal harus 6 karakter.' }, { status: 400 });
|
||||
}
|
||||
|
||||
updateData.password = await bcrypt.hash(newPassword, 10);
|
||||
} else if (currentPassword || newPassword) {
|
||||
return NextResponse.json({ error: 'Untuk mengubah password, isi kedua field password saat ini dan password baru.' }, { status: 400 });
|
||||
}
|
||||
|
||||
const updatedUser = await prisma.user.update({
|
||||
where: { id: session.userId },
|
||||
data: updateData,
|
||||
select: {
|
||||
id: true,
|
||||
name: true,
|
||||
email: true,
|
||||
phone: true,
|
||||
role: true,
|
||||
},
|
||||
});
|
||||
|
||||
return NextResponse.json({ success: true, user: updatedUser });
|
||||
} catch (error) {
|
||||
console.error('Update profile error:', error);
|
||||
return NextResponse.json({ error: 'Gagal memperbarui profil.' }, { status: 500 });
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,268 @@
|
||||
'use client';
|
||||
|
||||
import { useEffect, useState } from 'react';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import Link from 'next/link';
|
||||
import { FaUser, FaLock, FaCheckCircle, FaExclamationCircle } from 'react-icons/fa';
|
||||
import styles from './profile.module.css';
|
||||
|
||||
interface User {
|
||||
id: number;
|
||||
name: string;
|
||||
email: string;
|
||||
phone: string;
|
||||
role: string;
|
||||
createdAt: string;
|
||||
}
|
||||
|
||||
export default function UserProfile() {
|
||||
const router = useRouter();
|
||||
const [user, setUser] = useState<User | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
// Profile update form state
|
||||
const [name, setName] = useState('');
|
||||
const [phone, setPhone] = useState('');
|
||||
|
||||
// Password change form state
|
||||
const [currentPassword, setCurrentPassword] = useState('');
|
||||
const [newPassword, setNewPassword] = useState('');
|
||||
const [confirmPassword, setConfirmPassword] = useState('');
|
||||
|
||||
const [savingProfile, setSavingProfile] = useState(false);
|
||||
const [savingPassword, setSavingPassword] = useState(false);
|
||||
const [successMsg, setSuccessMsg] = useState('');
|
||||
const [errorMsg, setErrorMsg] = useState('');
|
||||
|
||||
useEffect(() => {
|
||||
async function fetchProfile() {
|
||||
try {
|
||||
const res = await fetch('/api/user/profile');
|
||||
if (!res.ok) {
|
||||
router.push('/login?redirect=/dashboard/profile');
|
||||
return;
|
||||
}
|
||||
const data = await res.json();
|
||||
setUser(data.user);
|
||||
setName(data.user.name);
|
||||
setPhone(data.user.phone);
|
||||
} catch (err) {
|
||||
console.error('Fetch profile error:', err);
|
||||
setErrorMsg('Gagal memuat profil pengguna.');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}
|
||||
fetchProfile();
|
||||
}, [router]);
|
||||
|
||||
const handleUpdateProfile = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
setSavingProfile(true);
|
||||
setSuccessMsg('');
|
||||
setErrorMsg('');
|
||||
|
||||
try {
|
||||
const res = await fetch('/api/user/profile', {
|
||||
method: 'PUT',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ name, phone }),
|
||||
});
|
||||
|
||||
const data = await res.json();
|
||||
if (!res.ok) {
|
||||
throw new Error(data.error || 'Gagal memperbarui profil.');
|
||||
}
|
||||
|
||||
setUser(data.user);
|
||||
setSuccessMsg('Profil berhasil diperbarui!');
|
||||
setTimeout(() => setSuccessMsg(''), 3000);
|
||||
} catch (err: any) {
|
||||
setErrorMsg(err.message || 'Terjadi kesalahan.');
|
||||
} finally {
|
||||
setSavingProfile(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleChangePassword = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
setSavingPassword(true);
|
||||
setSuccessMsg('');
|
||||
setErrorMsg('');
|
||||
|
||||
if (newPassword !== confirmPassword) {
|
||||
setErrorMsg('Konfirmasi password baru tidak cocok.');
|
||||
setSavingPassword(false);
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const res = await fetch('/api/user/profile', {
|
||||
method: 'PUT',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ currentPassword, newPassword }),
|
||||
});
|
||||
|
||||
const data = await res.json();
|
||||
if (!res.ok) {
|
||||
throw new Error(data.error || 'Gagal mengubah password.');
|
||||
}
|
||||
|
||||
setSuccessMsg('Password berhasil diubah!');
|
||||
setCurrentPassword('');
|
||||
setNewPassword('');
|
||||
setConfirmPassword('');
|
||||
setTimeout(() => setSuccessMsg(''), 3000);
|
||||
} catch (err: any) {
|
||||
setErrorMsg(err.message || 'Terjadi kesalahan.');
|
||||
} finally {
|
||||
setSavingPassword(false);
|
||||
}
|
||||
};
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className={styles.loading}>
|
||||
<div className={styles.spinner}></div>
|
||||
<p>Memuat profil Anda...</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (!user) return null;
|
||||
|
||||
return (
|
||||
<div className={styles.container}>
|
||||
<div className={styles.header}>
|
||||
<h1 className={styles.title}>Pengaturan Profil</h1>
|
||||
<p className={styles.subtitle}>Kelola informasi pribadi dan keamanan akun Anda.</p>
|
||||
</div>
|
||||
|
||||
{successMsg && (
|
||||
<div className={`${styles.alert} ${styles.alertSuccess}`}>
|
||||
<FaCheckCircle /> {successMsg}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{errorMsg && (
|
||||
<div className={`${styles.alert} ${styles.alertError}`}>
|
||||
<FaExclamationCircle /> {errorMsg}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Profile Info Form */}
|
||||
<div className={styles.profileCard}>
|
||||
<h2 className={styles.sectionTitle}>
|
||||
<FaUser /> Informasi Profil
|
||||
</h2>
|
||||
<form onSubmit={handleUpdateProfile} className={styles.form}>
|
||||
<div className={styles.formGrid}>
|
||||
<div className="form-group">
|
||||
<label className="form-label">Nama Lengkap</label>
|
||||
<input
|
||||
type="text"
|
||||
className="form-input"
|
||||
value={name}
|
||||
onChange={(e) => setName(e.target.value)}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label className="form-label">Nomor Telepon</label>
|
||||
<input
|
||||
type="tel"
|
||||
className="form-input"
|
||||
value={phone}
|
||||
onChange={(e) => setPhone(e.target.value)}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={styles.formGrid}>
|
||||
<div className="form-group">
|
||||
<label className="form-label">Alamat Email (Tidak dapat diubah)</label>
|
||||
<input
|
||||
type="email"
|
||||
className="form-input"
|
||||
value={user.email}
|
||||
disabled
|
||||
style={{ opacity: 0.6, cursor: 'not-allowed' }}
|
||||
/>
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label className="form-label">Peran Pengguna</label>
|
||||
<input
|
||||
type="text"
|
||||
className="form-input"
|
||||
value={user.role === 'ADMIN' ? 'Administrator' : 'Pelanggan'}
|
||||
disabled
|
||||
style={{ opacity: 0.6, cursor: 'not-allowed', textTransform: 'capitalize' }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={styles.actions}>
|
||||
<Link href="/dashboard" className="btn btn-secondary">
|
||||
Kembali ke Dashboard
|
||||
</Link>
|
||||
<button type="submit" className="btn btn-primary" disabled={savingProfile}>
|
||||
{savingProfile ? 'Menyimpan...' : 'Simpan Profil'}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
{/* Password Change Form */}
|
||||
<div className={styles.profileCard}>
|
||||
<h2 className={styles.sectionTitle}>
|
||||
<FaLock /> Ubah Password Keamanan
|
||||
</h2>
|
||||
<form onSubmit={handleChangePassword} className={styles.form}>
|
||||
<div className="form-group">
|
||||
<label className="form-label">Password Saat Ini</label>
|
||||
<input
|
||||
type="password"
|
||||
className="form-input"
|
||||
value={currentPassword}
|
||||
onChange={(e) => setCurrentPassword(e.target.value)}
|
||||
placeholder="Masukkan password Anda saat ini"
|
||||
required={newPassword.length > 0}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className={styles.formGrid}>
|
||||
<div className="form-group">
|
||||
<label className="form-label">Password Baru</label>
|
||||
<input
|
||||
type="password"
|
||||
className="form-input"
|
||||
value={newPassword}
|
||||
onChange={(e) => setNewPassword(e.target.value)}
|
||||
placeholder="Minimal 6 karakter"
|
||||
required={currentPassword.length > 0}
|
||||
/>
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label className="form-label">Konfirmasi Password Baru</label>
|
||||
<input
|
||||
type="password"
|
||||
className="form-input"
|
||||
value={confirmPassword}
|
||||
onChange={(e) => setConfirmPassword(e.target.value)}
|
||||
placeholder="Ulangi password baru"
|
||||
required={currentPassword.length > 0}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={styles.actions}>
|
||||
<button type="submit" className="btn btn-primary" disabled={savingPassword}>
|
||||
{savingPassword ? 'Mengubah...' : 'Perbarui Password'}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,160 @@
|
||||
.container {
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
padding: 40px 20px;
|
||||
animation: fadeIn 0.4s ease-out forwards;
|
||||
}
|
||||
|
||||
.header {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 2rem;
|
||||
font-weight: 700;
|
||||
color: var(--text-white);
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
color: var(--text-secondary);
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.profileCard {
|
||||
background: var(--bg-card);
|
||||
backdrop-filter: blur(12px);
|
||||
-webkit-backdrop-filter: blur(12px);
|
||||
border: 1px solid var(--border-light);
|
||||
border-radius: 16px;
|
||||
padding: 30px;
|
||||
margin-bottom: 30px;
|
||||
box-shadow: var(--shadow-lg);
|
||||
}
|
||||
|
||||
.sectionTitle {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
color: var(--text-white);
|
||||
margin-bottom: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
border-bottom: 1px solid var(--border-light);
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
.infoGrid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 20px;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.infoGrid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
.infoItem {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.infoLabel {
|
||||
font-size: 0.8rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.infoValue {
|
||||
font-size: 1rem;
|
||||
font-weight: 500;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.formGrid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.formGrid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
.actions {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 15px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.alert {
|
||||
padding: 14px 16px;
|
||||
border-radius: 8px;
|
||||
font-size: 0.9rem;
|
||||
margin-bottom: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.alertSuccess {
|
||||
background: rgba(16, 185, 129, 0.15);
|
||||
color: var(--accent-emerald);
|
||||
border: 1px solid rgba(16, 185, 129, 0.3);
|
||||
}
|
||||
|
||||
.alertError {
|
||||
background: rgba(244, 63, 94, 0.15);
|
||||
color: var(--accent-rose);
|
||||
border: 1px solid rgba(244, 63, 94, 0.3);
|
||||
}
|
||||
|
||||
.loading {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 400px;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.spinner {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border: 3px solid rgba(255, 255, 255, 0.1);
|
||||
border-radius: 50%;
|
||||
border-top-color: var(--primary);
|
||||
animation: spin 1s ease-in-out infinite;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(10px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
@@ -94,6 +94,11 @@ export default function Header({ settings }: { settings?: any }) {
|
||||
Dashboard Saya
|
||||
</Link>
|
||||
)}
|
||||
{user && (
|
||||
<Link href="/dashboard/profile" className={`${styles.navLink} ${pathname === '/dashboard/profile' ? styles.active : ''}`}>
|
||||
Profil Saya
|
||||
</Link>
|
||||
)}
|
||||
{user?.role === 'ADMIN' && (
|
||||
<Link href="/admin" className={styles.adminBadge}>
|
||||
Admin Panel
|
||||
@@ -104,7 +109,7 @@ export default function Header({ settings }: { settings?: any }) {
|
||||
<div className={styles.authActions}>
|
||||
{user ? (
|
||||
<div className={styles.userMenu}>
|
||||
<Link href="/dashboard" className={styles.userName} style={{ color: 'var(--text-white)', fontWeight: 600, textDecoration: 'none' }}>
|
||||
<Link href="/dashboard/profile" className={styles.userName} style={{ color: 'var(--text-white)', fontWeight: 600, textDecoration: 'none' }}>
|
||||
Halo, {user.name}
|
||||
</Link>
|
||||
<button onClick={handleLogout} className={styles.logoutBtn}>
|
||||
@@ -144,6 +149,11 @@ export default function Header({ settings }: { settings?: any }) {
|
||||
Dashboard Saya
|
||||
</Link>
|
||||
)}
|
||||
{user && (
|
||||
<Link href="/dashboard/profile" className={`${styles.mobileNavLink} ${pathname === '/dashboard/profile' ? styles.active : ''}`} onClick={() => setIsOpen(false)}>
|
||||
Profil Saya
|
||||
</Link>
|
||||
)}
|
||||
{user?.role === 'ADMIN' && (
|
||||
<Link href="/admin" className={styles.mobileAdminBadge} onClick={() => setIsOpen(false)}>
|
||||
Admin Panel
|
||||
|
||||
Reference in New Issue
Block a user