Welcome: Registration form UI rework
Change-Id: Ic7fee1e3a58dd9f19c6801bc1afd93735d6f4d84
diff --git a/core/installer/Makefile b/core/installer/Makefile
index ca0fa6b..296e780 100644
--- a/core/installer/Makefile
+++ b/core/installer/Makefile
@@ -38,7 +38,7 @@
./pcloud --kubeconfig=../../priv/kubeconfig-hetzner dodo-app --ssh-key=/Users/lekva/.ssh/id_ed25519 --repo-addr=ssh://10.43.196.174/test
welc:
- ./pcloud --kubeconfig=../../priv/kubeconfig welcome --ssh-key=/Users/lekva/.ssh/id_rsa --repo-addr=ssh://192.168.0.210/config --port=9090
+ ./pcloud --kubeconfig=../../priv/kubeconfig-hetzner welcome --ssh-key=/Users/lekva/.ssh/id_ed25519 --repo-addr=ssh://10.43.196.174/config --port=9090
env:
./pcloud --kubeconfig=../../priv/kubeconfig-hetzner envmanager --ssh-key=/Users/lekva/.ssh/id_rsa --repo-addr=192.168.100.210:22 --repo-name=config --port=9090
diff --git a/core/installer/welcome/create-account-success.html b/core/installer/welcome/create-account-success.html
index 2872a43..9c647ac 100644
--- a/core/installer/welcome/create-account-success.html
+++ b/core/installer/welcome/create-account-success.html
@@ -2,6 +2,8 @@
<html lang="en" data-theme="light">
<head>
<link rel="stylesheet" href="/static/pico.2.0.6.min.css">
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/hack-font/3.3.0/web/hack.min.css">
+ <link rel="stylesheet" href="/static/welcome.css?v=0.0.1">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1" >
<title>Successful Registration</title>
diff --git a/core/installer/welcome/create-account.html b/core/installer/welcome/create-account.html
index a3f1b26..f95ca55 100644
--- a/core/installer/welcome/create-account.html
+++ b/core/installer/welcome/create-account.html
@@ -2,23 +2,22 @@
<html lang="en" data-theme="light">
<head>
<link rel="stylesheet" href="/static/pico.2.0.6.min.css">
- <link rel="stylesheet" href="/static/welcome.css">
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/hack-font/3.3.0/web/hack.min.css">
+ <link rel="stylesheet" href="/static/welcome.css?v=0.0.1">
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body>
<main class="container">
<div class="form-container">
+ <div class="logo">
+ <span>do</span><span>do:</span>
+ </div>
<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
- />
+ <label>
+ username
+ <input type="text" name="username" aria-label="Username" value="{{ .Data.Username }}" aria-invalid="{{ if .UsernameErrors }}true{{ else }}undefined{{ end }}" required/>
+ </label>
{{ if .UsernameErrors }}
{{ range .UsernameErrors }}
<small class="error-message" aria-live="assertive">
@@ -26,15 +25,10 @@
</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
- />
+ <label>
+ password
+ <input type="password" name="password" aria-label="Password" value="{{ .Data.Password }}" aria-invalid="{{ if .PasswordErrors }}true{{ else }}undefined{{ end }}" required/>
+ </label>
{{ if .PasswordErrors }}
{{ range .PasswordErrors }}
<small class="error-message" aria-live="assertive">
@@ -42,15 +36,11 @@
</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>
+ <label>
+ secret token
+ <input type="text" name="secret-token" aria-label="Secret Token" value="{{ .Data.SecretToken }}" required/>
+ </label>
+ <button type="submit">create Account</button>
</form>
</div>
</main>
diff --git a/core/installer/welcome/static/welcome.css b/core/installer/welcome/static/welcome.css
index 8aaa411..6098d88 100644
--- a/core/installer/welcome/static/welcome.css
+++ b/core/installer/welcome/static/welcome.css
@@ -1,18 +1,92 @@
+[data-theme="light"],
+:root:not([data-theme="dark"]) {
+ --pico-font-family: Hack, monospace;
+ --pico-font-size: 14px;
+ --pico-background-color: #d6d6d6;
+ --pico-border-radius: 0;
+ --pico-form-element-border-color: #ffffff;
+ --pico-form-element-active-border-color: #7f9f7f;
+ --pico-form-element-focus-color: #7f9f7f;
+ --pico-form-element-background-color: #3a3a3a;
+ --pico-form-element-active-background-color: #3a3a3a;
+ --pico-form-element-selected-background-color: #3a3a3a;
+ --pico-primary: #7f9f7f;
+ --pico-primary-background: #7f9f7f;
+ --pico-primary-hover: #d4888d;
+ --pico-primary-hover-background: #d4888d;
+ --pico-grid-spacing-horizontal: 0;
+}
+
+body {
+ width: 100%;
+ height: 100vh;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+
.container {
- position: relative;
+ max-width: 500px !important;
+ width: 100%;
+}
+
+form {
+ padding: 10px;
+ background-color: var(--pico-form-element-background-color);
+ width: 100%;
+}
+
+input {
+ background: var(--pico-form-element-background-color);
+ color: white;
+ padding: 10px;
+ text-align: left;
+ font-family: var(--pico-font-family) !important;
+ margin-bottom: 0 !important;
+}
+
+input:-webkit-autofill,
+input:-webkit-autofill:hover,
+input:-webkit-autofill:focus,
+input:-webkit-autofill:active {
+ -webkit-text-fill-color: white !important;
+ transition: background-color 5000s ease-in-out 0s;
+ background-color: var(--pico-form-element-background-color) !important;
+}
+
+&:-webkit-autofill::first-line {
+ font-family: var(--pico-font-family) !important;
+}
+
+.logo span:first-child {
+ color: white;
+ font-size: 24px;
+ padding-left: 10px;
+}
+
+.logo span:nth-child(2) {
+ color: var(--pico-primary-hover);
+ font-size: 24px;
+}
+
+.logo {
+ padding-top: var(--pico-spacing);
+ background-color: var(--pico-form-element-background-color);
+}
+
+label {
+ color: white;
+ margin-top: 14px;
+}
+
+label:first-of-type {
+ margin-top: 0;
+}
+
+label:last-of-type {
+ margin-bottom: 14px;
}
.error-message {
- position: relative;
- left: 2px;
- width: 100%;
- margin-bottom: 1px;
-}
-
-.input-field {
- margin-bottom: 14px;
-}
-
-.form-container {
- margin-top: 0px;
+ color: var(--pico-primary-hover);
}