ChandimaPrabath's picture
username validation
2ea6bf5
'use client';
import { useState, useEffect } from "react";
import { useRouter } from "next/router";
import NexusAuthApi from "@lib/Nexus_Auth_API";
export default function Home() {
const [username, setUsername] = useState(null);
const [userID, setUserID] = useState(null);
const [token, setToken] = useState(null);
const [accessLevel, setAccessLevel] = useState(null);
const router = useRouter();
useEffect(() => {
setUsername(localStorage.getItem('me'));
setUserID(localStorage.getItem('u_id'));
setToken(localStorage.getItem('s_tkn'));
setAccessLevel(localStorage.getItem('a_l'));
}, []);
const clearLocalStorage = () => {
localStorage.removeItem('me');
localStorage.removeItem('s_tkn');
localStorage.removeItem('u_id');
localStorage.removeItem('a_l');
setUsername(null);
};
const handleLogout = () => {
NexusAuthApi.logout(userID, token)
.then(() => {
clearLocalStorage();
router.push('/');
window.location.reload();
})
.catch((error) => {
console.error("Logout failed", error);
});
};
return (
<div className="page-content">
{username && (
<div className="max-w-sm mx-auto shadow-lg rounded-lg overflow-hidden bg-gray-800 text-white">
<table className="min-w-full divide-y divide-gray-700">
<tbody className="divide-y divide-gray-700">
<tr>
<td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-300">User ID:</td>
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-100"><strong>{userID}</strong></td>
</tr>
<tr>
<td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-300">Username:</td>
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-100"><strong>{username}</strong></td>
</tr>
<tr>
<td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-300">Access Level:</td>
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-100"><strong>{accessLevel}</strong></td>
</tr>
<tr>
<td colSpan="2" className="px-6 py-4 whitespace-nowrap text-sm text-center">
<button onClick={handleLogout} className="bg-red-600 text-white px-4 py-2 rounded-md hover:bg-red-700 transition duration-300">Logout</button>
</td>
</tr>
</tbody>
</table>
</div>
)}
</div>
);
}