From 6aaa7a51e99c82e985df56d57e3225bc0b4b7155 Mon Sep 17 00:00:00 2001 From: merelinguist Date: Sat, 16 Dec 2017 00:59:01 +0000 Subject: [PATCH] :lipstick: Rewrite all forms with Tailwind --- app/templates/auth/_form_fields.html | 52 ++++++------ app/templates/auth/change_email.html | 49 +++++++++--- app/templates/auth/change_password.html | 53 +++++++++---- app/templates/auth/login.html | 56 +++++++++---- app/templates/auth/register.html | 79 ++++++++++++------- app/templates/auth/reset_password.html | 44 ++++++++--- .../auth/reset_password_request.html | 46 ++++++++--- 7 files changed, 259 insertions(+), 120 deletions(-) diff --git a/app/templates/auth/_form_fields.html b/app/templates/auth/_form_fields.html index 582abb3..04ed10d 100644 --- a/app/templates/auth/_form_fields.html +++ b/app/templates/auth/_form_fields.html @@ -1,34 +1,38 @@ {% macro email(form, type='email') %} -
- -
- {{ form.email( - class="form-control", - type=type, - placeholder="e.g., calrissian@cloud.ci", - maxlength=128, - autocapitalize="off", - autocorrect="off", - ) }} -
+
+ + {{ form.email( + class="block appearance-none w-full bg-white border border-grey-light hover:border-grey px-2 py-2 rounded shadow", + type=type, + placeholder="e.g., calrissian@cloud.ci", + maxlength=128, + autocapitalize="off", + autocorrect="off", + ) }} +
+{% endmacro %} + +{% macro new_email(form, type='email') %} +
+ + {{ form.email( + class="block appearance-none w-full bg-white border border-grey-light hover:border-grey px-2 py-2 rounded shadow", + type=type, + placeholder="e.g., calrissian@cloud.ci", + maxlength=128, + autocapitalize="off", + autocorrect="off", + ) }}
- {% if form.errors.email %} - - {% endif %} {% endmacro %} {% macro password(form) %} -
- -
- {{ form.password(class="form-control", placeholder="e.g., ••••••••••") }} -
+
+ + {{ form.password(class="block appearance-none w-full bg-white border border-grey-light hover:border-grey px-2 py-2 rounded shadow", placeholder="e.g., ••••••••••") }}
- {% if form.errors.password %} - - {% endif %} {% endmacro %} {% macro submit(form) %} - {{ form.submit(class="btn btn-lg btn-primary btn-block mt-3 mb-3") }} + {{ form.submit(class="bg-teal-dark hover:bg-teal text-white py-2 px-4 rounded cursor-pointer") }} {% endmacro %} diff --git a/app/templates/auth/change_email.html b/app/templates/auth/change_email.html index 9d65e0a..c2ce819 100644 --- a/app/templates/auth/change_email.html +++ b/app/templates/auth/change_email.html @@ -1,15 +1,40 @@ -{% extends "base.html" %} -{% from 'auth/_form_fields.html' import email, password, submit %} + + + + + + -{% block content %} -
-

{{ title }}

- {{ form.hidden_tag() }} - {{ email(form) }} - {{ password(form) }} - {{ submit(form) }} + + -

Not needed? Go home.

-
-{% endblock %} + Login + + + + +
+
+

Login to LudoLatin

+
+
+ {% from 'auth/_form_fields.html' import new_email, password, submit %} + {{ form.hidden_tag() }} + + {{ new_email(form, type="email") }} + {{ password(form) }} + +
+ {{ submit(form) }} +
+
+ +
+
+

Not needed? Go home.

+
+
+
+ + diff --git a/app/templates/auth/change_password.html b/app/templates/auth/change_password.html index 5873262..5e967b8 100644 --- a/app/templates/auth/change_password.html +++ b/app/templates/auth/change_password.html @@ -1,21 +1,42 @@ -{% extends "base.html" %} -{% from 'auth/_form_fields.html' import password, submit %} + + + + + + -{% block content %} -
-

{{ title }}

- {{ form.hidden_tag() }} + + - {{ form.old_password.label(class="sr-only") }} - {{ form.old_password(class="form-control", placeholder=form.old_password.label.text) }} - {% if form.errors.old_password %} - - {% endif %} + Login - {{ password(form) }} - {{ submit(form) }} + + + +
+
+

Login to LudoLatin

+
+ + {% from 'auth/_form_fields.html' import email, password, submit %} + {{ form.hidden_tag() }} -

Not needed? Go home.

