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 (file)
index 0000000..6581cb9
--- /dev/null
+++ b/_svg/icon_cross.svg
@@ -0,0 +1,59 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   width="32"
+   height="32"
+   viewBox="0 0 32 32"
+   version="1.1"
+   id="svg6"
+   sodipodi:docname="icon_cross.svg"
+   inkscape:version="1.1.1 (1:1.1+202109281949+c3084ef5ed)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:dc="http://purl.org/dc/elements/1.1/">
+  <defs
+     id="defs10" />
+  <sodipodi:namedview
+     id="namedview8"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     showgrid="true"
+     inkscape:snap-grids="false"
+     inkscape:zoom="12.96875"
+     inkscape:cx="11.951807"
+     inkscape:cy="12.298795"
+     inkscape:window-width="1920"
+     inkscape:window-height="1015"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg6"
+     width="32px">
+    <inkscape:grid
+       type="xygrid"
+       id="grid185" />
+  </sodipodi:namedview>
+  <title
+     id="title2">search</title>
+  <metadata
+     id="metadata12">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:title>search</dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <path
+     style="fill:#fa1720;fill-opacity:1;stroke:#000000;stroke-width:1;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+     d="M 26.127748,0.60356667 C 21.323712,4.7760534 19.39603,6.1001693 14.14991,11.460655 10.08656,7.2934366 9.1394689,5.6742678 5.229046,0.77026407 L 0.54800536,4.6835388 C 4.4051896,9.7048918 5.9538686,11.768963 9.7925761,15.997549 5.3873768,20.696095 4.3988259,21.597724 0.60067596,26.59564 l 3.98109814,4.735046 c 3.8047726,-4.920915 4.9670589,-6.883722 9.2364119,-10.928729 4.960552,4.804229 6.695836,6.638634 11.679148,11.093176 L 30.16834,27.854854 C 25.209086,23.709646 22.678834,21.353901 18.271886,16.112901 23.220491,10.884885 26.353651,8.4082373 31.2022,4.4887182 Z"
+     id="path9055"
+     sodipodi:nodetypes="ccccccccccccc" />
+</svg>

diff --git a/_svg/icon_tick.svg b/_svg/icon_tick.svg
new file mode 100644 (file)
index 0000000..2395b8b
--- /dev/null
+++ b/_svg/icon_tick.svg
@@ -0,0 +1,58 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   width="32"
+   height="32"
+   viewBox="0 0 32 32"
+   version="1.1"
+   id="svg6"
+   sodipodi:docname="icon_tick.svg"
+   inkscape:version="1.1.1 (1:1.1+202109281949+c3084ef5ed)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:dc="http://purl.org/dc/elements/1.1/">
+  <defs
+     id="defs10" />
+  <sodipodi:namedview
+     id="namedview8"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     showgrid="true"
+     inkscape:snap-grids="false"
+     inkscape:zoom="9.1702911"
+     inkscape:cx="8.1785845"
+     inkscape:cy="14.885024"
+     inkscape:window-width="1920"
+     inkscape:window-height="1015"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg6">
+    <inkscape:grid
+       type="xygrid"
+       id="grid185" />
+  </sodipodi:namedview>
+  <title
+     id="title2">search</title>
+  <metadata
+     id="metadata12">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:title>search</dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <path
+     style="fill:#58de3c;fill-opacity:1;stroke:#000000;stroke-width:1;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+     d="m 0.65784194,23 c 4.40859616,2.335726 7.40731946,4.430144 10.28601406,8.13666 5.999999,-10 12.28308,-19.953491 20.28308,-27.9534908 L 25.815106,0.61162685 C 16.815106,9.6116268 14.702575,14.248489 9.7025747,22.248489 7.6201919,20.458382 6.4247757,19.633322 3.7585125,18.51688 Z"
+     id="path198"
+     sodipodi:nodetypes="ccccccc" />
+</svg>

diff --git a/css/bootstrap/_custom.scss b/css/bootstrap/_custom.scss
index 65b4ebc..1cdda89 100644 (file)
--- 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 (file)
--- 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 (file)
--- 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(
               () => {