diff --git a/newsaggregator/static/assets/css/userauth.css b/newsaggregator/static/assets/css/userauth.css index 35b6ff3..3507611 100644 --- 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 index 73b091b..643f89d 100644 --- 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 index b9cd9a2..0275602 100644 --- a/newsaggregator/userauths/forms.py +++ b/newsaggregator/userauths/forms.py @@ -1,6 +1,8 @@ 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() @@ -8,3 +10,9 @@ class UserRegisterForm(UserCreationForm): 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 \ No newline at end of file