update signup html

web/templates/account/signup.html

@@ -1,41 +1,101 @@
 {{ define "content" }}
 <h2>Create your account</h2>
-{{ if .Flash }}<div class="flash">{{ .Flash }}</div>{{ end }}
+
+{{ if .Flash }}
+<div class="alert alert-warning" role="alert">{{ .Flash }}</div>
+{{ end }}
 
 <form method="POST" action="/account/signup" class="form">
   <input type="hidden" name="csrf_token" value="{{ .CSRFToken }}">
 
+  {{ $form := .Form }}
+  {{ $errs := .Errors }}
+
   <div class="mb-3">
-    <label for="username">Username</label>
+    <label for="username" class="form-label">Username</label>
-    <input type="text" name="username" id="username" required class="form-control"
+    <input
-           value="{{ with .Form }}{{ .Username }}{{ end }}">
+      type="text"
-    {{ with .Errors }}{{ with index . "username" }}<div class="error">{{ . }}</div>{{ end }}{{ end }}
+      name="username"
+      id="username"
+      class="form-control {{ if $errs }}{{ if index $errs "username" }}is-invalid{{ end }}{{ end }}"
+      required
+      value="{{ if $form }}{{ index $form "username" }}{{ end }}"
+      autocomplete="username"
+    >
+    {{ if $errs }}
+      {{ with index $errs "username" }}
+        <div class="invalid-feedback">{{ . }}</div>
+      {{ end }}
+    {{ end }}
   </div>
 
   <div class="mb-3">
-    <label for="email">Email</label>
+    <label for="email" class="form-label">Email</label>
-    <input type="email" name="email" id="email" required class="form-control"
+    <input
-           value="{{ with .Form }}{{ .Email }}{{ end }}">
+      type="email"
-    {{ with .Errors }}{{ with index . "email" }}<div class="error">{{ . }}</div>{{ end }}{{ end }}
+      name="email"
+      id="email"
+      class="form-control {{ if $errs }}{{ if index $errs "email" }}is-invalid{{ end }}{{ end }}"
+      required
+      value="{{ if $form }}{{ index $form "email" }}{{ end }}"
+      autocomplete="email"
+    >
+    {{ if $errs }}
+      {{ with index $errs "email" }}
+        <div class="invalid-feedback">{{ . }}</div>
+      {{ end }}
+    {{ end }}
   </div>
 
   <div class="mb-3">
-    <label for="password">Password</label>
+    <label for="password" class="form-label">Password</label>
-    <input type="password" name="password" id="password" required class="form-control">
+    <input
-    {{ with .Errors }}{{ with index . "password" }}<div class="error">{{ . }}</div>{{ end }}{{ end }}
+      type="password"
+      name="password"
+      id="password"
+      class="form-control {{ if $errs }}{{ if index $errs "password" }}is-invalid{{ end }}{{ end }}"
+      required
+      autocomplete="new-password"
+    >
+    {{ if $errs }}
+      {{ with index $errs "password" }}
+        <div class="invalid-feedback">{{ . }}</div>
+      {{ end }}
+    {{ end }}
+    <div class="form-text">Minimum 8 characters.</div>
   </div>
 
   <div class="mb-3">
-    <label for="password_confirm">Confirm Password</label>
+    <label for="password_confirm" class="form-label">Confirm Password</label>
-    <input type="password" name="password_confirm" id="password_confirm" required class="form-control">
+    <input
-    {{ with .Errors }}{{ with index . "password_confirm" }}<div class="error">{{ . }}</div>{{ end }}{{ end }}
+      type="password"
+      name="password_confirm"
+      id="password_confirm"
+      class="form-control {{ if $errs }}{{ if index $errs "password_confirm" }}is-invalid{{ end }}{{ end }}"
+      required
+      autocomplete="new-password"
+    >
+    {{ if $errs }}
+      {{ with index $errs "password_confirm" }}
+        <div class="invalid-feedback">{{ . }}</div>
+      {{ end }}
+    {{ end }}
   </div>
 
   <div class="form-check mb-3">
-    <input type="checkbox" name="accept_terms" id="accept_terms" class="form-check-input"
+    <input
-           {{ with .Form }}{{ if .AcceptTerms }}checked{{ end }}{{ end }}>
+      type="checkbox"
+      name="accept_terms"
+      id="accept_terms"
+      class="form-check-input {{ if $errs }}{{ if index $errs "accept_terms" }}is-invalid{{ end }}{{ end }}"
+      {{ if $form }}{{ if eq (index $form "accept_terms") "on" }}checked{{ end }}{{ end }}
+    >
     <label for="accept_terms" class="form-check-label">I accept the terms</label>
-    {{ with .Errors }}{{ with index . "accept_terms" }}<div class="error">{{ . }}</div>{{ end }}{{ end }}
+    {{ if $errs }}
+      {{ with index $errs "accept_terms" }}
+        <div class="invalid-feedback d-block">{{ . }}</div>
+      {{ end }}
+    {{ end }}
   </div>
 
   <button type="submit" class="btn btn-primary">Create account</button>