techies/authelia
1
0
Fork 0
mirror of https://github.com/0rangebananaspy/authelia.git synced 2024-09-14 22:47:21 +07:00
Code Issues Projects Releases Wiki Activity

Make first factor login page UI indicate loading state

Browse Source 
* Submit button changes to "Loading..."
* Form fades and disables
This commit is contained in:
Callan Bryant 2018-07-19 14:58:06 +01:00
parent f67bb69ee0
commit 9cd48c068d
4 changed files with 12 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
client/src/css/01-main.css
View File

@ -63,4 +63,4 @@ body {
} }
h1 { h1 {
font-size: 25px; font-size: 25px;
} }

3
client/src/lib/firstfactor/UISelectors.ts
View File

@ -1,3 +1,4 @@
export const USERNAME_FIELD_ID = "#username"; export const USERNAME_FIELD_ID = "#username";
export const PASSWORD_FIELD_ID = "#password"; export const PASSWORD_FIELD_ID = "#password";
export const SIGN_IN_BUTTON_ID = "#signin";

9
client/src/lib/firstfactor/index.ts
View File

@ -15,7 +15,10 @@ export default function (window: Window, $: JQueryStatic,
function onFormSubmitted() { function onFormSubmitted() {
const username: string = $(UISelectors.USERNAME_FIELD_ID).val() as string; const username: string = $(UISelectors.USERNAME_FIELD_ID).val() as string;
const password: string = $(UISelectors.PASSWORD_FIELD_ID).val() as string; const password: string = $(UISelectors.PASSWORD_FIELD_ID).val() as string;
$(UISelectors.PASSWORD_FIELD_ID).val("");
$("form").css("opacity", 0.5);
$("input,button").attr("disabled", "true");
$(UISelectors.SIGN_IN_BUTTON_ID).text("Please wait...");
const redirectUrl = QueryParametersRetriever.get(Constants.REDIRECT_QUERY_PARAM); const redirectUrl = QueryParametersRetriever.get(Constants.REDIRECT_QUERY_PARAM);
firstFactorValidator.validate(username, password, redirectUrl, $) firstFactorValidator.validate(username, password, redirectUrl, $)
@ -29,6 +32,10 @@ export default function (window: Window, $: JQueryStatic,
function onFirstFactorFailure(err: Error) { function onFirstFactorFailure(err: Error) {
notifier.error(UserMessages.AUTHENTICATION_FAILED); notifier.error(UserMessages.AUTHENTICATION_FAILED);
$(UISelectors.PASSWORD_FIELD_ID).select();
$("form").css("opacity", 1);
$("input,button").removeAttr("disabled");
$(UISelectors.SIGN_IN_BUTTON_ID).text("Sign in");
} }
$(window.document).ready(function () { $(window.document).ready(function () {

2
server/src/views/firstfactor.pug
View File

@ -14,7 +14,7 @@ block content
div(class="form-inputs") div(class="form-inputs")
input(type="text" class="form-control" id="username" placeholder="Username" required autofocus) input(type="text" class="form-control" id="username" placeholder="Username" required autofocus)
input(type="password" class="form-control" id="password" placeholder="Password" required) input(type="password" class="form-control" id="password" placeholder="Password" required)
button(class="btn btn-lg btn-primary btn-block" type="submit") Sign in button(id="signin" class="btn btn-lg btn-primary btn-block" type="submit") Sign in
div(class="bottom-right-links pull-right") div(class="bottom-right-links pull-right")
a(href=reset_password_request_endpoint, class="link forgot-password") Forgot password? a(href=reset_password_request_endpoint, class="link forgot-password") Forgot password?
span(class="clearfix") span(class="clearfix")