[UI IMPROVEMENT] Aligns login and profile UI with signup (hedyorg#2066)

* Generalized input styling Co-authored-by: Felienne <[email protected]>
gg-big-org · Feb 23, 2022 · ccee693 · ccee693
1 parent 947a75e
commit ccee693
Show file tree

Hide file tree

Showing 9 changed files with 189 additions and 170 deletions.
diff --git a/app.py b/app.py
@@ -35,48 +35,13 @@
 # Hedy-specific modules
 import hedy_content
 import hedyweb
+from hedy import ALL_LANGUAGES, FALL_BACK_ADVENTURE, ALL_KEYWORD_LANGUAGES
 from website import querylog, aws_helpers, jsonbin, translating, ab_proxying, cdn, database, achievements
 from website.log_fetcher import log_fetcher
 
 # Set the current directory to the root Hedy folder
 os.chdir(os.path.join(os.getcwd(), __file__.replace(os.path.basename(__file__), '')))
 
-# Define and load all available language data
-ALL_LANGUAGES = {
-    'en': 'English',
-    'nl': 'Nederlands',
-    'es': 'Español',
-    'fr': 'Français',
-    'pt_pt': 'Português(pt)',
-    'pt_br': 'Português(br)',
-    'de': 'Deutsch',
-    'it': 'Italiano',
-    'sw': 'Swahili',
-    'hu': 'Magyar',
-    'el': 'Ελληνικά',
-    'zh': "简体中文",
-    'cs': 'Čeština',
-    'bg': 'Български',
-    'bn': 'বাংলা',
-    'hi': 'हिंदी',
-    'id': 'Bahasa Indonesia',
-    'fy': 'Frysk',
-    'ar': 'عربى'
-}
-# Define fall back languages for adventures
-FALL_BACK_ADVENTURE = {
-    'fy': 'nl',
-    'pt_br': 'pt_pt'
-}
-
-ALL_KEYWORD_LANGUAGES = {
-    'en': 'EN',
-    'nl': 'NL',
-    'ar': 'AR',
-    'fr': 'FR',
-    'es': 'ES'
-}
-
 LEVEL_DEFAULTS = collections.defaultdict(hedy_content.NoSuchDefaults)
 for lang in ALL_LANGUAGES.keys():
     LEVEL_DEFAULTS[lang] = hedy_content.LevelDefaults(lang)
@@ -1196,6 +1161,9 @@ def other_languages():
 def keyword_languages():
     return [make_lang_obj(l) for l in ALL_KEYWORD_LANGUAGES.keys()]
 
+@app.template_global()
+def keyword_languages_keys():
+    return [l for l in ALL_KEYWORD_LANGUAGES.keys()]
 
 def make_lang_obj(lang):
     """Make a language object for a given language."""

diff --git a/build-tools/heroku/tailwind/styles.css b/build-tools/heroku/tailwind/styles.css
@@ -215,44 +215,25 @@ ol {
 }
 
 /* AUTH */
-#signup input[type=checkbox] {
+input[type=checkbox] {
   @apply appearance-none border border-gray-400 w-4 h-4;
 }
 
-#signup input:required, select:required {
+#signup input:required, #signup select:required, #update_profile input:required {
   @apply border border-red-400;
 }
 
-#signup input:required:valid, select:required:valid {
-  @apply border-green-400;
+/* Make this !important to it over-writes the red required border when valid */
+input:required:valid, select:required:valid {
+  @apply border-green-400 !important;
 }
 
-#signup input[type=checkbox]:checked {
+input[type=checkbox]:checked {
   @apply bg-green-400 border-green-600;
 }
 
