303 lines
26 KiB
Plaintext
303 lines
26 KiB
Plaintext
"use client";
|
|
|
|
import { useState, useEffect } from "react";
|
|
import { cn } from "@/lib/utils";
|
|
import {
|
|
Activity,
|
|
AppWindow,
|
|
Globe,
|
|
LayoutDashboard,
|
|
Shield,
|
|
ShieldAlert,
|
|
Server,
|
|
Zap,
|
|
Radio,
|
|
Lock,
|
|
Search,
|
|
LogOut
|
|
} from "lucide-react";
|
|
import Link from "next/link";
|
|
import { usePathname, useRouter } from "next/navigation";
|
|
import { Modal } from "@/components/ui/Modal";
|
|
|
|
const navigation = [
|
|
{ name: "Summary", href: "/", icon: LayoutDashboard },
|
|
{ name: "Agents", href: "/agents", icon: Server },
|
|
{ name: "Devices", href: "/devices", icon: Server },
|
|
{ name: "Flows", href: "/flows", icon: Activity },
|
|
{ name: "Apps", href: "/apps", icon: AppWindow },
|
|
{ name: "App Database", href: "/lookup", icon: Search },
|
|
{ name: "Threats", href: "/threats", icon: ShieldAlert },
|
|
{ name: "Geography", href: "/geography", icon: Globe },
|
|
{ name: "DNS", href: "/dns", icon: Radio },
|
|
{ name: "Events", href: "/events", icon: Zap },
|
|
{ name: "Network Intelligence", href: "/network-intelligence", icon: Activity },
|
|
{ name: "Security Audit", href: "/security-audit", icon: Lock },
|
|
{ name: "Intelligence", href: "/intelligence", icon: Shield },
|
|
{ name: "Network Infra", href: "/network-infrastructure", icon: Server },
|
|
{ name: "DPI Analytics", href: "/dpi-analytics", icon: Activity },
|
|
];
|
|
|
|
export function Sidebar() {
|
|
const pathname = usePathname();
|
|
const router = useRouter();
|
|
const [user, setUser] = useState<{ role?: string; agent_uuid?: string } | null>(null);
|
|
|
|
// Change Password state
|
|
const [isChangePasswordOpen, setIsChangePasswordOpen] = useState(false);
|
|
const [currentPassword, setCurrentPassword] = useState("");
|
|
const [newPassword, setNewPassword] = useState("");
|
|
const [confirmPassword, setConfirmPassword] = useState("");
|
|
const [errorMsg, setErrorMsg] = useState("");
|
|
const [successMsg, setSuccessMsg] = useState("");
|
|
const [isSubmitting, setIsSubmitting] = useState(false);
|
|
|
|
// Real-time checks for password strength validation
|
|
const isMinLength = newPassword.length >= 8;
|
|
const hasUppercase = /[A-Z]/.test(newPassword);
|
|
const hasLowercase = /[a-z]/.test(newPassword);
|
|
const hasNumber = /[0-9]/.test(newPassword);
|
|
const hasSpecial = /[!@#$%^&*(),.?":{}|<>]/.test(newPassword);
|
|
const passwordsMatch = newPassword === confirmPassword && confirmPassword.length > 0;
|
|
const isPasswordValid = isMinLength && hasUppercase && hasLowercase && hasNumber && hasSpecial && passwordsMatch;
|
|
|
|
useEffect(() => {
|
|
fetch('/api/auth/me')
|
|
.then(res => res.json())
|
|
.then(data => {
|
|
if (data.user) {
|
|
setUser(data.user);
|
|
}
|
|
})
|
|
.catch(err => console.error(err));
|
|
}, []);
|
|
|
|
const handleLogout = async () => {
|
|
try {
|
|
await fetch('/api/auth/logout', { method: 'POST' });
|
|
router.push('/login');
|
|
router.refresh();
|
|
} catch (e) {
|
|
console.error(e);
|
|
}
|
|
};
|
|
|
|
const handlePasswordChange = async (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
if (!isPasswordValid) return;
|
|
setIsSubmitting(true);
|
|
setErrorMsg("");
|
|
setSuccessMsg("");
|
|
|
|
try {
|
|
const res = await fetch('/api/auth/change-password', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ currentPassword, newPassword }),
|
|
});
|
|
const data = await res.json();
|
|
if (res.ok) {
|
|
setSuccessMsg("Password berhasil diubah!");
|
|
setCurrentPassword("");
|
|
setNewPassword("");
|
|
setConfirmPassword("");
|
|
setTimeout(() => {
|
|
setIsChangePasswordOpen(false);
|
|
setSuccessMsg("");
|
|
}, 1500);
|
|
} else {
|
|
setErrorMsg(data.error || "Gagal mengubah password");
|
|
}
|
|
} catch (err) {
|
|
setErrorMsg("Terjadi kesalahan koneksi");
|
|
} finally {
|
|
setIsSubmitting(false);
|
|
}
|
|
};
|
|
|
|
const filteredNavigation = navigation.filter((item) => {
|
|
if (user?.role === 'AGENT_VIEWER' && item.name === 'Agents') {
|
|
return false;
|
|
}
|
|
return true;
|
|
});
|
|
|
|
return (
|
|
<div className="flex h-full w-64 flex-col border-r border-border/50 bg-sidebar/80 backdrop-blur-2xl relative">
|
|
{/* Subtle glow effect behind sidebar */}
|
|
<div className="absolute inset-0 bg-gradient-to-b from-primary/5 via-transparent to-transparent pointer-events-none" />
|
|
|
|
<div className="flex h-[72px] shrink-0 items-center px-6 border-b border-border/50 relative z-10">
|
|
<img src="/backone-logo.png" alt="BackOne Logo" className="w-8 h-8 mr-3 rounded-full drop-shadow-[0_0_10px_rgba(255,0,0,0.3)]" />
|
|
<div className="flex flex-col">
|
|
<span className="text-lg font-bold text-white tracking-tight bg-clip-text text-transparent bg-gradient-to-r from-white to-white/70 leading-tight">
|
|
BackOne
|
|
</span>
|
|
<span className="text-[10px] font-medium text-muted-foreground tracking-wide mt-0.5">
|
|
Deep Package Inspection
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div className="flex flex-1 flex-col overflow-y-auto relative z-10">
|
|
<nav className="flex-1 space-y-1.5 px-3 py-6">
|
|
{filteredNavigation.map((item) => {
|
|
const isActive = pathname === item.href;
|
|
return (
|
|
<Link
|
|
key={item.name}
|
|
href={item.href}
|
|
className={cn(
|
|
"group relative flex items-center rounded-lg px-3 py-2.5 text-sm font-medium transition-all duration-200 overflow-hidden",
|
|
isActive
|
|
? "bg-primary/10 text-white shadow-[0_0_10px_rgba(59,130,246,0.1)]"
|
|
: "text-muted-foreground hover:bg-secondary/50 hover:text-white"
|
|
)}
|
|
>
|
|
{/* Active indicator bar */}
|
|
{isActive && (
|
|
<div className="absolute left-0 top-0 bottom-0 w-1 bg-primary rounded-r-full shadow-[0_0_10px_rgba(59,130,246,0.8)]" />
|
|
)}
|
|
|
|
<item.icon
|
|
className={cn(
|
|
"mr-3 h-5 w-5 shrink-0 transition-all duration-300",
|
|
isActive
|
|
? "text-primary drop-shadow-[0_0_8px_rgba(59,130,246,0.5)] scale-110"
|
|
: "text-muted-foreground group-hover:text-white group-hover:scale-110"
|
|
)}
|
|
aria-hidden="true"
|
|
/>
|
|
<span className="relative z-10">{item.name}</span>
|
|
|
|
{/* Hover background effect */}
|
|
{!isActive && (
|
|
<div className="absolute inset-0 bg-gradient-to-r from-white/0 via-white/5 to-white/0 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none translate-x-[-100%] group-hover:translate-x-[100%] transition-transform" />
|
|
)}
|
|
</Link>
|
|
);
|
|
})}
|
|
</nav>
|
|
</div>
|
|
|
|
<div className="p-4 border-t border-border/50 relative z-10 shrink-0 space-y-1.5">
|
|
<button
|
|
onClick={() => {
|
|
setErrorMsg("");
|
|
setSuccessMsg("");
|
|
setCurrentPassword("");
|
|
setNewPassword("");
|
|
setConfirmPassword("");
|
|
setIsChangePasswordOpen(true);
|
|
}}
|
|
className="flex w-full items-center rounded-lg px-3 py-2.5 text-sm font-medium text-slate-300 hover:bg-secondary/50 hover:text-white transition-all duration-200"
|
|
>
|
|
<Lock className="mr-3 h-5 w-5" />
|
|
Change Password
|
|
</button>
|
|
<button
|
|
onClick={handleLogout}
|
|
className="flex w-full items-center rounded-lg px-3 py-2.5 text-sm font-medium text-red-400 hover:bg-red-500/10 hover:text-red-300 transition-all duration-200"
|
|
>
|
|
<LogOut className="mr-3 h-5 w-5" />
|
|
Logout
|
|
</button>
|
|
</div>
|
|
|
|
<Modal isOpen={isChangePasswordOpen} onClose={() => setIsChangePasswordOpen(false)} title="Ubah Password">
|
|
<form onSubmit={handlePasswordChange} className="space-y-4">
|
|
{errorMsg && (
|
|
<div className="rounded-lg bg-red-500/10 p-3 text-xs text-red-400 border border-red-500/20">
|
|
{errorMsg}
|
|
</div>
|
|
)}
|
|
{successMsg && (
|
|
<div className="rounded-lg bg-green-500/10 p-3 text-xs text-green-400 border border-green-500/20">
|
|
{successMsg}
|
|
</div>
|
|
)}
|
|
|
|
<div className="space-y-1.5">
|
|
<label className="text-xs font-medium text-slate-300">Password Saat Ini</label>
|
|
<input
|
|
type="password"
|
|
value={currentPassword}
|
|
onChange={(e) => setCurrentPassword(e.target.value)}
|
|
required
|
|
className="w-full rounded-lg border border-border bg-background px-3 py-2 text-sm text-white placeholder-slate-500 focus:border-primary focus:outline-none"
|
|
/>
|
|
</div>
|
|
|
|
<div className="space-y-1.5">
|
|
<label className="text-xs font-medium text-slate-300">Password Baru</label>
|
|
<input
|
|
type="password"
|
|
value={newPassword}
|
|
onChange={(e) => setNewPassword(e.target.value)}
|
|
required
|
|
className="w-full rounded-lg border border-border bg-background px-3 py-2 text-sm text-white placeholder-slate-500 focus:border-primary focus:outline-none"
|
|
/>
|
|
</div>
|
|
|
|
<div className="space-y-1.5">
|
|
<label className="text-xs font-medium text-slate-300">Konfirmasi Password Baru</label>
|
|
<input
|
|
type="password"
|
|
value={confirmPassword}
|
|
onChange={(e) => setConfirmPassword(e.target.value)}
|
|
required
|
|
className="w-full rounded-lg border border-border bg-background px-3 py-2 text-sm text-white placeholder-slate-500 focus:border-primary focus:outline-none"
|
|
/>
|
|
</div>
|
|
|
|
{/* Real-time Checklist */}
|
|
<div className="rounded-lg bg-secondary/30 p-3.5 border border-border/50 space-y-2">
|
|
<span className="text-xs font-semibold text-slate-300">Syarat Kekuatan Password:</span>
|
|
<ul className="text-xs space-y-1.5">
|
|
<li className={cn("flex items-center transition-colors duration-200", isMinLength ? "text-green-400 font-medium" : "text-slate-400")}>
|
|
<span className="mr-2">{isMinLength ? "Γ£ô" : "Γùï"}</span> Minimal 8 karakter
|
|
</li>
|
|
<li className={cn("flex items-center transition-colors duration-200", hasUppercase ? "text-green-400 font-medium" : "text-slate-400")}>
|
|
<span className="mr-2">{hasUppercase ? "Γ£ô" : "Γùï"}</span> Mengandung huruf besar (A-Z)
|
|
</li>
|
|
<li className={cn("flex items-center transition-colors duration-200", hasLowercase ? "text-green-400 font-medium" : "text-slate-400")}>
|
|
<span className="mr-2">{hasLowercase ? "Γ£ô" : "Γùï"}</span> Mengandung huruf kecil (a-z)
|
|
</li>
|
|
<li className={cn("flex items-center transition-colors duration-200", hasNumber ? "text-green-400 font-medium" : "text-slate-400")}>
|
|
<span className="mr-2">{hasNumber ? "Γ£ô" : "Γùï"}</span> Mengandung angka (0-9)
|
|
</li>
|
|
<li className={cn("flex items-center transition-colors duration-200", hasSpecial ? "text-green-400 font-medium" : "text-slate-400")}>
|
|
<span className="mr-2">{hasSpecial ? "Γ£ô" : "Γùï"}</span> Mengandung karakter spesial (contoh: @$!%*?&)
|
|
</li>
|
|
<li className={cn("flex items-center transition-colors duration-200", passwordsMatch ? "text-green-400 font-medium" : "text-slate-400")}>
|
|
<span className="mr-2">{passwordsMatch ? "Γ£ô" : "Γùï"}</span> Password cocok
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div className="flex justify-end space-x-2 pt-2">
|
|
<button
|
|
type="button"
|
|
onClick={() => setIsChangePasswordOpen(false)}
|
|
className="rounded-lg bg-secondary px-4 py-2 text-sm font-medium text-white hover:bg-secondary/80 transition-colors"
|
|
>
|
|
Batal
|
|
</button>
|
|
<button
|
|
type="submit"
|
|
disabled={!isPasswordValid || isSubmitting}
|
|
className={cn(
|
|
"rounded-lg px-4 py-2 text-sm font-medium text-white shadow-lg transition-all duration-200",
|
|
isPasswordValid && !isSubmitting
|
|
? "bg-primary hover:bg-primary/90 shadow-primary/25 cursor-pointer"
|
|
: "bg-slate-700 text-slate-400 cursor-not-allowed"
|
|
)}
|
|
>
|
|
{isSubmitting ? "Menyimpan..." : "Simpan Password"}
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</Modal>
|
|
</div>
|
|
);
|
|
}
|