JUSN/tickte-system
0
0 Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

design update

Browse Source
This commit is contained in:
knso committed 2025-12-30 01:27:00 +01:00
1 parent 3f8fce3c02
commit 5717612db5
51 files changed
+959 -793
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/pages/LoginPage.jsx
+88 -92
View File
@@ -1,16 +1,15 @@
import { useState } from 'react'
import { useNavigate } from 'react-router-dom'
import { useAuth } from '../context/AuthContext'
import LetterGlitch from '../components/LetterGlitch'
export default function LoginPage() {
const [email, setEmail] = useState('')
const [password, setPassword] = useState('')
const [name, setName] = useState('')
const [error, setError] = useState('')
const [loading, setLoading] = useState(false)
const [isRegistering, setIsRegistering] = useState(false)
const { login, register } = useAuth()
const { login } = useAuth()
const navigate = useNavigate()
const handleSubmit = async (e) => {
@@ -19,9 +18,7 @@ export default function LoginPage() {
setLoading(true)
try {
const result = isRegistering
? await register(email, password, name || email.split('@')[0])
: await login(email, password)
const result = await login(email, password)
if (result.success) {
navigate('/tickets')
@@ -31,12 +28,6 @@ export default function LoginPage() {
if (errorMessage.includes('Invalid credentials') || errorMessage.includes('401')) {
errorMessage = 'Ungültige Email oder Passwort. Bitte überprüfe deine Eingaben.'
} else if (errorMessage.includes('User already exists')) {
errorMessage = 'Ein Benutzer mit dieser Email existiert bereits. Bitte logge dich ein.'
setIsRegistering(false)
} else if (errorMessage.includes('User with the same email already exists')) {
errorMessage = 'Diese Email ist bereits registriert. Bitte logge dich ein.'
setIsRegistering(false)
} else if (errorMessage.includes('Email/Password') || errorMessage.includes('auth')) {
errorMessage = 'Email/Password Authentifizierung ist möglicherweise nicht aktiviert. Bitte überprüfe deine Appwrite-Konfiguration.'
}
@@ -52,95 +43,100 @@ export default function LoginPage() {
return (
<div style={{
position: 'relative',
minHeight: '100vh',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
background: '#f1f1f1'
width: '100%',
overflow: 'hidden'
}}>
<div className="card" style={{ width: '400px' }}>
<div className="card-header text-center">
<h2>Webklar WOMS 2.0</h2>
</div>
<div className="card-body">
<form onSubmit={handleSubmit}>
{error && (
<div className="bg-red text-white p-1 mb-2" style={{ borderRadius: '4px' }}>
{error}
</div>
)}
{isRegistering && (
{/* LetterGlitch Hintergrund */}
<div style={{
position: 'absolute',
top: 0,
left: 0,
width: '100%',
height: '100%',
zIndex: 0
}}>
<LetterGlitch
glitchSpeed={50}
centerVignette={true}
outerVignette={false}
smooth={true}
/>
</div>
{/* Login-Formular */}
<div style={{
position: 'relative',
zIndex: 1,
minHeight: '100vh',
display: 'flex',
alignItems: 'center',
justifyContent: 'center'
}}>
<div style={{
width: '400px',
boxShadow: '0 10px 40px rgba(0,0,0,0.5)',
backdropFilter: 'blur(10px)',
WebkitBackdropFilter: 'blur(10px)',
background: 'transparent',
border: '1px solid rgba(255, 255, 255, 0.2)',
borderRadius: '8px',
marginBottom: '16px'
}}>
<div style={{
padding: '12px 16px',
background: 'transparent',
color: '#fff',
fontWeight: 'bold',
borderBottom: '1px solid rgba(255, 255, 255, 0.2)',
textAlign: 'center'
}}>
<h2>Webklar WOMS 2.0</h2>
</div>
<div style={{ padding: '16px', color: '#e2e8f0' }}>
<form onSubmit={handleSubmit}>
{error && (
<div className="bg-red text-white p-1 mb-2" style={{ borderRadius: '4px' }}>
{error}
</div>
)}
<div className="form-group">
<label className="form-label">Name (optional)</label>
<label className="form-label">Email</label>
<input
type="text"
type="email"
className="form-control"
value={name}
onChange={(e) => setName(e.target.value)}
placeholder="Dein Name"
value={email}
onChange={(e) => setEmail(e.target.value)}
required
placeholder="deine@email.com"
/>
</div>
)}
<div className="form-group">
<label className="form-label">Email</label>
<input
type="email"
className="form-control"
value={email}
onChange={(e) => setEmail(e.target.value)}
required
placeholder="deine@email.com"
/>
</div>
<div className="form-group">
<label className="form-label">Password</label>
<input
type="password"
className="form-control"
value={password}
onChange={(e) => setPassword(e.target.value)}
required
placeholder="••••••••"
minLength={8}
/>
</div>
<div className="form-group">
<label className="form-label">Password</label>
<input
type="password"
className="form-control"
value={password}
onChange={(e) => setPassword(e.target.value)}
required
placeholder="••••••••"
minLength={8}
/>
</div>
<button
type="submit"
className="btn btn-green"
style={{ width: '100%', marginBottom: '10px' }}
disabled={loading}
>
{loading
? (isRegistering ? 'Registrierung läuft...' : 'Login läuft...')
: (isRegistering ? 'Registrieren' : 'Login')
}
</button>
<button
type="button"
className="btn"
style={{
width: '100%',
background: 'transparent',
border: '1px solid #ccc',
color: '#333'
}}
onClick={() => {
setIsRegistering(!isRegistering)
setError('')
}}
disabled={loading}
>
{isRegistering
? 'Bereits registriert? Hier einloggen'
: 'Noch kein Account? Hier registrieren'
}
</button>
</form>
<button
type="submit"
className="btn btn-green"
style={{ width: '100%' }}
disabled={loading}
>
{loading ? 'Login läuft...' : 'Login'}
</button>
</form>
</div>
</div>
</div>
</div>