-form.auth {
-  border: solid 1px #eeeeee;
-  padding-bottom: 10px;
-}
-
-form.auth label {
-  width: 140px;
-  display: inline-block;
-}
-
-form.auth input {
-  padding: 5px;
-  border: solid 2px grey;
-}
-
-form.auth .pointer {
-  cursor: pointer;
-}
-
-form.auth select {
-  padding: 5px;
-  width: 180px;
+input, select {
+  @apply border border-gray-400;
 }
 
 table.users thead {

diff --git a/hedy.py b/hedy.py
@@ -32,6 +32,41 @@
 # Python keywords need hashing when used as var names
 reserved_words = ['and', 'except', 'lambda', 'with', 'as', 'finally', 'nonlocal', 'while', 'assert', 'False', 'None', 'yield', 'break', 'for', 'not', 'class', 'from', 'or', 'continue', 'global', 'pass', 'def', 'if', 'raise', 'del', 'import', 'return', 'elif', 'in', 'True', 'else', 'is', 'try']
 
+# Define and load all available language data
+ALL_LANGUAGES = {
+    'en': 'English',
+    'nl': 'Nederlands',
+    'es': 'Español',
+    'fr': 'Français',
+    'pt_pt': 'Português(pt)',
+    'pt_br': 'Português(br)',
+    'de': 'Deutsch',
+    'it': 'Italiano',
+    'sw': 'Swahili',
+    'hu': 'Magyar',
+    'el': 'Ελληνικά',
+    'zh': "简体中文",
+    'cs': 'Čeština',
+    'bg': 'Български',
+    'bn': 'বাংলা',
+    'hi': 'हिंदी',
+    'id': 'Bahasa Indonesia',
+    'fy': 'Frysk',
+    'ar': 'عربى'
+}
+# Define fall back languages for adventures
+FALL_BACK_ADVENTURE = {
+    'fy': 'nl',
+    'pt_br': 'pt_pt'
+}
+
+ALL_KEYWORD_LANGUAGES = {
+    'en': 'EN',
+    'nl': 'NL',
+    'ar': 'AR',
+    'fr': 'FR',
+    'es': 'ES'
+}
 
 class Command:
     print = 'print'

diff --git a/static/css/generated.css b/static/css/generated.css
diff --git a/templates/learn-more.html b/templates/learn-more.html
@@ -3,26 +3,26 @@
 {% block body %}
 <div class="px-8 py-12 relative">
     <div class="px-8">
-        <form class="auth bg-white shadow-md rounded px-8 pt-6 pb-8 mb-8 w-3/4 mx-auto" action="https://hedycode.us7.list-manage.com/subscribe/post?u=22a3ce4e09535f82f587a7118&amp;id=57f3b3c090" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
+        <form class="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-8 w-3/4 mx-auto" action="https://hedycode.us7.list-manage.com/subscribe/post?u=22a3ce4e09535f82f587a7118&amp;id=57f3b3c090" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
             <h2 class="py-2">{{ content.mailing_title }}</h2>
             <div>
-                <div class="mb-4">
-                    <label for="mce-EMAIL">{{ content.mail }}  <span class="asterisk">*</span></label>
-                    <input type="email" value="" name="EMAIL" class="required email w-3/4" id="mce-EMAIL" required>
+                <div class="flex flex-row items-center justify-center mb-2">
+                    <label for="mce-EMAIL" class="inline-block w-40">{{ content.mail }}<span class="asterisk">*</span></label>
+                    <input type="email" value="" name="EMAIL" class="inline-block w-full px-2 py-1 rounded-lg" id="mce-EMAIL" required>
                 </div>
-                <div class="mb-4">
-                    <label for="mce-FNAME">{{ content.surname }} </label>
-                    <input type="text" value="" name="FNAME" class="w-3/4" id="mce-FNAME">
+                <div class="flex flex-row items-center justify-center mb-2">
+                    <label for="mce-FNAME" class="inline-block w-40">{{ content.surname }}</label>
+                    <input type="text" value="" name="FNAME" class="inline-block w-full px-2 py-1 rounded-lg" id="mce-FNAME">
                 </div>
-                <div class="mb-4">
-                    <label for="mce-LNAME">{{ content.lastname }} </label>
-                    <input type="text" value="" name="LNAME" class="w-3/4" id="mce-LNAME">
+                <div class="flex flex-row items-center justify-center mb-2">
+                    <label for="mce-LNAME" class="inline-block w-40">{{ content.lastname }}</label>
+                    <input type="text" value="" name="LNAME" class="inline-block w-full px-2 py-1 rounded-lg" id="mce-LNAME">
                 </div>
-                <div class="mb-4">
-                    <label for="mce-COUNTRY">{{ content.country }} </label>
-                    <input type="text" value="" name="COUNTRY" class="w-3/4" id="mce-COUNTRY">
+                <div class="flex flex-row items-center justify-center mb-2">
+                    <label for="mce-COUNTRY" class="inline-block w-40">{{ content.country }}</label>
+                    <input type="text" value="" name="COUNTRY" class="inline-block w-full px-2 py-1 rounded-lg" id="mce-COUNTRY">
                 </div>
-                <div class="mb-4">
+                <div class="flex flex-row items-center justify-center mb-2">
                     <div class="response" id="mce-error-response" style="display:none"></div>
                     <div class="response" id="mce-success-response" style="display:none"></div>
                 </div>    <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->

diff --git a/templates/login.html b/templates/login.html
@@ -4,25 +4,34 @@
 
 {% block message %}{% endblock %}
 
-<div class="w-full max-w-md text-center mx-auto">
-  <div class="bg-white shadow-md rounded px-8 pt-6 pb-4 mb-4">
-      <form class="js-validated-form auth" style="border: none;" onsubmit="event.preventDefault (); hedyApp.auth.submit ('login')">
-        <h2 class="py-2">{{auth.login_long}}</h2>
-        <div class="mb-4">
-            <label for="username">{{auth.username}}</label>
-            <input id="username" name="username" required>
+<div class="w-full max-w-md mx-auto">
+  <div class="bg-white shadow-md rounded pt-6 pb-4 mb-4">
+      <form class="js-validated-form" style="border: none;" onsubmit="event.preventDefault (); hedyApp.auth.submit ('login')">
+        <h2 class="py-2 text-center">{{auth.login_long}}</h2>
+        <div class="flex flex-row items-center justify-center mb-2">
+            <label for="username" class="inline-block w-1/3">{{auth.username}}</label><input class="inline-block w-1/2 px-2 py-1 rounded-lg border-gray-400" id="username" minlength="3" name="username" required>
         </div>
-        <div class="mb-4">
-            <label for=password">{{auth.password}}</label>
-            <input id="password" name="password" type=password required>
+        <div class="flex flex-row items-center justify-center mb-2">
+            <label for=password" class="inline-block w-1/3">{{auth.password}}</label><input class="inline-block w-1/2 px-2 py-1 rounded-lg border-gray-400" id="password" minlength="6" name="password" type=password required>
+        </div>
+        <div class="flex flex-row items-center justify-center">
+            <button type="submit" class="green-btn mt-2">
+                {{auth.login}}
+            </button>
         </div>
-        <button type="submit" class="green-btn mt-2">{{auth.login}}</button>
         <div id="error" class="flex-0 mt-4 mb-4 bg-red-100 border-t-4 border-red-500 rounded-b text-red-900 px-4 py-3 shadow-md" role="alert" style="display: none;"></div>
       </form>
   </div>
-  <form id="create-account" class="py-2" onsubmit="event.preventDefault (); hedyApp.auth.redirect ('signup')">
-    {{auth.no_account}}&nbsp;&nbsp;<button type="submit" class="green-btn">{{auth.create_account}}</button>
+  <form id="create-account" class="flex flex-row items-center justify-center mt-2" onsubmit="event.preventDefault (); hedyApp.auth.redirect ('signup')">
+      <p class="ltr:mr-4 rtl:ml-4">{{auth.no_account}}</p>
+      <button type="submit" class="green-btn">
+          {{auth.create_account}}
+      </button>
+  </form>
+  <form class="flex flex-row items-center justify-center mt-2" onsubmit="event.preventDefault (); window.location.href = '/recover'">
+      <button type="submit" class="btn">
+          {{auth.forgot_password}}
+      </button>
   </form>
-  <form class="py-2" onsubmit="event.preventDefault (); window.location.href = '/recover'"><button type="submit" class="btn">{{auth.forgot_password}}</button></form>
 </div>
 {% endblock %}