- -{% endblock %} +
+ {{ form.old_password.label(class="text-grey-darker block mb-2") }} + {{ form.old_password(class="block appearance-none w-full bg-white border border-grey-light hover:border-grey px-2 py-2 rounded shadow", placeholder=form.old_password.label.text) }} +
+ {{ password(form) }} + +
+ {{ submit(form) }} +
+ +
+
+

Not needed? Go home.

+
+
+
+ + diff --git a/app/templates/auth/login.html b/app/templates/auth/login.html index b5e3637..76854f8 100644 --- a/app/templates/auth/login.html +++ b/app/templates/auth/login.html @@ -1,19 +1,43 @@ -{% extends "base.html" %} -{% from 'auth/_form_fields.html' import email, password, submit %} + + + + + + -{% block content %} -
-

{{ title }}

- {{ form.hidden_tag() }} - {{ email(form, type="text") }} - {{ password(form) }} - {{ submit(form) }} + + -

- Forgotten password? Reset your password. -
- New user? Register now! -

-
-{% endblock %} + Login + + + + +
+
+

Login to LudoLatin

+
+
+ {% from 'auth/_form_fields.html' import email, password, submit %} + {{ form.hidden_tag() }} + + {{ email(form, type="text") }} + {{ password(form) }} + +
+ {{ submit(form) }} + + + Forgot Password? + +
+
+
+
+

Don't have an account? Create an Account.

+
+
+
+ + diff --git a/app/templates/auth/register.html b/app/templates/auth/register.html index 1476198..6d8f0fb 100644 --- a/app/templates/auth/register.html +++ b/app/templates/auth/register.html @@ -1,32 +1,51 @@ -{% extends "base.html" %} -{% from 'auth/_form_fields.html' import email, password, submit %} - -{% block content %} -
-

Please sign up

- - {{ form.hidden_tag() }} - -
- -
- {{ form.username( - class="form-control", - placeholder="e.g., Lando Calrissian", - maxlength=64, - autocapitalize="off", - autocorrect="off", - ) }} -
-
- {% if form.errors.username %} - - {% endif %} + + + + + + + + + + + + Login - {{ email(form) }} - {{ password(form) }} - {{ submit(form) }} + + + +
+
+

Login to LudoLatin

+
+ + {% from 'auth/_form_fields.html' import email, password, submit %} + {{ form.hidden_tag() }} -

Already registered? Click here to login.

- -{% endblock %} +
+ + {{ form.username( + class="block appearance-none w-full bg-white border border-grey-light hover:border-grey px-2 py-2 rounded shadow", + placeholder="e.g., Lando Calrissian", + maxlength=64, + autocapitalize="off", + autocorrect="off", + ) }} +
+ + {{ email(form, type="email") }} + {{ password(form) }} + +
+ {{ submit(form) }} +
+ + +
+
+

Already registered? Click here to login.

+
+
+
+ + diff --git a/app/templates/auth/reset_password.html b/app/templates/auth/reset_password.html index 61634d4..69b6d17 100644 --- a/app/templates/auth/reset_password.html +++ b/app/templates/auth/reset_password.html @@ -1,15 +1,37 @@ -{% extends "base.html" %} -{% from 'auth/_form_fields.html' import password, submit %} + + + + + + -{% block content %} -
-

{{ title }}

+ + - {{ form.hidden_tag() }} - {{ password(form) }} - {{ submit(form) }} + Login -

Not needed? Go home.

-
-{% endblock %} + + + +
+
+

Login to LudoLatin

+
+
+ {% from 'auth/_form_fields.html' import email, password, submit %} + {{ form.hidden_tag() }} + + {{ password(form) }} +
+ {{ submit(form) }} +
+
+
+
+

Not needed? Go home.

+
+
+
+ + diff --git a/app/templates/auth/reset_password_request.html b/app/templates/auth/reset_password_request.html index 3393c9f..257176d 100644 --- a/app/templates/auth/reset_password_request.html +++ b/app/templates/auth/reset_password_request.html @@ -1,14 +1,38 @@ -{% extends "base.html" %} -{% from 'auth/_form_fields.html' import email, submit %} + + + + + + -{% block content %} -
-

{{ title }}

- {{ form.hidden_tag() }} - {{ email(form) }} - {{ submit(form) }} + + + + Login + + + + +
+
+

Login to LudoLatin

+
+ + {% from 'auth/_form_fields.html' import email, password, submit %} + {{ form.hidden_tag() }} + + {{ email(form) }} +
+ {{ submit(form) }} +
+ +
+
+

Not needed? Go home.

+
+
+
+ + -

Not needed? Go home.

- -{% endblock %}