PBBFA23CSE/Bib-Arts
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add login page styles and refactor authentication views

Browse Source 
- Introduced new styles for the login page, enhancing layout and responsiveness.
- Updated the login view to utilize the new styles and improve user feedback for login errors and success messages.
- Removed unused controllers and views related to contact and login functionalities to streamline the codebase.
- Adjusted error message handling in the AuthController for better clarity on password requirements.
This commit is contained in:
Karsten Tlotzek 2025-06-30 14:01:08 +02:00
parent 71d838da0a
commit 6852923db0
12 changed files with 143 additions and 212 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

120
CSS/style.css
View File

@ -126,11 +126,117 @@ a {
border-radius: 10px;
}
.login-container {
position: absolute;
top: 200px;
background-color: #BAC8D4;
width: 900px;
height: 450px;
border-radius: 10px;
/* Login Page Styles */
.login-page-bg {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, #DFF0F2 60%, #BAC8D4 100%);
}
.login-container {
background: #fff;
box-shadow: 0 4px 24px rgba(0,0,0,0.10);
border-radius: 16px;
padding: 40px 32px 32px 32px;
width: 100%;
max-width: 400px;
display: flex;
flex-direction: column;
align-items: center;
}
.login-title {
margin-bottom: 24px;
color: #4d4d4d;
font-size: 2rem;
font-weight: 600;
letter-spacing: 1px;
}
.login-form {
width: 100%;
display: flex;
flex-direction: column;
gap: 18px;
}
.login-field {
display: flex;
flex-direction: column;
gap: 6px;
}
.login-field label {
font-weight: 500;
color: #4d4d4d;
}
.login-field input {
padding: 10px 12px;
border: 1px solid #BAC8D4;
border-radius: 6px;
font-size: 1rem;
background: #F7FAFC;
transition: border 0.2s;
}
.login-field input:focus {
border: 1.5px solid #09add0;
outline: none;
}
.login-btn {
margin-top: 10px;
padding: 12px 0;
background: #09add0;
color: #fff;
border: none;
border-radius: 6px;
font-size: 1.1rem;
font-weight: 600;
cursor: pointer;
transition: background 0.2s;
}
.login-btn:hover {
background: #007b9e;
}
.login-error {
background: #ffe0e0;
color: #b30000;
border: 1px solid #ffb3b3;
border-radius: 6px;
padding: 10px 16px;
margin-bottom: 18px;
width: 100%;
text-align: center;
}
.login-success {
background: #e0ffe6;
color: #006633;
border: 1px solid #b3ffd1;
border-radius: 6px;
padding: 10px 16px;
margin-bottom: 18px;
width: 100%;
text-align: center;
}
.login-link {
display: inline-block;
margin-top: 10px;
color: #09add0;
font-weight: 500;
text-decoration: underline;
}
@media (max-width: 600px) {
.login-container {
padding: 24px 8px;
max-width: 95vw;
}
}

2
Controller/AuthController.php
View File

@ -76,7 +76,7 @@ class AuthController
}
if ($this->pwRequirementCheck($data['password'])) {
$errors
$errors['password'] = "Passwort muss mindestens 8 Zeichen lang sein und mindestens ein Großbuchstabe, ein Kleinbuchstabe, eine Zahl und ein Sonderzeichen enthalten.";
}
if (empty($errors)) {

53
Controller/ContactController.php
View File

@ -1,53 +0,0 @@
<?php
namespace Blog\Controller;
use Blog\Model\ContactModel;
class ContactController
{
protected $view;
private $db;
private $validData = array();
private $errors = array();
private $labels = array("name" => "Name", "email" => "E-Mail-Adresse", "content" => "Nachricht");
public function __construct($view) {
$this->db = new ContactModel();
$this->view = $view;
}
public function showContactForm() {
$this->view->setVars([
'labels' => $this->labels,
'validData' => $this->validData,
'errors' => $this->errors
]);
}
public function showConfirmation() {
}
public function validateForm() {
foreach ($this->labels as $index => $value) {
if (!isset($_POST[$index]) || empty($_POST[$index])) {
$this->errors[$index] = "Bitte " . $value . " angeben";
} else {
$this->validData[$index] = $_POST[$index];
}
}
if (count($this->errors) > 0) {
$this->view->setDoMethodName("showContactForm");
$this->showContactForm();
} else {
if ($this->db->writeContactData($this->validData)) {
$this->view->setDoMethodName("showConfirmation");
$this->showConfirmation();
}
}
}
}
?>

10
Controller/LoginController.php
View File

@ -1,10 +0,0 @@
<?php
namespace Blog\Controller;
class LoginController {
function showLoginPage()
{
}
}

18
Controller/WelcomeController.php
View File

@ -1,18 +0,0 @@
<?php
namespace Blog\Controller;
class WelcomeController
{
function showWelcome() {
}
function showProjects() {
}
function showTutorials() {
}
}

54
Views/Auth/login.phtml
View File

@ -2,32 +2,34 @@
include dirname(__DIR__).'/header.phtml';
?>
<?php if (!empty($errors['login'])): ?>
<div class="error">
<?php echo htmlspecialchars($errors['login']); ?>
<div class="login-page-bg">
<div class="login-container">
<h2 class="login-title">Login</h2>
<?php if (!empty($errors['login'])): ?>
<div class="login-error">
<?php echo htmlspecialchars($errors['login']); ?>
</div>
<?php elseif (!empty($loginSuccess)): ?>
<div class="login-success">
<p>Login f&uuml;r Benutzer <?php echo htmlspecialchars($_SESSION["user"]); ?> erfolgreich</p>
<a class="login-link" href="?controller=Welcome&do=showWelcome">Weiter</a>
</div>
<?php else: ?>
<form method="post" class="login-form">
<input type="hidden" name="controller" value="Auth">
<input type="hidden" name="do" value="login">
<div class="login-field">
<label for="email">E-Mail:</label>
<input type="email" name="email" id="email" value="<?= htmlspecialchars($validData['email'] ?? '') ?>">
</div>
<div class="login-field">
<label for="password">Passwort:</label>
<input type="password" name="password" id="password">
</div>
<button class="login-btn" type="submit">Einloggen</button>
</form>
<?php endif; ?>
</div>
<?php elseif (!empty($loginSuccess)): ?>
<div class="msg">
<p>Login für Benutzer <?php echo htmlspecialchars($_SESSION["user"]); ?> erfolgreich</p>
<a href="?controller=Welcome&do=showWelcome">Weiter</a>
</div>
<?php else: ?>
<!-- Formular anzeigen -->
<form method="post">
<input type="hidden" name="controller" value="Auth">
<input type="hidden" name="do" value="login">
<label for="email">E-Mail:</label>
<input type="email" name="email" id="email" value="<?= htmlspecialchars($validData['email'] ?? '') ?>">
<label for="password">Passwort:</label>
<input type="password" name="password" id="password">
<button type="submit">Einloggen</button>
</form>
<?php endif; ?>
</div>
<?php include dirname(__DIR__).'/footer.phtml'; ?>

2
Views/Login/showLoginPage.phtml → Views/Auth/showAuthForm.phtml
View File

@ -1,6 +1,7 @@
<?php
include dirname(__DIR__) . '/header.phtml';
?>
<div class="inhalt">
<div class="login-container">
<h1>Anmelden</h1>
@ -19,6 +20,7 @@ include dirname(__DIR__) . '/header.phtml';
<a class="link-konto-erstellen">Konto erstellen</a>
</div>
</div>
<?php
include dirname(__DIR__) . '/footer.phtml';
?>

10
Views/Contact/showConfirmation.phtml
View File

@ -1,10 +0,0 @@
<?php
include dirname(__DIR__).'/header.phtml';
?>
<div class="msg">
<p>Ihre Anfrage wurde erfolgreich versendet.</p>
<a href="?controller=Welcome&do=showWelcome">Weiter</a>
</div>
<?php
include dirname(__DIR__).'/footer.phtml';
?>

34
Views/Contact/showContactForm.phtml
View File

@ -1,34 +0,0 @@
<?php
include dirname(__DIR__).'/header.phtml';
?>
<h2>Ihre Anfrage an uns</h2>
<form method="post">
<?php foreach ($labels as $index => $value) {
echo '<label for="' . $index . '">' . $value . '</label>';
if ($index == "content") {
echo "<textarea id=\"$index\" name=\"$index\" >";
if (isset($validData[$index])) { echo $validData[$index]; }
echo "</textarea><br>";
} else {
echo '<input type="text" name="' . $index . '" value="' . (isset($validData[$index]) ? $validData[$index] : '') . '"><br>';
}
if (isset($errors[$index])) {
echo '<label class="errorMsg">' . $errors[$index] . '</label><br>';
}
}
?>
<input type="hidden" name="controller" value="contact">
<input type="hidden" name="do" value="validateForm">
<input type="submit" name="submit" value="Absenden"></form>
<?php include dirname(__DIR__).'/footer.phtml'; ?>

21
Views/Welcome/showProjects.phtml
View File

@ -1,21 +0,0 @@
<?php
include dirname(__DIR__).'/header.phtml';
?>
<article>
<h2>Virtuelles Museum</h2>
<span class="articleInfo">John Doe | 12.08.2018 um 10:18 Uhr</span>
<p>
<img class="articleImg" src="images/museum.jpg" alt="my Oculus Rift">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Curabitur pretium tincidunt lacus. Nulla gravida orci a odio.
</p>
<p>
Proin nonummy, lacus eget pulvinar lacinia, pede felis dignissim leo, vitae tristique magna lacus sit amet eros. Nullam ornare. Praesent odio ligula, dapibus sed, tincidunt eget, dictum ac, nibh. Nam quis lacus. Nunc eleifend molestie velit. Morbi lobortis quam eu velit. Donec euismod vestibulum massa. Donec non lectus. Aliquam commodo lacus sit amet nulla. Cras dignissim elit et augue. Nullam non diam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In hac habitasse platea dictumst. Aenean vestibulum. Sed lobortis elit quis lectus. Nunc sed lacus at augue bibendum dapibus.
</p>
<p>
Aliquam vehicula sem ut pede. Cras purus lectus, egestas eu, vehicula at, imperdiet sed, nibh. Morbi consectetuer luctus felis. Donec vitae nisi. Aliquam tincidunt feugiat elit. Duis sed elit ut turpis ullamcorper feugiat. Praesent pretium, mauris sed fermentum hendrerit, nulla lorem iaculis magna, pulvinar scelerisque urna tellus a justo. Suspendisse pulvinar massa in metus. Duis quis quam. Proin justo. Curabitur ac sapien. Nam erat.
Praesent ut quam.
</p>
</article>
<?php
include dirname(__DIR__).'/footer.phtml';
?>

21
Views/Welcome/showTutorials.phtml
View File

@ -1,21 +0,0 @@
<?php
include dirname(__DIR__).'/header.phtml';
?>
<article>
<h2>Implement Controller</h2>
<span class="articleInfo">John Doe | 18.07.2018 um 18:43 Uhr</span>
<p>
<img class="articleImg" src="images/controller.jpg" alt="my Oculus Rift">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Curabitur pretium tincidunt lacus. Nulla gravida orci a odio.
</p>
<p>
Proin nonummy, lacus eget pulvinar lacinia, pede felis dignissim leo, vitae tristique magna lacus sit amet eros. Nullam ornare. Praesent odio ligula, dapibus sed, tincidunt eget, dictum ac, nibh. Nam quis lacus. Nunc eleifend molestie velit. Morbi lobortis quam eu velit. Donec euismod vestibulum massa. Donec non lectus. Aliquam commodo lacus sit amet nulla. Cras dignissim elit et augue. Nullam non diam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In hac habitasse platea dictumst. Aenean vestibulum. Sed lobortis elit quis lectus. Nunc sed lacus at augue bibendum dapibus.
</p>
<p>
Aliquam vehicula sem ut pede. Cras purus lectus, egestas eu, vehicula at, imperdiet sed, nibh. Morbi consectetuer luctus felis. Donec vitae nisi. Aliquam tincidunt feugiat elit. Duis sed elit ut turpis ullamcorper feugiat. Praesent pretium, mauris sed fermentum hendrerit, nulla lorem iaculis magna, pulvinar scelerisque urna tellus a justo. Suspendisse pulvinar massa in metus. Duis quis quam. Proin justo. Curabitur ac sapien. Nam erat.
Praesent ut quam.
</p>
</article>
<?php
include dirname(__DIR__).'/footer.phtml';
?>

12
Views/Welcome/showWelcome.phtml
View File

@ -1,12 +0,0 @@
<?php
include dirname(__DIR__).'/header.phtml';
?>
<div class="inhalt">
<div class="container-welcome-inhalt">
<div class="beispiel-austellung1-img"></div>
<div class="beispiel-austellung2-img"></div>
</div>
</div>
<?php
include dirname(__DIR__).'/footer.phtml';
?>