Error message shown if email not exits

AlumniConnect/urls.py

@@ -62,6 +62,7 @@
     re_path(r'favicon.ico', favicon_view),
     path('constitution/', views.constitution, name='constitution'),
     #path('', views.index, name='home'),
+    path('check-email-exists/', views.check_email_exists, name='check_email_exists'),
 ]
 
 if settings.DEBUG:

AlumniConnect/views.py

@@ -5,7 +5,7 @@
 from django.contrib.auth import authenticate, login, update_session_auth_hash
 from django.contrib.auth.models import User
 from django.contrib.auth.decorators import login_required
-from django.http import HttpResponseRedirect, HttpResponse
+from django.http import HttpResponseRedirect, HttpResponse,JsonResponse
 from django.contrib.sites.shortcuts import get_current_site
 from django.utils.encoding import force_bytes
 from django.utils.http import urlsafe_base64_encode, urlsafe_base64_decode
@@ -226,4 +226,10 @@ def change_password(request):
     return render(request, 'AlumniConnect/change_password.html', {'form': form})
 
 def constitution(request):
-    return render(request, 'AlumniConnect/constitution.html')
+    return render(request, 'AlumniConnect/constitution.html')
+
+def check_email_exists(request):
+    email = request.GET.get('email')
+    # print(email)
+    exists = User.objects.filter(email=email).exists()
+    return JsonResponse({'exists': exists})

templates/registration/password_reset_form.html

@@ -41,8 +41,9 @@ <h2>Forgot Password</h2>
                 </div>
                 <div class="row text-center mb-4 pb-4 pt-3 justify-content-center">
                     <div class="col-sm-11 col-md-10 col-lg-9">
-                        <form method="POST" class="font-open-sans">
+                        <form method="POST" class="font-open-sans" onsubmit="return validateForm(event)">
                             {% csrf_token %}
+                           <span id="email-error" style="display: none; color: red;">Email does not exist.</span>
                             <div class="form-group">
                                 <label class="d-block text-left" for="{{ form.email.id_for_label }}">Email:</label>
                                 <input id="{{ form.email.id_for_label }}" type="email" name="email" class="form-control" placeholder="Email" required>
@@ -56,5 +57,43 @@ <h2>Forgot Password</h2>
     </div>
 </div>
 
+
+<script>
+    async function validateForm(event) {
+        var emailInput = document.querySelector('#{{ form.email.id_for_label }}');
+        var emailError = document.querySelector('#email-error');
+
+        event.preventDefault(); // Prevent form submission
+        {% comment %} console.log(emailInput.value) {% endcomment %}
+        try {
+          const exists = await checkEmailExists(emailInput.value);
+
+          if (!exists) {
+            emailError.style.display = 'inline';
+          } else {
+            emailError.style.display = 'none';
+            event.target.submit(); // Allow form submission
+          }
+        } catch (error) {
+          console.error('An error occurred:', error);
+        }
+      }
+    // Function to check if email exists (replace with your own implementation)
+    async function checkEmailExists(email) {
+        try {
+          const response = await fetch('/check-email-exists/?email=' + encodeURIComponent(email));
+
+          if (!response.ok) {
+            throw new Error('Error checking email existence');
+          }
+
+          const data = await response.json();
+          return data.exists;
+        } catch (error) {
+          throw error;
+        }
+      }
+  </script>
+
 {% include 'globals/footer.html' %}
 {% endblock %}