From 63f5b9049edb45218147db84e6dbb333f6702a34 Mon Sep 17 00:00:00 2001
From: Francis Pion <francispion@hotmail.com>
Date: Wed, 20 Dec 2023 19:36:43 -0500
Subject: [PATCH] Created the AppCheckbox component.

---
 src/components/AppCheckbox.ts             | 15 ++++++
 src/components/AppCheckbox.vue            | 62 +++++++++++++++++++++++
 src/views/account/RecoverPasswordView.vue |  6 +--
 src/views/account/RegisterView.vue        |  6 +--
 src/views/account/SignInView.vue          |  6 +--
 5 files changed, 83 insertions(+), 12 deletions(-)
 create mode 100644 src/components/AppCheckbox.ts
 create mode 100644 src/components/AppCheckbox.vue

diff --git a/src/components/AppCheckbox.ts b/src/components/AppCheckbox.ts
new file mode 100644
index 0000000..6e97c6e
--- /dev/null
+++ b/src/components/AppCheckbox.ts
@@ -0,0 +1,15 @@
+type Booleanish = boolean | "true" | "false";
+
+export type CheckboxOptions = {
+  ariaLabel?: string;
+  disabled?: Booleanish;
+  id?: string;
+  inline?: Booleanish;
+  label?: string;
+  modelValue?: Booleanish;
+  name?: string;
+  required?: Booleanish;
+  reverse?: Booleanish;
+  switch?: Booleanish;
+  value?: string;
+};
diff --git a/src/components/AppCheckbox.vue b/src/components/AppCheckbox.vue
new file mode 100644
index 0000000..ffc84c5
--- /dev/null
+++ b/src/components/AppCheckbox.vue
@@ -0,0 +1,62 @@
+<script setup lang="ts">
+import { computed, ref } from "vue";
+import { nanoid } from "nanoid";
+
+import type { CheckboxOptions } from "./AppCheckbox";
+
+const props = defineProps<CheckboxOptions>();
+
+const inputRef = ref<HTMLInputElement>();
+
+const classes = computed<string[]>(() => {
+  const classes = ["form-check"];
+  if (props.inline) {
+    classes.push("form-check-inline");
+  }
+  if (props.reverse) {
+    classes.push("form-check-reverse");
+  }
+  if (props.switch) {
+    classes.push("form-switch");
+  }
+  return classes;
+});
+const inputId = computed<string>(() => props.id ?? nanoid());
+const role = computed<string | undefined>(() => (props.switch ? "switch" : undefined));
+
+const emit = defineEmits<{
+  (e: "update:model-value", value: boolean): void;
+}>();
+function onChange(event: Event): void {
+  emit("update:model-value", (event.target as HTMLInputElement).checked);
+}
+
+function focus(): void {
+  inputRef.value?.focus();
+}
+defineExpose({ focus });
+</script>
+
+<template>
+  <div :class="classes">
+    <slot>
+      <input
+        :aria-label="ariaLabel"
+        :checked="modelValue"
+        class="form-check-input"
+        :disabled="disabled"
+        :id="inputId"
+        :name="name"
+        ref="inputRef"
+        :required="required"
+        :role="role"
+        type="checkbox"
+        :value="value"
+        @change="onChange"
+      />
+      <slot name="label-override">
+        <label v-if="label" class="form-check-label" :for="inputId">{{ label }}</label>
+      </slot>
+    </slot>
+  </div>
+</template>
diff --git a/src/views/account/RecoverPasswordView.vue b/src/views/account/RecoverPasswordView.vue
index 78fe4f0..b5f94f6 100644
--- a/src/views/account/RecoverPasswordView.vue
+++ b/src/views/account/RecoverPasswordView.vue
@@ -3,6 +3,7 @@ import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { ref } from "vue";
 import { useRouter } from "vue-router";
 
+import AppCheckbox from "@/components/AppCheckbox.vue";
 import type { RecoverPasswordPayload } from "@/types/account";
 import { recoverPassword } from "@/api/account";
 
@@ -34,10 +35,7 @@ function onResetPassword(): void {
 <template>
   <main class="container">
     <h1>Recover Password</h1>
-    <div class="form-check form-switch mb-3">
-      <input class="form-check-input" id="success" role="switch" type="checkbox" v-model="success" />
-      <label class="form-label-check" for="success">Success</label>
-    </div>
+    <AppCheckbox class="mb-3" id="success" label="Success" switch v-model="success" />
     <div v-if="success">
       <div class="alert alert-success">Success!</div>
       <button v-if="payload.username" type="button" class="btn btn-warning" @click="onResetPassword">
diff --git a/src/views/account/RegisterView.vue b/src/views/account/RegisterView.vue
index 7f91e2f..8d53a9b 100644
--- a/src/views/account/RegisterView.vue
+++ b/src/views/account/RegisterView.vue
@@ -3,6 +3,7 @@ import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { ref } from "vue";
 import { useRouter } from "vue-router";
 
+import AppCheckbox from "@/components/AppCheckbox.vue";
 import type { RegisterPayload } from "@/types/account";
 import { register } from "@/api/account";
 
@@ -45,10 +46,7 @@ function onEmailAddressUpdate(e: Event): void {
 <template>
   <main class="container">
     <h1>Register</h1>
-    <div class="form-check form-switch mb-3">
-      <input class="form-check-input" id="success" role="switch" type="checkbox" v-model="success" />
-      <label class="form-label-check" for="success">Success</label>
-    </div>
+    <AppCheckbox class="mb-3" id="success" label="Success" switch v-model="success" />
     <div v-if="success">
       <div class="alert alert-success">Success!</div>
       <button v-if="payload.emailAddress" type="button" class="btn btn-warning" @click="onConfirm">
diff --git a/src/views/account/SignInView.vue b/src/views/account/SignInView.vue
index 2d705d8..a9379a2 100644
--- a/src/views/account/SignInView.vue
+++ b/src/views/account/SignInView.vue
@@ -3,6 +3,7 @@ import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { ref } from "vue";
 import { useRoute, useRouter } from "vue-router";
 
+import AppCheckbox from "@/components/AppCheckbox.vue";
 import type { Actor } from "@/types/aggregate";
 import type { ErrorDetail } from "@/types/api";
 import type { SignInPayload } from "@/types/account";
@@ -53,10 +54,7 @@ async function submit(): Promise<void> {
         <label class="form-label" for="password">Password</label>
         <input class="form-control" id="password" placeholder="Password" type="password" v-model="payload.password" />
       </div>
-      <div class="form-check mb-3">
-        <input class="form-check-input" id="remember-me" type="checkbox" v-model="payload.remember" />
-        <label class="form-check-label" for="remember-me">Remember Me</label>
-      </div>
+      <AppCheckbox class="mb-3" id="remember-be" label="Remember Me" v-model="payload.remember" />
       <button class="btn btn-primary me-2" :disabled="loading" type="submit">
         <span v-if="loading">
           <span class="spinner-border spinner-border-sm" aria-hidden="true"></span>