Merge pull request #12 from HE-Arc/7-creating-button-and-input-form

7 creating button and input form

frontend/src/assets/base.css

@@ -9,6 +9,7 @@
   --miq-black-mute: #282828;
 
   --miq-aqua: #68DAC1;
+  --miq-yellow-light: #ffc35b;
   --miq-yellow: #FFB32C;
   --miq-green: #3A7D44;
   --miq-red: #D62246;
@@ -31,8 +32,9 @@
   --color-background-soft: var(--miq-white-soft);
   --color-background-mute: var(--miq-white-mute);
   --color-background-btn: var(--miq-yellow);
+  --color-background-btn-hover: var(--miq-yellow-light);
 
-  --color-border: var(--miq-divider-light-2);
+  --color-border: var(--miq-black);
   --color-border-hover: var(--miq-divider-light-1);
 
   --color-heading: var(--miq-aqua);

frontend/src/assets/main.css

@@ -18,11 +18,29 @@ a,
 p,
 li,
 input,
-button
+button,
+label
 {
   font-family: 'Montserrat', Inter, sans-serif;
 }
 
+.btn
+{
+  padding: 1rem 2rem;
+  border: none;
+  border-radius: 27px;
+  cursor: pointer;
+  transition: 0.4s;
+  font-weight: bold;
+  font-size: 1rem;
+  color: var(--color-text);
+  background-color: var(--color-background-btn);
+}
+.btn:hover
+{
+  background-color: var(--color-background-btn-hover);
+}
+
 @media (hover: hover) {
   a:hover {
     text-decoration: underline;

frontend/src/components/CustomInput.vue

@@ -0,0 +1,61 @@
+<script setup>
+import { ref, computed, defineProps, defineEmits } from 'vue';
+
+const props = defineProps({
+    label: {
+        type: String,
+        required: true,
+    },
+    hasLabel: {
+        type: Boolean,
+        default: true,
+        required: false,
+    },
+    value: {
+        type: String,
+        required: true,
+    },
+    type: {
+        type: String,
+        default: 'text',
+        required: false,
+    },
+    required: {
+        type: Boolean,
+        default: false,
+        required: false,
+    },
+});
+
+const name = computed(() => props.label.toLowerCase());
+
+const emit = defineEmits(['input', 'change']);
+
+// Peut ajouter la validation ici
+const onInput = (event) => {
+    emit('input', event.target.value);
+};
+
+const onChange = (event) => {
+    emit('change', event.target.value);
+};
+</script>
+
+<template>
+    <div class="input-container">
+        <label v-if="hasLabel" :for="name">{{ label }}<span v-if="props.required">*</span></label>
+        <input :type="type" :id="name" :name="name" :value="value" @input="onInput" @change="onChange" maxlength="250" :required="required"/>
+    </div>
+</template>
+
+<style scoped>
+input 
+{
+    display: block; 
+    width: 100%;
+    padding: 0.5rem 1rem;
+    border-radius: 2rem;
+    border-color: var(--color-border);
+    border-style: solid;
+}
+</style>

frontend/src/views/HomeView.vue

@@ -4,5 +4,6 @@
 <template>
     <main>
         <h1>This is home page with categories</h1>
+        <button class="btn">Random question</button>
     </main>
 </template>

frontend/src/views/LoginView.vue

@@ -1,5 +1,32 @@
+<script setup>
+import CustomInput from '@/components/CustomInput.vue';
+import { ref, computed } from 'vue';
+
+const username = ref('');
+const updateUsername = (value) => {
+    username.value = value;
+};
+
+const password = ref('');
+const updatePassword = (value) => {
+    password.value = value;
+};
+
+const submitForm = () => {
+    console.log('Form submitted');
+    // TODO call api
+};
+
+</script>
 <template>
     <section class="login">
         <h1>This is login page</h1>
+        <form @submit.prevent="submitForm">
+            {{ username }} <!-- TODO debug purpose remove this line -->
+            <CustomInput label="Username" :value="username" @input="updateUsername" required />
+            {{ password }} <!-- TODO debug purpose remove this line -->
+            <CustomInput label="Password" type="password" :value="password" @input="updatePassword" required />
+            <button type="submit" class="btn">Submit</button>
+        </form>
     </section>
 </template>