initial commit

packages/frontend/.dockerignore

@@ -0,0 +1,25 @@
+**/.classpath
+**/.dockerignore
+**/.env
+**/.git
+**/.gitignore
+**/.project
+**/.settings
+**/.toolstarget
+**/.vs
+**/.vscode
+**/*.*proj.user
+**/*.dbmdl
+**/*.jfm
+**/azds.yaml
+**/bin
+**/charts
+**/docker-compose*
+**/Dockerfile*
+**/node_modules
+**/npm-debug.log
+**/obj
+**/secrets.dev.yaml
+**/values.dev.yaml
+LICENSE
+README.md

packages/frontend/.gitignore

@@ -0,0 +1,24 @@
+# Nuxt dev/build outputs
+.output
+.data
+.nuxt
+.nitro
+.cache
+dist
+
+# Node dependencies
+node_modules
+
+# Logs
+logs
+*.log
+
+# Misc
+.DS_Store
+.fleet
+.idea
+
+# Local env files
+.env
+.env.*
+!.env.example

packages/frontend/Dockerfile

@@ -0,0 +1,13 @@
+FROM node:lts-alpine as build
+WORKDIR /src
+COPY ["package.json", "."]
+COPY ["yarn.lock", "."]
+RUN yarn install
+COPY . .
+RUN yarn build
+
+FROM node:lts-alpine as production
+COPY --from=build /src/.output /app
+WORKDIR /app
+EXPOSE 3000
+CMD ["node", "server/index.mjs"]

packages/frontend/app.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+useHead({
+  bodyAttrs: {
+    class: 'bg-black'
+  }
+})
+</script>
+
+<template>
+  <NuxtLayout>
+    <NuxtPage />
+  </NuxtLayout>
+</template>

packages/frontend/components/HealthCheck.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import { onMounted, ref } from 'vue';
+
+const runtimeConfig = useRuntimeConfig();
+const healthResult = ref<string>("Fetching health check...");
+
+onMounted(async () => {
+    // Send a request to the API Health Check endpoint
+    const response = await fetch(`${runtimeConfig.public.apiBaseUrl}/api/Health`);
+
+    // Extract the response payload (string result)
+    const result = await response.text();
+
+    // Set the result
+    healthResult.value = result;
+})
+
+
+</script>
+
+<template>
+    <div class="text-slate-300">
+    <h1>Health Check</h1>
+    <p>{{ healthResult }}</p>
+</div>
+</template>

packages/frontend/components/LoginForm.vue

@@ -0,0 +1,67 @@
+<script setup lang='ts'>
+import { ref } from 'vue';
+import { type ApiResponse } from '~/types/api-response';
+
+const password = ref('');
+const passwordError = ref('');
+const authenticated = useCookie<boolean>('authenticated');
+const runtimeConfig = useRuntimeConfig();
+
+const handleLogin = async (event: Event) => {
+    // Prevent default form submission
+    event.preventDefault();
+    
+    // Reset the error
+    passwordError.value = '';
+
+    // Send a request to the api to login
+    const response = await fetch(`${runtimeConfig.public.apiBaseUrl}/api/Authentication/login`, {
+        method: 'POST',
+        credentials: 'include',
+        headers: {
+            'Content-Type': 'application/json'
+        },
+        body: `"${password.value}"`
+    });
+
+    // Parse the response
+    const apiResponse = await response.json() as ApiResponse<boolean>;
+
+    if (apiResponse.success) {
+        // If the response was successful, login and redirect to the home page
+        authenticated.value = true;
+        navigateTo('/');
+    } else {
+        // Otherwise, set the error
+        passwordError.value = apiResponse.error ?? 'Unknown error';
+    }
+}
+</script>
+
+<template>
+    <div class="bg-zinc-800 text-slate-300 text-center w-full md:w-96 rounded-md">
+        <h1 class="text-7xl mt-5">Yale</h1>
+        <div>
+            <h4 class="hr text-2xl mt-3">User Access</h4>
+        </div>
+
+        <form @submit="handleLogin">
+            <YaleFormInput type="password" v-model="password" placeholder="Password" class="block mt-10 w-5/6 mx-auto" />
+            <p class="mt-3 w-5/6 mx-auto text-red-600" v-if="passwordError">{{ passwordError }}</p>
+            <YaleButton type="submit" class="mb-8 mt-3 w-5/6 mx-auto ">Login</YaleButton>
+        </form>
+    </div>
+</template>
+
+<style>
+.hr {
+    display: inline-block;
+}
+
+.hr::after {
+    content: '';
+    display: block;
+    border-top: 2px solid theme('colors.slate.300');
+    margin-top: .1rem;
+}
+</style>

