Created login and signup forms
This commit is contained in:
parent
2f63b6e89c
commit
03c7fc6918
@ -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
78
static/css/loginform.css
Normal 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;
|
||||
}
|
||||
@ -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);
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<div class="container">
|
||||
<div class="filter-pane">
|
||||
|
||||
<div class="filter-pane">
|
||||
<form action="" class="filter-items">
|
||||
<div class="number-plate">
|
||||
<span class="country-identifier">
|
||||
@ -16,9 +16,9 @@
|
||||
<option value="price-hl">Price: High -> Low</option>
|
||||
</select>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="product-container">
|
||||
<div class="product-container">
|
||||
<div class="product">
|
||||
<div class="product-title">12" Brake Disks</div>
|
||||
<div class="product-information">
|
||||
@ -60,5 +60,4 @@
|
||||
</div>
|
||||
<div class="product-add-to-cart"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -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>
|
||||
|
||||
@ -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
13
templates/login.html
Normal 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
16
templates/signup.html
Normal 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>
|
||||
@ -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("/")
|
||||
|
||||
Loading…
Reference in New Issue
Block a user