Change alerts to toasts, add bootstrap's js libs

auth/assets/public/script.js

@@ -1,10 +1,12 @@
-// placeholder
+$(function () {
+  $('.toast').toast('show');
 
-function buttonDisabler() {
-  setTimeout(function() {
-    let bb = document.getElementsByTagName('button')
-    for (let i = 0; i < bb.length; i++) {
-      bb[i].disabled = true
-    }
-  }, 100)
-}
+  $('form').not('do-not-disable-buttons-on-submit').on('submit', function() {
+    let form = this
+    setTimeout(function() {
+      $('button, input[type=submit]', form)
+      .not('do-not-disable-on-submit')
+      .attr('disabled', true)
+    }, 50)
+  })
+})

auth/assets/templates/authorized-clients.html.tpl

@@ -1,12 +1,10 @@
 {{ template "inc_header.html.tpl" set . "activeNav" "clients" }}
 <div class="card-body p-0">
-	{{ template "inc_alerts.html.tpl" .alerts }}
     <h4 class="card-title p-3 border-bottom">Authorized clients</h4>
 	<form
 		method="POST"
 		class="clearfix"
 		action="{{ links.AuthorizedClients }}"
-		onsubmit="buttonDisabler()"
 		class="p-3"
 	>
 

auth/assets/templates/change-password.html.tpl

@@ -1,11 +1,9 @@
 {{ template "inc_header.html.tpl" set . "activeNav" "security" }}
 <div class="card-body p-0">
-	{{ template "inc_alerts.html.tpl" .alerts }}
 	<h4 class="card-title p-3 border-bottom">Change your password</h4>
 	<form
 		method="POST"
 		action="{{ links.ChangePassword }}"
-		onsubmit="buttonDisabler()"
 		class="p-3"
 	>
 		{{ .csrfField }}

auth/assets/templates/inc_alerts.html.tpl

@@ -1,5 +0,0 @@
-{{ range . }}
-	<div class="alert alert-{{ .Type }}" role="alert">
-		{{ .Text | html }}
-	</div>
-{{ end }}

auth/assets/templates/inc_footer.html.tpl

@@ -1,4 +1,5 @@
 		</main>
+		{{ template "inc_toasts.html.tpl" .alerts }}
         {{ if .user }}
             <div class="position-absolute user text-white m-2">
                 You're logged-in as
@@ -15,5 +16,7 @@
 			version {{ version }}
 		</small>
 	</body>
+	<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
+	<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
 	<script src="{{ links.Assets }}/script.js?{{ buildtime }}"></script>
 </html>

auth/assets/templates/inc_toasts.html.tpl

@@ -0,0 +1,16 @@
+<div class="position-fixed bottom-0 right-0 p-3" style="z-index: 5; right: 0; bottom: 0;">
+{{ range . }}
+	<div class="toast" role="alert" aria-live="polite" aria-atomic="true" data-delay="5000">
+	  <div class="toast-header">
+		<span class="badge badge-{{ .Type }} mr-1 px-2">&nbsp;</span>
+		<strong class="mr-auto">Corteza</strong>
+		<button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
+		  <span aria-hidden="true">&times;</span>
+		</button>
+	  </div>
+	  <div class="toast-body p-3">
+		{{ .Text | html }}
+	  </div>
+	</div>
+{{ end }}
+</div>

auth/assets/templates/login.html.tpl

@@ -1,11 +1,9 @@
 {{ template "inc_header.html.tpl" . }}
 <div class="card-body p-0">
-	{{ template "inc_alerts.html.tpl" .alerts }}
 	<h4 class="card-title p-3 border-bottom">Log in</h4>
 	{{ if .settings.LocalEnabled }}
 	<form
 		method="POST"
-		onsubmit="buttonDisabler()"
 		action="{{ links.Login }}"
 		class="p-3"
 	>

auth/assets/templates/oauth2-authorize-client.html.tpl

@@ -1,8 +1,6 @@
 {{/* setting hideNav=true to root scope and passign it to header template */}}
 {{ template "inc_header.html.tpl" set . "hideNav" true }}
 <div class="card-body p-0">
-	{{ template "inc_alerts.html.tpl" .alerts }}
-
 	{{ if .invalidUser }}
 	<div class="text-danger font-weight-bold p-3" role="alert">
 		{{ .invalidUser }}
@@ -14,7 +12,6 @@
 	<form
 		action="{{ links.OAuth2AuthorizeClient }}"
 		method="POST"
-		onsubmit="buttonDisabler()"
 		class="p-3"
 	>
 	  {{ .csrfField }}

auth/assets/templates/password-reset-requested.html.tpl

