welcome: username error handling (#75)
* username error handling welcome ui
* added short username check with separate error handling function
* nothing happaned here
* added username error handling, form saves info
* pull75 fixes
* pull75 fixes ui
* CSS change
* separate css for errors, added logic for several type of errors
* rename extractErrorMessage
* validation changes
* added validations in api
* changed rendering template, recives errors in JSON format
* rolled back schema and makefile in kratos
* changes in HTML
* combined kratos and manual validations
* fixed rendering and handling JSON error response
* rollback unused index.html
* minor fixes
* refactored the repeated logic of Errors into a separate function
* rollback
* refactor: group errors and form data together
* rollback picocss version
* use picocss 2.0.6
---------
Co-authored-by: Giorgi Lekveishvili <lekva@gl-mbp-m1-max.local>
diff --git a/core/installer/welcome/create-account.html b/core/installer/welcome/create-account.html
index a4c6020..a3f1b26 100644
--- a/core/installer/welcome/create-account.html
+++ b/core/installer/welcome/create-account.html
@@ -1,36 +1,58 @@
<!DOCTYPE html>
<html lang="en" data-theme="light">
- <head>
- <link rel="stylesheet" href="/static/pico.min.css">
- <meta charset="utf-8" />
- <meta name="viewport" content="width=device-width, initial-scale=1" />
- </head>
- <body>
- <main class="container">
- <form action="" method="POST">
- <input
- type="text"
- name="username"
- placeholder="Username"
- aria-label="Username"
- required
- />
- <input
- type="password"
- name="password"
- placeholder="Password"
- aria-label="Password"
+<head>
+ <link rel="stylesheet" href="/static/pico.2.0.6.min.css">
+ <link rel="stylesheet" href="/static/welcome.css">
+ <meta charset="utf-8" />
+ <meta name="viewport" content="width=device-width, initial-scale=1" />
+</head>
+<body>
+ <main class="container">
+ <div class="form-container">
+ <form action="" method="POST">
+ <input class="input-field"
+ type="text"
+ name="username"
+ placeholder="Username"
+ aria-label="Username"
+ value="{{ .Data.Username }}"
+ aria-invalid="{{ if .UsernameErrors }}true{{ else }}undefined{{ end }}"
+ required
+ />
+ {{ if .UsernameErrors }}
+ {{ range .UsernameErrors }}
+ <small class="error-message" aria-live="assertive">
+ {{ . }}
+ </small>
+ {{ end }}
+ {{ end }}
+ <input class="input-field"
+ type="password"
+ name="password"
+ placeholder="Password"
+ aria-label="Password"
+ value="{{ .Data.Password }}"
+ aria-invalid="{{ if .PasswordErrors }}true{{ else }}undefined{{ end }}"
required
/>
- <input
- type="text"
- name="secret-token"
- placeholder="Secret Token"
- aria-label="Secret Token"
- required
- />
- <button type="submit">Create Account</button>
- </form>
- </main>
- </body>
+ {{ if .PasswordErrors }}
+ {{ range .PasswordErrors }}
+ <small class="error-message" aria-live="assertive">
+ {{ . }}
+ </small>
+ {{ end }}
+ {{ end }}
+ <input class="input-field"
+ type="text"
+ name="secret-token"
+ placeholder="Secret Token"
+ aria-label="Secret Token"
+ value="{{ .Data.SecretToken }}"
+ required
+ />
+ <button type="submit">Create Account</button>
+ </form>
+ </div>
+ </main>
+</body>
</html>