fitel17112/air-bookings
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

008

Browse Source
This commit is contained in:
fitel17112
2025-03-11 14:11:32 +05:30
parent a1c43ec977
commit d8dd7cc122
6 changed files with 305 additions and 209 deletions
Download Patch File Download Diff File Expand all files Collapse all files

0
src/templates/first_name.html
View File

219
src/templates/login.html Normal file
View File

@@ -0,0 +1,219 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>User Login</title>
@css '/static/css/bootstrap.css'
<style>
/* Reset and Base Styles */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
line-height: 1.6;
background-color: #f4f4f4;
color: #333;
}
/* Container */
.container {
width: 90%;
max-width: 600px;
margin: 0 auto;
padding: 20px;
}
/* Header */
.header {
background-color: #2c3e50;
color: white;
text-align: center;
padding: 20px;
border-radius: 8px 8px 0 0;
}
.header h1 {
margin-bottom: 10px;
}
/* Login Form */
.login-form {
background-color: white;
border-radius: 0 0 8px 8px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
padding: 30px;
}
.form-group {
margin-bottom: 20px;
}
.form-group label {
display: block;
margin-bottom: 5px;
font-weight: bold;
}
.form-group input {
width: 100%;
padding: 10px;
border: 1px solid #ddd;
border-radius: 4px;
}
.login-btn {
width: 100%;
padding: 12px;
background-color: #3498db;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
transition: background-color 0.3s ease;
}
.login-btn:hover {
background-color: #2980b9;
}
/* Responsive Design */
@media (max-width: 600px) {
.form-row {
flex-direction: column;
}
.form-row .form-group {
margin-right: 0;
margin-bottom: 15px;
}
}
/* Error Handling */
.error-message {
color: #e74c3c;
font-size: 0.9em;
margin-top: 5px;
display: none;
}
/* Field error styling */
.field-error {
color: #e74c3c;
font-size: 0.9em;
font-weight: normal;
margin-left: 5px;
}
/* Style for input fields with errors */
.input-error {
border: 1px solid #e74c3c !important;
background-color: #fff8f8;
}
/* Spinner styling */
.spinner {
text-align: center;
padding: 10px;
color: #666;
}
.htmx-request .htmx-indicator {
display: block !important;
}
/* Alert styling */
.alert {
padding: 15px;
margin-bottom: 20px;
border-radius: 4px;
}
.alert-danger {
background-color: #f8d7da;
color: #721c24;
border: 1px solid #f5c6cb;
}
.alert-success {
background-color: #d4edda;
color: #155724;
border: 1px solid #c3e6cb;
}
</style>
@js 'https://unpkg.com/htmx.org@2.0.4'
</head>
<body>
<div class="container">
<header class="header">
<h1>User Login</h1>
<p>Sign in to your account to book flights</p>
</header>
<section class="login-form">
<form
id="user-login-form"
hx-trigger="submit"
hx-post="/controller/user"
hx-target="#form-response"
hx-swap="innerHTML"
hx-indicator="#form-spinner"
>
<!-- Response container at the top of the form -->
<div id="form-response"></div>
<!-- Loading indicator -->
<div
id="form-spinner"
class="htmx-indicator"
style="display: none"
>
<div class="spinner">Processing...</div>
</div>
<div class="form-group">
<label for="email">Email Address <span class="field-error email-error"></span></label>
<input
type="email"
id="email"
name="email"
placeholder="Enter your email"
/>
<div class="error-message" id="email-error">
Please enter a valid email address
</div>
</div>
<div class="form-group">
<label for="password">Password <span class="field-error password-error"></span></label>
<input
type="password"
id="password"
name="password"
placeholder="Enter your password"
/>
<div class="error-message" id="password-error">
Please enter your password
</div>
</div>
<div class="form-group">
<button type="submit" class="login-btn">
Sign In
</button>
</div>
<div class="form-group text-center" style="margin-top: 20px;">
<p>Don't have an account? <a href="/signup">Sign up now</a></p>
</div>
</form>
</section>
</div>
</body>
@js '/static/js/bootstrap.js'
</html>