@@ -1,6 +1,5 @@
 {{ template "inc_header.html.tpl" . }}
 <div class="card-body p-0">
-	{{ template "inc_alerts.html.tpl" .alerts }}
 	<h4 class="card-title p-3 border-bottom">Password reset requested</h4>
 	<div class="p-3" role="alert">
 	    If the email you entered is found in our database, you'll receive a password reset link to your inbox in a few moments.

auth/assets/templates/pending-email-confirmation.html.tpl

@@ -1,6 +1,5 @@
 {{ template "inc_header.html.tpl" . }}
 <div class="card-body p-0">
-	{{ template "inc_alerts.html.tpl" .alerts }}
 	<h4 class="card-title p-3 border-bottom">Confirm your email</h4>
 	<div class="p-3" role="alert">
 		You should receive email confirmation link to your inbox in a few moments.

auth/assets/templates/profile.html.tpl

@@ -1,11 +1,9 @@
 {{ template "inc_header.html.tpl" set . "activeNav" "profile" }}
 <div class="card-body p-0">
-	{{ template "inc_alerts.html.tpl" .alerts }}
 	<h4 class="card-title p-3 border-bottom">Your profile</h4>
 	<form
 		method="POST"
 		action="{{ links.Profile }}"
-		onsubmit="buttonDisabler()"
 		class="p-3"
 	>
 		{{ .csrfField }}

auth/assets/templates/request-password-reset.html.tpl

@@ -1,10 +1,8 @@
 {{ template "inc_header.html.tpl" . }}
 <div class="card-body p-0">
-	{{ template "inc_alerts.html.tpl" .alerts }}
 	<h4 class="card-title p-3 border-bottom">Request password reset link</h4>
 	<form
 		method="POST"
-		onsubmit="buttonDisabler()"
 		action="{{ links.RequestPasswordReset }}"
 		class="p-3"
 	>

auth/assets/templates/reset-password.html.tpl

@@ -1,10 +1,8 @@
 {{ template "inc_header.html.tpl" . }}
 <div class="card-body p-0">
-	{{ template "inc_alerts.html.tpl" .alerts }}
 	<h4 class="card-title p-3 border-bottom">Reset your password</h4>
 	<form
 		method="POST"
-		onsubmit="buttonDisabler()"
 		action="{{ links.ResetPassword }}"
 		class="p-3"
 	>

auth/assets/templates/sessions.html.tpl

@@ -1,6 +1,5 @@
 {{ template "inc_header.html.tpl" set . "activeNav" "sessions" }}
 <div class="card-body p-0">
-	{{ template "inc_alerts.html.tpl" .alerts }}
 	    <div class="card-title p-3 border-bottom">
             <h4 class="card-title d-inline">Your sessions</h4>
             {{ if .sessions}}
@@ -17,7 +16,6 @@
 	<form
 		method="POST"
 		action="{{ links.Sessions }}"
-		onsubmit="buttonDisabler()"
 		class="p-3"
 	>
 		{{ .csrfField }}

auth/assets/templates/signup.html.tpl

@@ -1,10 +1,8 @@
 {{ template "inc_header.html.tpl" . }}
 <div class="card-body p-0">
-	{{ template "inc_alerts.html.tpl" .alerts }}
 	<h4 class="card-title p-3 border-bottom">Sign up</h4>
 	<form
 		method="POST"
-		onsubmit="buttonDisabler()"
 		action="{{ links.Signup }}"
 		class="p-3"
 	>

auth/handlers/handle_profile.go

@@ -10,6 +10,7 @@ func (h *AuthHandlers) profileForm(req *request.AuthReq) error {
 	req.Template = TmplProfile
 	if form := req.GetKV(); len(form) > 0 {
 		req.Data["form"] = form
+		req.SetKV(nil)
 	} else {
 		req.Data["form"] = map[string]string{
 			"email":  req.User.Email,
@@ -23,7 +24,7 @@ func (h *AuthHandlers) profileForm(req *request.AuthReq) error {
 }
 
 func (h *AuthHandlers) profileProc(req *request.AuthReq) error {
-	req.RedirectTo = GetLinks().Signup
+	req.RedirectTo = GetLinks().Profile
 	req.SetKV(nil)
 
 	req.User.Handle = req.Request.PostFormValue("handle")
@@ -58,6 +59,11 @@ func (h *AuthHandlers) profileProc(req *request.AuthReq) error {
 			"name":   req.User.Name,
 		})
 
+		req.NewAlerts = append(req.NewAlerts, request.Alert{
+			Type: "danger",
+			Text: "Could not update profile due to input errors",
+		})
+
 		h.Log.Warn("handled error", zap.Error(err))
 		return nil