From 086b11719100c101e89efe58862ee521c349213a Mon Sep 17 00:00:00 2001
From: Seth Ladygo <alx-git@apparentinc.com>
Date: Sat, 16 Mar 2019 22:09:04 -0700
Subject: [PATCH] style up login/logout/signup pages

---
 templates/account/login.html  | 87 ++++++++++++++++++++++++++---------
 templates/account/logout.html | 26 ++++++-----
 templates/account/signup.html | 62 ++++++++++++++++---------
 3 files changed, 119 insertions(+), 56 deletions(-)

diff --git a/templates/account/login.html b/templates/account/login.html
index 40fc16e..4fe5ee7 100644
--- a/templates/account/login.html
+++ b/templates/account/login.html
@@ -6,31 +6,72 @@
 {% block title %}{% trans "Log in" %}{% endblock %}
 
 {% block content %}
-    <div class="row">
-        <div class="col-md-4">
-            <form method="POST" action="{% url "account_login" %}" autocapitalize="off" {% if form.is_multipart %} enctype="multipart/form-data"{% endif %}>
-                <legend>{% trans "Log in to an existing account" %}</legend>
-                {% csrf_token %}
-                {{ form }}
-                {% if redirect_field_value %}
-                    <input type="hidden" name="{{ redirect_field_name }}" value="{{ redirect_field_value }}" />
-                {% endif %}
-                <button type="submit" class="btn btn-primary">{% trans "Log in" %}</button>
-                <a href="{% url "account_password_reset" %}" class="btn btn-link">{% trans "Forgot your password?" %}</a>
-            </form>
-            {% if ACCOUNT_OPEN_SIGNUP %}
-                <p class="login-signup">
-                    <small>
-                        {% trans "Don't have an account?" %}  <strong><a href="{% urlnext 'account_signup' %}">{% trans "Sign up" %}</a></strong>
-                    </small>
-                </p>
-                {% endif %}
-                <a href="{% url 'login_guest' %}" class="btn btn-link">{% trans "Log in as guest" %}</a>
+<div class="uk-flex uk-flex-center uk-margin-large-top" uk-grid>
+
+  <div class="uk-width-medium">
+  <div class="uk-card uk-card-default uk-card-body uk-margin">
+      <legend class="uk-legend">{% trans "Guest access" %}</legend>
+      <div class="uk-text-meta uk-margin">Quick access for downloading
+      product images and making one-off catalogs.</div>
+      <a href="{% url 'login_guest' %}" class="uk-button uk-button-primary">{% trans "Log in as guest" %}</a>
+  </div>
+  </div>
+
+  <div class="uk-width-medium">
+  <div class="uk-card uk-card-default uk-card-body uk-margin">
+
+    <form method="POST" action="{% url "account_login" %}"
+          autocapitalize="off"
+          class="uk-form"
+          {% if form.is_multipart %} enctype="multipart/form-data"{% endif %}>
+      <legend class="uk-legend">{% trans "Log in" %}</legend>
+      {% csrf_token %}
+
+      <div class="uk-margin">
+        <div class="uk-inline uk-form-width-medium">
+          <span class="uk-form-icon" uk-icon="icon: user"></span>
+          <input class="uk-input"
+                 type="text" name="username" id="id_username"
+                 maxlength="30" required
+                 placeholder="{% trans 'Username' %}">
         </div>
-        <div class="col-md-4">
-            {% include "account/_login_sidebar.html" %}
+      </div>
+
+      <div class="uk-margin">
+        <div class="uk-inline uk-form-width-medium">
+          <span class="uk-form-icon" uk-icon="icon: lock"></span>
+          <input class="uk-input"
+                 type="password" name="password" id="id_password"
+                 required
+                 placeholder="{% trans 'Password' %}">
         </div>
-    </div>
+      </div>
+
+      <div class="uk-margin uk-form-width-medium">
+        <input class="uk-checkbox" type="checkbox" name="remember" id="id_remember">
+        <label class="uk-form-label" for="id_remember">Remember Me</label>
+      </div>
+
+      {% if redirect_field_value %}
+      <input type="hidden" name="{{ redirect_field_name }}" value="{{ redirect_field_value }}" />
+      {% endif %}
+
+      <button type="submit" class="uk-button uk-button-primary">{% trans "Log in" %}</button>
+    </form>
+
+    <p>
+      <small>
+        <a href="{% url "account_password_reset" %}" class="btn btn-link">{% trans "Forgot your password?" %}</a>
+        <br/>
+        {% if ACCOUNT_OPEN_SIGNUP %}
+        {% trans "Don't have an account?" %}  <strong><a href="{% urlnext 'account_signup' %}">{% trans "Sign up" %}</a></strong>
+        {% endif %}
+      </small>
+    </p>
+
+  </div>
+  </div>
+</div>
 {% endblock %}
 
 {% block scripts %}
