Complete mock secure web application with:
- User registration and login with CSRF protection - SQL injection prevention and XSS protection - Real-time form validation - Password strength requirements - Show/hide password toggle - Modern dark theme UI - Routes for /login, /register, /home, /logout - API endpoints for CRUD operations - Prettier and ESLint configure
This commit is contained in:
82
public/views/home.php
Normal file
82
public/views/home.php
Normal file
@@ -0,0 +1,82 @@
|
||||
<?php
|
||||
if (!isset($_SESSION['user_id'])) {
|
||||
header('Location: /login');
|
||||
exit;
|
||||
}
|
||||
|
||||
$username = $_SESSION['username'] ?? 'User';
|
||||
?>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<link rel="stylesheet" href="./styles/styles.css" />
|
||||
<title>Home - Secure App</title>
|
||||
</head>
|
||||
<body>
|
||||
<div class="bg-gradient"></div>
|
||||
<div class="bg-grid"></div>
|
||||
|
||||
<header class="header">
|
||||
<div class="logo">
|
||||
<span class="logo-icon">🔐</span>
|
||||
<span class="logo-text">SecureVault</span>
|
||||
</div>
|
||||
<a href="/logout" class="btn-logout">
|
||||
<span>Logout</span>
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4" />
|
||||
<polyline points="16,17 21,12 16,7" />
|
||||
<line x1="21" y1="12" x2="9" y2="12" />
|
||||
</svg>
|
||||
</a>
|
||||
</header>
|
||||
|
||||
<main class="main">
|
||||
<div class="hero">
|
||||
<div class="hero-badge">Welcome Back</div>
|
||||
<h1 class="hero-title">
|
||||
Hello, <span class="gradient-text"><?php echo htmlspecialchars($username); ?></span>
|
||||
</h1>
|
||||
<p class="hero-subtitle">Your secure space awaits. Manage your data with confidence.</p>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h2 class="card-title">Submit Data</h2>
|
||||
<p class="card-description">Store your information securely</p>
|
||||
</div>
|
||||
<form id="dataForm" class="data-form">
|
||||
<div class="input-group">
|
||||
<label for="dataInput">Your Data</label>
|
||||
<textarea id="dataInput" name="data" rows="4" placeholder="Enter your data here..." required></textarea>
|
||||
</div>
|
||||
<button type="submit" class="btn-primary">
|
||||
<span>Submit Data</span>
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<line x1="22" y1="2" x2="11" y2="13" />
|
||||
<polygon points="22,2 15,22 11,13 2,9" />
|
||||
</svg>
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h2 class="card-title">Your Data</h2>
|
||||
<p class="card-description">All your stored information</p>
|
||||
</div>
|
||||
<div class="data-list" id="dataList">
|
||||
<p class="empty-state">No data submitted yet</p>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<div id="message"></div>
|
||||
|
||||
<script src="js/request.js"></script>
|
||||
<script src="js/home.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
58
public/views/login.php
Normal file
58
public/views/login.php
Normal file
@@ -0,0 +1,58 @@
|
||||
<?php
|
||||
if (isset($_SESSION['user_id'])) {
|
||||
header('Location: /home');
|
||||
exit;
|
||||
}
|
||||
?>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<link rel="stylesheet" href="./styles/styles.css" />
|
||||
<title>Login - Secure App</title>
|
||||
</head>
|
||||
<body>
|
||||
<div class="bg-gradient"></div>
|
||||
<div class="bg-grid"></div>
|
||||
<div class="container">
|
||||
<h1>Secure Application</h1>
|
||||
|
||||
<h2>Login</h2>
|
||||
<form id="loginForm" novalidate>
|
||||
<div class="form-group">
|
||||
<label for="loginEmail">Email</label>
|
||||
<input type="text" id="loginEmail" name="email" autocomplete="email" />
|
||||
<span class="error-message" id="loginEmailError"></span>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="loginPassword">Password</label>
|
||||
<div class="password-input-wrapper">
|
||||
<input type="password" id="loginPassword" name="password" autocomplete="current-password" />
|
||||
<button type="button" class="toggle-password" data-target="loginPassword">
|
||||
<svg class="eye-open" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path>
|
||||
<circle cx="12" cy="12" r="3"></circle>
|
||||
</svg>
|
||||
<svg class="eye-closed" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="display: none;">
|
||||
<path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24"></path>
|
||||
<line x1="1" y1="1" x2="23" y2="23"></line>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<span class="error-message" id="loginPasswordError"></span>
|
||||
</div>
|
||||
<div class="error-message form-error" id="loginFormError"></div>
|
||||
<button type="submit">Login</button>
|
||||
</form>
|
||||
|
||||
<p class="register-link">
|
||||
Don't have an account? <a href="/register">Register here</a>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<script src="js/request.js"></script>
|
||||
<script src="js/login.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
57
public/views/register.php
Normal file
57
public/views/register.php
Normal file
@@ -0,0 +1,57 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<link rel="stylesheet" href="./styles/styles.css" />
|
||||
<title>Register - Secure App</title>
|
||||
</head>
|
||||
<body>
|
||||
<div class="bg-gradient"></div>
|
||||
<div class="bg-grid"></div>
|
||||
<div class="container">
|
||||
<h1>Secure Application</h1>
|
||||
|
||||
<h2>Register</h2>
|
||||
<form id="registerForm" novalidate>
|
||||
<div class="form-group">
|
||||
<label for="regUsername">Username</label>
|
||||
<input type="text" id="regUsername" name="username" autocomplete="username" />
|
||||
<span class="error-message" id="regUsernameError"></span>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="regEmail">Email</label>
|
||||
<input type="text" id="regEmail" name="email" autocomplete="email" />
|
||||
<span class="error-message" id="regEmailError"></span>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="regPassword">Password</label>
|
||||
<div class="password-input-wrapper">
|
||||
<input type="password" id="regPassword" name="password" autocomplete="new-password" />
|
||||
<button type="button" class="toggle-password" data-target="regPassword">
|
||||
<svg class="eye-open" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path>
|
||||
<circle cx="12" cy="12" r="3"></circle>
|
||||
</svg>
|
||||
<svg class="eye-closed" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="display: none;">
|
||||
<path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24"></path>
|
||||
<line x1="1" y1="1" x2="23" y2="23"></line>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<span class="error-message" id="regPasswordError"></span>
|
||||
</div>
|
||||
<div class="error-message form-error" id="registerFormError"></div>
|
||||
<button type="submit">Register</button>
|
||||
</form>
|
||||
|
||||
<p class="register-link">
|
||||
Already have an account? <a href="/login">Login here</a>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<script src="js/request.js"></script>
|
||||
<script src="js/register.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user