From e0ac3842d5ca3e03dc1d14d51b14a89b94902cc9 Mon Sep 17 00:00:00 2001
From: "robinwilliam.hundt" <robinwilliam.hundt@stud.uni-goettingen.de>
Date: Thu, 5 Apr 2018 12:24:31 +0200
Subject: [PATCH] Added registration option on login page
---
frontend/src/api.js | 14 ++++-
frontend/src/components/RegisterDialog.vue | 59 ++++++++++++++++++++++
frontend/src/pages/Login.vue | 14 +++++
3 files changed, 85 insertions(+), 2 deletions(-)
create mode 100644 frontend/src/components/RegisterDialog.vue
diff --git a/frontend/src/api.js b/frontend/src/api.js
index b35bce86..b35d6811 100644
--- a/frontend/src/api.js
+++ b/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
diff --git a/frontend/src/components/RegisterDialog.vue b/frontend/src/components/RegisterDialog.vue
new file mode 100644
index 00000000..8c2425da
--- /dev/null
+++ b/frontend/src/components/RegisterDialog.vue
@@ -0,0 +1,59 @@
+<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>
diff --git a/frontend/src/pages/Login.vue b/frontend/src/pages/Login.vue
index 5ae6b8e2..13fd519f 100644
--- a/frontend/src/pages/Login.vue
+++ b/frontend/src/pages/Login.vue
@@ -1,6 +1,9 @@
<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.')
}
}
}
--
GitLab