feature: Login screen

webui.dev/index.html

@@ -92,6 +92,35 @@
 				</fieldset>
 			</section>
 
+			<section id = "contentLogin" title = "Login" hidden>
+				<div class = "flex-col">
+				<form class = "box-shadow padded-content">
+					<h2>OAuth Login</h2>
+					<div>
+						<button>GitHub</button>
+						<button>Google</button>
+					</div>
+					<hr />
+					<h2>Local Login</h2>
+					<div class = "arguments">
+						<label for = "username">
+							<span>Username:</span>
+						</label>
+						<input type = "text" name = "username" />
+						<span></span>
+
+						<label for = "password">
+							<span>Password:</span>
+						</label>
+						<input type = "password" name = "password" />
+						<span></span>
+
+						<button type = "submit">Login</button>
+					</div>
+				</form>
+				</div>
+			</section>
+
 			<noscript>
 				<div class = "error">Sorry, JavaScript is required to use OliveTin.</div>
 			</noscript>

webui.dev/js/marshaller.js

@@ -264,6 +264,7 @@ export function setupSectionNavigation (style) {
   registerSection('/', 'Actions', null, document.getElementById('showActions'))
   registerSection('/diagnostics', 'Diagnostics', null, document.getElementById('showDiagnostics'))
   registerSection('/logs', 'Logs', null, document.getElementById('showLogs'))
+  registerSection('/login', 'Login', null, null)
 }
 
 function registerSection (path, section, view, linkElement) {

webui.dev/style.css

@@ -552,6 +552,34 @@ div.display {
   padding: 1em;
 }
 
+.flex-col {
+  display: flex;
+  flex-direction: column;
+}
+
+#contentLogin form {
+  width: 40%;
+  place-self: center;
+}
+
+#contentLogin hr {
+  border: 0;
+  border-top: 1px dashed #ccc;
+}
+
+#contentLogin button {
+  display: block;
+  width: 100%;
+  grid-column: 1 / span 3;
+  margin-bottom: 1em;
+  font-weight: bold;
+  background-color: #ced3d7;
+}
+
+#contentLogin button:last-child {
+  margin-bottom: 0;
+}
+
 @media screen and (width <= 600px) {
   fieldset {
     grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));