luke-else/WMGZON
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Created login and signup forms

Browse Source
This commit is contained in:
Luke Else 2023-12-31 19:03:29 +00:00
parent 2f63b6e89c
commit 03c7fc6918
9 changed files with 228 additions and 97 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
models/users/user.py
View File

@ -13,10 +13,10 @@ class User(ABC):
self.phone = ""
@abstractmethod
def login():
def login(self):
pass
@abstractmethod
def signup():
def signup(self):
pass

78
static/css/loginform.css Normal file
View File

@ -0,0 +1,78 @@
h2 {
font-weight:300;
text-align:center;
}
#login-form-wrap {
background-color: rgba(255, 255, 255, .15);
backdrop-filter: blur(200px);
width: 35%;
margin: 30px auto;
text-align: center;
padding:20px 0 0 0;
border-radius: 4px;
box-shadow: 0px 30px 50px 0px rgba(0, 0, 0, 0.2);
}
.login-form {
padding:1em 2em;
display: flex;
flex-direction: column;
justify-items: center;
gap: 1em;
}
.login-form input {
width: 100%;
padding: 0 0 0 10px;
margin: 0;
color: var(--fg);
border: 1px solid var(--fg);
box-sizing: border-box;
outline: none;
height: 60px;
line-height: 60px;
border-radius: 4px;
font-style: normal;
font-size: 16px;
appearance: none;
position: relative;
display: inline-block;
background: none;
&:focus {
&:invalid {
color: var(--red);
border-color: var(--red);
}
}
&:valid {
border-color: var(--green);
}
}
.login-form input[type="submit"] {
border: none;
display:block;
background-color: rgba(255, 255, 255, .10);
color: var(--fg);
font-weight: bold;
text-transform:uppercase;
cursor: pointer;
transition: all 0.2s ease;
font-size: 18px;
position: relative;
display: inline-block;
cursor: pointer;
text-align: center;
&:hover {
background-color: rgba(255, 255, 255, .20);
transition: all 0.2s ease;
}
}
#create-account-wrap {
background-color: rgba(255, 255, 255, .15);
color:#dfdfdf;
font-size:14px;
width:100%;
padding:10px 0;
border-radius: 0 0 4px 4px;
}

56
static/css/style.css
View File

