Added registration option on login page

frontend/src/api.js

@@ -13,9 +13,19 @@ function getInstanceBaseUrl () {
 }
 
 let ax = axios.create({
-  baseURL: getInstanceBaseUrl(),
-  headers: {'Authorization': 'JWT ' + sessionStorage.getItem('token')}
+  baseURL: getInstanceBaseUrl()
+  // headers: {'Authorization': 'JWT ' + sessionStorage.getItem('token')}
 })
+{
+  let token = sessionStorage.getItem('token')
+  if (token) {
+    ax.defaults.headers['Authorization'] = `JWT ${token}`
+  }
+}
+
+export async function registerTutor (credentials) {
+  return ax.post('/api/tutor/register/', credentials)
+}
 
 export async function fetchJWT (credentials) {
   const token = (await ax.post('/api/get-token/', credentials)).data.token

frontend/src/components/RegisterDialog.vue

+<template>
+  <v-card>
+    <v-card-title class="title">
+      Register
+    </v-card-title>
+    <v-card-text>
+      <v-text-field
+        label="Username"
+        required
+        autofocus
+        v-model="credentials.username"
+      />
+      <v-text-field
+        label="Password"
+        required
+        type="password"
+        v-model="credentials.password"
+      />
+    </v-card-text>
+    <v-card-actions class="justify-center">
+      <v-btn flat :loading="loading" @click="register">submit</v-btn>
+    </v-card-actions>
+  </v-card>
+</template>
+
+<script>
+  import { registerTutor } from '@/api'
+
+  export default {
+    name: 'register-dialog',
+    data () {
+      return {
+        credentials: {
+          username: '',
+          password: ''
+        },
+        loading: false
+      }
+    },
+    methods: {
+      register () {
+        this.loading = true
+        registerTutor(this.credentials).then(() => {
+          this.$emit('registered', this.credentials)
+        }).catch(() => {
+          this.$notify({
+            title: 'Unable to register',
+            text: "Couldn't register a tutor account.",
+            type: 'error'
+          })
+        }).finally(() => { this.loading = false })
+      }
+    }
+  }
+</script>
+
+<style scoped>
+
+</style>

frontend/src/pages/Login.vue

 <template>
   <v-container fill-height>
     <v-layout align-center justify-center>
+      <v-dialog v-model="registerDialog" max-width="fit-content" class="pa-4">
+        <register-dialog @registered="registered($event)"/>
+      </v-dialog>
       <v-flex text-xs-center xs8 sm6 md4 lg2>
         <img v-if="production" :src="productionBrandUrl"/>
         <img v-else src="../assets/brand.png"/>
@@ -27,6 +30,7 @@
             type="password"
             required
           />
+          <v-btn @click="registerDialog = true">register</v-btn>
           <v-btn :loading="loading" type="submit" color="primary">Access</v-btn>
         </v-form>
       </v-flex>
@@ -37,8 +41,11 @@
 
 <script>
   import {mapActions, mapState} from 'vuex'
+  import RegisterDialog from '@/components/RegisterDialog'
+  import { authMut } from '@/store/modules/authentication'
 
   export default {
+    components: {RegisterDialog},
     name: 'grady-login',
     data () {
       return {
@@ -46,6 +53,7 @@
           username: '',
           password: ''
         },
+        registerDialog: false,
         loading: false
       }
     },
@@ -76,6 +84,12 @@
           this.getJWTTimeDelta()
           this.loading = false
         }).catch(() => { this.loading = false })
+      },
+      registered (credentials) {
+        this.registerDialog = false
+        this.credentials.username = credentials.username
+        this.credentials.password = credentials.password
+        this.$store.commit(authMut.SET_MESSAGE, 'Your account is being activated. Please wait.')
       }
     }
   }