From 07cd5069db6dd1d746b374d5eef0ef22d065651d Mon Sep 17 00:00:00 2001
From: elukjanovica <elukjanovica.e@rkg.lv>
Date: Sat, 27 Apr 2024 22:34:10 +0300
Subject: [PATCH]

---
 instance/Picture_Puzzle_web.db | Bin 20480 -> 20480 bytes
 main.py                        |  14 ++++++-
 static/css/main.css            |   4 +-
 templates/auth/register.html   |  73 +++++++++++++++++++++++++++++----
 4 files changed, 79 insertions(+), 12 deletions(-)

diff --git a/instance/Picture_Puzzle_web.db b/instance/Picture_Puzzle_web.db
index 321cb65c4a73fb4d90aa5100758d3314ebeebc86..8961cc1edc90481c18de4ff3072555d27be31115 100644
GIT binary patch
delta 91
zcmZozz}T>Wae_3X=tLQ3M$wH4OZd5%_$M&%pX8swU$$9LA%cH$n!JFN1T!mxsH$*k
uPHDEGp`nqHrKP2Xg+XRwV)o<-@+Ckm_Zax^@qgt12-I?ffAb}MJp}-4+Zs&(

delta 91
zcmZozz}T>Wae_3X&_o$$Mxl)fOZd5%`O_HqPx4RTPunc05Wzn=O<q8%G&?IXFTX4^
uIU_MOCo?b6Aw4%SGe<8uKX>v3`4XU(s|@`2_^<MR1Zp|Lzxk5Bo&o?A#~w!j

diff --git a/main.py b/main.py
index e6535ce..b8ce1a5 100644
--- a/main.py
+++ b/main.py
@@ -75,10 +75,22 @@ def register():
         username = request.form["username"]
         email = request.form["email"]
         password = request.form["password"]
-        new_user = User(username=username, email=email, password=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__':
diff --git a/static/css/main.css b/static/css/main.css
index 638c774..262dafa 100644
--- a/static/css/main.css
+++ b/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);
diff --git a/templates/auth/register.html b/templates/auth/register.html
index 12aef3b..dba9feb 100644
--- a/templates/auth/register.html
+++ b/templates/auth/register.html
@@ -4,15 +4,70 @@
 
 {% block content %}
   <h2>Register</h2>
-  <form method="post">
-    <label for="username">Username</label></br>
-    <input type="text" name="username" id="username" required></br>
-    <label for="email">Email</label></br>
-    <input type="text" name="email" id="email" required></br>
-    <label for="password">Password</label></br>
-    <input type="password" name="password" id="password" required></br>
-    <label for="password">Confirm password</label></br>
-    <input type="password" name="password-2" id="password" required></br></br>
+  {% if error_msg %}
+    <p style="color: red;">{{ error_msg }}</p>
+  {% endif %}
+  <form method="post" id="registration-form">
+    <label for="username">Username</label><br>
+    <input type="text" name="username" id="username" required><br>
+    <label for="email">Email</label><br>
+    <input type="text" name="email" id="email" required><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 %}