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">Generate App-Password</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="form-group" v-if="!display_password">
                    <label :for="uuid">App Name</label>
                    <input
                        type="text"
                        class="form-control"
                        :id="uuid"
                        v-model="name"
                        @keyup="on_name_change"
                        placeholder="My really cool e-mail client"
                        :disabled="!enable_form"
                        ref="input"
                    >
                </div>
                <div v-if="display_password">
                    The app password for <code>{{ name }}</code> was generated successfully. Copy the password below and use it in <code>{{ name }}</code> to sign in. Note that, once you close this window, you will no longer be able to view this password.
                </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"
                >Cancel</button>
                <button
                    type="button"
                    class="btn btn-primary"
                    :disabled="!valid || !enable_form"
                    @click="generate_pw"
                    v-if="!display_password"
                >Generate</button>
                <button
                    type="button"
                    class="btn btn-primary"
                    v-if="display_password"
                    data-dismiss="modal"
                    @click="$emit('modal-success')"
                >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 = ''

    vue_on_create() {
        this.uuid = utility.uuid()
        console.log({auth_api})
    }

    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
    }
}