Skip to content

Commit

Permalink
add UI for auth pages
Browse files Browse the repository at this point in the history
  • Loading branch information
@iamsdas
iamsdas committed Feb 24, 2022
1 parent ee71516 commit a00e5ce
Show file tree
Hide file tree
Showing 8 changed files with 122 additions and 137 deletions.
25 changes: 18 additions & 7 deletions arike/templates/account/base.html
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,21 @@
{% extends "base.html" %}
{% block title %}{% block head_title %}{% endblock head_title %}{% endblock title %}

{% block content %}
<div class="row">
<div class="col-md-6 offset-md-3">
{% block inner %}{% endblock %}
{% extends "base.html" %} {% block content %}
<div class="flex h-screen">
<div
class="hidden sm:flex sm:w-1/2 bg-gray-700 text-white flex-col justify-center p-2 text-center"
>
<div class="text-5xl font-bold pb-1">Arike</div>
<div class="text-lg">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Laudantium est
commodi sed.
</div>
</div>
<div
class="overflow-y-auto w-full sm:w-1/2 py-4 px-5 flex flex-col justify-center"
>
<div class="text-2xl text-gray-700 font-semibold pb-1 text-center">
{% block title %} {% endblock title %}
</div>
<div class="">{% block inner %}{% endblock %}</div>
</div>
</div>
{% endblock %}
92 changes: 40 additions & 52 deletions arike/templates/account/login.html
View file
Original file line number Diff line number Diff line change
@@ -1,59 +1,47 @@
{% extends "account/base.html" %}

{% load i18n %}
{% load account socialaccount %}
{% load crispy_forms_tags %}

{% block head_title %}{% translate "Sign In" %}{% endblock %}

{% block inner %}

<h1>{% translate "Sign In" %}</h1>

{% get_providers as socialaccount_providers %}

{% extends "account/base.html" %} {% load i18n %} {% load crispy_forms_tags %}
{% load account socialaccount %} {% block title %} Sign In {% endblock %}
{% block inner %} {% get_providers as socialaccount_providers %}
{% if socialaccount_providers %}
<p>
{% translate "Please sign in with one of your existing third party accounts:" %}
{% if ACCOUNT_ALLOW_REGISTRATION %}
{% blocktranslate trimmed %}
Or, <a href="{{ signup_url }}">sign up</a>
for a {{ site_name }} account and sign in below:
{% endblocktranslate %}
{% endif %}
</p>

<div class="socialaccount_ballot">

<ul class="socialaccount_providers">
{% include "socialaccount/snippets/provider_list.html" with process="login" %}
</ul>

<div class="login-or">{% translate "or" %}</div>

</div>

{% include "socialaccount/snippets/login_extra.html" %}

{% else %}
{% if ACCOUNT_ALLOW_REGISTRATION %}
<p>
{% blocktranslate trimmed %}
If you have not created an account yet, then please
<a href="{{ signup_url }}">sign up</a> first.
{% endblocktranslate %}
</p>
{% endif %}
{% endif %}
<p>
{% translate "Please sign in with one of your existing third party accounts:"
%} {% if ACCOUNT_ALLOW_REGISTRATION %} {% blocktranslate trimmed %} Or,
<a href="{{ signup_url }}">sign up</a>
for a {{ site_name }} account and sign in below: {% endblocktranslate %} {%
endif %}
</p>

<div class="socialaccount_ballot">
<ul class="socialaccount_providers">
{% include "socialaccount/snippets/provider_list.html" with process="login"
%}
</ul>

<div class="login-or">{% translate "or" %}</div>
</div>

{% include "socialaccount/snippets/login_extra.html" %} {% else %} {% if
ACCOUNT_ALLOW_REGISTRATION %}
<p>
{% blocktranslate trimmed %} If you have not created an account yet, then
please
<a href="{{ signup_url }}">sign up</a> first. {% endblocktranslate %}
</p>
{% endif %} {% endif %}

