Merge pull request #74 from revsys/auth-forms

Auth forms

frontend/styles.css

@@ -41,4 +41,8 @@
   input[type=file] {
     @apply block w-full px-3 py-1 text-base font-normal text-orange bg-clip-padding border border-solid border-slate rounded transition ease-in-out my-2;
   }
+  #signup_form input[type=email],
+  #signup_form input[type=password]{
+    @apply rounded bg-charcoal text-white border border-slate w-full;
+  }
 }

static/css/styles.css

@@ -675,6 +675,19 @@ input[type=file] {
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
 }
 
+#signup_form input[type=email],
+  #signup_form input[type=password] {
+  width: 100%;
+  border-radius: 0.25rem;
+  border-width: 1px;
+  --tw-border-opacity: 1;
+  border-color: rgb(49 74 87 / var(--tw-border-opacity));
+  --tw-bg-opacity: 1;
+  background-color: rgb(23 42 52 / var(--tw-bg-opacity));
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity));
+}
+
 *, ::before, ::after {
   --tw-border-spacing-x: 0;
   --tw-border-spacing-y: 0;
@@ -1173,6 +1186,10 @@ input[type=file] {
   width: auto;
 }
 
+.w-1\/3 {
+  width: 33.333333%;
+}
+
 .w-1\/6 {
   width: 16.666667%;
 }
@@ -1201,10 +1218,6 @@ input[type=file] {
   width: 1rem;
 }
 
-.w-1\/3 {
-  width: 33.333333%;
-}
-
 .w-5 {
   width: 1.25rem;
 }
@@ -1474,8 +1487,9 @@ input[type=file] {
   border-color: rgb(23 42 52 / var(--tw-border-opacity));
 }
 
-.border-slate\/60 {
-  border-color: rgb(49 74 87 / 0.6);
+.bg-red-600 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(220 38 38 / var(--tw-bg-opacity));
 }
 
 .bg-black {
@@ -1483,6 +1497,11 @@ input[type=file] {
   background-color: rgb(5 26 38 / var(--tw-bg-opacity));
 }
 
+.bg-white {
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+}
+
 .bg-charcoal {
   --tw-bg-opacity: 1;
   background-color: rgb(23 42 52 / var(--tw-bg-opacity));
@@ -1492,6 +1511,11 @@ input[type=file] {
   background-color: rgb(90 213 153 / 0.1);
 }
 
+.bg-indigo-600 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(79 70 229 / var(--tw-bg-opacity));
+}
+
 .bg-charcoal\/60 {
   background-color: rgb(23 42 52 / 0.6);
 }
@@ -1816,14 +1840,14 @@ input[type=file] {
   font-weight: 500;
 }
 
-.font-light {
-  font-weight: 300;
-}
-
 .font-bold {
   font-weight: 700;
 }
 
+.font-light {
+  font-weight: 300;
+}
+
 .uppercase {
   text-transform: uppercase;
 }
@@ -1840,6 +1864,11 @@ input[type=file] {
   letter-spacing: -0.025em;
 }
 
+.text-white {
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity));
+}
+
 .text-orange {
   --tw-text-opacity: 1;
   color: rgb(255 159 0 / var(--tw-text-opacity));
@@ -1870,6 +1899,14 @@ input[type=file] {
   color: rgb(181 201 211 / var(--tw-text-opacity));
 }
 
+.text-white\/80 {
+  color: rgb(255 255 255 / 0.8);
+}
+
+.text-white\/50 {
+  color: rgb(255 255 255 / 0.5);
+}
+
 .shadow {
   --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
   --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
@@ -1893,11 +1930,26 @@ input[type=file] {
   background-color: rgb(255 159 0 / var(--tw-bg-opacity));
 }
 
+.hover\:bg-indigo-700:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(67 56 202 / var(--tw-bg-opacity));
+}
+
 .hover\:bg-orange:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(255 159 0 / var(--tw-bg-opacity));
 }
 
