Skip to content

Commit

Permalink
Improve the user interface of the login, reset password and signup pa…
Browse files Browse the repository at this point in the history 
…ges (hedyorg#979)

* Visually improved login screen, starting point of hedyorg#968
* Improved styling of recover.html
* Similarly improved reset.html 
* Implemented small fix to prevent 'Select' from being an Country of choice
Fixes hedyorg#968.
  • Loading branch information
@TiBiBa
TiBiBa authored Oct 12, 2021
1 parent c17f079 commit e5c7dad
Show file tree
Hide file tree
Showing 5 changed files with 121 additions and 99 deletions.
2 changes: 1 addition & 1 deletion static/js/auth.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -261,7 +261,7 @@ window.auth = {
// *** LOADERS ***

if ($ ('#country')) {
var html = '<option value="">Select</option>';
var html = $ ('#country').html();
Object.keys (countries).map (function (code) {
html += '<option value="' + code + '">' + countries [code] + '</option>';
});
Expand Down
29 changes: 14 additions & 15 deletions templates/login.html
View file
Original file line number Diff line number Diff line change
@@ -1,25 +1,24 @@
{% extends "auth.html" %}

{% block main %}
<div class="px-8">
<form class="auth" onsubmit="event.preventDefault (); window.auth.submit ('login')">
<h2>{{auth.login_long}}</h2>
<br>
<label>{{auth.username}} / {{auth.email}}</label>
<input id="username">
<br><br>
<label>{{auth.password}}</label>
<input id="password" type=password>
<br><br>
<button type="submit" class="green-btn">{{auth.login}}</button>
<div class="w-full max-w-md text-center ml-auto mr-auto">
<form class="auth bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4" onsubmit="event.preventDefault (); window.auth.submit ('login')">
<h2 class="py-2">{{auth.login_long}}</h2>
<div class="mb-4">
<label for="username">{{auth.username}} / {{auth.email}}</label>
<input id="username" name="username">
</div>
<div class="mb-6">
<label for=password">{{auth.password}}</label>
<input id="password" name="password" type=password>
</div>
<button type="submit" class="green-btn my-2">{{auth.login}}</button>
<div id="error" class="flex-0 mt-8 mb-8 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>
<div id="success" class="flex-0 mt-8 mb-8 bg-green-100 border-t-4 border-green-500 rounded-b text-green-900 px-4 py-3 shadow-md" role="alert" style="display: none;"></div>
</form>
<form id="create-account" onsubmit="event.preventDefault (); window.location.href = 'signup{% if lang and lang != "en" %}?lang={{lang}}{% endif %}'">
<br>
<form id="create-account" class="py-2" onsubmit="event.preventDefault (); window.location.href = 'signup{% if lang and lang != "en" %}?lang={{lang}}{% endif %}'">
{{auth.no_account}}&nbsp;&nbsp;<button type="submit" class="green-btn">{{auth.create_account}}</button>
<br><br>
</form>
<form onsubmit="event.preventDefault (); window.location.href = 'recover{% if lang and lang != "en" %}?lang={{lang}}{% endif %}'"><button type="submit" class="btn">{{auth.forgot_password}}</button></form>
<form class="py-2" onsubmit="event.preventDefault (); window.location.href = 'recover{% if lang and lang != "en" %}?lang={{lang}}{% endif %}'"><button type="submit" class="btn">{{auth.forgot_password}}</button></form>
</div>
{% endblock %}
17 changes: 8 additions & 9 deletions templates/recover.html
View file
Original file line number Diff line number Diff line change
@@ -1,17 +1,16 @@
{% extends "auth.html" %}

{% block main %}
<div class="px-8">
<form class="auth" onsubmit="event.preventDefault (); window.auth.submit ('recover')">
<h2>{{auth.recover_password}}</h2>
<br>
<label>{{auth.username}} / {{auth.email}}</label>
<input id="username">
<br><br>
<div class="w-full max-w-xl text-center ml-auto mr-auto">
<form class="auth bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4" onsubmit="event.preventDefault (); window.auth.submit ('recover')">
<h2 class="py-2">{{auth.recover_password}}</h2>
<div class="mb-4">
<label for="username">{{auth.username}} / {{auth.email}}</label>
<input id="username" name="username">
</div>
<div id="error" class="flex-0 mt-0 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>
<div id="success" class="flex-0 mt-0 bg-green-100 border-t-4 border-green-500 rounded-b text-green-900 px-4 py-3 shadow-md" role="alert" style="display: none;"></div>
<br><br>
<button type="submit" class="green-btn">{{auth.send_password_recovery}}</button>
<button type="submit" class="green-btn my-2">{{auth.send_password_recovery}}</button>
</form>
</div>
{% endblock %}
24 changes: 12 additions & 12 deletions templates/reset.html
View file
Original file line number Diff line number Diff line change
@@ -1,20 +1,20 @@
{% extends "auth.html" %}

{% block main %}
<div class="px-8">
<form class="auth" onsubmit="event.preventDefault (); window.auth.submit ('reset')">
<h2>{{auth.reset_password}}</h2>
<br>
<label>{{auth.password}}</label>
<input id="password" type=password>
<br><br>
<label>{{auth.password_repeat}}</label>
<input id="password_repeat" type=password>
<br><br>
<div class="w-full max-w-xl text-center ml-auto mr-auto">
<form class="auth bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4" onsubmit="event.preventDefault (); window.auth.submit ('reset')">
<h2 class="py-2">{{auth.reset_password}}</h2>
<div class="md-4">
<label>{{auth.password}}</label>
<input id="password" type=password>
</div>
<div class="md-4">
<label>{{auth.password_repeat}}</label>
<input id="password_repeat" type=password>
</div>
<div id="error" class="flex-0 mt-0 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>
<div id="success" class="flex-0 mt-0 bg-green-100 border-t-4 border-green-500 rounded-b text-green-900 px-4 py-3 shadow-md" role="alert" style="display: none;"></div>
<br><br>
<button type="submit" class="green-btn">{{auth.reset_password}}</button>
<button type="submit" class="green-btn py-2">{{auth.reset_password}}</button>
</form>
</div>
{% endblock %}
148 changes: 86 additions & 62 deletions templates/signup.html
View file
Original file line number Diff line number Diff line change
@@ -1,73 +1,97 @@
{% extends "auth.html" %}

{% block main %}
<div class="px-8">
<form class="auth" onsubmit="event.preventDefault (); window.auth.submit ('signup')">
<h2>{{auth.create_account}}</h2>
<h4 class="text-blue-500">{{auth.create_account_explanation}}</h3>
<br>
<label>{{auth.username}}</label>
<input id="username">
<br><br>
<label>{{auth.email}}</label>
<input id="email" type="email">
<br><br>
<label>{{auth.email_repeat}}</label>
<input id="mail_repeat" type="text" autocomplete="off">
<br><br>
<label>{{auth.password}}</label>
<input id="password" type=password>
<br><br>
<label>{{auth.password_repeat}}</label>
<input id="password_repeat" type=password>
<br><br>
<label>{{auth.birth_year}}</label>
<input id="birth_year" placeholder="1995" type="number">
<br><br>
<label>{{auth.gender}}</label>
<select id="gender">
<option value="">{{auth.select}}</option>
<option value="f">{{auth.female}}</option>
<option value="m">{{auth.male}}</option>
<option value="o">{{auth.other}}</option>
</select>
<br><br>
<label>{{auth.country}}</label>
<select id="country"></select>
<div>
<br><br>
<label class="inline-block float-left">{{auth.programming_experience}}</label>
<div class="float-left">
<input class="pl-4" type="radio" name="has_experience" value="yes" onclick="$ ('#languages').show ()"><span class="pl-2">{{auth.yes}}</span><br>
<input class="pl-4" type="radio" name="has_experience" value="no" onclick="$ ('#languages').hide ()"><span class="pl-2">{{auth.no}}</span>
</div>
<div class="w-full max-w-xl text-center ml-auto mr-auto">
<form class="auth bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4" onsubmit="event.preventDefault (); window.auth.submit ('signup')">
<h2 class="py-2">{{auth.create_account}}</h2>
<h4 class="text-blue-500 py-2">{{auth.create_account_explanation}}</h4>
<div class="mb-4">
<label for="username">{{auth.username}}</label>
<input id="username" name="username">
</div>
<div class="mb-4">
<label for="email">{{auth.email}}</label>
<input id="email" name="email" type="email">
</div>
<div class="mb-4">
<label for="mail_repeat">{{auth.email_repeat}}</label>
<input id="mail_repeat" name="mail_repeat" type="text" autocomplete="off">
</div>
<div class="mb-4">
<label for="password">{{auth.password}}</label>
<input id="password" name="password" type=password>
</div>
<div class="mb-4">
<label for="password_repeat">{{auth.password_repeat}}</label>
<input id="password_repeat" name="password_repeat" type=password>
</div>
<div class="mb-4">
<label for="birth_year">{{auth.birth_year}}</label>
<input id="birth_year" name="birth_year" placeholder="1995" type="number">
</div>
<div class="clear-both hidden" id="languages">
<br><br>
<label class="inline-block float-left">{{auth.languages}}</label>
<div class="float-left">
<input type="checkbox" name="languages" value="scratch"><span class="pl-2">Scratch</span><br>
<input type="checkbox" name="languages" value="other_block"><span class="pl-2">{{auth.other_block}}</span><br>
<input type="checkbox" name="languages" value="python"><span class="pl-2">Python</span><br>
<input type="checkbox" name="languages" value="other_text"><span class="pl-2">{{auth.other_text}}</span><br>
<div class="mb-4">
<label for="gender">{{auth.gender}}</label>
<select id="gender" name="gender">
<option value="" selected disabled hidden>{{auth.select}}</option>
<option value="f">{{auth.female}}</option>
<option value="m">{{auth.male}}</option>
<option value="o">{{auth.other}}</option>
</select>
</div>
<div class="mb-4">
<label for="country">{{auth.country}}</label>
<select id="country" name="country">
<option value="" selected disabled hidden>{{auth.select}}</option>
</select>
</div>
<div class="flex flex-row justify-evenly mb-4">
<label>{{auth.programming_experience}}</label>
<div class="flex flex-col">
<label for="has_experience">
<input class="float-left" type="radio" name="has_experience" value="yes" onclick="$ ('#languages').show ()">
<div class="mb-2" style="margin-top: -0.3em;">{{auth.yes}}</div>
</label>
<label for="has_experience">
<input class="float-left" type="radio" name="has_experience" value="no" onclick="$ ('#languages').hide ()">
<div class="mb-2" style="margin-top: -0.3em;">{{auth.no}}</div>
</label>
</div>
</div>
<div class="clear-both">
<br>
<label>{{auth.subscribe_newsletter}}</label>
<input type="checkbox" id="subscribe">

<div class="flex flex-row justify-evenly mb-4" style="display: none;" id="languages">
<!-- For some reason the Tailwind 'hidden' class messes up the layout, therefore we "brute"-style it within the element -->
<label>{{auth.languages}}</label>
<div class="flex flex-col">
<label>
<input class="float-left" type="checkbox" name="languages" value="scratch">
<div class="mb-2" style="margin-top: -0.3em;">Scratch</div>
</label>
<label>
<input class="float-left" type="checkbox" name="languages" value="other_block">
<div class="mb-2" style="margin-top: -0.3em;">{{auth.other_block}}</div>
</label>
<label>
<input class="float-left" type="checkbox" name="languages" value="python">
<div class="mb-2" style="margin-top: -0.3em;">Python</div>
</label>
<label>
<input class="float-left" type="checkbox" name="languages" value="other_text">
<div class="mb-2" style="margin-top: -0.3em;">{{auth.other_text}}</div>
</label>
</div>
</div>
<br><br>
<button type="submit" class="green-btn">{{auth.create_account}}</button>
<div id="error" class="flex-0 mt-8 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 id="success" class="flex-0 mt-8 bg-red-100 border-t-4 border-green-500 rounded-b text-red-900 px-4 py-3 shadow-md" role="alert" style="display: none;">
<div class="flex flex-row justify-center mb-4">
<label for="subscribe">
<input class="float-left" type="checkbox" id="subscribe" name="subscribe">
<div style="margin-top: -0.3em;">{{auth.subscribe_newsletter}}</div>
</label>
</div>
<br><br>
<button type="submit" class="green-btn mb-4">{{auth.create_account}}</button>
<div id="error" class="flex-0 mt-8 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>
<div id="success" class="flex-0 mt-8 bg-red-100 border-t-4 border-green-500 rounded-b text-red-900 px-4 py-3 shadow-md" role="alert" style="display: none;"></div>
</form>
<form onsubmit="event.preventDefault (); window.location.href = '{{localize_link ('/login')}}'">
{{auth.already_account}}&nbsp;&nbsp;<button type="submit" class="btn">{{auth.login}}</button>
</form>
</div>
<form onsubmit="event.preventDefault (); window.location.href = '{{localize_link ('/login')}}'">
<br>
{{auth.already_account}}&nbsp;&nbsp;<button type="submit" class="btn">{{auth.login}}</button>
<br><br>
</form>
{% endblock %}

0 comments on commit e5c7dad

Please sign in to comment.