boost/website-v2
2
0
Fork 0
mirror of https://github.com/boostorg/website-v2.git synced 2026-02-27 17:42:08 +00:00
Code Issues Projects Releases Wiki Activity

🎨 unify the signup forms

Browse Source 
Show both social and email signup instead of switching between them with alpine triggers
This commit is contained in:
Greg Newman
2023-08-11 11:47:05 -04:00
parent 800b9e72d1
commit ddceefa798
1 changed files with 42 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

98
templates/account/signup.html
View File

@@ -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>