added password and username instruction, added error messages

SiddharthBahuguna · May 19, 2024 · bca295f · bca295f
1 parent 8a0a80c
commit bca295f
Show file tree

Hide file tree

Showing 3 changed files with 69 additions and 6 deletions.
diff --git a/newsaggregator/static/assets/css/userauth.css b/newsaggregator/static/assets/css/userauth.css
@@ -34,6 +34,7 @@ body {
     flex-direction: column;
 }
 
+
 .main-container {
     display: flex;
     flex-grow: 1;
@@ -169,6 +170,7 @@ body {
 
 .form-group {
     margin: 0 40px 6px;
+
 }
 
 .animate-input {
@@ -376,6 +378,43 @@ button:disabled {
     text-align: center;
 }
 
+.footer {
+    background: #f1f1f1;
+    padding: 20px;
+    text-align: center;
+    margin-top: auto;
+}
+
+.password-requirements {
+    list-style-type: disc;
+    margin-left: 20px;
+    margin-top: 10px;
+    margin-bottom: 20px; 
+    font-size: 12px;
+    color: var(--txt-second-color);
+    padding-left: 20px; 
+}
+
+.errors {
+    background-color: #f8d7da;
+    color: #721c24;
+    border: 1px solid #f5c6cb;
+    border-radius: 5px;
+    padding: 10px;
+    margin-bottom: auto;
+    margin-top: 20px;
+}
+
+.errors ul {
+    list-style-type: none;
+    padding: 0;
+    margin: 0;
+}
+
+.errors li {
+    margin-bottom: 5px;
+}
+
 /* responsive */
 
 @media only screen and (max-width: 800px) {

diff --git a/newsaggregator/templates/userauths/sign-up.html b/newsaggregator/templates/userauths/sign-up.html
@@ -16,6 +16,19 @@
                                 <img src="../../static/assets/images/news.png" width="80px" alt="News logo" class="logo-light">
                                 <img src="../../static/assets/images/news.png" width="80px" alt="News logo" class="logo-dark">
                             </div>
+
+                            {% if form.errors %}
+                            <div class="errors">
+                                <ul>
+                                    {% for field, error_list in form.errors.items %}
+                                        {% for error in error_list %}
+                                            <li>{{ error }}</li>
+                                        {% endfor %}
+                                    {% endfor %}
+                                </ul>
+                                <p>Please try again</p>
+                            </div>
+                        {% endif %}
 
 
                             <form method="POST">
@@ -43,7 +56,7 @@
                                                 Enter Password
                                             </span>
                                             <input class="login-signup-input" type="password" name="password1" autocomplete="new-password" required aria-describedby="id_password1_helptext" id="id_password1">
-                                            <button>Show</button>
+                                            <button type="button">Show</button>
                                         </div>
                                     </div>
                                     <div class="form-group">
@@ -52,13 +65,16 @@
                                                 Enter confirm Password
                                             </span>
                                             <input class="login-signup-input" type="password" name="password2" autocomplete="new-password" required aria-describedby="id_password2_helptext" id="id_password2">
-                                            <button>Show</button>
+                                            <button type="button">Show</button>
                                         </div>
                                     </div>
-                                    <div class="form-group">
-                                        <div class="animate-input"  style="border: none;">
-                                            <span>Enter password without special characters</span>
-                                        </div>
+                                    <div class="password-requirements">
+                                        <ul>
+                                            <li>Username must be atleast 6 characters long</li>
+                                            <li>Password must be at least 8 characters long</li>
+                                            <li>Password shouldn't be very similar to the username</li>
+                                            <li>Password shouldn't be entirely numeric</li>
+                                        </ul>
                                     </div>
                                     <div class="btn-groupss">
                                         <button class="btn-login" id="signin-btn" type="submit">

diff --git a/newsaggregator/userauths/forms.py b/newsaggregator/userauths/forms.py
@@ -1,10 +1,18 @@
 from django import forms
 from django.contrib.auth.forms import UserCreationForm
 from userauths.models import User
+from django.core.exceptions import ValidationError
+
 
 class UserRegisterForm(UserCreationForm):
     email = forms.EmailField()
 
     class Meta:
         model = User
         fields = ['username', 'email', 'password1', 'password2']
+
+    def clean_username(self):
+        username = self.cleaned_data.get('username')
+        if len(username) < 6:
+            raise ValidationError("Username must be at least 6 characters long.")
+        return username