From 57689ffdf4ff80c2133c7c5a2ce20543b9b036e0 Mon Sep 17 00:00:00 2001
From: Johannes Zellner <johannes@cloudron.io>
Date: Mon, 13 Mar 2023 16:46:18 +0100
Subject: [PATCH] oidc: apply basic style to login view

---
 src/oidc_templates/login.ejs | 67 ++++++++++++++++++++++++++++--------
 1 file changed, 53 insertions(+), 14 deletions(-)
diff --git a/src/oidc_templates/login.ejs b/src/oidc_templates/login.ejs
index 458649291..d4a370015 100644
--- a/src/oidc_templates/login.ejs
+++ b/src/oidc_templates/login.ejs
@@ -1,24 +1,63 @@
+<!DOCTYPE html>
 <html>
-
 <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height" />
+
+    <title>Cloudron OpenID Connect Login</title>
+
+    <!-- Theme CSS -->
+    <link type="text/css" rel="stylesheet" href="/theme.css">
+
+    <!-- Fontawesome -->
+    <link type="text/css" rel="stylesheet" href="/3rdparty/fontawesome/css/all.css"/>
+
+    <!-- Bootstrap Core JavaScript -->
+    <script type="text/javascript" src="/3rdparty/js/bootstrap.min.js"></script>
 
-<title>Cloudron OpenID Connect Login</title>
 
 </head>
 <body>
 
-    <h1>Cloudron Login</h1>
+<div class="layout-root">
+  <div class="layout-content">
+    <div class="card" style="padding: 20px; margin-top: 100px; max-width: 620px;">
+      <div class="row">
+        <div class="col-md-12" style="text-align: center;">
+          <img width="128" height="128" style="margin-top: -84px" src="/api/v1/cloudron/avatar"/>
+          <br/>
+          <h1>Cloudron OIDC Login</h1>
+        </div>
+      </div>
+      <br/>
+      <div class="row">
+        <div class="col-md-12">
+          <form method="post" action="<%= submitUrl %>">
+            <div class="form-group">
+              <label class="control-label" for="inputUsername">Username</label>
+              <input type="text" class="form-control" id="inputUsername" name="username" autofocus required>
+            </div>
+            <div class="form-group">
+              <label class="control-label" for="inputPassword">Password</label>
+              <input type="password" class="form-control" name="password" id="inputPassword" required password-reveal>
+            </div>
+            <div class="form-group">
+              <label class="control-label" for="inputTotpToken">2FA Token</label>
+              <input type="text" class="form-control" name="totpToken" id="inputTotpToken" value="">
+            </div>
+            <button class="btn btn-primary btn-outline pull-right" type="submit">Log in</button>
+          </form>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<script>
+
+console.log('OIDC login');
+
+</script>
 
-    <form method="post" action="<%= submitUrl %>">
-        <div>
-            <label>Username</label>
-            <input type="username" name="username"/>
-        </div>
-        <div>
-            <label>Password</label>
-            <input type="password" name="password"/>
-        </div>
-        <button type="submit">Login</button>
-    </form>
 </body>
 </html>
