lukas/uis-cloud-computing
1
0
Fork 0
mirror of https://github.com/dat515-2025/Group-8.git synced 2026-03-23 07:29:39 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat(frontend): improved and centered UI

Browse Source
This commit is contained in:
ribardej
2025-10-15 10:06:22 +02:00
parent 89d032dd69
commit eb087e457c
5 changed files with 127 additions and 152 deletions
Download Patch File Download Diff File Expand all files Collapse all files

78
7project/frontend/src/pages/LoginRegisterPage.tsx
View File

@@ -1,6 +1,7 @@
import { useState } from 'react';
import { useState, useEffect } from 'react';
import { login, register } from '../api';
export default function LoginRegisterPage({ onLoggedIn }: { onLoggedIn: () => void }) {
const [mode, setMode] = useState<'login' | 'register'>('login');
const [email, setEmail] = useState('');
@@ -31,41 +32,54 @@ export default function LoginRegisterPage({ onLoggedIn }: { onLoggedIn: () => vo
}
}
// Add this useEffect hook
useEffect(() => {
// When the component mounts, add a class to the body
document.body.classList.add('auth-page');
// When the component unmounts, remove the class
return () => {
document.body.classList.remove('auth-page');
};
}, []); // The empty array ensures this runs only once
// The JSX no longer needs the wrapper div
return (
<div style={{ maxWidth: 420, margin: '4rem auto', padding: 24, border: '1px solid #ddd', borderRadius: 8 }}>
<h2 style={{ marginTop: 0 }}>{mode === 'login' ? 'Login' : 'Register'}</h2>
<div style={{ marginBottom: 16 }}>
<button onClick={() => setMode('login')} disabled={mode === 'login'}>Login</button>
<button onClick={() => setMode('register')} disabled={mode === 'register'} style={{ marginLeft: 8 }}>Register</button>
<div className="card" style={{ width: 420 }}>
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 12 }}>
<h2 style={{ margin: 0 }}>{mode === 'login' ? 'Welcome back' : 'Create your account'}</h2>
<div className="segmented">
<button className={mode === 'login' ? 'active' : ''} type="button" onClick={() => setMode('login')}>Login</button>
<button className={mode === 'register' ? 'active' : ''} type="button" onClick={() => setMode('register')}>Register</button>
</div>
</div>
<form onSubmit={handleSubmit}>
<div style={{ marginBottom: 12 }}>
<label>Email<br />
<input type="email" required value={email} onChange={(e) => setEmail(e.target.value)} style={{ width: '100%' }} />
</label>
</div>
<div style={{ marginBottom: 12 }}>
<label>Password<br />
<input type="password" required value={password} onChange={(e) => setPassword(e.target.value)} style={{ width: '100%' }} />
</label>
</div>
{mode === 'register' && (
<>
<div style={{ marginBottom: 12 }}>
<label>First name (optional)<br />
<input type="text" value={firstName} onChange={(e) => setFirstName(e.target.value)} style={{ width: '100%' }} />
</label>
<form onSubmit={handleSubmit} className="space-y">
<div>
<label className="muted">Email</label>
<input className="input" type="email" required value={email} onChange={(e) => setEmail(e.target.value)} />
</div>
<div>
<label className="muted">Password</label>
<input className="input" type="password" required value={password} onChange={(e) => setPassword(e.target.value)} />
</div>
{mode === 'register' && (
<div className="form-row">
<div>
<label className="muted">First name (optional)</label>
<input className="input" type="text" value={firstName} onChange={(e) => setFirstName(e.target.value)} />
</div>
<div>
<label className="muted">Last name (optional)</label>
<input className="input" type="text" value={lastName} onChange={(e) => setLastName(e.target.value)} />
</div>
</div>
<div style={{ marginBottom: 12 }}>
<label>Last name (optional)<br />
<input type="text" value={lastName} onChange={(e) => setLastName(e.target.value)} style={{ width: '100%' }} />
</label>
</div>
</>
)}
{error && <div style={{ color: 'crimson', marginBottom: 12 }}>{error}</div>}
<button type="submit" disabled={loading}>{loading ? 'Please wait…' : (mode === 'login' ? 'Login' : 'Register')}</button>
)}
{error && <div style={{ color: 'crimson' }}>{error}</div>}
<div className="actions" style={{ justifyContent: 'flex-end' }}>
<button className="btn primary" type="submit" disabled={loading}>{loading ? 'Please wait…' : (mode === 'login' ? 'Login' : 'Register')}</button>
</div>
</form>
</div>
);
}