mirror of
https://github.com/JGH0/Todo-App-Backend.git
synced 2026-06-03 13:28:47 +02:00
181 lines
7.7 KiB
PHP
181 lines
7.7 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Anmelden / Registrieren - Todo App</title>
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
|
|
<style>
|
|
body {
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
min-height: 100vh;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
|
}
|
|
.auth-container {
|
|
background: white;
|
|
border-radius: 15px;
|
|
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
|
|
overflow: hidden;
|
|
max-width: 450px;
|
|
width: 100%;
|
|
}
|
|
.auth-header {
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
color: white;
|
|
padding: 2rem;
|
|
text-align: center;
|
|
}
|
|
.auth-header h2 {
|
|
margin: 0;
|
|
font-weight: 600;
|
|
}
|
|
.auth-body {
|
|
padding: 2rem;
|
|
}
|
|
.nav-tabs {
|
|
border: none;
|
|
justify-content: center;
|
|
margin-bottom: 2rem;
|
|
}
|
|
.nav-tabs .nav-link {
|
|
border: none;
|
|
color: #6c757d;
|
|
font-weight: 500;
|
|
padding: 0.75rem 2rem;
|
|
border-radius: 25px;
|
|
margin: 0 0.25rem;
|
|
transition: all 0.3s ease;
|
|
}
|
|
.nav-tabs .nav-link.active {
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
color: white;
|
|
box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
|
|
}
|
|
.form-control {
|
|
border-radius: 25px;
|
|
padding: 0.75rem 1.25rem;
|
|
border: 2px solid #e9ecef;
|
|
transition: all 0.3s ease;
|
|
}
|
|
.form-control:focus {
|
|
border-color: #667eea;
|
|
box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25);
|
|
}
|
|
.input-group-text {
|
|
border-radius: 25px 0 0 25px;
|
|
border: 2px solid #e9ecef;
|
|
background: #f8f9fa;
|
|
border-right: none;
|
|
}
|
|
.form-control:focus + .input-group-text {
|
|
border-color: #667eea;
|
|
}
|
|
.btn-primary {
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
border: none;
|
|
border-radius: 25px;
|
|
padding: 0.75rem 2rem;
|
|
font-weight: 600;
|
|
transition: all 0.3s ease;
|
|
width: 100%;
|
|
}
|
|
.btn-primary:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
|
|
}
|
|
.alert {
|
|
border-radius: 10px;
|
|
border: none;
|
|
}
|
|
.tab-content {
|
|
min-height: 300px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="auth-container">
|
|
<div class="auth-header">
|
|
<h2><i class="fas fa-tasks me-2"></i>Todo App</h2>
|
|
<p>Melde dich an oder erstelle ein Konto</p>
|
|
</div>
|
|
<div class="auth-body">
|
|
<?php if (session()->getFlashdata('error')): ?>
|
|
<div class="alert alert-danger">
|
|
<i class="fas fa-exclamation-triangle me-2"></i>
|
|
<?= is_array(session()->getFlashdata('error')) ? implode('<br>', session()->getFlashdata('error')) : session()->getFlashdata('error') ?>
|
|
</div>
|
|
<?php endif; ?>
|
|
|
|
<ul class="nav nav-tabs" id="authTabs" role="tablist">
|
|
<li class="nav-item" role="presentation">
|
|
<button class="nav-link active" id="login-tab" data-bs-toggle="tab" data-bs-target="#login" type="button" role="tab">Anmelden</button>
|
|
</li>
|
|
<li class="nav-item" role="presentation">
|
|
<button class="nav-link" id="register-tab" data-bs-toggle="tab" data-bs-target="#register" type="button" role="tab">Registrieren</button>
|
|
</li>
|
|
</ul>
|
|
|
|
<div class="tab-content" id="authTabsContent">
|
|
<div class="tab-pane fade show active" id="login" role="tabpanel">
|
|
<form action="/auth/attemptLogin" method="post">
|
|
<?= csrf_field() ?>
|
|
<div class="mb-3">
|
|
<label for="login-email" class="form-label">E-Mail-Adresse</label>
|
|
<div class="input-group">
|
|
<span class="input-group-text"><i class="fas fa-envelope"></i></span>
|
|
<input type="email" class="form-control" id="login-email" name="email" placeholder="deine@email.com" required>
|
|
</div>
|
|
</div>
|
|
<div class="mb-4">
|
|
<label for="login-password" class="form-label">Passwort</label>
|
|
<div class="input-group">
|
|
<span class="input-group-text"><i class="fas fa-lock"></i></span>
|
|
<input type="password" class="form-control" id="login-password" name="password" placeholder="Dein Passwort" required>
|
|
</div>
|
|
</div>
|
|
<button type="submit" class="btn btn-primary">
|
|
<i class="fas fa-sign-in-alt me-2"></i>Anmelden
|
|
</button>
|
|
</form>
|
|
</div>
|
|
|
|
<div class="tab-pane fade" id="register" role="tabpanel">
|
|
<form action="/auth/attemptRegister" method="post">
|
|
<?= csrf_field() ?>
|
|
<div class="mb-3">
|
|
<label for="register-name" class="form-label">Name</label>
|
|
<div class="input-group">
|
|
<span class="input-group-text"><i class="fas fa-user"></i></span>
|
|
<input type="text" class="form-control" id="register-name" name="name" placeholder="Dein Name" required>
|
|
</div>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="register-email" class="form-label">E-Mail-Adresse</label>
|
|
<div class="input-group">
|
|
<span class="input-group-text"><i class="fas fa-envelope"></i></span>
|
|
<input type="email" class="form-control" id="register-email" name="email" placeholder="deine@email.com" required>
|
|
</div>
|
|
</div>
|
|
<div class="mb-4">
|
|
<label for="register-password" class="form-label">Passwort</label>
|
|
<div class="input-group">
|
|
<span class="input-group-text"><i class="fas fa-lock"></i></span>
|
|
<input type="password" class="form-control" id="register-password" name="password" placeholder="Wähle ein sicheres Passwort" required>
|
|
</div>
|
|
</div>
|
|
<button type="submit" class="btn btn-primary">
|
|
<i class="fas fa-user-plus me-2"></i>Konto erstellen
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
|
|
</body>
|
|
</html>
|