packages/frontend/components/Modal.vue

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+const emit = defineEmits<{
+    (e: "close"): void
+}>();
+
+const handleClick = () => {
+    emit("close");
+}
+
+// If clicking outside the modal, close it
+document.addEventListener("click", (event) => {
+    if (event.target === document.querySelector(".fixed")) {
+        handleClick();
+    }
+});
+</script>
+
+<template>
+    <div class="fixed inset-0 bg-black bg-opacity-50 flex justify-center items-center">
+        <div class="bg-zinc-800 rounded-md min-w-96">
+            <div class="p-6 border-b border-slate-300">
+                <h3 class="text-md font-bold flex justify-between items-center">
+                    <slot name="title"></slot>
+                    <YaleButton type="button" @click="handleClick">
+                        <IconXMark />
+                    </YaleButton>
+                </h3>
+            </div>
+            <div class="p-6 border-b border-slate-300">
+                <slot></slot>
+            </div>
+            <div class="p-6">
+                <slot name="footer"></slot>
+            </div>
+        </div>
+    </div>
+</template>

packages/frontend/components/Navbar.vue

@@ -0,0 +1,7 @@
+<template>
+    <nav class="w-full bg-zinc-800 p-4 mb-4 flex gap-5 items-center">
+        <h1 class="text-slate-300 font-bold text-2xl inline-block">Yale | User Access</h1>
+        <NuxtLink to="/" class="text-slate-300 hover:text-slate-100">Home</NuxtLink>
+        <NuxtLink to="/people" class="text-slate-300 hover:text-slate-100">People</NuxtLink>
+    </nav>
+</template>

packages/frontend/components/PeopleList.vue

@@ -0,0 +1,132 @@
+<script setup lang="ts">
+import { type Person } from '@/types/yale';
+import { onMounted, ref } from 'vue';
+import type { ApiResponse } from '~/types/api-response';
+
+const people = ref([] as Person[]);
+const person = ref({ id: 0, name: '', phoneNumber: '' } as Person);
+const loading = ref(true);
+const runtimeConfig = useRuntimeConfig();
+
+const addModal = ref(false);
+
+// When the component is mounted, load the people
+onMounted(async () => {
+  await loadPeople();
+  loading.value = false;
+});
+
+const loadPeople = async () => {
+  // Send a request to the api to get the people
+  const response = await fetch(`${runtimeConfig.public.apiBaseUrl}/api/People`, { credentials: 'include' });
+
+  // Parse the response
+  const apiResponse = await response.json() as ApiResponse<Person[]>;
+
+  // Set the people
+  people.value = apiResponse.data || [];
+}
+
+const handleAddPerson = () => {
+  addModal.value = true;
+}
+
+const handleSavePerson = async () => {
+  // Validate the person fields
+  if (!person.value.name || !person.value.phoneNumber) {
+    alert('Name and phone number are required');
+    return;
+  }
+
+  // Set the loading status
+  loading.value = true;
+
+  // Send a request to the api to save the person
+  const response = await fetch(`${runtimeConfig.public.apiBaseUrl}/api/People`, {
+    method: 'POST',
+    credentials: 'include',
+    headers: {
+      'Content-Type': 'application/json'
+    },
+    body: JSON.stringify(person.value)
+  });
+
+  // Parse the response
+  const apiResponse = await response.json() as ApiResponse<Person>;
+
+  if (apiResponse.success) {
+    // Add the new person to the list
+    people.value.push(apiResponse.data!);
+    addModal.value = false;
+  } else {
+    alert(apiResponse.error ?? 'An error occurred');
+  }
+
+  // Close the modal and reset the person
+  loading.value = false;
+  person.value = { id: 0, name: '', phoneNumber: '' };
+
+  // Set the loading status
+  loading.value = false;
+}
+
+const handleDeletePerson = async (id: number) => {
+  // Set the loading status
+  loading.value = true;
+
+  // Send a request to the api to delete the person
+  const response = await fetch(`${runtimeConfig.public.apiBaseUrl}/api/People/${id}`, {
+    method: 'DELETE',
+    credentials: 'include'
+  });
+
+  // Parse the response
+  const apiResponse = await response.json() as ApiResponse<Person>;
+
+  if (apiResponse.success) {
+    // Remove the person from the list
+    const index = people.value.findIndex(x => x.id === id);
+    people.value.splice(index, 1);
+  } else {
+    alert(apiResponse.error ?? 'An error occurred');
+  }
+
+  // Set the loading status
+  loading.value = false;
+}
+</script>
+
+<template>
+  <!-- Handle loading state -->
+  <div v-if="loading">Loading...</div>
+  <template v-else>
+    <div class="text-end my-2">
+      <YaleButton type="button" @click="handleAddPerson">Add Person</YaleButton>
+    </div>
+    <table class="w-full text-left">
+      <tr>
+        <th scope="col">Person ID</th>
+        <th scope="col">Name</th>
+        <th scope="col">Phone Number</th>
+        <th scope="col">Actions</th>
+      </tr>
+      <PeopleListRow v-for="person in people" :key="person.id" :person="person" @delete-person="handleDeletePerson" />
+    </table>
+  </template>
+
+  <!-- Add modal -->
+  <Modal v-if="addModal" @close="addModal = false">
+    <template #title>
+      Add Person
+    </template>
+    <template #default>
+      <div class="flex flex-col space-y-2">
+        <YaleFormInput v-model="person.name" type="text" placeholder="Name" class="block w-full" />
+        <YaleFormInput v-model="person.phoneNumber" type="text" placeholder="Phone" class="block w-full" />
+        <div class="flex justify-end">
+          <YaleButton type="button" @click="handleSavePerson">Save</YaleButton>
+        </div>
+      </div>
+    </template>
+  </Modal>
+</template>

