AI_BTC

Sleeping

App Files Files Community

Dooratre commited on Aug 6

Commit

f598023

•

1 Parent(s): 04cdf45

Update templates/sign-up.html

Browse files

Files changed (1) hide show

templates/sign-up.html +125 -89

templates/sign-up.html CHANGED Viewed

@@ -110,107 +110,143 @@
 }
 </style>
 <style>
-    .success-message {
-        color: green;
-        border: 2px solid green;
-        padding: 10px;
-        margin-bottom: 10px;
-    }
-    .error-message {
-        color: red;
-        border: 2px solid red;
-        padding: 10px;
-        margin-bottom: 10px;
-    }
 </style>
 <body>
     <!--$-->
     <div class="techwave_fn_sign">
-        <div class="sign__content">
-            <h1 class="logo">Designed by Frenify</h1>
-            <form class="signup" method="POST" action="/sign-up" onsubmit="return validateForm()" enctype="multipart/form-data">
-                <div class="form__content">
-                {% with messages = get_flashed_messages() %}
-                    {% if messages %}
-                      <ul>
-                      {% for message in messages %}
-                        <li>{{ message }}</li>
-                      {% endfor %}
-                      </ul>
-                    {% endif %}
-                  {% endwith %}
-                <div class="form__title">Sign Up</div>
-                <br>
-            {% with messages = get_flashed_messages() %}
-                {% if messages %}
-                  <ul>
                   {% for message in messages %}
-                    <li>{{ message }}</li>
                   {% endfor %}
-                  </ul>
-                {% endif %}
-              {% endwith %}
-                <div class="form__username">
-                    <label for="username">First Name</label>
-                    <input type="text" class="input" id="first_name" name="first_name" placeholder="Username" required />
-                </div>
-                <div class="form__username">
-                    <label for="username">Last Nmae</label>
-                    <input type="text" class="input" id="last_name" name="last_name" placeholder="Username" required />
-                </div>
-                <div class="form__username">
-                    <label for="username">Username</label>
-                    <input type="text" class="input" id="username" name="username" placeholder="Username" required />
-                </div>
-                <div class="form__pass">
-                    <label for="user_password">Password</label>
-                    <input type="password" id="password" name="password" autoComplete="current-password" spellCheck="false" placeholder="Strong password" required />
-                </div>
-                <div class="form__confirm-pass">
-                    <label for="confirm_password">Confirm Password</label>
-                    <input type="password" id="confirm_password" name="confirm_password" autoComplete="current-password" spellCheck="false" placeholder="Confirm password" required />
-                </div>
-                <br>
-                <div class="input-div">
-                    <input class="input2" type="file" id="profile_image" name="profile_image" required>
-                  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" stroke-linejoin="round" stroke-linecap="round" viewBox="0 0 24 24" stroke-width="2" fill="none" stroke="currentColor" class="icon"><polyline points="16 16 12 12 8 16"></polyline><line y2="21" x2="12" y1="12" x1="12"></line><path d="M20.39 18.39A5 5 0 0 0 18 9h-1.26A8 8 0 1 0 3 16.3"></path><polyline points="16 16 12 12 8 16"></polyline></svg>
-                  </div>
-                  <br>
-                  <P>Upload Your For Profile</P>
-                <br>
-                <div class="form__submit">
-                    <label class="fn__submit">
-                        <input type="submit" name="submit" value="Create Account" onclick="return validateForm()" />
-                    </label>
-                </div>
-                <div class="form__alternative ">
-                    <div class="fn__lined_text">
-                    </div>
                 </div>
-                <script>
 function validateForm() {
-    var password = document.getElementById("password").value;
-    var confirm_password = document.getElementById("confirm_password").value;
-    if (password !== confirm_password) {
-        var errorMessage = document.createElement("p");
-        errorMessage.className = "error-message";
-        errorMessage.innerHTML = "Passwords do not match";
-        var confirmPassField = document.getElementById("confirm_password");
-        confirmPassField.insertAdjacentElement("afterend", document.createElement("br"));
-        confirmPassField.insertAdjacentElement("afterend", errorMessage);
-        return false;
-    }
-    return true;
-}                </script>
-            <div class="sign__desc">
-                <p>Already have an account? <a href="/">Sign In</a></p>
             </div>
         </div>
     </div>

 }
 </style>
 <style>
+  .error-message {
+    color: red;
+    border: 1px solid red;
+    padding: 10px;
+    list-style: none;
+  }
+  .success-message {
+    color: green;
+    border: 1px solid green;
+    padding: 10px;
+    list-style: none;
+  }
 </style>
 <body>
     <!--$-->
     <div class="techwave_fn_sign">
