Add unique constraint to EmailVerification email field

This update enhances the EmailVerification model by ensuring the email field is unique, preventing duplicate records. A new form, EmailVerificationForm, was also introduced to handle email cleaning and validation, which enhances user input handling. Additionally, existing views and templates have been updated to integrate this form, improving the user experience and error feedback.

1 files changed, 145 insertions, 137 deletions

diff --git a/alphabetlearning/templates/pages/home.html b/alphabetlearning/templates/pages/home.html
index bda011c..e0827c1 100644
--- a/alphabetlearning/templates/pages/home.html
+++ b/alphabetlearning/templates/pages/home.html
@@ -1,18 +1,18 @@
 {% extends "base.html" %} {% load static %} {% block content %}
 
-<div class="container text-center">
-    <div class="row">
-        <div class="px-4 py-5 mt-5 mb-0">
-            <h1 class="display-1 fw-bold">Alphabet Learning</h1>
-            <p class="display-6 mb-4 mt-4 p-4 rounded" style="color: #919191">
-                High quality educational resources focused on simple concepts
-                and the first steps in learning.
-            </p>
+    <div class="container text-center">
+        <div class="row">
+            <div class="px-4 py-5 mt-5 mb-0">
+                <h1 class="display-1 fw-bold">Alphabet Learning</h1>
+                <p class="display-6 mb-4 mt-4 p-4 rounded" style="color: #919191">
+                    High quality educational resources focused on simple concepts
+                    and the first steps in learning.
+                </p>
+            </div>
         </div>
-    </div>
 
