Add attendance mode to registration

Author: oleflb

frontend/src/components/Auth.tsx

@@ -1,10 +1,12 @@
 import { useState } from "preact/hooks";
 import { sendAuth, teams, authError } from "../store";
+import { AttendanceMode } from "../types";
 
 export function Auth() {
   const [mode, setMode] = useState<"login" | "register">("login");
   const [name, setName] = useState("");
   const [team, setTeam] = useState(teams.value[0] || "");
+  const [attendanceMode, setAttendanceMode] = useState(AttendanceMode.OnSite);
   const [password, setPassword] = useState("");
   const [isNotNao, setIsNotNao] = useState(false);
 
@@ -14,14 +16,19 @@ export function Auth() {
       alert("NAOs are not allowed in MOPAD");
       return;
     }
-    const payload = { name, team, password };
-    sendAuth(mode === "login" ? { Login: payload } : { Register: payload });
+    sendAuth(
+      mode === "login"
+        ? { Login: { name, team, password } }
+        : {
+            Register: { name, team, password, attendance_mode: attendanceMode },
+          },
+    );
   };
 
   const isValid = name && password && (mode === "login" || isNotNao);
 
   return (
-    <div id={mode} class="center">
+    <form id={mode} class="center">
       <h1>MOPAD</h1>
       <h2>Moderated Organization PAD (powerful, agile, distributed)</h2>
       <h3>{mode === "login" ? "Login" : "Register"}</h3>
@@ -54,18 +61,38 @@ export function Auth() {
       />
 
       {mode === "register" && (
-        <div class="i-am-not-a-nao">
-          <input
-            type="checkbox"
-            id="nao-check"
-            checked={isNotNao}
-            onChange={(e) => setIsNotNao(e.currentTarget.checked)}
-          />
-          <label htmlFor="nao-check">I'm not a NAO</label>
-        </div>
+        <>
+          <div class="registration-checkbox">
+            <input
+              type="checkbox"
+              id="attendance-mode-check"
+              checked={attendanceMode == AttendanceMode.Remote}
+              onChange={(e) =>
+                setAttendanceMode(
+                  e.currentTarget.checked
+                    ? AttendanceMode.Remote
+                    : AttendanceMode.OnSite,
+                )
+              }
+            />
+            <label htmlFor="attendance-mode-check">
+              Remote Participation only
+            </label>
+
+            <div class="registration-checkbox">
+              <input
+                type="checkbox"
+                id="nao-check"
+                checked={isNotNao}
+                onChange={(e) => setIsNotNao(e.currentTarget.checked)}
+              />
+              <label htmlFor="nao-check">I'm not a NAO</label>
+            </div>
+          </div>
+        </>
       )}
 
-      <button disabled={!isValid} onClick={handleSubmit}>
+      <button type="submit" disabled={!isValid} onClick={handleSubmit}>
         {mode === "login" ? "Login" : "Register"}
       </button>
 
@@ -85,7 +112,7 @@ export function Auth() {
       </div>
 
       <Footer />
-    </div>
+    </form>
   );
 }
 

frontend/src/mopad.css

@@ -142,18 +142,18 @@ body.center {
     box-shadow: 0 0.0625rem 0.125rem rgba(0, 0, 0, 0.125);
 }
 
-#register .i-am-not-a-nao {
+#register .registration-checkbox {
     margin: 0.5rem 0;
     width: 20rem;
 }
 
-#register .i-am-not-a-nao input {
+#register .registration-checkbox input {
     width: initial;
     margin: 0 0.5rem 0 0;
     padding: 0;
 }
 
-#register .i-am-not-a-nao label {
+#register .registration-checkbox label {
     font-size: 0.9rem;
 }
 

frontend/src/store.ts

@@ -115,6 +115,7 @@ function patchTalk(id: number, changes: Partial<Talk>) {
 }
 
 export function sendAuth(cmd: AuthCommand) {
+  console.log(cmd);
   socket?.send(JSON.stringify(cmd));
 }
 

frontend/src/types.ts

@@ -10,7 +10,10 @@ export interface SystemTime {
   nanos_since_epoch: number;
 }
 
-export type Role = "Editor" | "Scheduler";
+export enum Role {
+  Editor = "Editor",
+  Scheduler = "Scheduler",
+}
 
 export interface User {
   id: number;
@@ -46,6 +49,18 @@ export type Command =
   | { RemoveNerd: { talk_id: number; user_id: number } };
 
 export type AuthCommand =
-  | { Register: { name: string; team: string; password: string } }
+  | {
+      Register: {
+        name: string;
+        team: string;
+        password: string;
+        attendance_mode: null | AttendanceMode;
+      };
+    }
   | { Login: { name: string; team: string; password: string } }
   | { Relogin: { token: string } };
+
+export enum AttendanceMode {
+  OnSite = "OnSite",
+  Remote = "Remote",
+}

frontend/tsconfig.app.json

@@ -25,7 +25,7 @@
     "strict": true,
     "noUnusedLocals": true,
     "noUnusedParameters": true,
-    "erasableSyntaxOnly": true,
+    "erasableSyntaxOnly": false,
     "noFallthroughCasesInSwitch": true,
     "noUncheckedSideEffectImports": true
   },

frontend/tsconfig.node.json

@@ -18,7 +18,7 @@
     "strict": true,
     "noUnusedLocals": true,
     "noUnusedParameters": true,
-    "erasableSyntaxOnly": true,
+    "erasableSyntaxOnly": false,
     "noFallthroughCasesInSwitch": true,
     "noUncheckedSideEffectImports": true
   },