@ -39,12 +39,38 @@ nav {
font-size: 120%;
}
form {
nav form {
display: flex;
justify-content: center;
align-items: center;
}
.search-bar {
padding: .25rem;
margin-top: .25rem;
font-size: 1rem;
width: 15rem;
border: none;
transition: width 0.4s ease-in-out;
background-color: var(--fg);
}
@media (min-width:1500px) {
.search-bar:focus {
width: 30rem;
}
}
.search-button {
padding: .25rem .5rem;
margin-top: .25rem;
margin-right: .5rem;
background: #ddd;
font-size: 1rem;
border: none;
background-color: orange;
}
.sticky {
position: -webkit-sticky;
position: sticky;
@ -137,34 +163,6 @@ a:active {
height: 90%;
}
.search-bar {
padding: .25rem;
margin-top: .25rem;
font-size: 1rem;
width: 15rem;
border: none;
transition: width 0.4s ease-in-out;
background-color: var(--fg);
}
@media (min-width:1500px) {
.search-bar:focus {
width: 30rem;
}
}
.search-button {
padding: .25rem .5rem;
margin-top: .25rem;
margin-right: .5rem;
background: #ddd;
font-size: 1rem;
border: none;
background-color: orange;
}
.filter-pane {
padding: .5rem 2rem;
background-color: var(--bg-grad-3);

115
templates/content.html
View File

@ -1,64 +1,63 @@
<div class="container">
<div class="filter-pane">
<form action="" class="filter-items">
<div class="number-plate">
<span class="country-identifier">
<img src="https://mycarneedsa.com/assets/flint/img/flag_europe_gb.png" alt="">
</span>
<span class="vrn">
<input type="text" class="vrn-text" placeholder="YOUR REG" name="vrn">
</span>
<div class="filter-pane">
<form action="" class="filter-items">
<div class="number-plate">
<span class="country-identifier">
<img src="https://mycarneedsa.com/assets/flint/img/flag_europe_gb.png" alt="">
</span>
<span class="vrn">
<input type="text" class="vrn-text" placeholder="YOUR REG" name="vrn">
</span>
</div>
<select class="product-filter not-required" name="filter">
<option value="relevance">Most Relevant</option>
<option value="price-lh">Price: Low -> High</option>
<option value="price-hl">Price: High -> Low</option>
</select>
</form>
</div>
<div class="product-container">
<div class="product">
<div class="product-title">12" Brake Disks</div>
<div class="product-information">
<div class="product-image">
<img src="{{url_for('static', filename='assets/img/products/brake-disks.png')}}" alt="Brake Disks"/>
</div>
<div class="product-details">
<div class="product-price">£64.50</div>
<div class="product-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation</div>
</div>
</div>
<select class="product-filter not-required" name="filter">
<option value="relevance">Most Relevant</option>
<option value="price-lh">Price: Low -> High</option>
<option value="price-hl">Price: High -> Low</option>
</select>
</form>
<div class="product-add-to-cart"></div>
</div>
<div class="product-container">
<div class="product">
<div class="product-title">12" Brake Disks</div>
<div class="product-information">
<div class="product-image">
<img src="{{url_for('static', filename='assets/img/products/brake-disks.png')}}" alt="Brake Disks"/>
</div>
<div class="product-details">
<div class="product-price">£64.50</div>
<div class="product-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation</div>
</div>
<div class="product">
<div class="product-title">12" Brake Disks</div>
<div class="product-information">
<div class="product-image">
<img src="{{url_for('static', filename='assets/img/products/brake-disks.png')}}" alt="Brake Disks"/>
</div>
<div class="product-add-to-cart"></div>
</div>
<div class="product">
<div class="product-title">12" Brake Disks</div>
<div class="product-information">
<div class="product-image">
<img src="{{url_for('static', filename='assets/img/products/brake-disks.png')}}" alt="Brake Disks"/>
</div>
<div class="product-details">
<div class="product-price">£64.50</div>
<div class="product-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation</div>
</div>
<div class="product-details">
<div class="product-price">£64.50</div>
<div class="product-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation</div>
</div>
<div class="product-add-to-cart"></div>
</div>
<div class="product">
<div class="product-title">12" Brake Disks</div>
<div class="product-information">
<div class="product-image">
<img src="{{url_for('static', filename='assets/img/products/brake-disks.png')}}" alt="Brake Disks"/>
</div>
<div class="product-details">
<div class="product-price">£64.50</div>
<div class="product-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation</div>
</div>
</div>
<div class="product-add-to-cart"></div>
</div>
</div>
<div class="product-add-to-cart"></div>
</div>
</div>
<div class="product">
<div class="product-title">12" Brake Disks</div>
<div class="product-information">
<div class="product-image">
<img src="{{url_for('static', filename='assets/img/products/brake-disks.png')}}" alt="Brake Disks"/>
</div>
<div class="product-details">
<div class="product-price">£64.50</div>
<div class="product-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation</div>
</div>
</div>
<div class="product-add-to-cart"></div>
</div>
</div>

2
templates/header.html
View File

@ -4,7 +4,7 @@
<input type="text" name="search" placeholder="Find your favourite products" class="search-bar">
<input type="submit" class="search-button">
</form>
<a href="login.html">Login/Signup</a>
<a href="login">Login/Signup</a>
</nav>
<centre>

5
templates/index.html
View File

@ -9,7 +9,8 @@
</head>
<body>
{% include 'header.html' %}
{% include 'content.html' %}
<div class="container">
{% include content %}
</div>
</body>
</html>

13
templates/login.html Normal file
View File

@ -0,0 +1,13 @@
<link rel="stylesheet" href="{{url_for('static', filename='css/loginform.css')}}" />
<div id="login-form-wrap">
<h2>Login</h2>
<form class="login-form" method="POST">
<input type="text" id="username" name="username" placeholder="Username" required>
<input type="password" id="password" name="password" placeholder="Password" required>
<input type="submit" id="login" value="Login">
</form>
<div id="create-account-wrap">
<p>Not a member? <a href="signup">Create Account</a><p>
</div>
</div>

16
templates/signup.html Normal file
View File

@ -0,0 +1,16 @@
<link rel="stylesheet" href="{{url_for('static', filename='css/loginform.css')}}" />
<div id="login-form-wrap">
<h2>Sign Up</h2>
<form class="login-form" method="POST">
<input type="text" id="firstname" name="firstname" placeholder="First Name" required>
<input type="text" id="lastname" name="lastname" placeholder="Last Name" required>
<input type="text" id="username" name="username" placeholder="Username" required>
<input type="email" id="email" name="email" placeholder="Email Address" required>
<input type="password" id="password" name="password" minlength=8 placeholder="Password" required>
<input type="submit" id="login" value="Login">
</form>
<div id="create-account-wrap">
<p>Already have an account? <a href="login">Login</a><p>
</div>
</div>

36
web/endpoints.py
View File

@ -1,9 +1,35 @@
from . import blueprint
from flask import render_template
from flask import render_template, redirect, request, session
'''
Function responsible for displaying the main landing page of the site
'''
# Function responsible for displaying the main landing page of the site
@blueprint.route('/')
def welcome_page():
return render_template('index.html')
return render_template('index.html', content="content.html")
### LOGIN FUNCTIONALITY
# Function responsible for delivering the Login page for the site
@blueprint.route('/login')
def display_login():
return render_template('index.html', content="login.html")
# Function responsible for handling logins to the site
@blueprint.post('/login')
def login():
print("Tryin to login as " + request.form['username'])
return redirect("/")
### SIGNUP FUNCTIONALITY
# Function responsible for delivering the Signup page for the site
@blueprint.route('/signup')
def display_signup():
return render_template('index.html', content="signup.html")
# Function responsible for handling signups to the site
@blueprint.post('/signup')
def signup():
print("Tryin to signup as " + request.form['username'])
return redirect("/")