202
src/templates/signup_form.html
View File

@@ -1,202 +0,0 @@
<form
id="user-registration-form"
hx-trigger="submit"
hx-post="/controller/user/create"
hx-target="#form-response"
hx-swap="innerHTML"
hx-indicator="#form-spinner"
>
<!-- Add a response container at the top of the form -->
<div id="form-response"></div>
<!-- Add a loading indicator -->
<div id="form-spinner" class="htmx-indicator" style="display: none;">
<div class="spinner">Processing...</div>
</div>
<div class="form-row">
<div class="form-group">
<label for="first-name">First Name <span class="field-error first_name-error"></span></label>
<input
type="text"
id="first-name"
name="first_name"
placeholder="Enter your first name"
required
/>
<div class="error-message" id="first-name-error">
Please enter a valid first name
</div>
</div>
<div class="form-group">
<label for="last-name">Last Name <span class="field-error last_name-error"></span></label>
<input
type="text"
id="last-name"
name="last_name"
placeholder="Enter your last name"
required
/>
<div class="error-message" id="last-name-error">
Please enter a valid last name
</div>
</div>
</div>
<div class="form-group">
<label for="email">Email Address <span class="field-error email-error"></span></label>
<input
type="email"
id="email"
name="email"
placeholder="Enter your email"
required
/>
<div class="error-message" id="email-error">
Please enter a valid email address
</div>
</div>
<div class="form-group">
<label for="password">Password <span class="field-error password-error"></span></label>
<input
type="password"
id="password"
name="password"
placeholder="Create a strong password"
required
/>
<div class="error-message" id="password-error">
Password must be at least 8 characters long
</div>
</div>
<div class="form-row">
<!-- <div class="form-group">
<label for="date-of-birth">Date of Birth</label>
<input
type="date"
id="date-of-birth"
name="date-of-birth"
required
/>
<div class="error-message" id="dob-error">
You must be at least 18 years old
</div>
</div> -->
<div class="form-group">
<label>Gender</label>
<div class="gender-group">
<div class="form-group">
<input
type="radio"
id="male"
name="gender"
value="male"
required
/>
<label for="male">Male</label>
</div>
<div class="form-group">
<input
type="radio"
id="female"
name="gender"
value="female"
required
/>
<label for="female">Female</label>
</div>
<div class="form-group">
<input
type="radio"
id="other"
name="gender"
value="other"
required
/>
<label for="other">Other</label>
</div>
</div>
</div>
</div>
<!-- <div class="form-group">
<label for="country">Country</label>
<select id="country" name="country" required>
<option value="">Select your country</option>
<option value="us">United States</option>
<option value="ca">Canada</option>
<option value="uk">United Kingdom</option>
<option value="au">Australia</option>
<option value="other">Other</option>
</select>
<div class="error-message" id="country-error">
Please select a country
</div>
</div> -->
<div class="form-group">
<button type="submit" class="register-btn">Create Account</button>
</div>
</form>
<style>
/* Add styles for the alerts and spinner */
.alert {
padding: 15px;
margin-bottom: 20px;
border-radius: 4px;
}
.alert-danger {
background-color: #f8d7da;
color: #721c24;
border: 1px solid #f5c6cb;
}
.alert-success {
background-color: #d4edda;
color: #155724;
border: 1px solid #c3e6cb;
}
/* Field error styling */
.field-error {
color: #e74c3c;
font-size: 0.9em;
font-weight: normal;
}
/* Style for input fields with errors */
.input-error {
border: 1px solid #e74c3c !important;
background-color: #fff8f8;
}
.btn {
display: inline-block;
padding: 8px 16px;
text-decoration: none;
border-radius: 4px;
}
.btn-primary {
background-color: #3498db;
color: white;
}
.mt-3 {
margin-top: 15px;
}
.spinner {
text-align: center;
padding: 10px;
color: #666;
}
.htmx-request .htmx-indicator {
display: block !important;
}
</style>

