Skip to content

Commit

Permalink
💄 Rewrite all forms with Tailwind
Browse files Browse the repository at this point in the history
  • Loading branch information
@merelinguist
merelinguist committed Dec 16, 2017
1 parent cb6d077 commit 6aaa7a5
Show file tree
Hide file tree
Showing 7 changed files with 259 additions and 120 deletions.
52 changes: 28 additions & 24 deletions app/templates/auth/_form_fields.html
View file
@@ -1,34 +1,38 @@
{% macro email(form, type='email') %}
<div class="form-group row align-items-center">
<label class="col-3 col-form-label">{{form.email.label}}</label>
<div class="col">
{{ form.email(
class="form-control",
type=type,
placeholder="e.g., calrissian@cloud.ci",
maxlength=128,
autocapitalize="off",
autocorrect="off",
) }}
</div>
<div class="mb-4">
<label class="text-grey-darker block mb-2">Username or Email</label>
{{ 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",
) }}
</div>
{% endmacro %}

{% macro new_email(form, type='email') %}
<div class="mb-4">
<label class="text-grey-darker block mb-2">New email</label>
{{ 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",
) }}
</div>
{% if form.errors.email %}
<div class="form-control-feedback">{{ form.errors.email[0] }}</div>
{% endif %}
{% endmacro %}

{% macro password(form) %}
<div class="form-group row align-items-center">
<label class="col-3 col-form-label">{{form.password.label}}</label>
<div class="col">
{{ form.password(class="form-control", placeholder="e.g., ••••••••••") }}
</div>
<div class="mb-4">
<label class="text-grey-darker block mb-2">Password</label>
{{ 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., ••••••••••") }}
</div>
{% if form.errors.password %}
<div class="form-control-feedback">{{ form.errors.password[0] }}</div>
{% 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 %}
49 changes: 37 additions & 12 deletions app/templates/auth/change_email.html
View file
@@ -1,15 +1,40 @@
{% extends "base.html" %}
{% from 'auth/_form_fields.html' import email, password, submit %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">

{% block content %}
<form class="form-auth" method=post>
<h2 class="form-auth-heading">{{ title }}</h2>

{{ form.hidden_tag() }}
{{ email(form) }}
{{ password(form) }}
{{ submit(form) }}
<link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css" rel="stylesheet">

<p>Not needed? <a href="{{ url_for('dashboard.dashboard') }}">Go home</a>.</p>
</form>
{% endblock %}
<title>Login</title>

<style>.nunito{font-family: 'Nunito', sans-serif;}</style>
</head>
<body class="bg-grey-lighter h-screen nunito">
<div class="container mx-auto h-full flex justify-center items-center">
<div class="w-1/3">
<h1 class="font-hairline mb-6 text-center">Login to LudoLatin</h1>
<div class="border-teal p-8 border-t-12 bg-white mb-6 rounded-lg shadow-lg">
<form method="post">
{% from 'auth/_form_fields.html' import new_email, password, submit %}
{{ form.hidden_tag() }}

{{ new_email(form, type="email") }}
{{ password(form) }}

<div class="flex items-center justify-between">
{{ submit(form) }}
</div>
</form>

</div>
<div class="text-center">
<p class="text-grey-dark text-sm">Not needed? <a href="/" class="no-underline text-blue">Go home</a>.</p>
</div>
</div>
</div>
</body>
</html>
53 changes: 37 additions & 16 deletions app/templates/auth/change_password.html
View file
@@ -1,21 +1,42 @@
{% extends "base.html" %}
{% from 'auth/_form_fields.html' import password, submit %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">

{% block content %}
<form class="form-auth" method=post>
<h2 class="form-auth-heading">{{ title }}</h2>

{{ form.hidden_tag() }}
<link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css" rel="stylesheet">

{{ form.old_password.label(class="sr-only") }}
{{ form.old_password(class="form-control", placeholder=form.old_password.label.text) }}
{% if form.errors.old_password %}
<div class="form-control-feedback">{{ form.errors.old_password[0] }}</div>
{% endif %}
<title>Login</title>

{{ password(form) }}
{{ submit(form) }}
<style>.nunito{font-family: 'Nunito', sans-serif;}</style>
</head>
<body class="bg-grey-lighter h-screen nunito">
<div class="container mx-auto h-full flex justify-center items-center">
<div class="w-1/3">
<h1 class="font-hairline mb-6 text-center">Login to LudoLatin</h1>
<div class="border-teal p-8 border-t-12 bg-white mb-6 rounded-lg shadow-lg">
<form method="post">
{% from 'auth/_form_fields.html' import email, password, submit %}
{{ form.hidden_tag() }}

<p>Not needed? <a href="{{ url_for('dashboard.dashboard') }}">Go home</a>.</p>
</form>
{% endblock %}
<div class="mb-4">
{{ 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) }}
</div>
{{ password(form) }}

<div class="flex items-center justify-between">
{{ submit(form) }}
</div>
</form>
</div>
<div class="text-center">
<p class="text-grey-dark text-sm">Not needed? <a href="/" class="no-underline text-blue">Go home</a>.</p>
</div>
</div>
</div>
</body>
</html>
56 changes: 40 additions & 16 deletions app/templates/auth/login.html
View file
@@ -1,19 +1,43 @@
{% extends "base.html" %}
{% from 'auth/_form_fields.html' import email, password, submit %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">

{% block content %}
<form class="form-auth" method=post>
<h2 class="form-auth-heading">{{ title }}</h2>

{{ form.hidden_tag() }}
{{ email(form, type="text") }}
{{ password(form) }}
{{ submit(form) }}
<link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css" rel="stylesheet">

<p>
Forgotten password? <a href="{{ url_for('auth.reset_password_request') }}">Reset your password</a>.
<br>
New user? <a href="{{ url_for('auth.register') }}">Register now!</a>
</p>
</form>
{% endblock %}
<title>Login</title>

<style>.nunito{font-family: 'Nunito', sans-serif;}</style>
</head>
<body class="bg-grey-lighter h-screen nunito">
<div class="container mx-auto h-full flex justify-center items-center">
<div class="w-1/3">
<h1 class="font-hairline mb-6 text-center">Login to LudoLatin</h1>
<div class="border-teal p-8 border-t-12 bg-white mb-6 rounded-lg shadow-lg">
<form method="post">
{% from 'auth/_form_fields.html' import email, password, submit %}
{{ form.hidden_tag() }}

{{ email(form, type="text") }}
{{ password(form) }}

<div class="flex items-center justify-between">
{{ submit(form) }}

<a class="no-underline inline-block align-baseline text-sm text-blue hover:text-blue-dark float-right" href="{{ url_for('auth.reset_password_request') }}">
Forgot Password?
</a>
</div>
</form>
</div>
<div class="text-center">
<p class="text-grey-dark text-sm">Don't have an account? <a href="{{ url_for('auth.register') }}" class="no-underline text-blue">Create an Account</a>.</p>
</div>
</div>
</div>
</body>
</html>
79 changes: 49 additions & 30 deletions app/templates/auth/register.html
View file
@@ -1,32 +1,51 @@
{% extends "base.html" %}
{% from 'auth/_form_fields.html' import email, password, submit %}

{% block content %}
<form class="form-auth" method=post>
<h2 class="form-auth-heading">Please sign up</h2>

{{ form.hidden_tag() }}

<div class="form-group row align-items-center">
<label class="col-3 col-form-label">{{form.username.label}}</label>
<div class="col">
{{ form.username(
class="form-control",
placeholder="e.g., Lando Calrissian",
maxlength=64,
autocapitalize="off",
autocorrect="off",
) }}
</div>
</div>
{% if form.errors.username %}
<div class="form-control-feedback">{{ form.errors.username[0] }}</div>
{% endif %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">


<link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css" rel="stylesheet">

<title>Login</title>

{{ email(form) }}
{{ password(form) }}
{{ submit(form) }}
<style>.nunito{font-family: 'Nunito', sans-serif;}</style>
</head>
<body class="bg-grey-lighter h-screen nunito">
<div class="container mx-auto h-full flex justify-center items-center">
<div class="w-1/3">
<h1 class="font-hairline mb-6 text-center">Login to LudoLatin</h1>
<div class="border-teal p-8 border-t-12 bg-white mb-6 rounded-lg shadow-lg">
<form method="post">
{% from 'auth/_form_fields.html' import email, password, submit %}
{{ form.hidden_tag() }}

<p>Already registered? <a href="{{ url_for('auth.login') }}">Click here to login</a>.</p>
</form>
{% endblock %}
<div class="mb-4">
<label class="text-grey-darker block mb-2">Username</label>
{{ 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",
) }}
</div>

{{ email(form, type="email") }}
{{ password(form) }}

<div class="flex items-center justify-between">
{{ submit(form) }}
</div>
</form>

</div>
<div class="text-center">
<p class="text-grey-dark text-sm">Already registered? <a href="{{ url_for('auth.login') }}" class="no-underline text-blue">Click here to login</a>.</p>
</div>
</div>
</div>
</body>
</html>
44 changes: 33 additions & 11 deletions app/templates/auth/reset_password.html
View file
@@ -1,15 +1,37 @@
{% extends "base.html" %}
{% from 'auth/_form_fields.html' import password, submit %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">


{% block content %}
<form class="form-auth" method=post>
<h2 class="form-auth-heading">{{ title }}</h2>
<link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css" rel="stylesheet">

{{ form.hidden_tag() }}
{{ password(form) }}
{{ submit(form) }}
<title>Login</title>

<p>Not needed? <a href="{{ url_for('dashboard.dashboard') }}">Go home</a>.</p>
</form>
{% endblock %}
<style>.nunito{font-family: 'Nunito', sans-serif;}</style>
</head>
<body class="bg-grey-lighter h-screen nunito">
<div class="container mx-auto h-full flex justify-center items-center">
<div class="w-1/3">
<h1 class="font-hairline mb-6 text-center">Login to LudoLatin</h1>
<div class="border-teal p-8 border-t-12 bg-white mb-6 rounded-lg shadow-lg">
<form method="post">
{% from 'auth/_form_fields.html' import email, password, submit %}
{{ form.hidden_tag() }}

{{ password(form) }}
<div class="flex items-center justify-between">
{{ submit(form) }}
</div>
</form>
</div>
<div class="text-center">
<p class="text-grey-dark text-sm">Not needed? <a href="{{ url_for('auth.register') }}" class="no-underline text-blue">Go home</a>.</p>
</div>
</div>
</div>
</body>
</html>

0 comments on commit 6aaa7a5

Please sign in to comment.