paulmataruso/patchmon.net
1
0
Fork 0
mirror of https://github.com/9technologygroup/patchmon.net.git synced 2025-11-10 17:05:48 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(frontend): fix login page icons

Browse Source
This commit is contained in:
tigattack
2025-09-22 22:20:14 +01:00
parent 69a121cdde
commit 43ce146987
1 changed files with 38 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

64
frontend/src/pages/Login.jsx
View File

@@ -49,7 +49,7 @@ const Login = () => {
try { try {
const response = await authAPI.login(formData.username, formData.password) const response = await authAPI.login(formData.username, formData.password)
if (response.data.requiresTfa) { if (response.data.requiresTfa) {
setRequiresTfa(true) setRequiresTfa(true)
setTfaUsername(formData.username) setTfaUsername(formData.username)
@@ -77,12 +77,12 @@ const Login = () => {
try { try {
const response = await authAPI.signup(formData.username, formData.email, formData.password) const response = await authAPI.signup(formData.username, formData.email, formData.password)
if (response.data && response.data.token) { if (response.data && response.data.token) {
// Store token and user data // Store token and user data
localStorage.setItem('token', response.data.token) localStorage.setItem('token', response.data.token)
localStorage.setItem('user', JSON.stringify(response.data.user)) localStorage.setItem('user', JSON.stringify(response.data.user))
// Redirect to dashboard // Redirect to dashboard
navigate('/') navigate('/')
} else { } else {
@@ -90,8 +90,8 @@ const Login = () => {
} }
} catch (err) { } catch (err) {
console.error('Signup error:', err) console.error('Signup error:', err)
const errorMessage = err.response?.data?.error || const errorMessage = err.response?.data?.error ||
(err.response?.data?.errors && err.response.data.errors.length > 0 (err.response?.data?.errors && err.response.data.errors.length > 0
? err.response.data.errors.map(e => e.msg).join(', ') ? err.response.data.errors.map(e => e.msg).join(', ')
: err.message || 'Signup failed') : err.message || 'Signup failed')
setError(errorMessage) setError(errorMessage)
@@ -107,12 +107,12 @@ const Login = () => {
try { try {
const response = await authAPI.verifyTfa(tfaUsername, tfaData.token) const response = await authAPI.verifyTfa(tfaUsername, tfaData.token)
if (response.data && response.data.token) { if (response.data && response.data.token) {
// Store token and user data // Store token and user data
localStorage.setItem('token', response.data.token) localStorage.setItem('token', response.data.token)
localStorage.setItem('user', JSON.stringify(response.data.user)) localStorage.setItem('user', JSON.stringify(response.data.user))
// Redirect to dashboard // Redirect to dashboard
navigate('/') navigate('/')
} else { } else {
@@ -172,7 +172,7 @@ const Login = () => {
<div className="max-w-md w-full space-y-8"> <div className="max-w-md w-full space-y-8">
<div> <div>
<div className="mx-auto h-12 w-12 flex items-center justify-center rounded-full bg-primary-100"> <div className="mx-auto h-12 w-12 flex items-center justify-center rounded-full bg-primary-100">
<Lock className="h-6 w-6 text-primary-600" /> <Lock size={24} color="#2563eb" strokeWidth={2} />
</div> </div>
<h2 className="mt-6 text-center text-3xl font-extrabold text-secondary-900"> <h2 className="mt-6 text-center text-3xl font-extrabold text-secondary-900">
{isSignupMode ? 'Create PatchMon Account' : 'Sign in to PatchMon'} {isSignupMode ? 'Create PatchMon Account' : 'Sign in to PatchMon'}
@@ -190,9 +190,6 @@ const Login = () => {
{isSignupMode ? 'Username' : 'Username or Email'} {isSignupMode ? 'Username' : 'Username or Email'}
</label> </label>
<div className="mt-1 relative"> <div className="mt-1 relative">
<div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
<User className="h-5 w-5 text-secondary-400" />
</div>
<input <input
id="username" id="username"
name="username" name="username"
@@ -203,6 +200,13 @@ const Login = () => {
className="appearance-none rounded-md relative block w-full pl-10 pr-3 py-2 border border-secondary-300 placeholder-secondary-500 text-secondary-900 focus:outline-none focus:ring-primary-500 focus:border-primary-500 focus:z-10 sm:text-sm" className="appearance-none rounded-md relative block w-full pl-10 pr-3 py-2 border border-secondary-300 placeholder-secondary-500 text-secondary-900 focus:outline-none focus:ring-primary-500 focus:border-primary-500 focus:z-10 sm:text-sm"
placeholder={isSignupMode ? "Enter your username" : "Enter your username or email"} placeholder={isSignupMode ? "Enter your username" : "Enter your username or email"}
/> />
<div className="absolute left-3 top-1/2 -translate-y-1/2 pointer-events-none z-20 flex items-center">
<User
size={20}
color="#64748b"
strokeWidth={2}
/>
</div>
</div> </div>
</div> </div>
@@ -212,9 +216,6 @@ const Login = () => {
Email Email
</label> </label>
<div className="mt-1 relative"> <div className="mt-1 relative">
<div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
<Mail className="h-5 w-5 text-secondary-400" />
</div>
<input <input
id="email" id="email"
name="email" name="email"
@@ -225,6 +226,13 @@ const Login = () => {
className="appearance-none rounded-md relative block w-full pl-10 pr-3 py-2 border border-secondary-300 placeholder-secondary-500 text-secondary-900 focus:outline-none focus:ring-primary-500 focus:border-primary-500 focus:z-10 sm:text-sm" className="appearance-none rounded-md relative block w-full pl-10 pr-3 py-2 border border-secondary-300 placeholder-secondary-500 text-secondary-900 focus:outline-none focus:ring-primary-500 focus:border-primary-500 focus:z-10 sm:text-sm"
placeholder="Enter your email" placeholder="Enter your email"
/> />
<div className="absolute left-3 top-1/2 -translate-y-1/2 pointer-events-none z-20 flex items-center">
<Mail
size={20}
color="#64748b"
strokeWidth={2}
/>
</div>
</div> </div>
</div> </div>
)} )}
@@ -234,9 +242,6 @@ const Login = () => {
Password Password
</label> </label>
<div className="mt-1 relative"> <div className="mt-1 relative">
<div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
<Lock className="h-5 w-5 text-secondary-400" />
</div>
<input <input
id="password" id="password"
name="password" name="password"
@@ -247,16 +252,23 @@ const Login = () => {
className="appearance-none rounded-md relative block w-full pl-10 pr-10 py-2 border border-secondary-300 placeholder-secondary-500 text-secondary-900 focus:outline-none focus:ring-primary-500 focus:border-primary-500 focus:z-10 sm:text-sm" className="appearance-none rounded-md relative block w-full pl-10 pr-10 py-2 border border-secondary-300 placeholder-secondary-500 text-secondary-900 focus:outline-none focus:ring-primary-500 focus:border-primary-500 focus:z-10 sm:text-sm"
placeholder="Enter your password" placeholder="Enter your password"
/> />
<div className="absolute inset-y-0 right-0 pr-3 flex items-center"> <div className="absolute left-3 top-1/2 -translate-y-1/2 pointer-events-none z-20 flex items-center">
<Lock
size={20}
color="#64748b"
strokeWidth={2}
/>
</div>
<div className="absolute right-3 top-1/2 -translate-y-1/2 z-20 flex items-center">
<button <button
type="button" type="button"
onClick={() => setShowPassword(!showPassword)} onClick={() => setShowPassword(!showPassword)}
className="text-secondary-400 hover:text-secondary-500" className="bg-transparent border-none cursor-pointer p-1 flex items-center justify-center"
> >
{showPassword ? ( {showPassword ? (
<EyeOff className="h-5 w-5" /> <EyeOff size={20} color="#64748b" strokeWidth={2} />
) : ( ) : (
<Eye className="h-5 w-5" /> <Eye size={20} color="#64748b" strokeWidth={2} />
)} )}
</button> </button>
</div> </div>
@@ -267,7 +279,7 @@ const Login = () => {
{error && ( {error && (
<div className="bg-danger-50 border border-danger-200 rounded-md p-3"> <div className="bg-danger-50 border border-danger-200 rounded-md p-3">
<div className="flex"> <div className="flex">
<AlertCircle className="h-5 w-5 text-danger-400" /> <AlertCircle size={20} color="#dc2626" strokeWidth={2} />
<div className="ml-3"> <div className="ml-3">
<p className="text-sm text-danger-700">{error}</p> <p className="text-sm text-danger-700">{error}</p>
</div> </div>
@@ -311,7 +323,7 @@ const Login = () => {
<form className="mt-8 space-y-6" onSubmit={handleTfaSubmit}> <form className="mt-8 space-y-6" onSubmit={handleTfaSubmit}>
<div className="text-center"> <div className="text-center">
<div className="mx-auto h-12 w-12 flex items-center justify-center rounded-full bg-blue-100"> <div className="mx-auto h-12 w-12 flex items-center justify-center rounded-full bg-blue-100">
<Smartphone className="h-6 w-6 text-blue-600" /> <Smartphone size={24} color="#2563eb" strokeWidth={2} />
</div> </div>
<h3 className="mt-4 text-lg font-medium text-secondary-900"> <h3 className="mt-4 text-lg font-medium text-secondary-900">
Two-Factor Authentication Two-Factor Authentication
@@ -343,7 +355,7 @@ const Login = () => {
{error && ( {error && (
<div className="bg-danger-50 border border-danger-200 rounded-md p-3"> <div className="bg-danger-50 border border-danger-200 rounded-md p-3">
<div className="flex"> <div className="flex">
<AlertCircle className="h-5 w-5 text-danger-400" /> <AlertCircle size={20} color="#dc2626" strokeWidth={2} />
<div className="ml-3"> <div className="ml-3">
<p className="text-sm text-danger-700">{error}</p> <p className="text-sm text-danger-700">{error}</p>
</div> </div>
@@ -370,9 +382,9 @@ const Login = () => {
<button <button
type="button" type="button"
onClick={handleBackToLogin} onClick={handleBackToLogin}
className="group relative w-full flex justify-center py-2 px-4 border border-secondary-300 text-sm font-medium rounded-md text-secondary-700 bg-white hover:bg-secondary-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500" className="group relative w-full flex justify-center py-2 px-4 border border-secondary-300 text-sm font-medium rounded-md text-secondary-700 bg-white hover:bg-secondary-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 items-center gap-2"
> >
<ArrowLeft className="h-4 w-4 mr-2" /> <ArrowLeft size={16} color="#475569" strokeWidth={2} />
Back to Login Back to Login
</button> </button>
</div> </div>