<form class="login" method="POST" action="{% url 'account_login' %}">
{% csrf_token %}
{{ form|crispy }}
{% if redirect_field_value %}
<input type="hidden" name="{{ redirect_field_name }}" value="{{ redirect_field_value }}" />
{% csrf_token %} {{ form|crispy }} {% if redirect_field_value %}
<input
type="hidden"
name="{{ redirect_field_name }}"
value="{{ redirect_field_value }}"
/>
{% endif %}
<a class="button secondaryAction" href="{% url 'account_reset_password' %}">{% translate "Forgot Password?" %}</a>
<button class="primaryAction btn btn-primary" type="submit">{% translate "Sign In" %}</button>
<a class="font-semibold text-gray-600 mb-2" href="{% url 'account_reset_password' %}">
Forgot Password?
</a>
<button class="bg-gray-700 p-2 rounded-xl w-full text-white" type="submit">
Login
</button>
</form>

{% endblock %}
23 changes: 12 additions & 11 deletions arike/templates/account/logout.html
View file
Original file line number Diff line number Diff line change
@@ -1,19 +1,20 @@
{% extends "account/base.html" %}

{% load i18n %}

{% block head_title %}{% translate "Sign Out" %}{% endblock %}
{% extends "account/base.html" %} {% load i18n %}
{% block title %}Sign Out {% endblock %}

{% block inner %}
<h1>{% translate "Sign Out" %}</h1>

<p>{% translate 'Are you sure you want to sign out?' %}</p>
<p class="text-xl py-2 text-center">{% translate 'Are you sure you want to sign out?' %}</p>

<form method="post" action="{% url 'account_logout' %}">
{% csrf_token %}
{% if redirect_field_value %}
<input type="hidden" name="{{ redirect_field_name }}" value="{{ redirect_field_value }}"/>
{% csrf_token %} {% if redirect_field_value %}
<input
type="hidden"
name="{{ redirect_field_name }}"
value="{{ redirect_field_value }}"
/>
{% endif %}
<button class="btn btn-danger" type="submit">{% translate 'Sign Out' %}</button>
<button class="bg-red-700 p-2 rounded-xl w-full text-white mt-3" type="submit">
Log Out
</button>
</form>
{% endblock %}
39 changes: 22 additions & 17 deletions arike/templates/account/signup.html
View file
Original file line number Diff line number Diff line change
@@ -1,22 +1,27 @@
{% extends "account/base.html" %}
{% extends "account/base.html" %} {% load i18n %} {% load crispy_forms_tags %}
{% block title %} Sign Up {% endblock %} {% block inner %}

{% load i18n %}
{% load crispy_forms_tags %}

{% block head_title %}{% translate "Signup" %}{% endblock %}

{% block inner %}
<h1>{% translate "Sign Up" %}</h1>

<p>{% blocktranslate %}Already have an account? Then please <a href="{{ login_url }}">sign in</a>.{% endblocktranslate %}</p>

<form class="signup" id="signup_form" method="post" action="{% url 'account_signup' %}">
{% csrf_token %}
{{ form|crispy }}
{% if redirect_field_value %}
<input type="hidden" name="{{ redirect_field_name }}" value="{{ redirect_field_value }}" />
<form
class="signup"
id="signup_form"
method="post"
action="{% url 'account_signup' %}"
>
{% csrf_token %} {{ form|crispy }} {% if redirect_field_value %}
<input
type="hidden"
name="{{ redirect_field_name }}"
value="{{ redirect_field_value }}"
/>
{% endif %}
<button class="btn btn-primary" type="submit">{% translate "Sign Up" %} &raquo;</button>
<button class="bg-gray-700 p-2 rounded-xl w-full text-white" type="submit">
Sign Up
</button>
</form>

<p class="pt-2">
Already have an account? Then please
<a href="{{ login_url }}" class="font-semibold text-gray-600">sign in</a>.
</p>

{% endblock %}
47 changes: 1 addition & 46 deletions arike/templates/base.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,52 +37,7 @@

<body>

<div class="mb-1">
<nav class="navbar navbar-expand-md navbar-light bg-light">
<div class="container-fluid">
<button class="navbar-toggler navbar-toggler-right" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="{% url 'home' %}">Arike</a>

