web: add basic UI for OAuth

Author: intelfx

web/login/index.html

@@ -51,6 +51,7 @@
       <div id="login-box">
         <div id="login">
           <table>
+          <tbody>
             <tr>
               <td><img class="svg-gray" id="login-logo" src="../share/svg/logo.svg" alt="&amp;pi;-kvm"></td>
               <td></td>
@@ -104,9 +105,11 @@
             <tr>
               <td></td>
               <td>
-                <button class="key" id="login-button">Login</button>
+                <button class="key login-button" id="login-button">Login</button>
               </td>
             </tr>
+	      </tbody>
+	      <tbody id="oauth-tbody"></tbody>
           </table>
         </div>
       </div>
@@ -118,4 +121,4 @@
       </li>
     </ul>
   </body>
-</html>
+</html>

web/share/css/login/login.css

@@ -46,8 +46,12 @@ img#login-logo {
 	height: 30px;
 }
 
-button#login-button {
-	width: 100%;
+button.login-button {
+    width: 100%;
+}
+
+button.login-button-secondary {
+    width: 100%;
 }
 
 input[type="text"]#user-input,

web/share/js/login/main.js

@@ -32,6 +32,8 @@ export function main() {
 	if (checkBrowser(null, null)) {
 		initWindowManager();
 
+		__oauthInit();
+
 		// Radio is a string container
 		tools.radio.clickValue("expire-radio", tools.storage.get("login.expire", 0));
 		tools.radio.setOnClick("expire-radio", function() {
@@ -51,6 +53,71 @@ export function main() {
 	}
 }
 
+function __oauthInit() {
+	// tools.httpRequest("GET", "/api/auth/flow/oauth/check", null, function(http) {
+	// 	if (http.status === 200) {
+	// 		// add overall plugin health check (perhaps flesh out the /check endpoint itself first)
+	// 	}
+	// })
+
+	tools.httpRequest("GET", "/api/auth/flow/oauth/providers", null, function(http) {
+		if (http.status === 200) {
+			let oauthInfo = JSON.parse(http.responseText).result;
+			if (!oauthInfo.enabled) {
+				return;
+			}
+			if (Object.entries(oauthInfo.providers).length === 0) {
+				// perhaps also draw a "fake button" (inactive + greyed-out) to indicate we have no providers available
+				return;
+			}
+
+			let buttons = (`
+<tr>
+	<td colspan="2">
+		<hr>
+	</td>
+</tr>
+`);
+			const buttonIds = [];
+
+			for (const [shortName, longName] of Object.entries(oauthInfo.providers)) {
+				const { html, buttonId } = __oauthButton(shortName, longName);
+				// if (oauthInfo.default === shortName) {
+				// 	$(buttonId).classList.add("default");
+				// } else {
+				// 	$(buttonId).classList.add("secondary");
+				// }
+				buttons += html;
+				buttonIds.push({ shortName, buttonId });
+			}
+			$("oauth-tbody").innerHTML = buttons;
+			for (const { shortName, buttonId } of buttonIds) {
+				tools.el.setOnClick($(buttonId), () => __oauthLogin(shortName));
+			}
+		}
+		// else {
+		// 	// add error handling, draw an error "fake button" (like inactive + red-tinted) in place of the oauth buttons
+		// }
+	});
+}
+
+function __oauthButton(shortName, longName) {
+	const html = (`
+<tr>
+	<td></td>
+	<td>
+		<button class="key login-button-secondary" id="oauth-button-${shortName}">Login with ${longName}</button>
+	</td>
+</tr>
+`);
+	const buttonId = `oauth-button-${shortName}`;
+	return { html, buttonId };
+}
+
+function __oauthLogin(shortName) {
+	tools.currentOpen(`/api/auth/flow/oauth/login/${shortName}`);
+}
+
 function __login() {
 	let e_user = encodeURIComponent($("user-input").value);
 	if (e_user.length === 0) {