From 03c7fc6918d30cfcc36a0c7dac3804770b09f0d4 Mon Sep 17 00:00:00 2001 From: Luke Else Date: Sun, 31 Dec 2023 19:03:29 +0000 Subject: [PATCH] Created login and signup forms --- models/users/user.py | 4 +- static/css/loginform.css | 78 ++++++++++++++++++++++++++ static/css/style.css | 56 +++++++++---------- templates/content.html | 115 +++++++++++++++++++-------------------- templates/header.html | 2 +- templates/index.html | 5 +- templates/login.html | 13 +++++ templates/signup.html | 16 ++++++ web/endpoints.py | 36 ++++++++++-- 9 files changed, 228 insertions(+), 97 deletions(-) create mode 100644 static/css/loginform.css create mode 100644 templates/login.html create mode 100644 templates/signup.html diff --git a/models/users/user.py b/models/users/user.py index 95cd0c1..99e361d 100644 --- a/models/users/user.py +++ b/models/users/user.py @@ -13,10 +13,10 @@ class User(ABC): self.phone = "" @abstractmethod - def login(): + def login(self): pass @abstractmethod - def signup(): + def signup(self): pass diff --git a/static/css/loginform.css b/static/css/loginform.css new file mode 100644 index 0000000..44368a9 --- /dev/null +++ b/static/css/loginform.css @@ -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; +} \ No newline at end of file diff --git a/static/css/style.css b/static/css/style.css index 1d9571d..f0bd6c6 100644 --- a/static/css/style.css +++ b/static/css/style.css @@ -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); diff --git a/templates/content.html b/templates/content.html index 45463ca..ba908cd 100644 --- a/templates/content.html +++ b/templates/content.html @@ -1,64 +1,63 @@ -
-
-
-
- - - - - - + +
+ +
+ + + + + + +
+ + + +
+ +
+
+
12" Brake Disks
+
+
+ Brake Disks +
+
+
£64.50
+
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
+
- - - +
-
-
-
12" Brake Disks
-
-
- Brake Disks -
-
-
£64.50
-
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
-
+
+
12" Brake Disks
+
+
+ Brake Disks
-
-
- -
-
12" Brake Disks
-
-
- Brake Disks -
-
-
£64.50
-
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
-
+
+
£64.50
+
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
-
-
- -
-
12" Brake Disks
-
-
- Brake Disks -
-
-
£64.50
-
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
-
-
-
-
+
+
-
\ No newline at end of file + +
+
12" Brake Disks
+
+
+ Brake Disks +
+
+
£64.50
+
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
+
+
+
+
+
diff --git a/templates/header.html b/templates/header.html index 4fe1ebe..70abf42 100644 --- a/templates/header.html +++ b/templates/header.html @@ -4,7 +4,7 @@ - Login/Signup + Login/Signup diff --git a/templates/index.html b/templates/index.html index f164c9d..586c99a 100644 --- a/templates/index.html +++ b/templates/index.html @@ -9,7 +9,8 @@ {% include 'header.html' %} - - {% include 'content.html' %} +
+ {% include content %} +
\ No newline at end of file diff --git a/templates/login.html b/templates/login.html new file mode 100644 index 0000000..fdadf8f --- /dev/null +++ b/templates/login.html @@ -0,0 +1,13 @@ + + +
+

Login

+ +
+

Not a member? Create Account

+

+
diff --git a/templates/signup.html b/templates/signup.html new file mode 100644 index 0000000..7bcb531 --- /dev/null +++ b/templates/signup.html @@ -0,0 +1,16 @@ + + +
+

Sign Up

+ +
+

Already have an account? Login

+

+
diff --git a/web/endpoints.py b/web/endpoints.py index 57f6c6f..5ee6323 100644 --- a/web/endpoints.py +++ b/web/endpoints.py @@ -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("/")