main.py

@@ -75,10 +75,22 @@ def register():
         username = request.form["username"]
         email = request.form["email"]
         password = request.form["password"]
+
+        existing_user = User.query.filter_by(email=email).first()
+        if existing_user:
+            error_msg = "Email already exists"
+            return render_template("auth/register.html", error_msg=error_msg)
+
+        existing_username = User.query.filter_by(username=username).first()
+        if existing_username:
+            error_msg = "Username already exists"
+            return render_template("auth/register.html", error_msg=error_msg)
+
         new_user = User(username=username, email=email, password=password) 
         db.session.add(new_user)
         db.session.commit()
         return redirect(url_for("login"))
+
     return render_template("auth/register.html")
 
 if __name__ == '__main__':

static/css/main.css

@@ -275,7 +275,7 @@ footer ul li a::before {
 /* Input Fields */
 input[type="text"],
 input[type="email"],
-input#password, input#username,
+input#password, input#password-2, input#username,
 textarea {
     padding: 10px;
     border: 1px solid #ccc;
@@ -289,7 +289,7 @@ textarea {
 
 input[type="text"],
 input[type="email"],
-input#password, input#username,
+input#password, input#password-2, input#username,
 textarea:hover {
     box-shadow: rgba(45, 35, 66, 0.4) 0 4px 8px, rgba(45, 35, 66, 0.3) 0 7px 13px -3px, #D6D6E7 0 -3px 0 inset; 
     transform: translateY(-2px);

templates/auth/register.html

@@ -4,15 +4,70 @@
 
 {% block content %}
   <h2>Register</h2>
-  <form method="post">
+  {% if error_msg %}
-    <label for="username">Username</label></br>
+    <p style="color: red;">{{ error_msg }}</p>
-    <input type="text" name="username" id="username" required></br>
+  {% endif %}
-    <label for="email">Email</label></br>
+  <form method="post" id="registration-form">
-    <input type="text" name="email" id="email" required></br>
+    <label for="username">Username</label><br>
-    <label for="password">Password</label></br>
+    <input type="text" name="username" id="username" required><br>
-    <input type="password" name="password" id="password" required></br>
+    <label for="email">Email</label><br>
-    <label for="password">Confirm password</label></br>
+    <input type="text" name="email" id="email" required><br>
-    <input type="password" name="password-2" id="password" required></br></br>
+    <label for="password">Password</label><br>
+    <input type="password" name="password" id="password" required><br>
+    <div id="password-strength" class="password-strength" style="margin-bottom:0.7em;"></div>
+    <label for="password">Confirm password</label><br>
+    <input type="password" name="password-2" id="password-2" required><br>
+    <div id="password-match" class="password-match"></div><br>
     <input type="submit" value="Register">
   </form>
+
+  <script>
+    const passwordInput = document.getElementById('password');
+    const confirmPasswordInput = document.getElementById('password-2');
+    const passwordStrength = document.getElementById('password-strength');
+    const passwordMatch = document.getElementById('password-match');
+
+    passwordInput.addEventListener('input', updatePasswordStrength);
+    confirmPasswordInput.addEventListener('input', checkPasswordMatch);
+
+    function updatePasswordStrength() {
+      const password = passwordInput.value;
+      const length = password.length;
+      const containsLetters = /[a-zA-Z]/.test(password);
+      const containsNumbers = /[0-9]/.test(password);
+
+      let strength = 0;
+
+      if (length >= 5 && length <= 7) {
+        strength = 1;
+      } else if (length > 7 && containsLetters && containsNumbers) {
+        strength = 2;
+      } else if (length > 7) {
+        strength = 1;
+      }
+
+      updateStrengthIndicator(strength);
+    }
+
+    function updateStrengthIndicator(strength) {
+      const indicator = ['Weak', 'Moderate', 'Strong'];
+      const colors = ['red', 'yellow', 'green'];
+
+      passwordStrength.textContent = `Password Strength: ${indicator[strength]}`;
+      passwordStrength.style.color = colors[strength];
+    }
+
+    function checkPasswordMatch() {
+      const password = passwordInput.value;
+      const confirmPassword = confirmPasswordInput.value;
+
+      if (password === confirmPassword) {
+        passwordMatch.textContent = 'Passwords match';
+        passwordMatch.style.color = 'green';
+      } else {
+        passwordMatch.textContent = 'Passwords do not match';
+        passwordMatch.style.color = 'red';
+      }
+    }
+  </script>
 {% endblock %}