packages/frontend/components/PeopleListRow.vue

@@ -0,0 +1,34 @@
+<script setup lang='ts'>
+import { type Person } from '~/types/yale';
+import { type PropType } from 'vue';
+
+const props = defineProps({
+    person: {
+        type: Object as PropType<Person>,
+        required: true
+    }
+});
+
+const emit = defineEmits<{
+    (e: "delete-person", id: number): void
+}>();
+
+// Handle the clear code button click
+const handleDeletePersonClick = () => {
+    // Emit the event to the parent component
+    emit("delete-person", props.person.id);
+}
+</script>
+
+<template>
+    <tr scope="row">
+        <td>{{ person.id }}</td>
+        <td>{{ person.name }}</td>
+        <td>{{ person.phoneNumber }}</td>
+        <td class="flex">
+            <YaleButton type="button" @click="handleDeletePersonClick">
+                <IconTrash />
+            </YaleButton>
+        </td>
+    </tr>
+</template>

packages/frontend/components/UserCodeList.vue

@@ -0,0 +1,300 @@
+<script setup lang='ts'>
+import type { ApiResponse } from '@/types/api-response';
+import UserCodeListRow from './UserCodeListRow.vue';
+import { onMounted, ref } from 'vue';
+import { UserCodeStatus, type Person, type YaleUserCode } from '@/types/yale';
+
+const userCodes = ref([] as YaleUserCode[]);
+const userCode = ref({} as YaleUserCode);
+const people = ref([] as { label: string, value: string }[]);
+const personNumber = ref('');
+const loading = ref(true);
+const runtimeConfig = useRuntimeConfig();
+
+// Modals
+const showModal = ref(false);
+const editModal = ref(false);
+const clearModal = ref(false);
+const sendModal = ref(false);
+
+// Form Fields
+const newCode = ref('');
+const newCodeError = ref('');
+
+// When the component is mounted, load the user codes
+onMounted(async () => {
+    // Load the user codes and set the loading status when complete
+    await loadUserCodes();
+    await loadPeople();
+    loading.value = false;
+});
+
+const loadUserCodes = async () => {
+    // Send a request to the api to get the user codes
+    const response = await fetch(`${runtimeConfig.public.apiBaseUrl}/api/Yale/codes`, { credentials: 'include' });
+
+    // Parse the response
+    const apiResponse = await response.json() as ApiResponse<YaleUserCode[]>;
+
+    // Set the user codes by id
+    userCodes.value = apiResponse.data?.sort((a, b) => a.id - b.id) || [];
+}
+
+const loadPeople = async () => {
+    // Send a request to the api to get the people
+    const response = await fetch(`${runtimeConfig.public.apiBaseUrl}/api/People`, { credentials: 'include' });
+
+    // Parse the response
+    const apiResponse = await response.json() as ApiResponse<Person[]>;
+
+    // Set the people for drop down
+    people.value = apiResponse.data?.map(x => ({ label: x.name, value: x.phoneNumber })) || [];
+}
+
+const confirmUpdateCode = async (id: number, code: string) => {
+    // Reset the error
+    newCodeError.value = '';
+
+    // Validate the new code first
+    if (!/^\d{4,6}$/.test(code)) {
+        newCodeError.value = 'Code must be 4, 5 or 6 digits long';
+        return;
+    }
+
+    // Set the loading status
+    loading.value = true;
+
+    // Send a request to the api, the body will just be the new code
+    const response = await fetch(`${runtimeConfig.public.apiBaseUrl}/api/Yale/code/${id}`, {
+        method: 'POST',
+        credentials: 'include',
+        headers: {
+            'Content-Type': 'application/json'
+        },
+        body: `"${code}"`
+    });
+
+    // Parse the result
+    const apiResponse = await response.json() as ApiResponse<boolean>;
+
+    if (apiResponse.success) {
+        // If the response was successful update the code in the list
+        const index = userCodes.value.findIndex(x => x.id === id);
+        userCodes.value[index].code = code;
+        userCodes.value[index].status = UserCodeStatus.ENABLED;
+    } else {
+        // Otherwise display an error to the user.
+        alert(apiResponse.error ?? 'Unknown error');
+    }
+
+    // Reset the new code
+    newCode.value = '';
+
+    // Close the edit modal
+    editModal.value = false;
+
+    // Set the loading status
+    loading.value = false;
+}
+
+const confirmClearCode = async (id: number) => {
+    // Set the loading status
+    loading.value = true;
+
+    // Send a request to the api
+    const response = await fetch(`${runtimeConfig.public.apiBaseUrl}/api/Yale/code/${id}/status`, {
+        method: 'POST',
+        credentials: 'include'
+    });
+
+    // Parse the response
+    const apiResponse = await response.json() as ApiResponse<boolean>;
+
+    if (apiResponse.success) {
+        // If the response was successful set the code to available in the list
+        const index = userCodes.value.findIndex(x => x.id === id);
+        userCodes.value[index].code = '';
+        userCodes.value[index].status = UserCodeStatus.AVAILABLE;
+    } else {
+        // Otherwise display an error to the user.
+        alert(apiResponse.error ?? 'Unknown error');
+    }
+
+    // Close the clear modal
+    clearModal.value = false;
+
+    // Set the loading status
+    loading.value = false;
+}
+
+const handleShowCode = (id: number) => {
+    // Get the user code to show
+    const code = userCodes.value.find(x => x.id === id);
+
+    // If the code is not found then show an error to the user
+    if (!code) {
+        alert('Code not found');
+        return;
+    }
+
+    // Set the user code to show
+    userCode.value = code;
+
+    // Show the show-modal
+    showModal.value = true;
+}
+
+const handleUpdateCode = (id: number) => {
+    // Get the user code to update
+    const code = userCodes.value.find(x => x.id === id);
+
+    // If the code is not found then show an error to the user
+    if (!code) {
+        alert('Code not found');
+        return;
+    }
+
+    // Set the user code to update
+    userCode.value = code;
+
+    // Show the edit-modal
+    editModal.value = true;
+}
+
+const handleClearCode = (id: number) => {
+    // Get the user code to clear
+    const code = userCodes.value.find(x => x.id === id);
+
+    // If the code is not found then show an error to the user
+    if (!code) {
+        alert('Code not found');
+        return;
+    }
+
+    // Set the user code to clear
+    userCode.value = code;
+
+    // Show the clear-modal
+    clearModal.value = true;
+}
+
+const handleSendCode = (id: number) => {
+    // Get the user code to send
+    const code = userCodes.value.find(x => x.id === id);
+
+    // If the code is not found then show an error to the user
+    if (!code) {
+        alert('Code not found');
+        return;
+    }
+
+    // Set the user code 
+    userCode.value = code;
+
+    // Show the send modal 
+    sendModal.value = true;
+}
+
+const confirmSendCode = async (id: number) => {
+    // Set the loading status
+    loading.value = true;
+
+    if (!personNumber.value) {
+        alert('Please select a person to send the code to');
+        loading.value = false;
+        return;
+    }
+
+    // Send a request to the api to send the code
+    const response = await fetch(`${runtimeConfig.public.apiBaseUrl}/api/Yale/code/${id}/send`, {
+        method: 'POST',
+        credentials: 'include',
+        headers: {
+            'Content-Type': 'application/json'
+        },
+        body: `"${personNumber.value}"`
+    });
+
+    // Parse the response
+    const apiResponse = await response.json() as ApiResponse<boolean>;
+
+    if (apiResponse.success) {
+        alert('Code sent successfully');
+    } else {
+        alert(apiResponse.error ?? 'Unknown error');
+    }
+
+    // Close the clear modal
+    sendModal.value = false;
+
+    // Clear the person number and user code
+    personNumber.value = '';
+    userCode.value = {} as YaleUserCode;
+
+    // Set the loading status
+    loading.value = false;
+} 
+</script>
+
+<template>
+    <!-- Handle loading state -->
+    <div v-if="loading">Loading...</div>
+    <table v-else class="w-full text-left">
+        <tr>
+            <th scope="col">Code ID</th>
+            <th scope="col">Status</th>
+            <th scope="col">Actions</th>
+        </tr>
+        <UserCodeListRow v-for="userCode in userCodes" :key="userCode.id" :user-code="userCode"
+            @update-code="handleUpdateCode" @clear-code="handleClearCode" @show-code="handleShowCode"
+            @send-code="handleSendCode" />
+    </table>
+
+    <!-- Show modal -->
+    <Modal v-if="showModal" @close="showModal = false">
+        <template #title>
+            User Code # {{ userCode.id }}
+        </template>
+        <template #default>
+            Code: {{ userCode.code }}
+        </template>
+    </Modal>
+
+    <!-- Edit modal -->
+    <Modal v-if="editModal" @close="editModal = false">
+        <template #title>
+            Edit User Code # {{ userCode.id }}
+        </template>
+        <template #default>
+            <YaleFormInput v-model="newCode" type="text" placeholder="New Code" class="block w-full" />
+            <p class="text-red-600 mt-3" v-if="newCodeError">{{ newCodeError }}</p>
+            <YaleButton @click="confirmUpdateCode(userCode.id, newCode)" class="w-full mt-3">Update Code</YaleButton>
+        </template>
+        <template #footer v-if="userCode.isHome">
+            <p class="text-red-600 mt-3">You are about to edit the home code, are you sure?</p>
+        </template>
+    </Modal>
+
+    <!-- Clear modal -->
+    <Modal v-if="clearModal" @close="clearModal = false">
+        <template #title>
+            Delete User Code # {{ userCode.id }}
+        </template>
+        <template #default>
+            <p>Are you sure you want to delete this code?</p>
+            <YaleButton @click="confirmClearCode(userCode.id)" class="w-full mt-3">Delete Code</YaleButton>
+        </template>
+    </Modal>
+
+    <!-- Send modal -->
+    <Modal v-if="sendModal" @close="sendModal = false">
+        <template #title>
+            Send User Code # {{ userCode.id }}
+        </template>
+        <template #default>
+            <YaleFormSelect v-model="personNumber" :options="people" class="block w-full"
+                placeholder="Select a Person" />
+            <YaleButton @click="confirmSendCode(userCode.id)" class="w-full mt-3">Send Code</YaleButton>
+        </template>
+    </Modal>
+</template>

