You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
129 lines
4.0 KiB
129 lines
4.0 KiB
import { Component } from '../../../../lib/vues6/vues6.js'
|
|
import { utility } from '../../../service/Utility.service.js'
|
|
import { auth_api } from '../../../service/AuthApi.service.js'
|
|
|
|
const template = `
|
|
<div
|
|
class="modal fade"
|
|
tabindex="-1"
|
|
role="dialog"
|
|
aria-hidden="true"
|
|
ref="modal"
|
|
>
|
|
<div class="modal-dialog" role="document">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title">{{ t['profile.generate_app_pw'] }}</h5>
|
|
<button type="button" class="close" data-dismiss="modal" :aria-label="t['common.close']">
|
|
<span aria-hidden="true">×</span>
|
|
</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div class="form-group" v-if="!display_password">
|
|
<label :for="uuid">{{ t['profile.app_name'] }}</label>
|
|
<input
|
|
type="text"
|
|
class="form-control"
|
|
:id="uuid"
|
|
v-model="name"
|
|
@keyup="on_name_change"
|
|
:placeholder="t['profile.cool_email_client']"
|
|
:disabled="!enable_form"
|
|
ref="input"
|
|
>
|
|
</div>
|
|
<div v-if="display_password">
|
|
{{ t['profile.app_pw_success'].replace(/APP_NAME/g, name) }}
|
|
</div>
|
|
<div v-if="display_password" class="text-center pad-top">
|
|
<pre><code>{{ display_password }}</code></pre>
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button
|
|
type="button"
|
|
class="btn btn-secondary"
|
|
data-dismiss="modal"
|
|
@click="$emit('modal-cancel')"
|
|
v-if="!display_password"
|
|
>{{ t['common.cancel'] }}</button>
|
|
<button
|
|
type="button"
|
|
class="btn btn-primary"
|
|
:disabled="!valid || !enable_form"
|
|
@click="generate_pw"
|
|
v-if="!display_password"
|
|
>{{ t['common.generate'] }}</button>
|
|
<button
|
|
type="button"
|
|
class="btn btn-primary"
|
|
v-if="display_password"
|
|
data-dismiss="modal"
|
|
@click="$emit('modal-success')"
|
|
>{{ t['common.close'] }}</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`
|
|
|
|
export default class AppPasswordFormComponent extends Component {
|
|
static get selector() { return 'coreid-form-app-password' }
|
|
static get template() { return template }
|
|
static get props() { return [] }
|
|
|
|
constructor() {
|
|
super()
|
|
|
|
this.name = ''
|
|
this.valid = false
|
|
this.uuid = ''
|
|
this.enable_form = true
|
|
this.display_password = ''
|
|
this.t = {}
|
|
}
|
|
|
|
async vue_on_create() {
|
|
this.t = await T(
|
|
'profile.generate_app_pw',
|
|
'profile.app_name',
|
|
'profile.cool_email_client',
|
|
'profile.app_pw_success',
|
|
'common.cancel',
|
|
'common.generate',
|
|
'common.close'
|
|
)
|
|
|
|
this.uuid = utility.uuid()
|
|
}
|
|
|
|
async on_name_change(event) {
|
|
this.valid = this.name.trim().length > 0
|
|
|
|
if ( event.keyCode === 13 ) {
|
|
// Enter was pressed
|
|
event.preventDefault()
|
|
event.stopPropagation()
|
|
|
|
if ( this.valid && this.enable_form ) await this.generate_pw()
|
|
}
|
|
}
|
|
|
|
trigger() {
|
|
this.name = ''
|
|
this.valid = false
|
|
this.enable_form = true
|
|
this.display_password = ''
|
|
|
|
this.$nextTick(() => {
|
|
$(this.$refs.modal).modal()
|
|
})
|
|
}
|
|
|
|
async generate_pw() {
|
|
this.enable_form = false
|
|
const result = await auth_api.create_app_password(this.name)
|
|
this.display_password = result.password
|
|
}
|
|
}
|