chore: cleanup (#27)

* implement password score UI and functions

* update strings tests to use `test`instead of `it`

* update typing

* refactor login/register UI+Logic

* fix width on switches to properly display

* fetch and store self in store

* (WIP) unify card styles

* update labels page

* bump nuxt

* use form area

* use text area for description

* unify confirm API

* unify UI around pages

* change header background height

frontend/components/App/Header.vue

@@ -64,7 +64,7 @@
   <LabelCreateModal v-model="modals.label" />
   <LocationCreateModal v-model="modals.location" />
 
-  <div class="bg-neutral absolute shadow-xl top-0 h-[50vh] max-h-96 sm:h-[28vh] -z-10 w-full"></div>
+  <div class="bg-neutral absolute shadow-xl top-0 h-[20rem] max-h-96 -z-10 w-full"></div>
 
   <BaseContainer cmp="header" class="py-6 max-w-none">
     <BaseContainer>

frontend/components/Base/Card.vue

@@ -0,0 +1,16 @@
+<template>
+  <div class="card bg-base-100 shadow-xl sm:rounded-lg">
+    <div class="px-4 py-5 sm:px-6">
+      <h3 class="text-lg font-medium leading-6">
+        <slot name="title"></slot>
+      </h3>
+      <p v-if="$slots.subtitle" class="mt-1 max-w-2xl text-sm text-gray-500">
+        <slot name="subtitle"></slot>
+      </p>
+      <template v-if="$slots['title-actions']">
+        <slot name="title-actions"></slot>
+      </template>
+    </div>
+    <slot />
+  </div>
+</template>

frontend/components/Label/CreateModal.vue

@@ -9,7 +9,7 @@
         :autofocus="true"
         label="Label Name"
       />
-      <FormTextField v-model="form.description" label="Label Description" />
+      <FormTextArea v-model="form.description" label="Label Description" />
       <div class="modal-action">
         <BaseButton type="submit" :loading="loading"> Create </BaseButton>
       </div>

frontend/components/Location/CreateModal.vue

@@ -9,7 +9,7 @@
         :autofocus="true"
         label="Location Name"
       />
-      <FormTextField v-model="form.description" label="Location Description" />
+      <FormTextArea v-model="form.description" label="Location Description" />
       <div class="modal-action">
         <BaseButton type="submit" :loading="loading"> Create </BaseButton>
       </div>

frontend/components/global/DetailsSection/DetailsSection.vue

@@ -0,0 +1,32 @@
+<template>
+  <div class="border-t border-gray-300 px-4 py-5 sm:p-0">
+    <dl class="sm:divide-y sm:divide-gray-300">
+      <div v-for="(detail, i) in details" :key="i" class="py-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
+        <dt class="text-sm font-medium text-gray-500">
+          {{ detail.name }}
+        </dt>
+        <dd class="mt-1 text-sm text-gray-900 sm:col-span-2 sm:mt-0">
+          <slot :name="detail.slot || detail.name" v-bind="{ detail }">
+            <template v-if="detail.type == 'date'">
+              <DateTime :date="detail.text" />
+            </template>
+            <template v-else>
+              {{ detail.text }}
+            </template>
+          </slot>
+        </dd>
+      </div>
+    </dl>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import type { DateDetail, Detail } from "./types";
+
+  defineProps({
+    details: {
+      type: Object as () => (Detail | DateDetail)[],
+      required: true,
+    },
+  });
+</script>

frontend/components/global/DetailsSection/index.ts

@@ -0,0 +1,2 @@
+import DetailsSection from "./DetailsSection.vue";
+export default DetailsSection;

frontend/components/global/DetailsSection/types.ts

@@ -0,0 +1,15 @@
+export type StringLike = string | number | boolean;
+
+export type DateDetail = {
+  name: string;
+  text: string | Date;
+  slot?: string;
+  type: "date";
+};
+
+export type Detail = {
+  name: string;
+  text: StringLike;
+  slot?: string;
+  type?: "text";
+};

frontend/components/global/PasswordScore.vue

@@ -0,0 +1,40 @@
+<template>
+  <div class="py-4">
+    <p class="text-sm">Password Strength: {{ message }}</p>
+    <progress
+      class="progress w-full progress-bar"
+      :value="score"
+      max="100"
+      :class="{
+        'progress-success': score > 50,
+        'progress-warning': score > 25 && score < 50,
+        'progress-error': score < 25,
+      }"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+  const props = defineProps({
+    password: {
+      type: String,
+      required: true,
+    },
+    valid: {
+      type: Boolean,
+      required: false,
+    },
+  });
+
+  const emits = defineEmits(["update:valid"]);
+
+  const { password } = toRefs(props);
+
+  const { score, message, isValid } = usePasswordScore(password);
+
+  watchEffect(() => {
+    emits("update:valid", isValid.value);
+  });
+</script>
+
+<style scoped></style>