<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="{% url 'home' %}">Home <span class="visually-hidden">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="{% url 'about' %}">About</a>
</li>
{% if request.user.is_authenticated %}
<li class="nav-item">
{# URL provided by django-allauth/account/urls.py #}
<a class="nav-link" href="{% url 'users:detail' request.user.username %}">{% translate "My Profile" %}</a>
</li>
<li class="nav-item">
{# URL provided by django-allauth/account/urls.py #}
<a class="nav-link" href="{% url 'account_logout' %}">{% translate "Sign Out" %}</a>
</li>
{% else %}
{% if ACCOUNT_ALLOW_REGISTRATION %}
<li class="nav-item">
{# URL provided by django-allauth/account/urls.py #}
<a id="sign-up-link" class="nav-link" href="{% url 'account_signup' %}">{% translate "Sign Up" %}</a>
</li>
{% endif %}
<li class="nav-item">
{# URL provided by django-allauth/account/urls.py #}
<a id="log-in-link" class="nav-link" href="{% url 'account_login' %}">{% translate "Sign In" %}</a>
</li>
{% endif %}
</ul>
</div>
</div>
</nav>

</div>

<div class="container">

<div>
{% if messages %}
{% for message in messages %}
<div class="alert alert-dismissible {% if message.tags %}alert-{{ message.tags }}{% endif %}">
Expand Down
24 changes: 24 additions & 0 deletions arike/users/forms.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
from allauth.socialaccount.forms import SignupForm as SocialSignupForm
from django.contrib.auth import forms as admin_forms
from django.contrib.auth import get_user_model
from django import forms
from django.utils.translation import gettext_lazy as _

User = get_user_model()
Expand Down Expand Up @@ -33,6 +34,29 @@ class UserSignupForm(SignupForm):
Check UserSocialSignupForm for accounts created from social.
"""

name = forms.CharField(
max_length=30,
label="Full Name",
)
phone = forms.CharField(max_length=16, label="Phone Number")

def __init__(self, *args, **kwargs):
super().__init__(*args, **kwargs)
self.fields["name"].widget.attrs.update(
{
"class": "",
"label": "Full Name",
"placeholder": "Full Name",
}
)
self.fields["phone"].widget.attrs.update(
{
"class": "",
"label": "Phone Number",
"placeholder": "Phone Number",
}
)


class UserSocialSignupForm(SocialSignupForm):
"""
Expand Down
8 changes: 4 additions & 4 deletions config/settings/base.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -73,7 +73,7 @@
]
THIRD_PARTY_APPS = [
"crispy_forms",
"crispy_bootstrap5",
"crispy_tailwind",
"allauth",
"allauth.account",
"allauth.socialaccount",
Expand Down Expand Up @@ -201,8 +201,8 @@
FORM_RENDERER = "django.forms.renderers.TemplatesSetting"

# http://django-crispy-forms.readthedocs.io/en/latest/install.html#template-packs
CRISPY_TEMPLATE_PACK = "bootstrap5"
CRISPY_ALLOWED_TEMPLATE_PACKS = "bootstrap5"
CRISPY_TEMPLATE_PACK = "tailwind"
CRISPY_ALLOWED_TEMPLATE_PACKS = "tailwind"

# FIXTURES
# ------------------------------------------------------------------------------
Expand Down Expand Up @@ -290,7 +290,7 @@
# ------------------------------------------------------------------------------
ACCOUNT_ALLOW_REGISTRATION = env.bool("DJANGO_ACCOUNT_ALLOW_REGISTRATION", True)
# https://django-allauth.readthedocs.io/en/latest/configuration.html
ACCOUNT_AUTHENTICATION_METHOD = "username"
ACCOUNT_AUTHENTICATION_METHOD = "email"
# https://django-allauth.readthedocs.io/en/latest/configuration.html
ACCOUNT_EMAIL_REQUIRED = True
# https://django-allauth.readthedocs.io/en/latest/configuration.html
Expand Down
1 change: 1 addition & 0 deletions requirements/base.txt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,3 +22,4 @@ djangorestframework==3.13.1 # https://github.com/encode/django-rest-framework
django-cors-headers==3.11.0 # https://github.com/adamchainz/django-cors-headers
# DRF-spectacular for api documentation
drf-spectacular==0.21.2
crispy-tailwind==0.5.0

0 comments on commit a00e5ce

Please sign in to comment.