2018-03-08 09:41:39 +01:00
|
|
|
<template>
|
2018-03-08 15:08:33 +01:00
|
|
|
<div id="login">
|
|
|
|
<el-form ref="instanceForm" label-width="120px" label-position="top">
|
|
|
|
<el-form-item label="Domain name">
|
|
|
|
<el-input v-model="instanceForm.domain"></el-input>
|
|
|
|
</el-form-item>
|
|
|
|
<el-form-item class="submit">
|
|
|
|
<el-button type="primary" @click="search">Search</el-button>
|
|
|
|
</el-form-item>
|
|
|
|
</el-form>
|
|
|
|
<el-form ref="loginForm" v-if="instances.length > 0" label-width="120px" label-position="top">
|
|
|
|
<el-form-item label="Select instance">
|
|
|
|
<el-radio-group v-model="loginForm.selectInstance" @change="changeInstance">
|
|
|
|
<el-radio class="instance-list" v-for="instance in instances" v-bind:key="instance.id" :label="instance.name" border></el-radio>
|
|
|
|
</el-radio-group>
|
|
|
|
</el-form-item>
|
|
|
|
<el-form-item class="submit">
|
|
|
|
<el-button type="primary" @click="login" v-if="selectedInstance !== null">Login</el-button>
|
|
|
|
</el-form-item>
|
|
|
|
</el-form>
|
|
|
|
</div>
|
2018-03-08 09:41:39 +01:00
|
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
2018-03-08 15:08:33 +01:00
|
|
|
import { mapState } from 'vuex'
|
|
|
|
|
2018-03-08 09:41:39 +01:00
|
|
|
export default {
|
|
|
|
name: 'login',
|
2018-03-08 15:08:33 +01:00
|
|
|
data () {
|
|
|
|
return {
|
|
|
|
instanceForm: {
|
|
|
|
domain: ''
|
|
|
|
},
|
|
|
|
loginForm: {
|
|
|
|
selectInstance: ''
|
|
|
|
}
|
|
|
|
}
|
|
|
|
},
|
|
|
|
computed: {
|
|
|
|
...mapState({
|
|
|
|
instances: state => state.Login.instances,
|
|
|
|
selectedInstance: state => state.Login.selectedInstance
|
|
|
|
})
|
|
|
|
},
|
2018-03-08 10:36:09 +01:00
|
|
|
created () {
|
|
|
|
},
|
2018-03-08 09:41:39 +01:00
|
|
|
methods: {
|
|
|
|
login () {
|
2018-03-08 15:08:33 +01:00
|
|
|
this.$store.dispatch('Login/fetchLogin', this.selectedInstance)
|
2018-03-08 09:41:39 +01:00
|
|
|
.then((url) => {
|
|
|
|
this.$router.push({ path: '/authorize' })
|
|
|
|
})
|
2018-03-08 15:08:33 +01:00
|
|
|
},
|
|
|
|
search () {
|
|
|
|
this.$store.dispatch('Login/searchInstance', this.instanceForm.domain)
|
|
|
|
},
|
|
|
|
changeInstance (value) {
|
|
|
|
this.$store.dispatch('Login/changeInstance', value)
|
2018-03-08 09:41:39 +01:00
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
</script>
|
|
|
|
|
2018-03-09 08:14:47 +01:00
|
|
|
<style lang="scss">
|
|
|
|
body { font-family: 'Source Sans Pro', sans-serif; }
|
|
|
|
|
2018-03-08 09:41:39 +01:00
|
|
|
#login {
|
|
|
|
text-align: center;
|
2018-03-08 15:08:33 +01:00
|
|
|
|
|
|
|
.instance-list {
|
|
|
|
display: block;
|
|
|
|
}
|
2018-03-08 09:41:39 +01:00
|
|
|
}
|
|
|
|
</style>
|