Commit 3915ffe7 authored by Jörg Richter's avatar Jörg Richter

Add login dialog

See dmx-platform/dmx-platform#328
parent 1a10f603
Pipeline #8542 failed with stages
......@@ -4,7 +4,7 @@
"description": "The DeepaMehta 5 login dialog",
"author": "Jörg Richter <jri@dmx.berlin>",
"license": "AGPL-3.0",
"main": "src/index.js",
"main": "src/components/dm5-login-dialog.vue",
"repository": {
"type": "git",
"url": "https://github.com/jri/dm5-login-dialog.git"
......
<template>
<el-dialog custom-class="dm5-login-dialog" :visible="visible" width="20em" title="Login" @open="open" @close="close">
<div class="field" v-if="showSelect">
<div class="field-label">Authorization Method</div>
<el-select v-model="authMethod">
<el-option v-for="authMethod in authMethods" :value="authMethod" :key="authMethod"></el-option>
</el-select>
</div>
<div class="field">
<div class="field-label">Username</div>
<el-input v-model="credentials.username" ref="username" @keyup.native.enter="advance"></el-input>
</div>
<div class="field">
<div class="field-label">Password</div>
<el-input v-model="credentials.password" ref="password" @keyup.native.enter="login" type="password"></el-input>
</div>
<div class="field">
{{message}}
</div>
<div slot="footer">
<el-button type="primary" @click="login">OK</el-button>
</div>
</el-dialog>
</template>
<script>
import dm5 from 'dm5'
export default {
created () {
// console.log('dm5-login-dialog created', this.authMethods)
dm5.restClient.getAuthorizationMethods().then(authMethods => {
console.log('[DMX] Installed auth methods', authMethods)
this.authMethods = this.authMethods.concat(authMethods)
})
//
this.authMethod = this.authMethods[0]
},
mounted () {
// console.log('dm5-login-dialog mounted')
},
props: {
visible: Boolean,
},
data () {
return {
authMethods: ['Basic'], // names of installed auth methods (array of string)
authMethod: undefined,
credentials: {
username: '',
password: ''
},
message: ''
}
},
computed: {
showSelect () {
return this.authMethods.length > 1
}
},
methods: {
login () {
dm5.restClient.login(this.credentials, this.authMethod).then(() => {
dm5.permCache.clear()
this.message = 'Login OK'
this.$emit('login', this.credentials.username)
this.close()
}).catch(error => {
this.message = 'Login failed'
}).finally(() => {
this.credentials.password = ''
})
},
open () {
this.message = ''
// Note: on open the DOM is not yet ready
this.$nextTick(() => this.$refs.username.focus())
},
close () {
// console.log('close login')
// FIXME: called twice when closing programmatically (through login())
this.$emit('close')
},
advance () {
this.$refs.password.focus()
}
}
}
</script>
<style>
.dm5-login-dialog .field + .field {
margin-top: var(--field-spacing);
}
</style>
export default {
install (Vue) {
console.log('Installing plugin dm5-login-dialog')
}
}
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment