Client - add registration

fittrackee_client/src/components/NavBar.vue

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

fittrackee_client/src/components/User/LoginForm.vue

@@ -1,35 +0,0 @@
-<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/LoginOrRegisterForm.vue

@@ -0,0 +1,118 @@
+<template>
+  <div id="login-form">
+    <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="formData.username"
+              :placeholder="t('user.USERNAME')"
+            />
+            <input
+              id="email"
+              required
+              type="email"
+              v-model="formData.email"
+              :placeholder="t('user.EMAIL')"
+            />
+            <input
+              id="password"
+              required
+              type="password"
+              v-model="formData.password"
+              :placeholder="t('user.PASSWORD')"
+            />
+            <input
+              v-if="action === 'register'"
+              id="confirm-password"
+              type="password"
+              required
+              v-model="formData.password_conf"
+              :placeholder="t('user.PASSWORD-CONFIRM')"
+            />
+          </div>
+          <button type="submit">{{ t('buttons.LOGIN') }}</button>
+        </form>
+        <p v-if="errorMessage">
+          {{ errorMessage }}
+        </p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+  import { computed, defineComponent, reactive } from 'vue'
+  import { useI18n } from 'vue-i18n'
+
+  import { IFormData } from '@/interfaces'
+  import { ROOT_STORE, USER_STORE } from '@/store/constants'
+  import { useStore } from '@/use/useStore'
+
+  export default defineComponent({
+    name: 'LoginForm',
+    props: {
+      action: {
+        type: String,
+        required: true,
+      },
+    },
+    setup() {
+      const formData: IFormData = reactive({
+        username: '',
+        email: '',
+        password: '',
+        password_conf: '',
+      })
+      const { t } = useI18n()
+      const store = useStore()
+      function onSubmit(actionType: string) {
+        return store.dispatch(USER_STORE.ACTIONS.LOGIN_OR_REGISTER, {
+          actionType,
+          formData,
+        })
+      }
+
+      return {
+        errorMessage: computed(
+          () => store.getters[ROOT_STORE.GETTERS.ERROR_MESSAGE]
+        ),
+        t,
+        formData,
+        onSubmit,
+      }
+    },
+  })
+</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;
+
+    #user-form {
+      width: 60%;
+
+      button {
+        margin: $default-margin;
+      }
+      @media screen and (max-width: $medium-limit) {
+        margin-top: $default-margin;
+        width: 100%;
+      }
+    }
+
+    @media screen and (max-width: $medium-limit) {
+      height: auto;
+    }
+  }
+</style>

fittrackee_client/src/components/User/UserForm.vue

@@ -1,104 +0,0 @@
-<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="formData.username"
-            :placeholder="t('user.REGISTER')"
-          />
-          <input
-            id="email"
-            required
-            type="email"
-            v-model="formData.email"
-            :placeholder="t('user.EMAIL')"
-          />
-          <input
-            id="password"
-            required
-            type="password"
-            v-model="formData.password"
-            :placeholder="t('user.PASSWORD')"
-          />
-          <input
-            v-if="action === 'register'"
-            id="confirm-password"
-            type="password"
-            required
-            v-model="formData.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 { computed, defineComponent, reactive } from 'vue'
-  import { useI18n } from 'vue-i18n'
-
-  import { IFormData } from '@/interfaces.ts'
-  import { ROOT_STORE, USER_STORE } from '@/store/constants'
-  import { useStore } from '@/use/useStore'
-
-  export default defineComponent({
-    name: 'UserForm',
-    components: {},
-    props: {
-      action: {
-        type: String,
-        required: true,
-      },
-    },
-    setup() {
-      const formData: IFormData = reactive({
-        username: '',
-        email: '',
-        password: '',
-        confirmPassword: '',
-      })
-      const { t } = useI18n()
-      const store = useStore()
-      function onSubmit(actionType: string) {
-        return store.dispatch(USER_STORE.ACTIONS.LOGIN_OR_REGISTER, {
-          actionType,
-          formData,
-        })
-      }
-
-      return {
-        errorMessage: computed(
-          () => store.getters[ROOT_STORE.GETTERS.ERROR_MESSAGE]
-        ),
-        t,
-        formData,
-        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/interfaces.ts

@@ -7,5 +7,5 @@ export interface IFormData {
   username: string
   email: string
   password: string
-  confirmPassword: string
+  password_conf: string
 }

fittrackee_client/src/router/index.ts

@@ -3,7 +3,7 @@ import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
 import { USER_STORE } from '@/store/constants'
 import store from '@/store'
 import Dashboard from '@/views/DashBoard.vue'
-import Login from '@/views/Login.vue'
+import LoginOrRegister from '@/views/LoginOrRegister.vue'
 import NotFound from '@/views/NotFound.vue'
 
 const routes: Array<RouteRecordRaw> = [
@@ -15,7 +15,14 @@ const routes: Array<RouteRecordRaw> = [
   {
     path: '/login',
     name: 'Login',
-    component: Login,
+    component: LoginOrRegister,
+    props: { action: 'login' },
+  },
+  {
+    path: '/register',
+    name: 'Register',
+    component: LoginOrRegister,
+    props: { action: 'register' },
   },
   { path: '/:pathMatch(.*)*', name: 'not-found', component: NotFound },
 ]
@@ -31,12 +38,12 @@ router.beforeEach((to, from, next) => {
     .then(() => {
       if (
         store.getters[USER_STORE.GETTERS.IS_AUTHENTICATED] &&
-        ['/login'].includes(to.path)
+        ['/login', '/register'].includes(to.path)
       ) {
         return next('/')
       } else if (
         !store.getters[USER_STORE.GETTERS.IS_AUTHENTICATED] &&
-        !['/login'].includes(to.path)
+        !['/login', '/register'].includes(to.path)
       ) {
         const path =
           to.path === '/'

fittrackee_client/src/views/LoginOrRegister.vue

@@ -5,7 +5,7 @@
         <BikePic />
       </div>
       <div class="container-sub">
-        <LoginForm />
+        <LoginOrRegisterForm :action="action" />
       </div>
     </div>
   </div>
@@ -15,13 +15,19 @@
   import { defineComponent } from 'vue'
 
   import BikePic from '@/components/BikePic.vue'
-  import LoginForm from '@/components/User/LoginForm.vue'
+  import LoginOrRegisterForm from '@/components/User/LoginOrRegisterForm.vue'
 
   export default defineComponent({
     name: 'NavBar',
     components: {
       BikePic,
-      LoginForm,
+      LoginOrRegisterForm,
+    },
+    props: {
+      action: {
+        type: String,
+        required: true,
+      },
     },
   })
 </script>