Auth: prettier ui
diff --git "a/core/auth/ui/\043install.yaml\043" "b/core/auth/ui/\043install.yaml\043"
deleted file mode 100644
index 35ee23a..0000000
--- "a/core/auth/ui/\043install.yaml\043"
+++ /dev/null
@@ -1,122 +0,0 @@
----
-apiVersion: v1
-kind: Namespace
-metadata:
- name: core-auth
----
-apiVersion: v1
-kind: Service
-metadata:
- name: kratos-selfservice-ui
- namespace: core-auth
-spec:
- type: ClusterIP
- selector:
- app: kratos-selfservice-ui
- ports:
- - name: http
- port: 80
- targetPort: http
- protocol: TCP
----
-apiVersion: networking.k8s.io/v1
-kind: Ingress
-metadata:
- name: ingress-kratos-selfservice-ui-public
- namespace: core-auth
- annotations:
- cert-manager.io/cluster-issuer: "letsencrypt-prod"
- acme.cert-manager.io/http01-edit-in-place: "true"
-spec:
- ingressClassName: nginx
- tls:
- - hosts:
- - accounts-ui.lekva.me
- secretName: cert-accounts-ui.lekva.me
- rules:
- - host: accounts-ui.lekva.me
- http:
- paths:
- - path: /
- pathType: Prefix
- backend:
- service:
- name: kratos-selfservice-ui
- port:
- name: http
----
-apiVersion: apps/v1
-kind: Deployment
-metadata:
- name: kratos-selfservice-ui
- namespace: core-auth
-spec:
- selector:
- matchLabels:
- app: kratos-selfservice-ui
- replicas: 1
- template:
- metadata:
- labels:
- app: kratos-selfservice-ui
- spec:
- volumes:
- - name: cert
- secret:
- secretName: node-auth-ui-cert
- - name: config
- configMap:
- name: auth-ui-lighthouse-config
- hostAliases:
- - ip: "111.0.0.1"
- hostnames:
- - "hydra.pcloud"
- containers:
- - name: server
- image: giolekva/auth-ui:latest
- imagePullPolicy: Always
- env:
- - name: KRATOS_PUBLIC_URL
- value: "https://accounts.lekva.me"
- ports:
- - name: http
- containerPort: 8080
- protocol: TCP
- command: ["server", "--port=8080"]
- # resources:
- # requests:
- # memory: "10Mi"
- # cpu: "10m"
- # limits:
- # memory: "20Mi"
- # cpu: "100m"
- - name: lighthouse
- image: giolekva/nebula:latest
- imagePullPolicy: IfNotPresent
- securityContext:
- capabilities:
- add: ["NET_ADMIN"]
- privileged: true
- ports:
- - name: lighthouse
- containerPort: 4247
- protocol: UDP
- command: ["nebula", "--config=/etc/nebula/config/lighthouse.yaml"]
- volumeMounts:
- - name: cert
- mountPath: /etc/nebula/lighthouse
- readOnly: true
- - name: config
- mountPath: /etc/nebula/config
- readOnly: true
----
-apiVersion: lekva.me/v1
-kind: NebulaNode
-metadata:
- name: auth-ui
- namespace: core-auth
-spec:
- caName: pcloud
- caNamespace: ingress-nginx-private
- ipCidr: "111.0.0.10/24"
- secretName: node-auth-ui-cert
diff --git a/core/auth/ui/main.go b/core/auth/ui/main.go
index c3add02..518277d 100644
--- a/core/auth/ui/main.go
+++ b/core/auth/ui/main.go
@@ -30,6 +30,9 @@
//go:embed templates/*
var tmpls embed.FS
+//go:embed static
+var static embed.FS
+
type Templates struct {
WhoAmI *template.Template
Registration *template.Template
@@ -63,9 +66,20 @@
tmpls *Templates
}
+func cacheControlWrapper(h http.Handler) http.Handler {
+ return http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
+ // TODO(giolekva): enable caching
+ // w.Header().Set("Cache-Control", "max-age=2592000") // 30 days
+ h.ServeHTTP(w, r)
+ })
+}
+
func (s *Server) Start(port int) error {
r := mux.NewRouter()
http.Handle("/", r)
+ var staticFS = http.FS(static)
+ fs := http.FileServer(staticFS)
+ r.PathPrefix("/static/").Handler(cacheControlWrapper(fs))
r.Path("/registration").Methods(http.MethodGet).HandlerFunc(s.registrationInitiate)
r.Path("/registration").Methods(http.MethodPost).HandlerFunc(s.registration)
r.Path("/login").Methods(http.MethodGet).HandlerFunc(s.loginInitiate)
diff --git a/core/auth/ui/static/main.css b/core/auth/ui/static/main.css
new file mode 100644
index 0000000..05a6db8
--- /dev/null
+++ b/core/auth/ui/static/main.css
@@ -0,0 +1,54 @@
+.main {
+ width: 400px;
+ height: 400px;
+ margin: 7em auto;
+}
+
+form {
+ padding-top: 40px;
+}
+
+input {
+ width: 76%;
+ font-weight: 700;
+ font-size: 14px;
+ letter-spacing: 1px;
+ background: rgba(136, 126, 126, 0.04);
+ padding: 10px 20px;
+ border: none;
+ outline: none;
+ box-sizing: border-box;
+ border: 2px solid rgba(0, 0, 0, 0.02);
+ margin-bottom: 50px;
+ margin-left: 46px;
+ text-align: left;
+ margin-bottom: 27px;
+}
+
+input[type="checkbox"] {
+ width: 20%;
+}
+
+input[type="submit"] {
+ background: rgba(136, 126, 126, 0.5);
+ text-align: center;
+}
+
+input:focus {
+ border: 2px solid rgba(0, 0, 0, 0.18) !important;
+}
+
+a {
+ width: 76%;
+ font-weight: 700;
+ font-size: 14px;
+ letter-spacing: 1px;
+ padding: 10px 20px;
+ border: none;
+ outline: none;
+ box-sizing: border-box;
+ margin-bottom: 50px;
+ margin-left: 46px;
+ text-align: left;
+ margin-bottom: 27px;
+}
\ No newline at end of file
diff --git a/core/auth/ui/templates/consent.html b/core/auth/ui/templates/consent.html
index 9131e99..1eb4a1e 100644
--- a/core/auth/ui/templates/consent.html
+++ b/core/auth/ui/templates/consent.html
@@ -2,20 +2,20 @@
<html lang="en">
<head>
<meta charset="utf-8" />
+ <link rel="stylesheet" type="text/css" href="/static/main.css?v=0.0.1">
<title>Consent</title>
</head>
<body>
- <a href="/">whoami</a>
- <a href="/login">login</a>
- <a href="/logout">logout</a>
- <a href="/registration">registration</a><br/>
- <form action="" method="POST">
- {{range .}}
- <input type="checkbox" name="scope" value="{{.}}" />{{.}}<br />
- {{end}}
- <input type="submit" name="allow" value="Allow" />
- <input type="submit" name="reject" value="Reject" />
- </form>
+ <div class="main">
+ <form action="" method="POST">
+ {{range .}}
+ <label><input type="checkbox" name="scope" value="{{.}}" checked />{{.}}</label>
+ {{end}}
+ <input type="submit" name="allow" value="Allow" />
+ <input type="submit" name="reject" value="Reject" />
+ <a href="/logout">logout</a>
+ </form>
+ </div>
</body>
</html>
diff --git a/core/auth/ui/templates/login.html b/core/auth/ui/templates/login.html
index b5f73db..285d936 100644
--- a/core/auth/ui/templates/login.html
+++ b/core/auth/ui/templates/login.html
@@ -2,21 +2,19 @@
<html lang="en">
<head>
<meta charset="utf-8" />
+ <link rel="stylesheet" type="text/css" href="/static/main.css?v=0.0.1">
<title>Login</title>
</head>
<body>
- <a href="/">whoami</a>
- <a href="/login">login</a>
- <a href="/logout">logout</a>
- <a href="/registration">registration</a><br/>
- <form action="" method="POST">
- <label for="username">Username:</label><br />
- <input type="text" name="username" autofocus /><br />
- <label for="password">Password:</label><br />
- <input type="password" name="password" /><br />
- <input type="hidden" name="csrf_token" value="{{.}}" /><br />
- <input type="submit" value="Login" />
- </form>
+ <div class="main">
+ <form action="" method="POST">
+ <input class="field" type="text" name="username" placeholder="Username" autofocus />
+ <input class="field" type="password" name="password" placeholder="Password" />
+ <input type="submit" value="Sign In" />
+ <input type="hidden" name="csrf_token" value="{{.}}" />
+ <a href="/registration">Create Account</a>
+ </form>
+ </div>
</body>
</html>
diff --git a/core/auth/ui/templates/registration.html b/core/auth/ui/templates/registration.html
index 9d3c0fd..bb2a357 100644
--- a/core/auth/ui/templates/registration.html
+++ b/core/auth/ui/templates/registration.html
@@ -2,21 +2,19 @@
<html lang="en">
<head>
<meta charset="utf-8" />
- <title>Create New Account</title>
+ <link rel="stylesheet" type="text/css" href="/static/main.css?v=0.0.1">
+ <title>Create Account</title>
</head>
<body>
- <a href="/">whoami</a>
- <a href="/login">login</a>
- <a href="/logout">logout</a>
- <a href="/registration">registration</a><br/>
- <form action="" method="POST">
- <label for="username">Username:</label><br />
- <input type="text" name="username" autofocus /><br />
- <label for="password">Password:</label><br />
- <input type="password" name="password" /><br />
- <input type="hidden" name="csrf_token" value="{{.}}" /><br />
- <input type="submit" value="Create New Account" />
- </form>
+ <div class="main">
+ <form action="" method="POST">
+ <input class="field" type="text" name="username" placeholder="Username" autofocus />
+ <input class="field" type="password" name="password" placeholder="Password" />
+ <input type="submit" value="Create Account" />
+ <input type="hidden" name="csrf_token" value="{{.}}" />
+ <a href="/login">Sign In</a>
+ </form>
+ </div>
</body>
</html>
diff --git a/core/auth/ui/templates/whoami.html b/core/auth/ui/templates/whoami.html
index 58a007b..70e36ab 100644
--- a/core/auth/ui/templates/whoami.html
+++ b/core/auth/ui/templates/whoami.html
@@ -2,13 +2,11 @@
<html lang="en">
<head>
<meta charset="utf-8" />
- <title>Create New Account</title>
+ <link rel="stylesheet" type="text/css" href="/static/main.css?v=0.0.1">
+ <title>Hello {{.}}!</title>
</head>
<body>
- <a href="/">whoami</a>
- <a href="/login">login</a>
<a href="/logout">logout</a>
- <a href="/registration">registration</a><br/>
Hello {{.}}!
</body>
</html>