feat: Support dark mode in login pages (#7420)

Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>

app/javascript/v3/components/Form/Input.vue

@@ -0,0 +1,80 @@
+<template>
+  <div>
+    <label
+      v-if="label"
+      :for="name"
+      class="flex justify-between text-sm font-medium leading-6 text-slate-900 dark:text-white"
+      :class="{ 'text-red-500': hasError }"
+    >
+      {{ label }}
+      <slot />
+    </label>
+    <div class="mt-1">
+      <input
+        :id="name"
+        :name="name"
+        :type="type"
+        autocomplete="off"
+        :required="required"
+        :placeholder="placeholder"
+        :value="value"
+        :class="{
+          'focus:ring-red-600 ring-red-600': hasError,
+          'dark:ring-slate-600 dark:focus:ring-woot-500 ring-slate-200': !hasError,
+        }"
+        class="block w-full rounded-md border-0 px-3 py-3 shadow-sm ring-1 ring-inset text-slate-900 dark:text-slate-100 placeholder:text-slate-400 focus:ring-2 focus:ring-inset focus:ring-woot-500 sm:text-sm sm:leading-6 outline-none dark:bg-slate-700 "
+        @input="onInput"
+        @blur="$emit('blur')"
+      />
+      <span
+        v-if="errorMessage && hasError"
+        class="text-xs leading-2 text-red-400"
+      >
+        {{ errorMessage }}
+      </span>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    label: {
+      type: String,
+      default: '',
+    },
+    name: {
+      type: String,
+      required: true,
+    },
+    type: {
+      type: String,
+      default: 'text',
+    },
+    required: {
+      type: Boolean,
+      default: false,
+    },
+    placeholder: {
+      type: String,
+      default: '',
+    },
+    value: {
+      type: [String, Number],
+      default: '',
+    },
+    hasError: {
+      type: Boolean,
+      default: false,
+    },
+    errorMessage: {
+      type: String,
+      default: '',
+    },
+  },
+  methods: {
+    onInput(e) {
+      this.$emit('input', e.target.value);
+    },
+  },
+};
+</script>