packages/frontend/components/UserCodeListRow.vue

@@ -0,0 +1,82 @@
+<script setup lang='ts'>
+import { UserCodeStatus, type YaleUserCode } from '~/types/yale';
+import { type PropType } from 'vue';
+
+const props = defineProps({
+    userCode: {
+        type: Object as PropType<YaleUserCode>,
+        required: true
+    }
+});
+
+const emit = defineEmits<{
+    (e: "show-code", id: number): void
+    (e: "update-code", id: number): void
+    (e: "clear-code", id: number): void
+    (e: "send-code", id: number): void
+}>();
+
+const handleShowCodeClick = () => {
+    // Emit the event to the parent component to handle
+    emit("show-code", props.userCode.id);
+}
+
+// Handle the update code button click
+const handleUpdateCodeClick = () => {
+    // Emit the event to the parent component
+    emit("update-code", props.userCode.id);
+}
+
+// Handle the clear code button click
+const handleClearCodeClick = () => {
+    // Emit the event to the parent component
+    emit("clear-code", props.userCode.id);
+}
+
+// Handle the send code button click
+const handleSendCodeClick = () => {
+    // Emit the event to the parent component
+    emit("send-code", props.userCode.id);
+}
+
+const userCodeStatusDisplay = (status: UserCodeStatus): string => {
+    switch (status) {
+        case UserCodeStatus.AVAILABLE:
+            return 'Available';
+        case UserCodeStatus.ENABLED:
+            return 'Enabled';
+        case UserCodeStatus.DISABLED:
+            return 'Disabled';
+        default:
+            return 'Unknown';
+    }
+}
+</script>
+
+<template>
+    <tr scope="row">
+        <td>
+            <template v-if="userCode.isHome">
+                {{ userCode.id }} (<IconHome />)
+            </template>
+            <template v-else>
+                {{ userCode.id }}
+            </template>
+        </td>
+        <td>{{ userCodeStatusDisplay(userCode.status) }}</td>
+        <td class="flex">
+            <YaleButton type="button" @click="handleShowCodeClick" :disabled="props.userCode.status !== UserCodeStatus.ENABLED">
+                <IconEye />
+            </YaleButton>
+            <YaleButton type="button" class="ml-2" @click="handleUpdateCodeClick">
+                <IconPencil />
+            </YaleButton>
+            <YaleButton type="button" class="ml-2" @click="handleSendCodeClick" :disabled="props.userCode.status !== UserCodeStatus.ENABLED" v-if="!props.userCode.isHome">
+                <IconSend />
+            </YaleButton>
+            <YaleButton type="button" class="ml-2" @click="handleClearCodeClick" :disabled="props.userCode.status !== UserCodeStatus.ENABLED" v-if="!props.userCode.isHome">
+                <IconTrash />
+            </YaleButton>
+        </td>
+    </tr>
+</template>

