From: Nick Downing Date: Thu, 13 Jan 2022 08:06:42 +0000 (+1100) Subject: Add ticks, crosses and spinners in sign up form X-Git-Url: https://git.ndcode.org/public/gitweb.cgi?p=ndcode_site.git;a=commitdiff_plain;h=d28c67af0c6e065d337b7a30caaf6e00593c1a1b Add ticks, crosses and spinners in sign up form --- diff --git a/_svg/icon_cross.svg b/_svg/icon_cross.svg new file mode 100644 index 0000000..6581cb9 --- /dev/null +++ b/_svg/icon_cross.svg @@ -0,0 +1,59 @@ + + + + + + + search + + + + search + + + + + diff --git a/_svg/icon_tick.svg b/_svg/icon_tick.svg new file mode 100644 index 0000000..2395b8b --- /dev/null +++ b/_svg/icon_tick.svg @@ -0,0 +1,58 @@ + + + + + + + search + + + + search + + + + + diff --git a/css/bootstrap/_custom.scss b/css/bootstrap/_custom.scss index 65b4ebc..1cdda89 100644 --- a/css/bootstrap/_custom.scss +++ b/css/bootstrap/_custom.scss @@ -15,6 +15,12 @@ $footer-link-hover-color: darken($footer-link-color, 10%); //bottom: -.125em; } +// note: needs to match the bootstrap border spinner +.svg-color { + width: 32px; + height: 32px; +} + // use this to display the pi symbol without horrible blocky look in Sans .serif { font-family: $font-family-serif; diff --git a/css/bootstrap/_variables.scss b/css/bootstrap/_variables.scss index a989e15..7b81e0f 100644 --- a/css/bootstrap/_variables.scss +++ b/css/bootstrap/_variables.scss @@ -1109,9 +1109,9 @@ $carousel-transition: transform $carousel-transition-duration eas // Spinners -$spinner-width: 2rem !default; +$spinner-width: 32px !default; //2rem !default; $spinner-height: $spinner-width !default; -$spinner-vertical-align: -.125em !default; +$spinner-vertical-align: middle !default; //-8px !default; //-.125em !default; $spinner-border-width: .25em !default; $spinner-width-sm: 1rem !default; diff --git a/my_account/sign_up/index.html.jst b/my_account/sign_up/index.html.jst index cfd6eee..9bb63e7 100644 --- a/my_account/sign_up/index.html.jst +++ b/my_account/sign_up/index.html.jst @@ -1,5 +1,7 @@ return async env => { let breadcrumbs = await _require('/breadcrumbs.jst') + let icon_cross = await env.site.get_min_svg('/_svg/icon_cross.svg') + let icon_tick = await env.site.get_min_svg('/_svg/icon_tick.svg') let navbar = await _require('/navbar.jst') await navbar( @@ -12,9 +14,22 @@ return async env => { p {'Signing up allows you to leave comments on our blog and receive communications from us.'} - div.accordion#accordion(role="tablist" aria-multiselectable="true") { + div.accordion#accordion.mb-5(role="tablist" aria-multiselectable="true") { div.card { div.card-header#step-1-heading(role="tab") { + span#step-1-tick(style="display: none;") { + span.icon-color.pr-3 {_out.push(icon_tick)} + } + span#step-1-cross(style="display: none;") { + span.icon-color.pr-3 {_out.push(icon_cross)} + } + //span#step-1-spinner(style="display: none;") { + // span.icon-color.pr-3 { + // div.spinner-border(role="status") { + // span.sr-only {'Loading...'} + // } + // } + //} a.h5(data-toggle="collapse" data-parent="#accordion" href="#step-1-collapse" aria-expanded="true" aria-controls="step-1-collapse") { 'Your details' } @@ -78,11 +93,25 @@ return async env => { p.mt-3 {'Note: If your name is one word or does not fit given names/family name pattern, then please enter given names only. Your given names are visible to other users if you comment on our blog. Your email and family name remain private.'} input.btn.btn-success#step-1-continue(type="button" value="Continue") {} + p.'mt-3'.mb-0 {'* These fields are required.'} } } } div.card { div.card-header#step-2-heading(role="tab") { + span#step-2-tick(style="display: none;") { + span.icon-color.pr-3 {_out.push(icon_tick)} + } + span#step-2-cross(style="display: none;") { + span.icon-color.pr-3 {_out.push(icon_cross)} + } + span#step-2-spinner(style="display: none;") { + span.icon-color.pr-3 { + div.spinner-border(role="status") { + span.sr-only {'Loading...'} + } + } + } a.h5.collapsed(data-toggle="collapse" data-parent="#accordion" href="#step-2-collapse" aria-expanded="false" aria-controls="step-2-collapse") { 'Create account' } @@ -97,6 +126,19 @@ return async env => { } div.card { div.card-header#step-3-heading(role="tab") { + span#step-3-tick(style="display: none;") { + span.icon-color.pr-3 {_out.push(icon_tick)} + } + span#step-3-cross(style="display: none;") { + span.icon-color.pr-3 {_out.push(icon_cross)} + } + span#step-3-spinner(style="display: none;") { + span.icon-color.pr-3 { + div.spinner-border(role="status") { + span.sr-only {'Loading...'} + } + } + } a.h5.collapsed(data-toggle="collapse" data-parent="#accordion" href="#step-3-collapse" aria-expanded="false" aria-controls="step-3-collapse") { 'Send verification email' } @@ -110,8 +152,6 @@ return async env => { } } } - - p.mt-2 {'* These fields are required.'} }, // scripts async _out => { @@ -123,29 +163,48 @@ return async env => { $('#step-1-continue').click( async () => { if ( - document.getElementById('given-names').reportValidity() && - document.getElementById('family-name').reportValidity() && - document.getElementById('email').reportValidity() && - document.getElementById('password').reportValidity() && - document.getElementById('verification-code').reportValidity() + !document.getElementById('given-names').reportValidity() || + !document.getElementById('family-name').reportValidity() || + !document.getElementById('email').reportValidity() || + !document.getElementById('password').reportValidity() || + !document.getElementById('verification-code').reportValidity() ) { - try { - await sign_up( - document.getElementById('email').value, - document.getElementById('verification-code').value - document.getElementById('given-names').value, - document.getElementById('family-name').value, - document.getElementById('password').value - ) - } - catch (e) { - $('#step-2-message').text(e.message) - $('#step-2-collapse').collapse('show') - return - } - $('#step-2-message').text(`Your account with email "${document.getElementById('email').value}" has been created.`) + $('#step-1-tick').hide() + $('#step-1-cross').show() + //$('#step-1-spinner').hide() + return + } + $('#step-1-tick').show() + $('#step-1-cross').hide() + //$('#step-1-spinner').hide() + + $('#step-2-tick').hide() + $('#step-2-cross').hide() + $('#step-2-spinner').show() + try { + await sign_up( + document.getElementById('email').value, + document.getElementById('verification-code').value + document.getElementById('given-names').value, + document.getElementById('family-name').value, + document.getElementById('password').value + ) + } + catch (e) { + $('#step-2-tick').hide() + $('#step-2-cross').show() + $('#step-2-spinner').hide() + + $('#step-2-message').text(e.message) $('#step-2-collapse').collapse('show') - } + return + } + $('#step-2-tick').show() + $('#step-2-cross').hide() + $('#step-2-spinner').hide() + + $('#step-2-message').text(`Your account with email "${document.getElementById('email').value}" has been created.`) + $('#step-2-collapse').collapse('show') } ) @@ -157,7 +216,6 @@ return async env => { () => {$('#step-2-collapse').collapse('show')} ) - let image_seq = 1 $('#new-code').click( () => {