Client - init Login form

fittrackee_client/src/components/BikePic.vue

@@ -0,0 +1,38 @@
+<template>
+  <div id="about">
+    <img class="bike-img" v-bind:src="bike_image_url" alt="mountain bike" />
+  </div>
+</template>
+
+<script lang="ts">
+  import { defineComponent } from 'vue'
+
+  export default defineComponent({
+    name: 'About',
+    setup() {
+      return {
+        bike_image_url: './img/bike.svg',
+      }
+    },
+  })
+</script>
+
+<style scoped lang="scss">
+  @import '~@/scss/base';
+
+  #about {
+    display: flex;
+    justify-content: center;
+
+    padding: $default-padding;
+    height: calc(100vh - 100px);
+
+    @media screen and (max-width: $medium-limit) {
+      height: auto;
+    }
+
+    .bike-img {
+      max-width: 40%;
+    }
+  }
+</style>

fittrackee_client/src/components/NavBar.vue

@@ -36,7 +36,9 @@
           </div>
           <div class="nav-items-group" v-else>
             <span class="nav-item">{{ t('user.REGISTER') }}</span>
-            <span class="nav-item">{{ t('user.LOGIN') }}</span>
+            <router-link class="nav-item" to="/login" @click="closeMenu">{{
+              t('user.LOGIN')
+            }}</router-link>
           </div>
           <Dropdown
             v-if="availableLanguages && language"

fittrackee_client/src/components/User/LoginForm.vue

@@ -0,0 +1,34 @@
+<template>
+  <div id="login-form">
+    <UserForm action="login"></UserForm>
+  </div>
+</template>
+
+<script lang="ts">
+  import { defineComponent } from 'vue'
+  import UserForm from '@/components/User/UserForm.vue'
+
+  export default defineComponent({
+    name: 'LoginForm',
+    components: {
+      UserForm,
+    },
+  })
+</script>
+
+<style scoped lang="scss">
+  @import '~@/scss/base';
+
+  #login-form {
+    display: flex;
+    align-items: center;
+    height: calc(100vh - 100px);
+
+    border-radius: 4px;
+    margin: $default-margin 0;
+
+    @media screen and (max-width: $medium-limit) {
+      height: auto;
+    }
+  }
+</style>

fittrackee_client/src/components/User/UserForm.vue

@@ -0,0 +1,94 @@
+<template>
+  <div id="user-form">
+    <div class="form-box">
+      <form @submit.prevent="onSubmit(action)">
+        <div class="form-items">
+          <input
+            v-if="action === 'register'"
+            id="username"
+            required
+            v-model="user.username"
+            :placeholder="t('user.REGISTER')"
+          />
+          <input
+            id="email"
+            required
+            type="email"
+            v-model="user.email"
+            :placeholder="t('user.EMAIL')"
+          />
+          <input
+            id="password"
+            required
+            type="password"
+            v-model="user.password"
+            :placeholder="t('user.PASSWORD')"
+          />
+          <input
+            v-if="action === 'register'"
+            id="confirm-password"
+            type="password"
+            required
+            v-model="user.confirmPassword"
+            :placeholder="t('user.PASSWORD-CONFIRM')"
+          />
+        </div>
+        <button type="submit">{{ t('buttons.LOGIN') }}</button>
+      </form>
+      <p v-if="errorMessage">
+        {{ errorMessage }}
+      </p>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+  import { defineComponent, reactive, ref } from 'vue'
+  import { useI18n } from 'vue-i18n'
+
+  export default defineComponent({
+    name: 'UserForm',
+    components: {},
+    props: {
+      action: {
+        type: String,
+        required: true,
+      },
+    },
+    setup() {
+      const user = reactive({
+        username: '',
+        email: '',
+        password: '',
+        confirmPassword: '',
+      })
+      const { t } = useI18n()
+      function onSubmit(action: string) {
+        console.log(action, user)
+      }
+
+      return {
+        errorMessage: ref(null),
+        t,
+        user,
+        onSubmit,
+      }
+    },
+  })
+</script>
+
+<style scoped lang="scss">
+  @import '~@/scss/base';
+
+  #user-form {
+    width: 60%;
+
+    button {
+      margin: $default-margin;
+    }
+    @media screen and (max-width: $medium-limit) {
+      margin-top: $default-margin;
+      width: 100%;
+    }
+  }
+</style>