@kano/kwc-auth/dist/kwc-auth.js

/**
`<kwc-auth>` Front end for Kano's authentication flow.

Add this component somewhere in your html body and set some EventListeners
to interact with its many useful events.

```html
<kwc-auth></kwc-auth>
```

@demo demo/index.html
@demo demo/example.html
*/
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
    return c > 3 && r && Object.defineProperty(target, key, r), r;
};
import { LitElement, html, property, customElement, css, query } from 'lit-element/lit-element.js';
// TODO: figure out if this component is required
// import './components/kwc-auth-landing.js';
import './components/kwc-auth-username.js';
import './components/kwc-auth-password.js';
import './components/kwc-auth-email.js';
import './components/kwc-auth-forgot-username.js';
import './components/kwc-auth-forgot-email.js';
import './components/kwc-auth-forgot-password.js';
import './components/kwc-auth-successful-signup.js';
import './components/kwc-auth-login.js';
import { styles } from './styles.js';
let KwcAuth = class KwcAuth extends LitElement {
    constructor() {
        super();
        this.loading = false;
        this.hideLogin = true;
        this.view = '';
        this.locale = '';
        this.logo = 'kano';
        this.backgroundGlyph = 'shapesGlyph';
        this.allowExit = false;
        this.form = {
            username: '',
            password: '',
            email: '',
            region: '',
        };
        this.handleLoginRequested = this.handleLoginRequested.bind(this);
    }
    static get styles() {
        return [
            styles,
            css `
                kwc-auth-login,
                kwc-auth-password,
                kwc-auth-username,
                kwc-auth-successful-signup,
                kwc-auth-forgot-password,
                kwc-auth-forgot-username,
                kwc-auth-forgot-email,
                kwc-auth-email {
                    background-color: white;
                    border-radius: 9px;
                    width: 100%;
                    height: 100%;
                    margin: 0 auto;
                }

                @media (max-width: 600px) {
                    kwc-auth-login {
                        border-radius: 0;
                        height: 100vh;
                    }
                }
            `,
        ];
    }
    connectedCallback() {
        super.connectedCallback();
        this.addEventListener('login-requested', this.handleLoginRequested);
    }
    disconnectedCallback() {
        super.disconnectedCallback();
        this.removeEventListener('login-requested', this.handleLoginRequested);
    }
    handleLoginRequested() {
        this.submit('login');
    }
    // Return template of the current form
    formTemplate(view) {
        switch (view) {
            case 'username':
                return html `
                    <kwc-auth-username
                        .disabled=${this.loading}
                        .allowExit=${this.allowExit}
                        .locale=${this.locale}
                        @submit=${this.handleUsernameSubmit}
                        @exit=${this.handleExit}
                    ></kwc-auth-username>
            `;
            case 'update-username':
                return html `
                    <kwc-auth-username
                        .hideLogin=${this.hideLogin}
                        .disabled=${this.loading}
                        .locale=${this.locale}
                        @submit=${this.handleUpdateUsername}
                    ></kwc-auth-username>
            `;
            case 'password':
                return html `
                    <kwc-auth-password
                        .username=${this.form.username}
                        .disabled=${this.loading}
                        .locale=${this.locale}
                        @submit=${this.handlePasswordSubmit}
                    ></kwc-auth-password>
            `;
            case 'email':
                return html `
                    <kwc-auth-email
                        .disabled=${this.loading}
                        .locale=${this.locale}
                        @submit=${this.handleRegister}
                    ></kwc-auth-email>
            `;
            case 'update-email':
                return html `
                    <kwc-auth-email
                        .hideLogin=${this.hideLogin}
                        .disabled=${this.loading}
                        .locale=${this.locale}
                        @submit=${this.handleUpdateEmail}
                    ></kwc-auth-email>
            `;
            case 'forgot-email':
                return html `
                    <kwc-auth-forgot-email
                        .disabled=${this.loading}
                        .locale=${this.locale}
                        @submit=${this.handleForgotEmail}
                    ></kwc-auth-forgot-email>
                    `;
            case 'forgot-password':
                return html `
                    <kwc-auth-forgot-password
                        .disabled=${this.loading}
                        .locale=${this.locale}
                        @submit=${this.handleForgotPassword}
                    ></kwc-auth-forgot-password>
                    `;
            case 'forgot-username':
                return html `
                    <kwc-auth-forgot-username
                        .disabled=${this.loading}
                        .locale=${this.locale}
                        @submit=${this.handleForgotUsername}
                    ></kwc-auth-forgot-username>
                    `;
            case 'success':
                return html `
                    <kwc-auth-successful-signup
                        .locale=${this.locale}
                        @submit=${this.handleFinishedFlow}
                        @resend-email=${this.handleResendEmail}
                    ></kwc-auth-successful-signup>
                    `;
            default:
                return html `
                    <kwc-auth-login
                        .disabled=${this.loading}
                        .logo=${this.logo}
                        .locale=${this.locale}
                        @submit=${this.handleLogin}
                        @changeView=${this.changeView}
                    ></kwc-auth-login>
                `;
        }
    }
    changeView(e) {
        this.submit(e.detail.view);
    }
    handleSubmit(e) {
        this.submit(e.detail.next);
    }
    handleExit() {
        this.dispatchEvent(new CustomEvent('exit'));
    }
    render() {
        return this.formTemplate(this.view);
    }
    submit(view) {
        this.dispatchEvent(new CustomEvent('changeView', {
            detail: {
                nextView: view,
            }
        }));
    }
    handleUsernameSubmit(e) {
        this.form.username = e.detail.payload.username;
        this.dispatchEvent(new CustomEvent('submit-username', {
            detail: e.detail.payload.username,
        }));
    }
    handlePasswordSubmit(e) {
        this.form.password = e.detail.payload.password;
        this.dispatchEvent(new CustomEvent('submit-password'));
    }
    handleUpdateUsername(e) {
        this.dispatchEvent(new CustomEvent('update-username', {
            detail: e.detail.payload.username,
        }));
    }
    handleRegister(e) {
        this.form.email = e.detail.payload.email;
        this.form.region = e.detail.payload.region;
        this.dispatchEvent(new CustomEvent('register', {
            detail: {
                form: this.form,
            },
        }));
    }
    handleUpdateEmail(e) {
        this.dispatchEvent(new CustomEvent('update-email', {
            detail: e.detail.payload.email,
        }));
    }
    handleLogin(e) {
        this.dispatchEvent(new CustomEvent('login', {
            detail: e.detail,
        }));
    }
    handleForgotPassword(e) {
        this.dispatchEvent(new CustomEvent('forgot-password', {
            detail: e.detail.payload['forgot-password'],
        }));
    }
    handleForgotUsername(e) {
        this.dispatchEvent(new CustomEvent('forgot-username', {
            detail: e.detail.payload['forgot-username'],
        }));
    }
    handleForgotEmail(e) {
        this.dispatchEvent(new CustomEvent('forgot-email', {
            detail: e.detail.payload['forgot-email'],
        }));
    }
    handleFinishedFlow() {
        this.dispatchEvent(new CustomEvent('finished-flow'));
    }
    handleResendEmail() {
        this.dispatchEvent(new Event('finished-flow'));
    }
};
__decorate([
    property({ type: Boolean })
], KwcAuth.prototype, "loading", void 0);
__decorate([
    property({ type: Boolean })
], KwcAuth.prototype, "hideLogin", void 0);
__decorate([
    property({ type: String })
], KwcAuth.prototype, "view", void 0);
__decorate([
    property({ type: String })
], KwcAuth.prototype, "locale", void 0);
__decorate([
    property({ type: String })
], KwcAuth.prototype, "logo", void 0);
__decorate([
    property({ type: String })
], KwcAuth.prototype, "backgroundGlyph", void 0);
__decorate([
    property({ type: Boolean })
], KwcAuth.prototype, "allowExit", void 0);
__decorate([
    property({ type: Object })
], KwcAuth.prototype, "form", void 0);
__decorate([
    query('kwc-auth-username')
], KwcAuth.prototype, "username", void 0);
__decorate([
    query('kwc-auth-forgot-username')
], KwcAuth.prototype, "forgotUsername", void 0);
__decorate([
    query('kwc-auth-email')
], KwcAuth.prototype, "email", void 0);
__decorate([
    query('kwc-auth-forgot-password')
], KwcAuth.prototype, "forgotPassword", void 0);
__decorate([
    query('kwc-auth-login')
], KwcAuth.prototype, "login", void 0);
KwcAuth = __decorate([
    customElement('kwc-auth')
], KwcAuth);
export { KwcAuth };
//# sourceMappingURL=kwc-auth.js.map