Merge pull request '#94-Application-Improvements' (#143) from #94-Application-Improvements into main

Reviewed-on: #143

ui/src/components/application/ApplicationForm.vue

@@ -33,7 +33,7 @@ const regexB = /^https?:\/\/steamcommunity\.com\/profiles\/\d+\/?$/;
 const formSchema = toTypedSchema(z.object({
   dob: z.string().refine(v => v, { message: "A date of birth is required." }),
   name: z.string().nonempty(),
-  playtime: z.preprocess((v) => (v === "" ? undefined : String(v)),z.string({ required_error: "Required" }).regex(/^\d+(\.\d+)?$/, "Must be a number").transform(Number).refine((n) => n >= 0, "Cannot be less than 0")),
+  playtime: z.preprocess((v) => (v === "" ? undefined : String(v)), z.string({ required_error: "Required" }).regex(/^\d+(\.\d+)?$/, "Must be a number").transform(Number).refine((n) => n >= 0, "Cannot be less than 0")),
   hobbies: z.string().nonempty(),
   military: z.boolean(),
   communities: z.string().nonempty(),
@@ -109,6 +109,17 @@ watch(() => showCoC.value, async () => {
   }
 });
 
+function convertToAge(dob: string) {
+  const [month, day, year] = dob.split('/').map(Number);
+
+  let dobDate = new Date(year, month - 1, day);
+
+  return Math.floor(
+    (Date.now() - dobDate.getTime()) / (1000 * 60 * 60 * 24 * 365.2425)
+  );
+
+}
+
 </script>
 
 <template>
@@ -119,7 +130,10 @@ watch(() => showCoC.value, async () => {
       <FormItem>
         <FormLabel>What is your date of birth?</FormLabel>
         <FormControl>
+          <template class="flex items-center gap-10">
             <DateInput :model-value="(value as string) ?? ''" :disabled="readOnly" @update:model-value="handleChange" />
+            <p class="text-muted-foreground">Age: {{ convertToAge(value) }}</p>
+          </template>
         </FormControl>
         <div class="h-4">
           <FormMessage class="text-destructive" />

ui/src/pages/Application.vue

@@ -146,7 +146,7 @@ async function handleDeny(id) {
                 <div>
                     <div class="flex gap-4 items-center">
                         <h3 class="scroll-m-20 text-2xl font-semibold tracking-tight">{{ member_name }}</h3>
-                        <Button variant="ghost" size="icon" @click="CopyLink()"><Link class="size-5"/></Button>
+                        <Button v-if="finalMode === 'view-recruiter'" variant="ghost" size="icon" @click="CopyLink()"><Link class="size-5"/></Button>
                     </div>
                     <p class="text-muted-foreground">Submitted: {{ submitDate?.toLocaleString("en-US", {
                         year: "numeric",