Client - init Login form

fittrackee_client/public/img/bike.svg

@@ -0,0 +1,49 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
+     y="0px"
+     viewBox="0 0 512 512" style="enable-background:new 0 0 512 512" xml:space="preserve">
+<path style="fill:#73D4FF;" d="M512,256c0,6.165-0.219,12.278-0.648,18.338C501.948,407.165,391.22,512,256,512
+	c-85.797,0-161.729-42.203-208.175-106.977c-13.678-19.069-24.795-40.082-32.852-62.558C5.277,315.455,0,286.344,0,256
+	C0,114.615,114.615,0,256,0c99.85,0,186.358,57.166,228.561,140.56C502.115,175.25,512,214.476,512,256z"/>
+    <path style="fill:#249FD3;" d="M512,256c0,6.165-0.219,12.278-0.648,18.338C501.948,407.165,391.22,512,256,512
+	c-85.797,0-161.729-42.203-208.175-106.977c-13.678-19.069-24.795-40.082-32.852-62.558l93.33-230.013l62.694,100.31L272.866,40.354
+	l148.113,163.788l63.582-63.582C502.115,175.25,512,214.476,512,256z"/>
+    <g>
+	<path style="fill:#324A97;" d="M147.074,349.54c-53.983,15.227-110.289-16.304-125.516-70.286s16.304-110.289,70.286-125.516
+		s110.289,16.304,125.516,70.286S201.056,334.314,147.074,349.54z M96.981,171.953c-43.94,12.394-69.604,58.225-57.21,102.165
+		s58.225,69.604,102.165,57.21s69.604-58.225,57.21-102.165S140.921,159.558,96.981,171.953z"/>
+        <path style="fill:#324A97;" d="M407.309,276.136c-53.983,15.227-110.289-16.304-125.516-70.286s16.304-110.289,70.286-125.516
+		s110.289,16.304,125.516,70.286S461.292,260.909,407.309,276.136z M357.216,98.547c-43.94,12.395-69.604,58.225-57.21,102.165
+		s58.225,69.604,102.165,57.21c43.94-12.394,69.604-58.225,57.21-102.165C446.987,111.818,401.156,86.154,357.216,98.547z"/>
+</g>
+    <path style="fill:#E8509A;" d="M123.193,242.597l29.354-121.287l84.62,89.137L123.193,242.597z M247.875,199.394l-85.089-89.631
+	L283.972,75.58L247.875,199.394z M366.608,16.084c-6.381-10.944-19.674-15.81-31.609-11.546l-28.988,10.339l-22.312,7.953
+	c-2.201,0.781-3.923,2.519-4.677,4.724c-0.766,2.207-0.484,4.647,0.761,6.618l14.28,22.653c-0.306,0.049-0.611,0.099-0.918,0.185
+	l-142.32,40.144L134.69,80.174l-11.149,10.58l16.4,17.274l-34.78,143.731c-0.652,2.654,0.16,5.448,2.135,7.35
+	c1.971,1.889,4.788,2.594,7.417,1.853l138.086-38.95l-0.009-0.034c0.175-0.037,0.359-0.076,0.533-0.114l0.273-0.077
+	c2.55-0.719,4.548-2.697,5.293-5.241L301.849,69.18l71.344,113.157c1.854,2.955,5.39,4.207,8.589,3.304
+	c0.695-0.195,1.371-0.497,2.02-0.902c3.588-2.265,4.657-7.016,2.392-10.605l-88.282-140.05l16.649-5.937l25.605-9.127
+	c4.952-1.79,10.503,0.246,13.154,4.807c1.643,2.818,1.945,6.198,0.832,9.265c-1.114,3.067-3.513,5.452-6.58,6.563l-10.185,3.672
+	c-3.992,1.445-6.067,5.852-4.622,9.845c1.434,3.995,5.861,6.052,9.834,4.625l10.185-3.672c7.371-2.669,13.136-8.412,15.815-15.779
+	C371.272,30.966,370.548,22.862,366.608,16.084z"/>
+    <g>
+	<circle style="fill:#324A97;" cx="119.463" cy="251.643" r="15.768"/>
+        <circle style="fill:#324A97;" cx="379.695" cy="178.239" r="15.768"/>
+        <path style="fill:#324A97;" d="M368.598,38.345c-2.678,7.368-8.444,13.11-15.815,15.779l-10.185,3.672
+		c-3.973,1.427-8.399-0.629-9.834-4.625c-1.445-3.993,0.629-8.399,4.622-9.845l10.185-3.672c3.067-1.111,5.466-3.496,6.58-6.563
+		c1.114-3.067,0.812-6.447-0.832-9.265c-2.651-4.561-8.202-6.596-13.154-4.807l-17.975,6.407c-4.128,1.471-8.64-0.859-9.83-5.077
+		l0,0c-1.072-3.8,0.956-7.786,4.658-9.156l17.98-6.656c11.935-4.263,25.228,0.602,31.609,11.546
+		C370.548,22.862,371.272,30.966,368.598,38.345z"/>
+        <path style="fill:#324A97;" d="M174.094,57.388l-61.025,7.232c-6.381,0.757-10.576,7.036-8.833,13.221l3.608,12.792
+		c1.227,4.348,5.745,6.878,10.093,5.652l60.502-17.065c5.934-1.674,9.387-7.841,7.713-13.775l0,0
+		C184.661,60.157,179.547,56.741,174.094,57.388z"/>
+</g>
+    <path style="fill:#4E62B1;" d="M511.352,274.338c-3.302,46.686-19.122,89.903-44.126,126.328
+	c-14.137,20.616-31.222,39.048-50.636,54.711c-22.037,17.774-47.083,31.974-74.261,41.702C315.361,506.734,286.292,512,256,512
+	c-45.631,0-88.461-11.933-125.565-32.862c-32.653-18.411-60.855-43.792-82.61-74.115l99.244-57.574l102.285,20.47l50.155-84.637
+	L511.352,274.338z"/>
+    <path style="fill:#36539C;" d="M467.226,400.666c-14.137,20.616-31.222,39.048-50.636,54.711
+	c-22.037,17.774-47.083,31.974-74.261,41.702C315.361,506.734,286.292,512,256,512c-45.631,0-88.461-11.933-125.565-32.862
+	l42.13-67.333l142.618,25.067l76.8-76.79L467.226,400.666z"/>
+</svg>

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

@@ -4,3 +4,9 @@
 $container-width: 1140px;
 $medium-limit: 1000px;
 $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>