Client - minor refactoring

fittrackee_client/src/views/user/LoginOrRegister.vue

@@ -0,0 +1,71 @@
+<template>
+  <div id="loginOrRegister">
+    <div class="container">
+      <div class="container-sub">
+        <BikePic />
+      </div>
+      <div class="container-sub">
+        <LoginOrRegisterForm :action="action" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+  import { defineComponent } from 'vue'
+
+  import BikePic from '@/components/BikePic.vue'
+  import LoginOrRegisterForm from '@/components/User/UserAuthForm.vue'
+
+  export default defineComponent({
+    name: 'NavBar',
+    components: {
+      BikePic,
+      LoginOrRegisterForm,
+    },
+    props: {
+      action: {
+        type: String,
+        required: true,
+      },
+    },
+  })
+</script>
+
+<style lang="scss">
+  @import '~@/scss/base';
+
+  #loginOrRegister {
+    display: flex;
+    height: 100%;
+
+    .container {
+      display: flex;
+      flex-direction: row;
+      justify-content: space-evenly;
+      margin-bottom: $default-margin * 2;
+      width: 100%;
+
+      .container-sub {
+        min-width: 50%;
+        height: 100%;
+      }
+    }
+    @media screen and (max-width: $medium-limit) {
+      height: auto;
+      .container {
+        .container-sub {
+          align-items: center;
+          .bike-img {
+            max-width: 60%;
+          }
+        }
+      }
+    }
+    @media screen and (max-width: $small-limit) {
+      .container {
+        flex-direction: column;
+      }
+    }
+  }
+</style>

fittrackee_client/src/views/user/PasswordResetView.vue

@@ -0,0 +1,64 @@
+<template>
+  <div id="password-reset">
+    <div class="container">
+      <PasswordResetRequest
+        v-if="action.startsWith('reset')"
+        :action="action"
+        :token="token"
+      />
+      <PasswordEmailSent v-else :action="action" />
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+  import { computed, defineComponent, onBeforeMount } from 'vue'
+  import { useRoute, useRouter } from 'vue-router'
+
+  import PasswordEmailSent from '@/components/User/PasswordReset/PasswordActionDone.vue'
+  import PasswordResetRequest from '@/components/User/PasswordReset/PasswordResetForm.vue'
+  export default defineComponent({
+    name: 'PasswordResetView',
+    components: {
+      PasswordEmailSent,
+      PasswordResetRequest,
+    },
+    props: {
+      action: {
+        type: String,
+        required: true,
+      },
+    },
+    setup(props) {
+      const route = useRoute()
+      const router = useRouter()
+      const token = computed(() => route.query.token)
+
+      onBeforeMount(() => {
+        if (props.action === 'reset' && !token.value) {
+          router.push('/')
+        }
+      })
+
+      return { token }
+    },
+  })
+</script>
+
+<style lang="scss" scoped>
+  @import '~@/scss/base.scss';
+
+  #password-reset {
+    display: flex;
+    .container {
+      display: flex;
+      justify-content: center;
+      width: 50%;
+
+      @media screen and (max-width: $small-limit) {
+        width: 100%;
+        margin: 0 auto 50px auto;
+      }
+    }
+  }
+</style>

fittrackee_client/src/views/user/ProfileView.vue

@@ -0,0 +1,77 @@
+<template>
+  <div id="profile" class="container" v-if="authUser.username">
+    <router-view :user="authUser"></router-view>
+  </div>
+</template>
+
+<script lang="ts">
+  import { computed, ComputedRef, defineComponent } from 'vue'
+
+  import { USER_STORE } from '@/store/constants'
+  import { IUserProfile } from '@/types/user'
+  import { useStore } from '@/use/useStore'
+
+  export default defineComponent({
+    name: 'ProfileView',
+    setup() {
+      const store = useStore()
+      const authUser: ComputedRef<IUserProfile> = computed(
+        () => store.getters[USER_STORE.GETTERS.AUTH_USER_PROFILE]
+      )
+      return { authUser }
+    },
+  })
+</script>
+
+<style lang="scss" scoped>
+  @import '~@/scss/base.scss';
+  #profile {
+    display: flex;
+    flex-direction: column;
+
+    ::v-deep(.profile-form) {
+      display: flex;
+      flex-direction: column;
+
+      hr {
+        border-color: var(--card-border-color);
+        border-width: 1px 0 0 0;
+      }
+
+      .form-items {
+        display: flex;
+        flex-direction: column;
+
+        input {
+          margin: $default-padding * 0.5 0;
+        }
+
+        select {
+          height: 35px;
+          padding: $default-padding * 0.5 0;
+        }
+        ::v-deep(.custom-textarea) {
+          textarea {
+            padding: $default-padding * 0.5;
+          }
+        }
+
+        .form-item {
+          display: flex;
+          flex-direction: column;
+          padding: $default-padding;
+        }
+        .birth-date {
+          height: 20px;
+        }
+      }
+
+      .form-buttons {
+        display: flex;
+        margin-top: $default-margin;
+        padding: $default-padding 0;
+        gap: $default-padding;
+      }
+    }
+  }
+</style>

fittrackee_client/src/views/user/UserView.vue

@@ -0,0 +1,69 @@
+<template>
+  <div id="user" v-if="user.username">
+    <UserHeader :user="user" />
+    <div class="box">
+      <UserInfos :user="user" :from-admin="true" />
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+  import {
+    ComputedRef,
+    computed,
+    defineComponent,
+    onBeforeMount,
+    onBeforeUnmount,
+  } from 'vue'
+  import { useRoute } from 'vue-router'
+
+  import UserHeader from '@/components/User/ProfileDisplay/UserHeader.vue'
+  import UserInfos from '@/components/User/ProfileDisplay/UserInfos.vue'
+  import { USERS_STORE } from '@/store/constants'
+  import { IUserProfile } from '@/types/user'
+  import { useStore } from '@/use/useStore'
+
+  export default defineComponent({
+    name: 'UserView',
+    components: {
+      UserHeader,
+      UserInfos,
+    },
+    setup() {
+      const route = useRoute()
+      const store = useStore()
+
+      const user: ComputedRef<IUserProfile> = computed(
+        () => store.getters[USERS_STORE.GETTERS.USER]
+      )
+
+      onBeforeMount(() => {
+        if (
+          route.params.username &&
+          typeof route.params.username === 'string'
+        ) {
+          store.dispatch(USERS_STORE.ACTIONS.GET_USER, route.params.username)
+        }
+      })
+
+      onBeforeUnmount(() => {
+        store.dispatch(USERS_STORE.ACTIONS.EMPTY_USER)
+      })
+
+      return { user }
+    },
+  })
+</script>
+
+<style lang="scss" scoped>
+  @import '~@/scss/base.scss';
+
+  #user {
+    margin: auto;
+    width: 700px;
+    @media screen and (max-width: $medium-limit) {
+      width: 100%;
+      margin: 0 auto 50px auto;
+    }
+  }
+</style>