packages/frontend/components/icon/eye-slash.vue

@@ -0,0 +1,7 @@
+<template>
+    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
+        class="w-6 h-6">
+        <path stroke-linecap="round" stroke-linejoin="round"
+            d="M3.98 8.223A10.477 10.477 0 0 0 1.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.451 10.451 0 0 1 12 4.5c4.756 0 8.773 3.162 10.065 7.498a10.522 10.522 0 0 1-4.293 5.774M6.228 6.228 3 3m3.228 3.228 3.65 3.65m7.894 7.894L21 21m-3.228-3.228-3.65-3.65m0 0a3 3 0 1 0-4.243-4.243m4.242 4.242L9.88 9.88" />
+    </svg>
+</template>

packages/frontend/components/icon/eye.vue

@@ -0,0 +1,8 @@
+<template>
+    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
+        class="w-6 h-6">
+        <path stroke-linecap="round" stroke-linejoin="round"
+            d="M2.036 12.322a1.012 1.012 0 0 1 0-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178Z" />
+        <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" />
+    </svg>
+</template>

packages/frontend/components/icon/home.vue

@@ -0,0 +1,7 @@
+<template>
+    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
+        class="w-6 h-6 inline">
+        <path stroke-linecap="round" stroke-linejoin="round"
+            d="m2.25 12 8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25" />
+    </svg>
+</template>

