From ddceefa79858468f1053d79ff5a558530402453a Mon Sep 17 00:00:00 2001
From: Greg Newman <greg@gregnewman.org>
Date: Fri, 11 Aug 2023 11:47:05 -0400
Subject: [PATCH] :art: unify the signup forms

Show both social and email signup instead of switching between them with alpine triggers
---
 templates/account/signup.html | 98 +++++++++++++++--------------------
 1 file changed, 42 insertions(+), 56 deletions(-)

diff --git a/templates/account/signup.html b/templates/account/signup.html
index bdac4446..8e77bf03 100644
--- a/templates/account/signup.html
+++ b/templates/account/signup.html
@@ -12,7 +12,7 @@
 
   <div class="py-0 px-3 mb-3 md:py-6 md:px-0">
 
-    <div class="md:pt-11 md:mt-11 w-full md:w-1/2 mx-auto" x-data="{ tab: '#social' }">
+    <div class="md:pt-11 md:mt-11 w-full bg-white dark:bg-charcoal mx-auto rounded py-6 px-3">
       <div class="md:w-full">
         <h1 class="text-4xl text-center">{% trans "Sign Up" %}</h1>
         <p class="mt-0 text-center">
@@ -20,68 +20,54 @@
         </p>
       </div>
 
-      <div class="space-y-4 w-full text-center">
-        <p class="mt-0 text-center">
-          <a :class="tab === '#social' ? 'text-slate dark:text-white' : 'text-orange'"
-             href="#"
-             data-toggle="tab"
-             x-on:click.prevent="tab='#social'"
-          >
-            Sign Up with one of your existing third party accounts<br/>
-          </a> or you can
-          <a :class="tab === '#email' ? 'text-slate dark:text-white' : 'text-orange'"
-             href="#"
-             data-toggle="tab"
-             x-on:click.prevent="tab='#email'"
-          >
-            use your email
-          </a>
-        </p>
+      <div class="w-full text-center">
 
-        <div class="socialaccount_ballot" x-show="tab == '#social'" x-cloak>
-
-          <div class="space-y-4 w-full">
-            {% providers_media_js %}
-            {% include "socialaccount/snippets/provider_list.html" with process="login" %}
-            {% include "socialaccount/snippets/login_extra.html" %}
+        <div class="w-full md:flex md:divide-x divide-gray-200 space-y-11 md:space-y-0">
+          <div class="socialaccount_ballot w-full md:w-1/2">
+            <h2 class="text-xl">Sign Up with an existing third party account</h2>
+            <div class="space-y-4 w-full">
+              {% providers_media_js %}
+              {% include "socialaccount/snippets/provider_list.html" with process="login" %}
+              {% include "socialaccount/snippets/login_extra.html" %}
+            </div>
           </div>
 
-        </div>
+          <div class="w-full md:w-1/2">
+            <h2 class="text-xl">Sign Up with Email</h2>
+            <form id="signup_form" method="post" action="{% url 'account_signup' %}">
+              <div class="mx-auto space-y-4 w-2/3">
+                {% csrf_token %}
 
-        <div x-show="tab == '#email'" x-cloak>
-          <form id="signup_form" method="post" action="{% url 'account_signup' %}">
-            <div class="mx-auto space-y-4 w-2/3">
-              {% csrf_token %}
+                {% if form.errors %}
+                  {% for error in field.errors %}
+                    <p class="font-bold text-orange">
+                      {{ error|escape }}
+                    </p>
+                  {% endfor %}
+                {% endif %}
 
-              {% if form.errors %}
-                {% for error in field.errors %}
-                  <p class="font-bold text-orange">
-                    {{ error|escape }}
-                  </p>
+                {% for field in form.visible_fields %}
+                  <div>
+                    {{ field }}
+                    {% if field.help_text %}
+                      <small>{{ field.help_text }}</small>
+                    {% endif %}
+                  </div>
                 {% endfor %}
-              {% endif %}
 
-              {% for field in form.visible_fields %}
-                <div>
-                  {{ field }}
-                  {% if field.help_text %}
-                    <small>{{ field.help_text }}</small>
-                  {% endif %}
-                </div>
-              {% endfor %}
-
-              {% if redirect_field_value %}
-                <input type="hidden" name="{{ redirect_field_name }}" value="{{ redirect_field_value }}"/>
-              {% endif %}
-            </div>
-            <div class="my-11">
-              <button type="submit"
-                      class="py-3 px-8 text-sm text-base font-medium text-white uppercase rounded-md border md:py-1 md:px-4 md:text-lg bg-orange border-orange dark:bg-charcoal dark:text-orange"
-              >
-                {% trans "Sign Up" %}
-              </button>
-            </div>
-          </form>
+                {% if redirect_field_value %}
+                  <input type="hidden" name="{{ redirect_field_name }}" value="{{ redirect_field_value }}"/>
+                {% endif %}
+              </div>
+              <div class="my-3">
+                <button type="submit"
+                        class="py-3 px-8 text-sm text-base font-medium text-white uppercase rounded-md border md:py-1 md:px-4 md:text-lg bg-orange border-orange dark:bg-charcoal dark:text-orange"
+                >
+                  {% trans "Sign Up" %}
+                </button>
+              </div>
+            </form>
+          </div>
         </div>
       </div>
     </div>