-    <hr
-        style="
+        <hr
+                style="
             border: none;
             height: 10px;
             background: linear-gradient(
@@ -28,38 +28,46 @@
             width: 100%;
             margin: 20px 0;
         "
-    />
+        />
 
-    <div class="row justify-content-center my-5">
-        <div class="col-lg-12">
-            <h2 class="display-4 font-weight-bolder my-3">Sign up</h2>
-            <div>
-                <p class="display-6 mb-4" style="color: darkgray">
-                    To be informed of the site launch and receive FREE resource
-                    credits, join our new customer mailing list...
-                </p>
-            </div>
-            <form
-                method="post"
-                action="{% url 'payments:email_signup_verification' %}"
-                class="mb-4"
-                style="padding: 30px 0"
-            >
-                {% csrf_token %}
-                <div class="my-5">
-                    <div class="mb-4 text-start">
-                        <input
-                            type="email"
-                            class="sign-up-form-input"
-                            id="email"
-                            name="email"
-                            required
-                            placeholder="Your email address..."
-                        />
-                    </div>
-                    <button
-                        type="submit"
-                        style="
+        <div class="row justify-content-center my-5">
+            <div class="col-lg-12">
+                <h2 class="display-4 font-weight-bolder my-3">Sign up</h2>
+                <div>
+                    <p class="display-6 mb-4" style="color: darkgray">
+                        To be informed of the site launch and receive FREE resource
+                        credits, join our new customer mailing list...
+                    </p>
+                </div>
+                <form
+                        method="post"
+                        action="{% url 'payments:email_signup_verification' %}"
+                        class="mb-4"
+                        style="padding: 30px 0"
+                >
+                    {% csrf_token %}
+                    {{ form.non_field_errors }}
+                    <div class="my-5">
+                        {% if form.email.errors %}
+                            <div class="text-start my-2 border border-danger text-danger rounded">
+                                <p>
+                                    {{ form.email.errors }}
+                                </p>
+                            </div>
+                        {% endif %}
+                        <div class="mb-4 text-start">
+                            <input
+                                    type="email"
+                                    class="sign-up-form-input"
+                                    id="email"
+                                    name="email"
+                                    required
+                                    placeholder="Your email address..."
+                            />
+                        </div>
+                        <button
+                                type="submit"
+                                style="
                             background-color: red;
                             color: white;
                             border: none;
@@ -68,33 +76,33 @@
                             font-size: 1.5rem;
                             font-weight: bold;
                         "
-                    >
-                        Submit
-                    </button>
-                </div>
-                <p class="text-muted text-center mt-3">
-                    <small
+                        >
+                            Submit
+                        </button>
+                    </div>
+                    <p class="text-muted text-center mt-3">
+                        <small
                         >By joining our list, you agree to our
-                        <a
-                            href="{% url 'payments:privacy_policy' %}"
-                            class="text-decoration-none"
+                            <a
+                                    href="{% url 'payments:privacy_policy' %}"
+                                    class="text-decoration-none"
                             >Privacy and Legal Notice</a
-                        >.</small
-                    >
+                            >.</small
+                        >
+                    </p>
+                </form>
+            </div>
+            <div class="col-lg-12">
+                <h2 class="display-4 font-weight-bolder my-3">Bonus offer!</h2>
+                <p class="display-6 mb-4" style="color: darkgray">
+                    As a thank-you, the first fifty customers who join our mailing
+                    list will receive a 50% discount once the site is live.
                 </p>
-            </form>
-        </div>
-        <div class="col-lg-12">
-            <h2 class="display-4 font-weight-bolder my-3">Bonus offer!</h2>
-            <p class="display-6 mb-4" style="color: darkgray">
-                As a thank-you, the first fifty customers who join our mailing
-                list will receive a 50% discount once the site is live.
-            </p>
+            </div>
         </div>
-    </div>
 
-    <hr
-        style="
+        <hr
+                style="
             border: none;
             height: 10px;
             background: linear-gradient(
@@ -110,87 +118,87 @@
             width: 100%;
             margin: 20px 0;
         "
-    />
+        />
 
-    <div class="row justify-content-center">
-        <div class="col-md-4 mb-5 mb-md-0">
-            <img
-                src="{% static 'images/funnel4.png' %}"
-                class="img-fluid rotated-image"
-                alt="Funnel 1"
-            />
-        </div>
-        <div class="col-md-4 mb-5 mb-md-0">
-            <img
-                src="{% static 'images/funnel5.png' %}"
-                class="img-fluid rotated-image"
-                alt="Funnel 2"
-            />
-        </div>
-        <div class="col-md-4 mb-5 mb-md-0">
-            <img
-                src="{% static 'images/funnel6.png' %}"
-                class="img-fluid rotated-image"
-                alt="Funnel 3"
-            />
+        <div class="row justify-content-center">
+            <div class="col-md-4 mb-5 mb-md-0">
+                <img
+                        src="{% static 'images/funnel4.png' %}"
+                        class="img-fluid rotated-image"
+                        alt="Funnel 1"
+                />
+            </div>
+            <div class="col-md-4 mb-5 mb-md-0">
+                <img
+                        src="{% static 'images/funnel5.png' %}"
+                        class="img-fluid rotated-image"
+                        alt="Funnel 2"
+                />
+            </div>
+            <div class="col-md-4 mb-5 mb-md-0">
+                <img
+                        src="{% static 'images/funnel6.png' %}"
+                        class="img-fluid rotated-image"
+                        alt="Funnel 3"
+                />
+            </div>
         </div>
-    </div>
 
-    <div class="row my-5 d-flex align-items-stretch">
-        <div class="col-md-12 d-flex">
-            <div class="p-4 flex-fill">
-                <h2 class="display-4 font-weight-bolder my-3">
-                    Learning from A to Z
+        <div class="row my-5 d-flex align-items-stretch">
+            <div class="col-md-12 d-flex">
+                <div class="p-4 flex-fill">
+                    <h2 class="display-4 font-weight-bolder my-3">
+                        Learning from A to Z
+                    </h2>
+                    <p
+                            class="display-6"
+                            style="margin-bottom: 20px; color: darkgray"
+                    >
+                        Focused on early concepts, these resources are designed to
+                        be accessible to all learners.
+                    </p>
+                </div>
+            </div>
+            <div class="display-4 font-weight-bolder my-5">
+                <h2 class="display-4 font-weight-bolder mb-2">
+                    No commitment required
                 </h2>
-                <p
-                    class="display-6"
-                    style="margin-bottom: 20px; color: darkgray"
-                >
-                    Focused on early concepts, these resources are designed to
-                    be accessible to all learners.
+                <p class="display-6" style="margin-bottom: 20px; color: darkgray">
+                    Resources will be available to purchase individually without a
+                    subscription.
                 </p>
             </div>
         </div>
-        <div class="display-4 font-weight-bolder my-5">
-            <h2 class="display-4 font-weight-bolder mb-2">
-                No commitment required
-            </h2>
-            <p class="display-6" style="margin-bottom: 20px; color: darkgray">
-                Resources will be available to purchase individually without a
-                subscription.
-            </p>
-        </div>
-    </div>
 
-    <div class="row justify-content-center my-5">
-        <div class="col-md-4 mb-5 mb-md-0">
-            <img
-                src="{% static 'images/funnel1.png' %}"
-                class="img-fluid rotated-image"
-                alt="Funnel 1"
-            />
-        </div>
-        <div class="col-md-4 mb-5 mb-md-0">
-            <img
-                src="{% static 'images/funnel2.png' %}"
-                class="img-fluid rotated-image"
-                alt="Funnel 2"
-            />
-        </div>
-        <div class="col-md-4 mb-5 mb-md-0">
-            <img
-                src="{% static 'images/funnel3.png' %}"
-                class="img-fluid rotated-image"
-                alt="Funnel 3"
-            />
+        <div class="row justify-content-center my-5">
+            <div class="col-md-4 mb-5 mb-md-0">
+                <img
+                        src="{% static 'images/funnel1.png' %}"
+                        class="img-fluid rotated-image"
+                        alt="Funnel 1"
+                />
+            </div>
+            <div class="col-md-4 mb-5 mb-md-0">
+                <img
+                        src="{% static 'images/funnel2.png' %}"
+                        class="img-fluid rotated-image"
+                        alt="Funnel 2"
+                />
+            </div>
+            <div class="col-md-4 mb-5 mb-md-0">
+                <img
+                        src="{% static 'images/funnel3.png' %}"
+                        class="img-fluid rotated-image"
+                        alt="Funnel 3"
+                />
+            </div>
         </div>
+        <p
+                class="display-6 mb-4 mt-4 p-4 col-12 rounded text-center"
+                style="color: darkgray"
+        >
+            Alphabet Learning is currently in active <br/>development and will be
+            launched in Spring 2025.
+        </p>
     </div>
-    <p
-        class="display-6 mb-4 mt-4 p-4 col-12 rounded text-center"
-        style="color: darkgray"
-    >
-        Alphabet Learning is currently in active <br />development and will be
-        launched in Spring 2025.
-    </p>
-</div>
 {% endblock content %}