packages/frontend/components/icon/pencil.vue

@@ -0,0 +1,7 @@
+<template>
+    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
+        class="w-6 h-6">
+        <path stroke-linecap="round" stroke-linejoin="round"
+            d="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L6.832 19.82a4.5 4.5 0 0 1-1.897 1.13l-2.685.8.8-2.685a4.5 4.5 0 0 1 1.13-1.897L16.863 4.487Zm0 0L19.5 7.125" />
+    </svg>
+</template>

packages/frontend/components/icon/send.vue

@@ -0,0 +1,7 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-send"
+    viewBox="0 0 24 24">
+    <path
+      d="M15.854.146a.5.5 0 0 1 .11.54l-5.819 14.547a.75.75 0 0 1-1.329.124l-3.178-4.995L.643 7.184a.75.75 0 0 1 .124-1.33L15.314.037a.5.5 0 0 1 .54.11ZM6.636 10.07l2.761 4.338L14.13 2.576zm6.787-8.201L1.591 6.602l4.339 2.76z" />
+  </svg>
+</template>

packages/frontend/components/icon/trash.vue

@@ -0,0 +1,7 @@
+<template>
+    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
+        class="w-6 h-6">
+        <path stroke-linecap="round" stroke-linejoin="round"
+            d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0" />
+    </svg>
+</template>

