setup register, login

Author: rockstarr-programmerr

src/App.vue

@@ -1,56 +1,25 @@
 <template>
-  <v-app>
-    <v-app-bar
-      app
-      color="primary"
-      dark
-    >
-      <div class="d-flex align-center">
-        <v-img
-          alt="Vuetify Logo"
-          class="shrink mr-2"
-          contain
-          src="https://cdn.vuetifyjs.com/images/logos/vuetify-logo-dark.png"
-          transition="scale-transition"
-          width="40"
-        />
-
-        <v-img
-          alt="Vuetify Name"
-          class="shrink mt-1 hidden-sm-and-down"
-          contain
-          min-width="100"
-          src="https://cdn.vuetifyjs.com/images/logos/vuetify-name-dark.png"
-          width="100"
-        />
-      </div>
-
-      <v-spacer></v-spacer>
-
-      <v-btn
-        href="https://github.com/vuetifyjs/vuetify/releases/latest"
-        target="_blank"
-        text
-      >
-        <span class="mr-2">Latest Release</span>
-        <v-icon>mdi-open-in-new</v-icon>
-      </v-btn>
-    </v-app-bar>
-
-    <v-main>
-      <router-view/>
-    </v-main>
-  </v-app>
+  <component :is="layout"/>
 </template>
 
 <script lang="ts">
-import Vue from 'vue'
-
-export default Vue.extend({
-  name: 'App',
+import { Vue, Component } from 'vue-property-decorator'
+import LayoutDefault from '@/layouts/LayoutDefault.vue'
 
-  data: () => ({
-    //
-  })
+@Component({
+  components: {
+    LayoutDefault
+  }
 })
+export default class App extends Vue {
+  get layout (): typeof Vue {
+    const defaultLayout = LayoutDefault
+
+    if (this.$route.meta !== undefined) {
+      return this.$route.meta.layout || defaultLayout
+    } else {
+      return defaultLayout
+    }
+  }
+}
 </script>

src/api/account.ts

@@ -0,0 +1,48 @@
+import Vue from 'vue'
+import { endpoints } from './endpoints'
+import {
+  LoginReq, LoginRes,
+  MyInfoRes,
+  RegisterTeacherReq, RegisterTeacherRes, TokenRefreshReq, TokenRefreshRes
+} from '@/interfaces/api/account'
+
+export const account = {
+  async registerTeacher (reqBody: RegisterTeacherReq): Promise<RegisterTeacherRes> {
+    const res = await Vue.axios.post(endpoints.account.users.registerTeacher, reqBody)
+    return {
+      name: res.data.name,
+      email: res.data.email,
+      phoneNumber: res.data.phone_number
+    }
+  },
+
+  async login (reqBody: LoginReq): Promise<LoginRes> {
+    const res = await Vue.axios.post(endpoints.account.users.login, reqBody)
+    return {
+      access: res.data.access,
+      refresh: res.data.refresh
+    }
+  },
+
+  async tokenRefresh (reqBody: TokenRefreshReq): Promise<TokenRefreshRes> {
+    const res = await Vue.axios.post(endpoints.account.users.tokenRefresh, reqBody)
+    return {
+      access: res.data.access,
+      refresh: res.data.refresh
+    }
+  },
+
+  async getMyInfo (): Promise<MyInfoRes> {
+    const res = await Vue.axios.get(endpoints.account.me.myInfo)
+    return {
+      pk: res.data.pk,
+      url: res.data.url,
+      name: res.data.name,
+      email: res.data.email,
+      phoneNumber: res.data.phone_number,
+      userType: res.data.user_type,
+      avatar: res.data.avatar,
+      avatarThumbnail: res.data.avatar_thumbnail
+    }
+  }
+}

src/api/endpoints.ts

@@ -1,8 +1,13 @@
 export const endpoints = {
-  users: {
-    login: '/users/login/',
-    tokenRefresh: '/users/token-refresh/',
-    registerTeacher: '/users/register-teacher/'
+  account: {
+    users: {
+      login: '/account/users/login/',
+      tokenRefresh: '/account/users/token-refresh/',
+      registerTeacher: '/account/users/register-teacher/'
+    },
+    me: {
+      myInfo: '/account/users/me/'
+    }
   }
 }
 

src/api/index.ts

@@ -1,5 +1,5 @@
-import { users } from './users'
+import { account } from './account'
 
 export const Api = {
-  users,
+  account
 }

src/api/users.ts

@@ -1,5 +1,5 @@
 export declare interface LoginReq {
-  name: string;
+  email: string;
   password: string;
 }
 
@@ -29,3 +29,14 @@ export declare interface RegisterTeacherRes {
   name: string;
   phoneNumber: string;
 }
+
+export declare interface MyInfoRes {
+  pk: number;
+  url: string;
+  name: string;
+  email: string;
+  phoneNumber: string;
+  userType: string;
+  avatar: string;
+  avatarThumbnail: string;
+}

src/interfaces/api/user.ts renamed to src/interfaces/api/account.ts

@@ -0,0 +1,82 @@
+<template>
+  <v-app>
+    <v-app-bar
+      app
+      color="primary"
+      dark
+      dense
+      flat
+    >
+      <router-link
+        :to="{ name: 'Home' }"
+        class="d-flex align-center white--text"
+      >
+        Keep learning!
+      </router-link>
+
+      <v-spacer></v-spacer>
+
+      <div>
+        <v-progress-circular
+          v-if="loading"
+          indeterminate
+        ></v-progress-circular>
+        <span v-else>
+          {{ user.name }}
+        </span>
+      </div>
+    </v-app-bar>
+
+    <v-main>
+      <router-view/>
+    </v-main>
+
+    <v-bottom-navigation
+      app
+      background-color="secondary"
+      dark
+      hide-on-scroll
+    >
+      <v-btn>
+        <v-icon>mdi-chevron-left</v-icon>
+      </v-btn>
+      <v-spacer></v-spacer>
+    </v-bottom-navigation>
+  </v-app>
+</template>
+
+<script lang="ts">
+import { User } from '@/interfaces/user'
+import { unexpectedExc } from '@/utils'
+import { Vue, Component } from 'vue-property-decorator'
+import { mapGetters } from 'vuex'
+
+@Component({
+  computed: {
+    ...mapGetters({
+      user: 'account/loggedInUser',
+      hasUserInfo: 'account/hasUserInfo'
+    })
+  }
+})
+export default class LayoutDefault extends Vue {
+  user!: User
+  hasUserInfo!: boolean
+  loading = false
+
+  created (): void {
+    this.setUserInfo()
+  }
+
+  setUserInfo (): void {
+    if (!this.hasUserInfo) {
+      this.loading = true
+      this.$store.dispatch('account/getInfo')
+        .catch(unexpectedExc)
+        .finally(() => {
+          this.loading = false
+        })
+    }
+  }
+}
+</script>

src/interfaces/group.ts

@@ -0,0 +1,16 @@
+<template>
+  <v-app>
+    <v-main>
+      <router-view/>
+    </v-main>
+  </v-app>
+</template>
+
+<script lang="ts">
+import { Vue, Component } from 'vue-property-decorator'
+
+@Component
+export default class LayoutNoAppbar extends Vue {
+
+}
+</script>