CoreID/app/assets/app/dash/profile/form/AppPassword.component.js

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">&times;</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 [] }

    name = ''
    valid = false
    uuid = ''
    enable_form = true
    display_password = ''
    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
    }
}