refactored frontend login and register pages

Morgan-Sell · Nov 13, 2024 · 1181ad4 · 1181ad4
1 parent 2e9b6a9
commit 1181ad4
Show file tree

Hide file tree

Showing 6 changed files with 69 additions and 51 deletions.
diff --git a/src/forms/user_forms.py b/src/forms/user_forms.py
@@ -10,7 +10,7 @@ class LogInForm(FlaskForm):
     submit = SubmitField("Submit")
 
 
-class CreateUserForm(FlaskForm):
+class RegisterForm(FlaskForm):
 
     username = StringField(
         "Username",

diff --git a/src/main.py b/src/main.py
@@ -1,7 +1,7 @@
 from flask import Flask, flash, redirect, render_template, request, url_for
 from flask_login import LoginManager, login_required, login_user
 
-from src.forms.user_forms import CreateUserForm, LogInForm
+from src.forms.user_forms import RegisterForm, LogInForm
 from src.models import Base, SessionLocal, Users, engine
 from src.security import generate_password_hash
 
@@ -34,12 +34,13 @@ def login():
 
         user = Users.query.filter_by(username=username).first()
 
-        if user is not None and user.check_password(password, user.password_hash):
+        if user is None:
+            flash("That email does not exist. Please try again.", "danger")
+        elif not user.check_password(password, user.password_hash):
+            flash("Invalid password. Please try again.", "danger")
+        else:
             login_user(user)
-            flash("Logged in successfully!", "success")
             return redirect(url_for("dashboard"))
-        else:
-            flash("Invalid username or password", "danger")
 
     return render_template("login.html", form=form)
 
@@ -52,7 +53,7 @@ def dashboard():
 
 @app.route("/register", methods=["GET", "POST"])
 def register():
-    form = CreateUserForm()
+    form = RegisterForm()
     if form.validate_on_submit():
         username = form.username.data
         password = form.password.data

diff --git a/static/img/to_do_list.png b/static/img/to_do_list.png
diff --git a/templates/base.html b/templates/base.html
@@ -5,7 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>{% block title %}ToDo Application{% endblock %}</title>
     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
-    <link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}">
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/styles.css') }}">
 </head>
 <body>
     <nav class="navbar navbar-expand-lg navbar-light bg-light">

diff --git a/templates/login.html b/templates/login.html
@@ -1,20 +1,29 @@
 {% extends "base.html" %}
-{% block title %}Login{% endblock %}
+{% block title %}ToDo List App{% endblock %}
 
 {% block content %}
-<h2>Login</h2>
-<form method="POST" action="{{ url_for('login') }}">
-    <div class="form-group">
-        <label for="username">Username</label>
-        <input type="text" class="form-control" id="username" name="username" required>
+<div class="d-flex justify-content-center align-items-center" style="min-height: 100vh; background-color: #ffffff;">
+    <div class="card p-4" style="width: 400px; border-radius: 15px; box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);">
+        <div class="text-center mb-4">
+            <h2 class="mt-2" style="font-family: 'Brush Script MT', cursive; font-size: 2.5rem; color: #333;">ToDo List App</h2>
+            <img src="{{ url_for('static', filename='img/to_do_list.png') }}" alt="ToDo List Icon" width="60">
+        </div>
+        <form method="POST" action="{{ url_for('login') }}">
+            <div class="form-group">
+                <label for="username">Email</label>
+                <input type="text" class="form-control" id="username" name="username" required>
+            </div>
+            <div class="form-group mt-3">
+                <label for="password">Password</label>
+                <input type="password" class="form-control" id="password" name="password" required>
+            </div>
+            <button type="submit" class="btn btn-primary btn-block mt-4" style="background: linear-gradient(90deg, #6a11cb, #2575fc); border: none; border-radius: 20px;">
+                LOGIN
+            </button>
+            <p class="text-center mt-3">
+                Don't have an account? <a href="{{ url_for('register') }}">Sign Up</a>
+            </p>
+        </form>
     </div>
-    <div class="form-group">
-        <label for="password">Password</label>
-        <input type="password" class="form-control" id="password" name="password" required>
-    </div>
-    <button type="submit" class="btn btn-primary">Login</button>
-    <p class="mt-3">
-        Don't have an account? <a href="{{ url_for('register') }}">Create new account</a>
-    </p>
-</form>
+</div>
 {% endblock %}
diff --git a/templates/register.html b/templates/register.html
@@ -1,33 +1,41 @@
 {% extends "base.html" %}
-{% block title %}Register{% endblock %}
+{% block title %}ToDo List App - Register{% endblock %}
 
 {% block content %}
-<h2>Create an Account</h2>
-<form method="POST" action="{{ url_for('register') }}">
-    {{ form.hidden_tag() }}  <!-- for CSRF token -->
-
-    <div class="form-group">
-        {{ form.username.label }}
-        {{ form.username(class="form-control") }}
-    </div>
-
-    <div class="form-group">
-        {{ form.password.label }}
-        {{ form.password(class="form-control") }}
-    </div>
-
-    <div class="form-group">
-        {{ form.confirm_password.label }}
-        {{ form.confirm_password(class="form-control") }}
-        {% if form.confirm_password.errors %}
-            <small class="text-danger">
-                {% for error in form.confirm_password.errors %}
-                    {{ error }}
-                {% endfor %}
-            </small>
-        {% endif %}
+<div class="d-flex justify-content-center align-items-center" style="min-height: 100vh; background-color: #ffffff;">
+    <div class="card p-4" style="width: 400px; border-radius: 15px; box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);">
+        <div class="text-center mb-4">
+            <h2 class="mt-2" style="font-family: 'Brush Script MT', cursive; font-size: 2.5rem; color: #333;">ToDo List App</h2>         
+            <img src="{{ url_for('static', filename='img/to_do_list.png') }}" alt="ToDo List Icon" width="60">
+        </div>
+        <form method="POST" action="{{ url_for('register') }}">
+            {{ form.hidden_tag() }}
+            <div class="form-group">
+                {{ form.username.label }}
+                {{ form.username(class="form-control") }}
+            </div>
+            <div class="form-group mt-3">
+                {{ form.password.label }}
+                {{ form.password(class="form-control") }}
+            </div>
+            <div class="form-group mt-3">
+                {{ form.confirm_password.label }}
+                {{ form.confirm_password(class="form-control") }}
+                {% if form.confirm_password.errors %}
+                    <small class="text-danger">
+                        {% for error in form.confirm_password.errors %}
+                            {{ error }}
+                        {% endfor %}
+                    </small>
+                {% endif %}
+            </div>
+            <button type="submit" class="btn btn-primary btn-block mt-4" style="background: linear-gradient(90deg, #6a11cb, #2575fc); border: none; border-radius: 20px;">
+                SIGN UP
+            </button>
+            <p class="text-center mt-3">
+                Already have an account? <a href="{{ url_for('login') }}">Login</a>
+            </p>
+        </form>
     </div>
-
-    {{ form.submit(class="btn btn-primary") }}
-</form>
+</div>
 {% endblock %}