diff --git a/templates/account/logout.html b/templates/account/logout.html
index eac4c98..0c9ca9a 100644
--- a/templates/account/logout.html
+++ b/templates/account/logout.html
@@ -5,16 +5,18 @@
 {% block title %}{% trans "Log out" %}{% endblock %}
 
 {% block content %}
-    <div class="row">
-        <div class="col-md-5">
-            <form method="POST" action="{% url "account_logout" %}">
-                <legend>{% trans "Log out" %}</legend>
-                <fieldset>
-                    {% csrf_token %}
-                    <p>{% trans "Are you sure you want to log out?" %}</p>
-                    <button type="submit" class="btn btn-primary">{% trans "Log out" %}</button>
-                </fieldset>
-            </form>
-        </div>
-    </div>
+<div class="uk-flex uk-flex-center">
+  <div class="uk-card uk-card-default uk-card-body uk-margin-large-top">
+
+    <form method="POST" action="{% url "account_logout" %}">
+      <legend class="uk-legend">{% trans "Log out" %}</legend>
+      <fieldset class="uk-fieldset">
+        {% csrf_token %}
+        <p>{% trans "Are you sure you want to log out?" %}</p>
+        <button type="submit" class="uk-button uk-button-primary">{% trans "Log out" %}</button>
+      </fieldset>
+    </form>
+
+  </div>
+</div>
 {% endblock %}
diff --git a/templates/account/signup.html b/templates/account/signup.html
index 0f96c8a..f1196fd 100644
--- a/templates/account/signup.html
+++ b/templates/account/signup.html
@@ -6,27 +6,47 @@
 {% block title %}{% trans "Sign up" %}{% endblock %}
 
 {% block content %}
-    <div class="row">
-        <div class="col-md-4">
-            <form id="signup_form" method="post" action="{% url "account_signup" %}" autocapitalize="off" {% if form.is_multipart %} enctype="multipart/form-data"{% endif %}>
-                <legend>{% trans "Sign up" %}</legend>
-                {% csrf_token %}
-                {{ form }}
-                {% if redirect_field_value %}
-                    <input type="hidden" name="{{ redirect_field_name }}" value="{{ redirect_field_value }}" />
-                {% endif %}
-                <button type="submit" class="btn btn-primary">{% trans "Sign up" %}</button>
-            </form>
-            <p class="login-signup">
-                <small>
-                    {% trans "Already have an account?" %}  <strong><a href="{% urlnext 'account_login' %}">{% trans "Log in" %}</a></strong>
-                </small>
-            </p>
-        </div>
-        <div class="col-md-4">
-            {% include "account/_signup_sidebar.html" %}
-        </div>
-    </div>
+<div class="uk-flex uk-flex-center uk-margin-top">
+
+  <div class="uk-card uk-card-default uk-card-body">
+      <legend class="uk-legend">{% trans "Sign up" %}</legend>
+
+      <form class="uk-form" id="signup_form" method="post" action="{% url "account_signup" %}" autocapitalize="off" {% if form.is_multipart %} enctype="multipart/form-data"{% endif %}>
+      {% csrf_token %}
+
+      <div class="uk-margin">
+        <label class="uk-form-label" for="id_username">Username</label>
+        <input class="uk-input uk-form-small" type="text" name="username" id="id_username" maxlength="30" required>
+      </div>
+
+      <div class="uk-margin">
+        <label class="uk-form-label" for="id_email">Email</label>
+        <input class="uk-input uk-form-small" type="text" name="email" id="id_email" required>
+      </div>
+
+      <div class="uk-margin">
+        <label class="uk-form-label" for="id_password">Password</label>
+        <input class="uk-input uk-form-small" type="password" name="password" id="id_password" required>
+      </div>
+
+      <div class="uk-margin">
+        <label class="uk-form-label" for="id_password_confirm">Password (again)</label>
+        <input class="uk-input uk-form-small" type="password" name="password_confirm" id="id_password_confirm" required>
+        <input type="hidden" name="code" id="id_code">
+      </div>
+
+      {% if redirect_field_value %}
+      <input type="hidden" name="{{ redirect_field_name }}" value="{{ redirect_field_value }}" />
+      {% endif %}
+      <button type="submit" class="uk-button uk-button-primary">{% trans "Sign up" %}</button>
+    </form>
+    <p class="login-signup">
+      <small>
+        {% trans "Already have an account?" %}  <strong><a href="{% urlnext 'account_login' %}">{% trans "Log in" %}</a></strong>
+      </small>
+    </p>
+  </div>
+</div>
 {% endblock %}
 
 {% block scripts %}