packages/frontend/components/icon/x-mark.vue

@@ -0,0 +1,6 @@
+<template>
+    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
+        class="w-6 h-6">
+        <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
+    </svg>
+</template>

packages/frontend/components/yale/Button.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import type { HTMLButtonTypes } from '~/types/html-input-types';
+
+interface ButtonProps {
+    type?: HTMLButtonTypes
+    disabled?: boolean
+}
+
+const props = withDefaults(defineProps<ButtonProps>(), {
+    type: 'button',
+    disabled: false
+})
+
+const emit = defineEmits([
+    'click'
+])
+
+const handleClick = () => {
+    emit('click');
+}
+</script>
+
+<template>
+    <button :type="props.type" :disabled="props.disabled" class="bg-stone-950 hover:bg-stone-900 p-2 rounded-md disabled:opacity-50 disabled:cursor-not-allowed"
+        @click="handleClick">
+        <slot></slot>
+    </button>
+</template>

packages/frontend/components/yale/FormInput.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import type { HTMLInputTypes } from '~/types/html-input-types';
+
+const props = defineProps<{
+    type: HTMLInputTypes
+    placeholder: string
+    modelValue: string
+}>();
+
+const emit = defineEmits([
+    'update:modelValue'
+])
+
+const handleInput = (event: Event) => {
+    // If input is a text input, emit the value
+    if (props.type === 'text' || props.type === 'password') {
+        emit('update:modelValue', (event.target as HTMLInputElement).value);
+    }
+}
+</script>
+
+<template>
+    <input class="bg-zinc-900 p-2 rounded-md" :type="props.type"
+        :value="props.modelValue" :placeholder="props.placeholder" @input="handleInput">
+</template>~/types/html-input-types

packages/frontend/components/yale/FormSelect.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+const props = defineProps<{
+    options: Array<{ label: string; value: string }>,
+    placeholder: string, 
+    modelValue: string
+}>();
+
+const emit = defineEmits([
+    'update:modelValue'
+]);
+
+const handleSelect = (event: Event) => {
+    emit('update:modelValue', (event.target as HTMLSelectElement).value);
+};
+</script>
+
+<template>
+    <select class="bg-zinc-900 p-2 rounded-md" :value="props.modelValue" @change="handleSelect">
+        <!-- Placeholder as the first option -->
+        <option value="" disabled selected>{{ props.placeholder }}</option>
+        
+        <!-- Render options dynamically -->
+        <option v-for="option in props.options" :key="option.value" :value="option.value">
+            {{ option.label }}
+        </option>
+    </select>
+</template>

packages/frontend/components/yale/Panel.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+const props = defineProps<{
+    heading?: string;
+}>();
+</script>
+
+<template>
+    <h2 v-if="props.heading" class="hr text-lg font-bold mb-2">{{ props.heading }}</h2>
+    <div class="rounded-md bg-zinc-800 p-2">
+        <slot></slot>
+    </div>
+</template>
+
+<style>
+.hr {
+    display: inline-block;
+}
+
+.hr::after {
+    content: '';
+    display: block;
+    border-top: 2px solid theme('colors.slate.300');
+    margin-top: .1rem;
+}
+</style>

