Add all moderator pages to svelte

app/digital/mail.ts

@@ -4,6 +4,10 @@ import path from 'path';
 import handlebars from 'handlebars';
 import env from '../../env';
 import type { SentMessageInfo } from 'nodemailer/lib/smtp-transport';
+import { fileURLToPath } from 'url';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
 
 type TemplateVars = {
   from: string;

app/routes/index.ts

@@ -33,9 +33,6 @@ router.get('/admin*', checkAdmin, (req, res, next) => {
 
 // Make sure all moderator routes are secure
 router.get('/moderator*', checkModerator, (req, res, next) => {
-  if (env.NODE_ENV !== 'development') {
-    return res.render('moderatorIndex'); // Remove when migration is finished
-  }
   next();
 });
 

src/lib/utils/callApi.ts

@@ -8,34 +8,58 @@ const callApi = async <
   input: string,
   method: RequestInit['method'] = 'GET',
   body?: ReqBody,
-  headers?: RequestInit['headers']
-): Promise<{ status: number; body: ResBody }> => {
+  headers?: RequestInit['headers'],
+  fetchFunc = fetch
+): Promise<
+  | {
+      result: 'success';
+      status: number;
+      body: ResBody;
+    }
+  | {
+      result: 'failure';
+      status: number;
+      body: {
+        message: string;
+        name: string;
+      };
+    }
+> => {
   let xsrfToken = get(xsrf);
   if (!xsrfToken && method.toUpperCase() !== 'GET') {
     await generateXSRFToken();
     xsrfToken = get(xsrf);
   }
 
-  const res = await fetch('/api' + input, {
+  const res = await fetchFunc('/api' + input, {
     headers: {
       ...headers,
-      'Content-Type': body ? 'application/json' : undefined,
+      'content-type': body ? 'application/json' : undefined,
       'X-XSRF-TOKEN': xsrfToken,
     },
     method,
     body: body ? JSON.stringify(body) : undefined,
   });
 
-  let resBody: ResBody;
+  let resBody: ResBody & { message: string; name: string };
   if (res.headers.get('Content-Type')?.includes('application/json')) {
     resBody = await res.json();
   }
-  return { status: res.status, body: resBody };
+
+  if (res.status < 400) {
+    return { result: 'success', status: res.status, body: resBody };
+  } else {
+    return {
+      result: 'failure',
+      status: res.status,
+      body: resBody,
+    };
+  }
 };
 
 export const generateXSRFToken = async () => {
   const res = await callApi<{ csrfToken: string }>('/auth/token');
-  if (res.status === 200) {
+  if (res.result === 'success') {
     xsrf.set(res.body.csrfToken);
   } else {
     console.error('Could not retrieve csrf-token');

src/lib/utils/cardKeyScanStore.ts

@@ -114,11 +114,11 @@ export const cardKeyScanStore = writable<{ cardKey: number; time: number }>(
             };
           }
         } catch (e) {
+          console.error(e);
           if (window.navigator.userAgent.includes('Android')) {
             alerts.push(e, 'ERROR');
           }
           window.location.assign('/moderator/serial_error');
-          console.error(e);
         }
       }
 

src/lib/utils/userApi.ts

@@ -1,23 +1,30 @@
 import callApi from './callApi';
 
 export const toggleUser = (cardKey: number | string) => {
-  return callApi('/user/' + cardKey + '/toggle_active', 'POST');
+  return callApi<{ active: boolean }>(
+    '/user/' + cardKey + '/toggle_active',
+    'POST'
+  );
 };
 
 export const createUser = (user: Record<string, unknown>) => {
   return callApi('/user', 'POST', user);
 };
 
 export const generateUser = (user: Record<string, unknown>) => {
-  return callApi('/user/generate', 'POST', user);
+  return callApi<{ status: string; user: string }>(
+    '/user/generate',
+    'POST',
+    user
+  );
 };
 
 export const changeCard = (user: Record<string, unknown>) => {
   return callApi('/user/' + user.username + '/change_card', 'PUT', user);
 };
 
 export const countActiveUsers = () => {
-  return callApi('/user/count?active=true');
+  return callApi<{ users: number }>('/user/count?active=true');
 };
 
 export const deactivateNonAdminUsers = () => {

src/routes/(election)/+page.svelte

@@ -21,30 +21,23 @@
 
   let priorities: IAlternative[] = [];
 
-  type ErrorCode = {
-    name: string;
-  };
-  type ErrorMessage = {
-    message: string;
-  };
-
   const getActiveElection = async (accessCode: string = '') => {
-    const res = await callApi<PopulatedElection & ErrorCode & ErrorMessage>(
+    const res = await callApi<PopulatedElection>(
       '/election/active?accessCode=' + accessCode
     );
 
-    if (res.status === 200) {
+    if (res.result === 'success') {
       priorities = [];
       electionExists = true;
       activeElection = res.body;
       errorCode = '';
     } else {
       errorCode = res.body.name;
-      if (res.status == 404) {
+      if (res.status === 404) {
         electionExists = false;
         activeElection = null;
         accessCode = '';
-      } else if (res.status == 403) {
+      } else if (res.status === 403) {
         electionExists = true;
         activeElection = null;
         accessCode = '';
@@ -62,7 +55,7 @@
       election,
       priorities,
     });
-    if (res.status === 201) {
+    if (res.result === 'success') {
       activeElection = null;
       priorities = [];
       electionExists = false;
@@ -203,10 +196,10 @@
       <div class="access-code">
         <form
           class="form-group enter-code-form"
+          name="enterCodeForm"
           on:submit|preventDefault={() => {
             getActiveElection(accessCode);
           }}
-          name="enterCodeForm"
         >
           <div class="form-group access-code">
             <label for="accessCode">Kode</label>

src/routes/(election)/retrieve/+page.svelte

@@ -19,12 +19,10 @@
   const handleRetrieveVote: EventHandler<SubmitEvent, HTMLFormElement> = async (
     e
   ) => {
-    e.preventDefault();
-
     const res = await callApi<typeof vote>('/vote', 'GET', null, {
       'Vote-Hash': voteHash,
     });
-    if (res.status === 200) {
+    if (res.result === 'success') {
       vote = res.body;
     }
   };

src/routes/auth/login/+page.svelte

@@ -26,16 +26,15 @@
     | null;
 
   const handleLogin: EventHandler<SubmitEvent, HTMLFormElement> = async (e) => {
-    e.preventDefault();
     const res = await callApi(
       '/auth/login',
       'POST',
       Object.fromEntries(new FormData(e.currentTarget))
     );
 
-    if (res.status == 200) {
+    if (res.result === 'success') {
       window.location.assign('/');
-    } else if (res.status == 401) {
+    } else if (res.status === 401) {
       feedback = 'authfailed';
     } else {
       feedback = 'unknownError';
@@ -103,11 +102,7 @@
     <div class="col-md-6 text-center">
       <video class="center" bind:this={camera} muted playsinline />
       <br />
-      <form
-        action="/auth/login"
-        method="POST"
-        on:submit|preventDefault={handleLogin}
-      >
+      <form name="loginForm" on:submit|preventDefault={handleLogin}>
         <label class="form-label" for="username">Brukernavn:</label>
         <div class="input-group mb-3">
           <input

src/routes/moderator/(useCardKey)/activate_user/+page.svelte

@@ -19,7 +19,7 @@
     if (firstCall || !cardKey) return (firstCall = false);
     const res = await userApi.toggleUser(cardKey);
 
-    if (res.status === 200) {
+    if (res.result === 'success') {
       const lastAlert = alerts.getLastAlert();
 
       if (dingAudio) dingAudio.play();

src/routes/moderator/(useCardKey)/change_card/+page.svelte

@@ -0,0 +1,79 @@
+<script lang="ts">
+  import { alerts } from '$lib/stores';
+  import { cardKeyScanStore } from '$lib/utils/cardKeyScanStore';
+  import userApi from '$lib/utils/userApi';
+  import type { EventHandler } from 'svelte/elements';
+
+  let form: HTMLFormElement;
+  const handleChangeCard: EventHandler<SubmitEvent, HTMLFormElement> = async (
+    e
+  ) => {
+    const res = await userApi.changeCard({
+      ...Object.fromEntries(new FormData(e.currentTarget)),
+      cardKey: $cardKeyScanStore.cardKey,
+    });
+
+    if (res.result === 'success') {
+      alerts.push('Det nye kortet er nå registert.', 'SUCCESS');
+      form.reset();
+    } else {
+      switch (res.body.name) {
+        case 'DuplicateCardError':
+          alerts.push('Dette kortet er allerede blitt registrert.', 'ERROR');
+          break;
+        case 'InvalidRegistrationError':
+          alerts.push('Ugyldig brukernavn og/eller passord.', 'ERROR');
+          break;
+        default:
+          alerts.push('Noe gikk galt!', 'ERROR');
+      }
+    }
+  };
+</script>
+
+<div class="center text-center">
+  <form
+    class="form-group"
+    name="changeCardForm"
+    on:submit|preventDefault={handleChangeCard}
+    bind:this={form}
+  >
+    <div class="form-group">
+      <label for="card-number">Nytt kortnummer</label><input
+        class="form-control"
+        type="text"
+        name="cardKey"
+        value={$cardKeyScanStore.cardKey || ''}
+        placeholder="Vennligst skann kortet"
+        required
+        disabled
+      />
+    </div>
+    <div class="form-group">
+      <label for="username">Brukernavn</label><input
+        class="form-control"
+        type="text"
+        name="username"
+        id="username"
+        required
+        placeholder="Skriv inn brukernavn"
+      />
+    </div>
+    <div class="form-group">
+      <label for="password">Password</label><input
+        class="form-control"
+        type="password"
+        name="password"
+        id="password"
+        required
+        placeholder="Skriv inn passord"
+      />
+    </div>
+    <button class="btn btn-outline-secondary" id="submit" type="submit"
+      >Registrer nytt kort</button
+    >
+    {#if !$cardKeyScanStore.cardKey}
+      <p class="text-danger">Kortnummer er påkrevd</p>
+    {/if}
+  </form>
+</div>