💄 Extracting components.

frontend/.eslintrc.cjs

@@ -26,6 +26,14 @@ module.exports = {
                     'allowEmptyLines': true,
                 }],
                 'vue/singleline-html-element-content-newline': 'off',
+                'vue/v-for-delimiter-style': ['error', 'in'],
+                'vue/define-macros-order': ['error', {
+                  'order': ["defineOptions", "defineProps", "defineEmits", 'defineSlots']
+                }],
+                "vue/no-useless-v-bind": ['error', {
+                  "ignoreIncludesComment": false,
+                  "ignoreStringEscape": true
+                }]
             },
         },
         {

frontend/.idea/git_toolbox_prj.xml

@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="GitToolBoxProjectSettings">
+    <option name="commitMessageIssueKeyValidationOverride">
+      <BoolValueOverride>
+        <option name="enabled" value="true" />
+      </BoolValueOverride>
+    </option>
+    <option name="commitMessageValidationEnabledOverride">
+      <BoolValueOverride>
+        <option name="enabled" value="true" />
+      </BoolValueOverride>
+    </option>
+  </component>
+</project>

frontend/.idea/inspectionProfiles/Project_Default.xml

@@ -2,6 +2,9 @@
   <profile version="1.0">
     <option name="myName" value="Project Default" />
     <inspection_tool class="Eslint" enabled="true" level="WARNING" enabled_by_default="true" />
+    <inspection_tool class="RequiredAttributes" enabled="true" level="WARNING" enabled_by_default="true">
+      <option name="myAdditionalRequiredHtmlAttributes" value="model-value" />
+    </inspection_tool>
     <inspection_tool class="SpellCheckingInspection" enabled="true" level="TYPO" enabled_by_default="true">
       <option name="processCode" value="false" />
       <option name="processLiterals" value="true" />

frontend/components/Form/Input.vue

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+defineProps<{label?: string, name:string, type?: string, modelValue: any}>()
+defineEmits(['update:modelValue'])
+</script>
+
+<!----------------------------------------------------------------------------------- TEMPLATE ---->
+
+<template>
+  <div>
+    <label v-if="label" :for="name">{{ label }}</label>
+
+    <!--suppress RequiredAttributes -->
+    <input
+      :id="name"
+      :type="type ?? 'text'"
+      :value="modelValue"
+      :name="name"
+      v-bind="$attrs"
+      @input="$emit('update:modelValue', $event.target.value)"
+    >
+  </div>
+</template>
+
+<!-------------------------------------------------------------------------------------- STYLE ---->
+
+<style scoped lang="postcss">
+div {
+  @apply mb-4 last:mb-0;
+}
+
+label {
+  @apply block;
+}
+
+input {
+  @apply bg-white bg-opacity-30;
+  @apply border-gradient;
+}
+</style>

frontend/components/PrimaryButton.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+defineProps<{type?: string}>()
+</script>
+
+<!----------------------------------------------------------------------------------- TEMPLATE ---->
+
+<template>
+  <button :type="type ?? 'button'"><slot /></button>
+</template>
+
+<!-------------------------------------------------------------------------------------- STYLE ---->
+
+<style scoped lang="postcss">
+button {
+  @apply px-5 py-1.5 rounded-xl;
+  @apply text-pink-500;
+  @apply border-pink-400 border-2;
+  @apply transition-colors duration-200 hover:bg-pink-400 hover:text-white;
+}
+</style>

frontend/pages/index.vue

@@ -10,18 +10,12 @@
 
     <form>
 
-      <div>
-        <label for="email">Email</label>
-        <input id="email" type="email" required name="email">
-      </div>
+      <FormInput name="email" type="email" required label="Email" />
 
-      <div>
-        <label for="password">Password</label>
-        <input id="password" type="password" required name="password">
-      </div>
+      <FormInput name="password" type="password" required label="Password" />
 
       <div class="form-btns">
-        <button type="submit">Go</button>
+        <PrimaryButton type="submit">Go</PrimaryButton>
       </div>
 
     </form>
@@ -39,27 +33,7 @@ section {
   @apply min-w-max min-h-max self-center;
 }
 
-div {
-  @apply mb-4 last:mb-0;
-}
-
-label {
-  @apply block;
-}
-
-input {
-  @apply bg-white bg-opacity-30;
-  @apply border-gradient;
-}
-
 .form-btns {
   @apply block text-right me-4;
 }
-
-button {
-  @apply px-5 py-1.5 rounded-xl;
-  @apply text-pink-500;
-  @apply border-pink-400 border-2;
-  @apply transition-colors duration-200 hover:bg-pink-400 hover:text-white;
-}
 </style>