<commit_before>import {LitElement, html} from "lit";
import LitUtils from "../commons/utils/lit-utils.js";
import NotificationUtils from "../commons/utils/notification-utils.js";


export default class UserPasswordReset extends LitElement {

    constructor() {
        super();
        this.#init();
    }

    createRenderRoot() {
        return this;
    }

    static get properties() {
        return {
            opencgaSession: {
                type: Object
            },
        };
    }

    #init() {
        this.hasEmptyUser = false;
    }

    redirect(to) {
        LitUtils.dispatchCustomEvent(this, "redirect", null, {hash: to});
    }

    onSubmit(e) {
        e.preventDefault();
        const user = (this.querySelector("#user").value || "").trim();

        // Check for empty user ID
        this.hasEmptyUser = user.length === 0;
        if (this.hasEmptyUser) {
            return this.requestUpdate();
        }

        // Reset password mockup
        // TODO: call openCGA to the correct endpoint
        Promise.resolve().then(() => {
            NotificationUtils.dispatch(this, NotificationUtils.NOTIFY_SUCCESS, {
                "message": "We have just send you an email with the new password.",
            });

            this.querySelector("#user").value = "";
            this.hasEmptyUser = false;
            this.requestUpdate();
        });
    }

    // Handle keyup event --> check for enter key to submit the form
    onKeyUp(e) {
        if (e.key === "Enter") {
            return this.onSubmit(e);
        }
    }

    render() {
        return html`
            <div class="container-fluid" style="max-width:380px;">
                <div class="panel panel-default" style="margin-top:96px;">
                    <div class="panel-body" style="padding:32px;">
                        <div align="center">
                            <h3 style="font-weight:bold;margin-top:0px;">
                                Reset your password
                            </h3>
                        </div>
                        <div class="paragraph" style="margin-bottom:16px;">
                            Please enter your user ID and we will send you an email with your password reset link.
                        </div>
                        <div class="form-group ${this.hasEmptyUser ? "has-error" : ""}">
                            <div class="input-group">
                                <span class="input-group-addon" id="username">
                                    <i class="fa fa-user fa-lg"></i>
                                </span>
                                <input id="user" type="text" class="form-control" placeholder="<NAME>" @keyup="${e => this.onKeyUp(e)}">
                            </div>
                            ${this.hasEmptyUser ? html`
                                <div class="help-block">This field is required</div>
                            ` : null}
                        </div>
                        <button class="btn btn-primary btn-block" @click="${e => this.onSubmit(e)}">
                            <strong>Reset password</strong>
                        </button>
                    </div>
                </div>
                <div align="center">
                    <a @click="${() => this.redirect("#login")}" style="cursor:pointer;">Cancel</a>
                </div>
            </div>
        `;
    }

}

customElements.define("user-password-reset", UserPasswordReset);<commit_msg>wc: minor improvements in password reset view (#392)<commit_after>import {LitElement, html} from "lit";
import LitUtils from "../commons/utils/lit-utils.js";
import NotificationUtils from "../commons/utils/notification-utils.js";


export default class UserPasswordReset extends LitElement {

    constructor() {
        super();
        this.#init();
    }

    createRenderRoot() {
        return this;
    }

    static get properties() {
        return {
            opencgaSession: {
                type: Object
            },
        };
    }

    #init() {
        this.hasEmptyUser = false;
    }

    redirect(to) {
        LitUtils.dispatchCustomEvent(this, "redirect", null, {hash: to});
    }

    onSubmit(e) {
        e.preventDefault();
        const user = (this.querySelector("#user").value || "").trim();

        // Check for empty user ID
        this.hasEmptyUser = user.length === 0;
        if (this.hasEmptyUser) {
            return this.requestUpdate();
        }

        // Reset password mockup
        // TODO: call openCGA to the correct endpoint
        Promise.resolve().then(() => {
            NotificationUtils.dispatch(this, NotificationUtils.NOTIFY_SUCCESS, {
                "message": "We have just send you an email with the new password.",
            });

            this.querySelector("#user").value = "";
            this.hasEmptyUser = false;
            this.requestUpdate();
        });
    }

    // Handle keyup event --> check for enter key to submit the form
    onKeyUp(e) {
        if (e.key === "Enter") {
            return this.onSubmit(e);
        }
    }

    render() {
        return html`
            <div class="container-fluid" style="max-width:380px;">
                <div class="panel panel-default" style="margin-top:96px;">
                    <div class="panel-body" style="padding:32px;">
                        <div align="center">
                            <h3 style="font-weight:bold;margin-top:0px;">
                                Reset your password
                            </h3>
                        </div>
                        <div class="paragraph" style="margin-bottom:16px;">
                            Please enter your user ID and we will send you an email with your password reset link.
                        </div>
                        <div class="form-group ${this.hasEmptyUser ? "has-error" : ""}">
                            <div class="input-group">
                                <span class="input-group-addon" id="username">
                                    <i class="fa fa-user fa-lg"></i>
                                </span>
                                <input id="user" type="text" class="form-control" placeholder="User ID" @keyup="${e => this.onKeyUp(e)}">
                            </div>
                        </div>
                        <button class="btn btn-primary btn-block" @click="${e => this.onSubmit(e)}">
                            <strong>Reset password</strong>
                        </button>
                    </div>
                </div>
                <div align="center">
                    <a @click="${() => this.redirect("#login")}" style="cursor:pointer;">Cancel</a>
                </div>
            </div>
        `;
    }

}

customElements.define("user-password-reset", UserPasswordReset);
{'fraction_non_alphanumeric': 0.13178971894568225, 'fraction_numerical': 0.0042230959662152324, 'mean_word_length': 1.3723661485319516, 'pattern_counts': {'":': 2, '<': 64, '<?xml version=': 0, '>': 74, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 2, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '361817', 'n_tokens_mistral': 1792, 'n_tokens_neox': 1690, 'n_words': 399}