76
src/user_controller.v
View File

@@ -24,20 +24,21 @@ pub fn (mut app App) controller_create_user(mut ctx Context, first_name string,
// If any fields are empty, return field-specific error messages
if empty_fields.len > 0 {
mut response := '<script>'
// Reset all field errors first
response += 'document.querySelectorAll(".field-error").forEach(el => el.textContent = "");'
response += 'document.querySelectorAll("input").forEach(el => el.classList.remove("input-error"));'
// Set error for each empty field
for field in empty_fields {
response += 'document.querySelector(".' + field + '-error").textContent = "(Required)";'
response += 'document.querySelector("[name=' + field + ']").classList.add("input-error");'
response += 'document.querySelector("[name=' + field +
']").classList.add("input-error");'
}
response += '</script>'
response += '<div class="alert alert-danger">Please fill in all required fields</div>'
return ctx.html(response)
}
@@ -46,13 +47,74 @@ pub fn (mut app App) controller_create_user(mut ctx Context, first_name string,
error_html := '<div class="alert alert-danger">Error: ${err}</div>'
return ctx.html(error_html)
}
// Return success message with HTML
success_html := '<div class="alert alert-success">
<h4>User created successfully!</h4>
<p>Welcome, ${first_name}! Your account has been created.</p>
<a href="/login" class="btn btn-primary mt-3">Login Now</a>
</div>'
return ctx.html(success_html)
}
@['/controller/user'; post]
pub fn (app &App) controller_get_user(mut ctx Context, email string, password string) veb.Result {
// Create a map of field names and their values
fields := {
'email': email
'password': password
}
// Check for empty fields
mut empty_fields := []string{}
for field_name, value in fields {
if value == '' {
empty_fields << field_name
}
}
// If any fields are empty, return field-specific error messages
if empty_fields.len > 0 {
mut response := '<script>'
// Reset all field errors first
response += 'document.querySelectorAll(".field-error").forEach(el => el.textContent = "");'
response += 'document.querySelectorAll("input").forEach(el => el.classList.remove("input-error"));'
// Set error for each empty field
for field in empty_fields {
response += 'document.querySelector(".' + field + '-error").textContent = "(Required)";'
response += 'document.querySelector("[name=' + field +
']").classList.add("input-error");'
}
response += '</script>'
response += '<div class="alert alert-danger">Please fill in all required fields</div>'
return ctx.html(response)
}
// Try to find the user
user := app.service_find_user_by_email(email, password) or {
error_html := '<div class="alert alert-danger">Invalid email or password</div>'
return ctx.html(error_html)
}
// Return success message with HTML and redirect
success_html := '<div class="alert alert-success">
<h4>Login successful!</h4>
<p>Welcome back, ${user.first_name}!</p>
</div>
<script>
setTimeout(function() {
window.location.href = "/";
}, 2000);
</script>'
return ctx.html(success_html)
}
@['/controller/user/update'; post]
pub fn (app &App) controller_update_user(mut ctx Context, first_name string, last_name string, password string) veb.Result {
}

13
src/user_service.v
View File

@@ -22,3 +22,16 @@ fn (app &App) service_add_user(first_name string, last_name string, email string
return error(insert_error)
}
}
fn (app &App) service_find_user_by_email(email string, password string) !User {
mut user := sql app.db {
select from User where email == email
}!
if user[0].id == 0 {
return error('User not found')
}
if !auth.compare_password_with_hash(password, user[0].salt, user[0].password) {
return error('Invalid password')
}
return user[0]
}

4
src/user_view.v
View File

@@ -5,3 +5,7 @@ import veb
pub fn (app &App) signup(mut ctx Context) veb.Result {
return $veb.html()
}
pub fn (app &App) login(mut ctx Context) veb.Result {
return $veb.html()
}