packages/frontend/layouts/blank.vue

@@ -0,0 +1,5 @@
+<template>
+    <div class="text-slate-300">
+        <slot />
+    </div>
+</template>

packages/frontend/layouts/default.vue

@@ -0,0 +1,6 @@
+<template>
+    <Navbar />
+    <div class="text-slate-300 container mx-auto px-4">
+        <slot />
+    </div>
+</template>

packages/frontend/middleware/authentication.global.ts

@@ -0,0 +1,9 @@
+const anonymousRoutes = ['/login', '/health']; 
+
+export default defineNuxtRouteMiddleware((to, from) => {
+    // If the route is not the login page and the user is not logged in then redirect to login
+    const authenticated = useCookie<boolean>('authenticated');
+    if (!anonymousRoutes.includes(to.path) && !(authenticated.value) ) {
+        return navigateTo('/login');
+    }
+})

packages/frontend/nuxt.config.ts

@@ -0,0 +1,10 @@
+// https://nuxt.com/docs/api/configuration/nuxt-config
+export default defineNuxtConfig({
+  modules: [ '@nuxtjs/tailwindcss' ],
+  devtools: { enabled: true },
+  runtimeConfig: {
+    public: {
+      apiBaseUrl: 'https://localhost:7069'
+    }
+  }
+})

packages/frontend/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "nuxt-app",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "build": "nuxt build",
+    "dev": "nuxt dev",
+    "generate": "nuxt generate",
+    "preview": "nuxt preview",
+    "postinstall": "nuxt prepare"
+  },
+  "devDependencies": {
+    "@nuxt/devtools": "latest",
+    "@nuxtjs/tailwindcss": "^6.11.3",
+    "nuxt": "^3.9.1",
+    "vue": "^3.4.10",
+    "vue-router": "^4.2.5"
+  },
+  "dependencies": {}
+}

packages/frontend/pages/health.vue

@@ -0,0 +1,3 @@
+<template>
+    <HealthCheck /> 
+</template>

packages/frontend/pages/index.vue

@@ -0,0 +1,5 @@
+<template>
+    <YalePanel heading="User Code List">
+        <UserCodeList />
+    </YalePanel>
+</template>

packages/frontend/pages/login.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+definePageMeta({
+  layout: 'blank'
+})
+</script>
+
+<template>
+    <div class="h-screen flex items-center justify-center w-11/12 md:w-auto mx-auto">
+        <LoginForm />
+    </div>
+</template>

packages/frontend/pages/people.vue

@@ -0,0 +1,5 @@
+<template>
+  <YalePanel title="People">
+    <PeopleList />
+  </YalePanel>
+</template>

packages/frontend/server/tsconfig.json

@@ -0,0 +1,3 @@
+{
+  "extends": "../.nuxt/tsconfig.server.json"
+}

packages/frontend/tsconfig.json

@@ -0,0 +1,4 @@
+{
+  // https://nuxt.com/docs/guide/concepts/typescript
+  "extends": "./.nuxt/tsconfig.json"
+}

packages/frontend/types/api-response.ts

@@ -0,0 +1,5 @@
+export type ApiResponse<T> = {
+    success: boolean;
+    error?: string;
+    data?: T;
+}

packages/frontend/types/html-input-types.ts

@@ -0,0 +1,3 @@
+export type HTMLInputTypes = 'text' | 'password' | 'email' | 'number' | 'tel' | 'url' | 'search' | 'date' | 'time' | 'datetime-local' | 'month' | 'week' | 'color';
+
+export type HTMLButtonTypes = 'submit' | 'reset' | 'button';

packages/frontend/types/yale.ts

@@ -0,0 +1,18 @@
+export type YaleUserCode = {
+    id: number;
+    code: string;
+    status: UserCodeStatus;
+    isHome: boolean;
+}
+
+export enum UserCodeStatus {
+    AVAILABLE = 0,
+    ENABLED = 1,
+    DISABLED = 2
+}
+
+export type Person = {
+    id: number;
+    name: string;
+    phoneNumber: string;
+}