+.hover\:text-white:hover {
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity));
+}
+
+.focus\:bg-white:focus {
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+}
+
 .focus\:text-charcoal:focus {
   --tw-text-opacity: 1;
   color: rgb(23 42 52 / var(--tw-text-opacity));
@@ -2099,14 +2151,14 @@ input[type=file] {
     width: 50%;
   }
 
-  .md\:w-5\/6 {
-    width: 83.333333%;
-  }
-
   .md\:w-full {
     width: 100%;
   }
 
+  .md\:w-5\/6 {
+    width: 83.333333%;
+  }
+
   .md\:w-2\/3 {
     width: 66.666667%;
   }
@@ -2295,16 +2347,16 @@ input[type=file] {
     padding-right: 0px;
   }
 
-  .md\:py-2 {
-    padding-top: 0.5rem;
-    padding-bottom: 0.5rem;
-  }
-
   .md\:py-1 {
     padding-top: 0.25rem;
     padding-bottom: 0.25rem;
   }
 
+  .md\:py-2 {
+    padding-top: 0.5rem;
+    padding-bottom: 0.5rem;
+  }
+
   .md\:py-11 {
     padding-top: 2.75rem;
     padding-bottom: 2.75rem;

tailwind.config.js

@@ -1,18 +1,27 @@
+const colors = require('tailwindcss/colors')
+
 module.exports = {
   content: ["templates/**/*.html"],
   darkMode: 'media',
   theme: {
     colors: {
-      'charcoal': '#172A34',
-      'orange': '#FF9F00',
-      'green': '#5AD599',
-      'black': '#051A26',
-      'slate': '#314A57',
-      'steel': '#B5C9D3',
+      transparent: 'transparent',
+      current: 'currentColor',
+      white: colors.white,
+      emerald: colors.emerald,
+      indigo: colors.indigo,
+      yellow: colors.yellow,
+      red: colors.red,
+      charcoal: '#172A34',
+      orange: '#FF9F00',
+      green: '#5AD599',
+      black: '#051A26',
+      slate: '#314A57',
+      steel: '#B5C9D3',
       'stone-white': '#DDE7EC',
-      'gold': '#F4CA1F',
-      'bronze': '#BB8A56',
-      'silver': '#B5C9D3',
+      gold: '#F4CA1F',
+      bronze: '#BB8A56',
+      silver: '#B5C9D3',
     },
     extend: {
       fontFamily: {

templates/account/login.html

@@ -8,40 +8,60 @@
 
 {% block content %}
 
-<h1>{% trans "Login" %}</h1>
+  <div class="py-0 md:py-6 mb-3 px-3 md:px-0">
 
-{% get_providers as socialaccount_providers %}
+    <div class="md:w-full">
+      <h1 class="text-4xl text-center">{% trans "Login" %}</h1>
+    </div>
 
-{% if socialaccount_providers %}
-<p>{% blocktrans with site.name as site_name %}Please log in with one
-of your existing third party accounts. Or, <a href="{{ signup_url }}">sign up</a>
-for a {{ site_name }} account and log in below:{% endblocktrans %}</p>
+    <div class="w-full space-y-4 text-center">
+      {% get_providers as socialaccount_providers %}
 
-<div class="socialaccount_ballot">
+      {% if socialaccount_providers %}
+      <p class="text-center mt-0">{% blocktrans with site.name as site_name %}Please log in with one
+      of your existing third party accounts.{% endblocktrans %}</p>
 
-  <ul class="socialaccount_providers">
-    {% include "socialaccount/snippets/provider_list.html" with process="login" %}
-  </ul>
+      <div class="socialaccount_ballot">
 
-  <div class="login-or">{% trans 'or' %}</div>
+        <div class="space-x-4">
+          {% include "socialaccount/snippets/provider_list.html" with process="login" %}
+        </div>
 
-</div>
+        <div class="my-11 uppercase text-white/50">{% trans 'or' %}</div>
 
-{% include "socialaccount/snippets/login_extra.html" %}
+      </div>
 
-{% else %}
-<p>{% blocktrans %}If you have not created an account yet, then please
-<a href="{{ signup_url }}">sign up</a> first.{% endblocktrans %}</p>
-{% endif %}
+      {% include "socialaccount/snippets/login_extra.html" %}
 
-<form class="login" method="POST" action="{% url 'account_login' %}">
-  {% csrf_token %}
-  {{ form.as_p }}
-  {% 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' %}">{% trans "Forgot Password?" %}</a>
-  <button class="primaryAction" type="submit">{% trans "Login" %}</button>
-</form>
+      {% else %}
+        <p class="text-center mt-0">{% blocktrans %}If you have not created an account yet, then please
+        <a href="{{ signup_url }}">sign up</a> first.{% endblocktrans %}</p>
+      {% endif %}
+
+      <form class="login" method="POST" action="{% url 'account_login' %}">
+        <div class="w-full space-y-4 text-center" id="signup_form">
+        {% csrf_token %}
+
+        {% for field in form.visible_fields %}
+          <div class="w-1/3 mx-auto">
+            <label class="uppercase text-white/50 text-xs">{{ field.label }}</label>
+            {{ 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 class="mb-4">
+          <a class="button secondaryAction" href="{% url 'account_reset_password' %}">{% trans "Forgot Password?" %}</a>
+        </div>
+        <button type="submit" class="px-8 py-3 border border-orange text-base font-medium rounded-md text-orange md:py-1 md:text-lg md:px-4 uppercase text-sm">{% trans "Login" %}</button>
+        </div>
+      </form>
+    </div>
+  </div>
 
 {% endblock %}

templates/account/signup.html

@@ -5,17 +5,45 @@
 {% block head_title %}{% trans "Signup" %}{% endblock %}
 
 {% block content %}
-<h1>{% trans "Sign Up" %}</h1>
 
-<p>{% blocktrans %}Already have an account? Then please <a href="{{ login_url }}">sign in</a>.{% endblocktrans %}</p>
+  <div class="py-0 md:py-6 mb-3 px-3 md:px-0">
+    <div class="md:w-full">
+      <h1 class="text-4xl text-center">{% trans "Sign Up" %}</h1>
+      <p class="text-center mt-0">
+        {% blocktrans %}Already have an account? Then please <a href="{{ login_url }}">sign in</a>.{% endblocktrans %}
+      </p>
+    </div>
 
-<form class="signup" id="signup_form" method="post" action="{% url 'account_signup' %}">
-  {% csrf_token %}
-  {{ form.as_p }}
-  {% if redirect_field_value %}
-  <input type="hidden" name="{{ redirect_field_name }}" value="{{ redirect_field_value }}" />
-  {% endif %}
-  <button type="submit">{% trans "Sign Up" %} &raquo;</button>
-</form>
+    <form id="signup_form" method="post" action="{% url 'account_signup' %}">
+      <div class="w-full space-y-4 text-center">
+        {% csrf_token %}
+
+        {% if form.errors %}
+          {% for error in field.errors %}
+            <p class="text-orange font-bold">
+              {{ error|escape }}
+            </p>
+          {% endfor %}
+        {% endif %}
+
+        {% for field in form.visible_fields %}
+          <div class="w-1/3 mx-auto">
+            {{ 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 %}
+        <button type="submit"
+                class="px-8 py-3 border border-orange text-base font-medium rounded-md text-orange md:py-1 md:text-lg md:px-4 uppercase text-sm">{% trans "Sign Up" %}
+          &raquo;
+        </button>
+      </div>
+    </form>
+  </div>
 
 {% endblock %}

templates/forum/forum_list.html

@@ -197,7 +197,7 @@
     {% endif %}
     {% endrecurseforumcontents %}
     {% else %}
-    <div class="mt-3 relative flex flex-col min-w-0 rounded break-words border bg-white border-1 border-gray-300 forumlist">
+    <div class="mt-3 relative flex flex-col min-w-0 rounded break-words border border-1 border-gray-300 forumlist">
       <div class="p-0 py-3 px-6 mb-0 bg-gray-200 border-b-1 border-gray-300 text-gray-900">
         <div class="flex flex-wrap  m-0 px-3 py-2">
           <div class="pl-0 md:w-2/3 pr-4 pl-4 sm:w-3/4 pr-4 pl-4 w-3/4 forum-name-col">

templates/homepage.html

@@ -16,7 +16,7 @@
         <p class="mt-3 md:mb-11 max-w-md mx-auto text-base text-gray-500 text-lg md:mt-5 md:text-xl md:max-w-3xl">Experience C++ libraries created by experts to be reliable, skillfully designed, and well-tested.</p>
         <div class="mt-5 max-w-md md:flex justify-center md:justify-between md:mt-8 space-y-3 md:space-y-0">
           <a href="#" class="flex items-center justify-center px-8 py-3 border border-orange text-base font-medium rounded-md text-orange md:py-4 md:text-lg md:px-4"><img class="mt-1 pr-2" src="{% static 'img/icons/icon-download-orng.svg' %}" alt="Downloads" /> Download Latest </a>
-          <a href="#" class="flex items-center justify-center px-8 py-3 border border-steel text-base font-medium rounded-md text-orange bg-white hover:bg-gray-50 md:py-4 md:text-lg md:px-10"> Version Details > </a>
+          <a href="#" class="flex items-center justify-center px-8 py-3 border border-steel text-base font-medium rounded-md text-orange hover:bg-gray-50 md:py-4 md:text-lg md:px-10"> Version Details > </a>
         </div>
       </div>
     </div>
@@ -63,7 +63,7 @@
             <a href="#" class="w-full flex items-center justify-center px-8 py-3 border border-orange text-base font-medium rounded-md text-orange bg-indigo-600 hover:bg-indigo-700 md:py-4 md:text-base md:px-10"> Download </a>
           </div>
           <div class="mt-3 rounded-md shadow sm:mt-0 sm:ml-3">
-            <a href="#" class="w-full flex items-center justify-center px-8 py-3 border border-steel text-base font-medium rounded-md text-orange bg-white hover:bg-gray-50 md:py-4 md:text-base md:px-10"> Version Details > </a>
+            <a href="#" class="w-full flex items-center justify-center px-8 py-3 border border-steel text-base font-medium rounded-md text-orange hover:bg-gray-50 md:py-4 md:text-base md:px-10"> Version Details > </a>
           </div>
         </div>
       </div>

templates/libraries/list.html

@@ -41,7 +41,7 @@
             <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" class="w-4 h-4"><path d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>
           </button>
         </span>
-        <input type="search" name="q" class="w-full md:w-1/3 text-sm text-white bg-charcoal focus:bg-white focus:text-charcoal text-orange px-3 py-2 rounded-md" type="text" value="" placeholder="Search Library" />
+        <input type="search" name="q" class="w-full md:w-1/3 text-sm text-white bg-charcoal focus:text-charcoal text-orange px-3 py-2 rounded-md" type="text" value="" placeholder="Search Library" />
       </div>
       <div>
         <select class="mb-3 md:mb-0 w-full md:w-auto cursor-pointer block sm:inline-block text-sm uppercase rounded-md bg-black text-orange border border-slate pl-5 pr-11 py-3 mr-3">

templates/socialaccount/snippets/provider_list.html

@@ -0,0 +1,16 @@
+{% load socialaccount %}
+
+{% get_providers as socialaccount_providers %}
+
+{% for provider in socialaccount_providers %}
+{% if provider.id == "openid" %}
+{% for brand in provider.get_brands %}
+  <a title="{{brand.name}}"
+     class="px-8 py-3 border border-steel text-base font-medium rounded-md text-orange hover:bg-gray-50 md:py-4 md:text-lg md:px-10 {{provider.id}} {{brand.id}}"
+     href="{% provider_login_url provider.id openid=brand.openid_url process=process %}"
+     >{{brand.name}}</a>
+{% endfor %}
+{% endif %}
+  <a title="{{provider.name}}" class="px-8 py-3 border border-steel text-base font-medium rounded-md text-orange hover:bg-gray-50 md:py-4 md:text-lg md:px-10 {{provider.id}}"
+     href="{% provider_login_url provider.id process=process scope=scope auth_params=auth_params %}">{{provider.name}}</a>
+{% endfor %}

templates/versions/list.html

@@ -25,7 +25,7 @@
             <a href="#" class="w-full flex items-center justify-center px-8 py-3 border border-orange text-base font-medium rounded-md text-orange bg-indigo-600 hover:bg-indigo-700 md:py-4 md:text-lg md:px-10"> Download </a>
           </div>
           <div class="mt-3 rounded-md shadow sm:mt-0 sm:ml-3">
-            <a href="#" class="w-full flex items-center justify-center px-8 py-3 border border-steel text-base font-medium rounded-md text-orange bg-white hover:bg-gray-50 md:py-4 md:text-lg md:px-10"> Version Details > </a>
+            <a href="#" class="w-full flex items-center justify-center px-8 py-3 border border-steel text-base font-medium rounded-md text-orange hover:bg-gray-50 md:py-4 md:text-lg md:px-10"> Version Details > </a>
           </div>
         </div>
       </div>