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>

fittrackee_client/src/locales/en/buttons.json

@@ -0,0 +1,3 @@
+{
+  "LOGIN": "Log in"
+}

fittrackee_client/src/locales/en/en.ts

@@ -1,4 +1,5 @@
 import AdministrationTranslations from './administration.json'
+import ButtonsTranslations from './buttons.json'
 import CommonTranslations from './common.json'
 import DashboardTranslations from './dashboard.json'
 import ErrorTranslations from './error.json'
@@ -8,6 +9,7 @@ import WorkoutsTranslations from './workouts.json'
 
 export default {
   administration: AdministrationTranslations,
+  buttons: ButtonsTranslations,
   common: CommonTranslations,
   dashboard: DashboardTranslations,
   error: ErrorTranslations,

fittrackee_client/src/locales/en/user.json

@@ -1,6 +1,10 @@
 {
+  "EMAIL": "Email",
   "LANGUAGE": "Language",
   "LOGIN": "Login",
   "LOGOUT": "Logout",
-  "REGISTER": "Register"
+  "PASSWORD": "Password",
+  "PASSWORD-CONFIRM": "Confirm Password",
+  "REGISTER": "Register",
+  "USERNAME": "Username"
 }

fittrackee_client/src/locales/fr/buttons.json

@@ -0,0 +1,3 @@
+{
+  "LOGIN": "Se connecter"
+}

fittrackee_client/src/locales/fr/fr.ts

@@ -1,4 +1,5 @@
 import AdministrationTranslations from './administration.json'
+import ButtonsTranslations from './buttons.json'
 import CommonTranslations from './common.json'
 import DashboardTranslations from './dashboard.json'
 import ErrorTranslations from './error.json'
@@ -8,6 +9,7 @@ import WorkoutsTranslations from './workouts.json'
 
 export default {
   administration: AdministrationTranslations,
+  buttons: ButtonsTranslations,
   common: CommonTranslations,
   dashboard: DashboardTranslations,
   error: ErrorTranslations,

fittrackee_client/src/locales/fr/user.json

@@ -1,6 +1,11 @@
 {
+  "CONFIRM-PASSWORD": "Confirmation du mot de passe",
+  "EMAIL": "Email",
   "LANGUAGE": "Langue",
   "LOGIN": "Se connecter",
   "LOGOUT": "Se déconnecter",
-  "REGISTER": "S'inscrire"
+  "PASSWORD": "Mot de passe",
+  "PASSWORD-CONFIRM": "Confirmation du mot de passe",
+  "REGISTER": "S'inscrire",
+  "USERNAME": "Nom d'utilisateur"
 }

fittrackee_client/src/router/index.ts

@@ -1,5 +1,6 @@
 import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
 import Dashboard from '@/views/DashBoard.vue'
+import Login from '@/views/Login.vue'
 import NotFound from '@/views/NotFound.vue'
 
 const routes: Array<RouteRecordRaw> = [
@@ -8,6 +9,11 @@ const routes: Array<RouteRecordRaw> = [
     name: 'Dashboard',
     component: Dashboard,
   },
+  {
+    path: '/login',
+    name: 'Login',
+    component: Login,
+  },
   { path: '/:pathMatch(.*)*', name: 'not-found', component: NotFound },
 ]
 

fittrackee_client/src/scss/base.scss

@@ -23,6 +23,15 @@ a {
   text-decoration: none;
 }
 
+input {
+  border-radius: 0;
+  border: solid 1px var(--input-border-color);
+}
+
+label {
+  font-weight: bold;
+}
+
 button {
   background: var(--app-background-color);
   border: solid 1px var(--app-color);
@@ -42,6 +51,27 @@ button {
   }
 }
 
+.container {
+  display: flex;
+  margin-left: auto;
+  margin-right: auto;
+  padding-left: 15px;
+  padding-right: 15px;
+  max-width: $container-width;
+}
+
+.form-box {
+  .form-items {
+      display: flex;
+      flex-direction: column;
+
+      input {
+        margin: $default-margin;
+        padding: $default-padding * .5;
+      }
+    }
+}
+
 .upper {
   text-transform: uppercase;
 }

fittrackee_client/src/scss/colors.scss

@@ -2,6 +2,9 @@
   --app-background-color: #FFFFFF;
   --app-color: #2c3e50;
   --app-a-color: #40578a;
+  --app-shadow-color: lightgrey;
+
+  --input-border-color: #9da3af;
 
   --nav-bar-background-color: #FFFFFF;
   --nav-bar-link-active: #485b6e;
@@ -11,5 +14,4 @@
   --footer-border-color: #ebeef3;
   --footer-color: #8b8c8c;
 
-  --app-shadow-color: lightgrey;
 }

fittrackee_client/src/scss/vars.scss

@@ -3,4 +3,10 @@
 */
 $container-width: 1140px;
 $medium-limit: 1000px;
-$small-limit: 500px;
+$small-limit: 500px;
+
+/*
+* === PADDING / MARGIN ===
+*/
+$default-padding: 10px;
+$default-margin: $default-padding;

fittrackee_client/src/store/modules/user.ts

@@ -13,6 +13,7 @@ const getters: Getters = {
     return state.authToken !== null
   },
 }
+
 export default {
   state: userState,
   getters,

fittrackee_client/src/views/DashBoard.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="dashboard">
+  <div id="dashboard">
     <p>TODO Dashboard</p>
   </div>
 </template>

fittrackee_client/src/views/Login.vue

@@ -0,0 +1,55 @@
+<template>
+  <div id="login">
+    <div class="container">
+      <div class="container-sub">
+        <BikePic />
+      </div>
+      <div class="container-sub">
+        <LoginForm />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+  import { defineComponent } from 'vue'
+  import BikePic from '@/components/BikePic.vue'
+  import LoginForm from '@/components/User/LoginForm.vue'
+
+  export default defineComponent({
+    name: 'NavBar',
+    components: {
+      BikePic,
+      LoginForm,
+    },
+  })
+</script>
+
+<style lang="scss">
+  @import '~@/scss/base';
+
+  #login {
+    height: 84vh;
+    .container {
+      display: flex;
+      flex-direction: row;
+      flex-wrap: wrap;
+      justify-content: space-evenly;
+
+      .container-sub {
+        min-width: 50%;
+      }
+
+      @media screen and (max-width: $medium-limit) {
+        flex-direction: column;
+        flex-wrap: nowrap;
+
+        .container-sub {
+          .bike-img {
+            margin-top: $default-margin * 1.5;
+          }
+        }
+      }
+    }
+  }
+</style>