paulmataruso/zulip
1
0
Fork 0
mirror of https://github.com/zulip/zulip.git synced 2025-11-04 14:03:30 +00:00
Code Issues Packages Projects Releases Wiki Activity

portico: Add a loading indicator to login button.

Browse Source 
Added a loading indicator when user clicks on Log in button.

Fixes #6477.
This commit is contained in:
VishalCR7
2017-12-07 08:56:44 +05:30
committed by Tim Abbott
parent 16162b75b8
commit 68df428de9
4 changed files with 74 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
static/images/loader.svg Normal file
View File

@@ -0,0 +1,49 @@
<svg width="30px" height="30px" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" style="background: none;"><g transform="rotate(0 50 50)">
<rect x="47" y="15" rx="9.4" ry="3" width="6" height="20" fill="#ffffff">
<animate attributeName="opacity" values="1;0" times="0;1" dur="1s" begin="-0.9166666666666666s" repeatCount="indefinite"></animate>
</rect>
</g><g transform="rotate(30 50 50)">
<rect x="47" y="15" rx="9.4" ry="3" width="6" height="20" fill="#ffffff">
<animate attributeName="opacity" values="1;0" times="0;1" dur="1s" begin="-0.8333333333333334s" repeatCount="indefinite"></animate>
</rect>
</g><g transform="rotate(60 50 50)">
<rect x="47" y="15" rx="9.4" ry="3" width="6" height="20" fill="#ffffff">
<animate attributeName="opacity" values="1;0" times="0;1" dur="1s" begin="-0.75s" repeatCount="indefinite"></animate>
</rect>
</g><g transform="rotate(90 50 50)">
<rect x="47" y="15" rx="9.4" ry="3" width="6" height="20" fill="#ffffff">
<animate attributeName="opacity" values="1;0" times="0;1" dur="1s" begin="-0.6666666666666666s" repeatCount="indefinite"></animate>
</rect>
</g><g transform="rotate(120 50 50)">
<rect x="47" y="15" rx="9.4" ry="3" width="6" height="20" fill="#ffffff">
<animate attributeName="opacity" values="1;0" times="0;1" dur="1s" begin="-0.5833333333333334s" repeatCount="indefinite"></animate>
</rect>
</g><g transform="rotate(150 50 50)">
<rect x="47" y="15" rx="9.4" ry="3" width="6" height="20" fill="#ffffff">
<animate attributeName="opacity" values="1;0" times="0;1" dur="1s" begin="-0.5s" repeatCount="indefinite"></animate>
</rect>
</g><g transform="rotate(180 50 50)">
<rect x="47" y="15" rx="9.4" ry="3" width="6" height="20" fill="#ffffff">
<animate attributeName="opacity" values="1;0" times="0;1" dur="1s" begin="-0.4166666666666667s" repeatCount="indefinite"></animate>
</rect>
</g><g transform="rotate(210 50 50)">
<rect x="47" y="15" rx="9.4" ry="3" width="6" height="20" fill="#ffffff">
<animate attributeName="opacity" values="1;0" times="0;1" dur="1s" begin="-0.3333333333333333s" repeatCount="indefinite"></animate>
</rect>
</g><g transform="rotate(240 50 50)">
<rect x="47" y="15" rx="9.4" ry="3" width="6" height="20" fill="#ffffff">
<animate attributeName="opacity" values="1;0" times="0;1" dur="1s" begin="-0.25s" repeatCount="indefinite"></animate>
</rect>
</g><g transform="rotate(270 50 50)">
<rect x="47" y="15" rx="9.4" ry="3" width="6" height="20" fill="#ffffff">
<animate attributeName="opacity" values="1;0" times="0;1" dur="1s" begin="-0.16666666666666666s" repeatCount="indefinite"></animate>
</rect>
</g><g transform="rotate(300 50 50)">
<rect x="47" y="15" rx="9.4" ry="3" width="6" height="20" fill="#ffffff">
<animate attributeName="opacity" values="1;0" times="0;1" dur="1s" begin="-0.08333333333333333s" repeatCount="indefinite"></animate>
</rect>
</g><g transform="rotate(330 50 50)">
<rect x="47" y="15" rx="9.4" ry="3" width="6" height="20" fill="#ffffff">
<animate attributeName="opacity" values="1;0" times="0;1" dur="1s" begin="0s" repeatCount="indefinite"></animate>
</rect>
</g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.2 KiB

16
static/js/portico/signup.js
View File

@@ -56,11 +56,6 @@ $(function () {
}, },
}); });
$("#login_form").validate({
errorClass: "text-error",
wrapper: "div",
});
$(".register-page #email, .login-page-container #id_username").on('focusout keydown', function (e) { $(".register-page #email, .login-page-container #id_username").on('focusout keydown', function (e) {
// check if it is the "focusout" or if it is a keydown, then check if // check if it is the "focusout" or if it is a keydown, then check if
// the keycode was the one for "enter" (13). // the keycode was the one for "enter" (13).
@@ -77,4 +72,15 @@ $(function () {
$("#realm_in_root_domain").change(function () { $("#realm_in_root_domain").change(function () {
show_subdomain_section($(this).is(":checked")); show_subdomain_section($(this).is(":checked"));
}); });
$("#login_form").validate({
errorClass: "text-error",
wrapper: "div",
submitHandler: function (form) {
$("#login_form").find('.loader').css('display', 'inline-block');
$("#login_form").find("button .text").hide();
form.submit();
},
});
}); });

10
static/styles/portico-signin.css
View File

@@ -943,3 +943,13 @@ button.login-google-button {
min-height: calc(100vh - 560px); min-height: calc(100vh - 560px);
} }
} }
#login_form .loader {
display: none;
vertical-align: top;
position: relative;
height: 30px;
margin-top: -10px;
top: 5px;
}

5
templates/zerver/login.html
View File

@@ -111,7 +111,10 @@
</div> </div>
{% endif %} {% endif %}
<button type="submit" name="button" class="full-width">{{ _("Sign in") }}</button> <button type="submit" name="button" class="full-width">
<img class="loader" src="/static/images/loader.svg" />
<span class="text">{{ _("Sign in") }}</span>
</button>
</form> </form>
{% if any_oauth_backend_enabled %} {% if any_oauth_backend_enabled %}