+      <div class="sign__content">
+        <img src="desine/img/logo-desktop-full.png">
+        <br>
+        <h1 class="logo">Designed by Frenify</h1>
+        <form class="signup" method="POST" action="/sign-up" onsubmit="return validateForm()" enctype="multipart/form-data">
+            <div class="form__content">
+              <h1 class="logo">Designed by Frenify</h1>
+              <br>
+              {% with messages = get_flashed_messages() %}
+              {% if messages %}
+                <ul>
                   {% for message in messages %}
+                    {% if message == "Username is already taken. Please choose a different username." %}
+                      <li class="error-message">{{ message }}</li>
+                    {% elif message == "Failed to upload image to DataBase." %}
+                      <li class="error-message">{{ message }}</li>
+                    {% else %}
+                    {% endif %}
                   {% endfor %}
+                </ul>
+              {% endif %}
+            {% endwith %}
+            <div class="form__username">
+                <label for="first_name">First Name</label>
+                <input type="text" class="input" id="first_name" name="first_name" placeholder="First Name" required />
+            </div>
+            <div class="form__username">
+                <label for="last_name">Last Name</label>
+                <input type="text" class="input" id="last_name" name="last_name" placeholder="Last Name" required />
+            </div>
+            <div class="form__username">
+                <label for="username">Username</label>
+                <input type="text" class="input" id="username" name="username" placeholder="Username" required />
+            </div>
+            <div class="form__pass">
+                <label for="password">Password</label>
+                <input type="password" id="password" name="password" autoComplete="current-password" spellCheck="false" placeholder="password" required />
+            </div>
+            <div class="form__confirm-pass">
+                <label for="confirm_password">Confirm Password</label>
+                <input type="password" id="confirm_password" name="confirm_password" autoComplete="current-password" spellCheck="false" placeholder="Confirm password" required />
+            </div>
+            <br>
+            <div class="input-div">
+                <input class="input2" type="file" id="profile_image" name="profile_image" required onchange="displayImageName()">
+                <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" stroke-linejoin="round" stroke-linecap="round" viewBox="0 0 24 24" stroke-width="2" fill="none" stroke="currentColor" class="icon"><polyline points="16 16 12 12 8 16"></polyline><line y2="21" x2="12" y1="12" x1="12"></line><path d="M20.39 18.39A5 5 0 0 0 18 9h-1.26A8 8 0 1 0 3 16.3"></path><polyline points="16 16 12 12 8 16"></polyline></svg>
+              </div>
+              <br>
+              <p class="file-message" id="file-message">Please upload an image for your profile</p>
+            <br>
+            <div class="form__submit">
+                <label class="fn__submit">
+                    <input type="submit" name="submit" value="Create Account" />
+                </label>
+            </div>
+            <div class="form__alternative ">
+                <div class="fn__lined_text">
                 </div>
+            </div>
+            <script>
 function validateForm() {
+var password = document.getElementById("password").value;
+var confirm_password = document.getElementById("confirm_password").value;
+var username = document.getElementById("username").value;
+var passwordErrorMessage = document.createElement("p");
+var usernameErrorMessage = document.createElement("p");
+passwordErrorMessage.className = "error-message";
+usernameErrorMessage.className = "error-message";
+// Clear previous error messages
+var errorMessages = document.querySelectorAll(".error-message");
+errorMessages.forEach(function(message) {
+    message.remove();
+});
+// Password validation
+if (password.length < 8 || !/[A-Z]/.test(password)) {
+    passwordErrorMessage.innerHTML = "Password must be at least 8 characters long and contain at least one capital letter.";
+    var passwordField = document.getElementById("password");
+    passwordField.insertAdjacentElement("afterend", passwordErrorMessage);
+    return false;
+}
+if (password !== confirm_password) {
+    var confirmPassField = document.getElementById("confirm_password");
+    var confirmErrorMessage = document.createElement("p");
+    confirmErrorMessage.className = "error-message";
+    confirmErrorMessage.innerHTML = "Passwords do not match.";
+    confirmPassField.insertAdjacentElement("afterend", confirmErrorMessage);
+    return false;
+}
+// Username validation
+if (username.length < 6 || /[A-Z]/.test(username) || /[^a-z0-9]/.test(username)) {
+    usernameErrorMessage.innerHTML = "Username must be at least 6 characters long, contain no capital letters, and contain no special symbols.";
+    var usernameField = document.getElementById("username");
+    usernameField.insertAdjacentElement("afterend", usernameErrorMessage);
+    return false;
+}
+return true;
+}
+function displayImageName() {
+var input = document.getElementById('profile_image');
+var fileMessage = document.getElementById('file-message');
+if (input.files && input.files[0]) {
+    fileMessage.innerText = "Uploaded file: " + input.files[0].name;
+} else {
+    fileMessage.innerText = "Please upload an image for your profile";
+}
+}
+            </script>              <div class="sign__desc">
+                <p>Already have an account? <a href="/login">Sign In</a></p>
             </div>
         </div>
     </div>