import { html, nothing } from 'lit';
import { live } from 'lit/directives/live.js';
import { Authorization } from './Authorization.js';
import '../../../md/text-field/ui-filled-text-field.js';
export default class NtlmAuthorization extends Authorization {
    checkValidity() {
        const { authorization } = this;
        if (!authorization) {
            return true;
        }
        const config = authorization.config;
        return !!config && !!config.username;
    }
    handleUsername(e) {
        const { authorization } = this;
        if (!authorization) {
            return;
        }
        const input = e.target;
        const { value } = input;
        if (!authorization.config) {
            authorization.config = {};
        }
        ;
        authorization.config.username = value;
        this.notifyChange();
    }
    handlePassword(e) {
        const { authorization } = this;
        if (!authorization) {
            return;
        }
        const input = e.target;
        const { value } = input;
        if (!authorization.config) {
            authorization.config = {};
        }
        ;
        authorization.config.password = value;
        this.notifyChange();
    }
    handleDomain(e) {
        const { authorization } = this;
        if (!authorization) {
            return;
        }
        const input = e.target;
        const { value } = input;
        if (!authorization.config) {
            authorization.config = {};
        }
        ;
        authorization.config.domain = value;
        this.notifyChange();
    }
    render() {
        return html ` ${this.renderHeader()} ${this.renderEditor()} `;
    }
    renderEditor() {
        const { authorization } = this;
        if (!authorization) {
            return nothing;
        }
        const config = authorization.config || {};
        return html `
      <form autocomplete="on" class="auth-form basic-auth">
        ${this.renderUsername(config)} ${this.renderPassword(config)} ${this.renderDomain(config)}
      </form>
      ${this.renderAuthInfo()}
    `;
    }
    renderUsername(config) {
        return html `
      <div class="full-input">
        <ui-filled-text-field
          label="Username"
          name="username"
          .value="${live(config.username || '')}"
          required
          invalidText="Username is required"
          ?disabled="${this.disabled}"
          ?readOnly="${this.readOnly}"
          @change="${this.handleUsername}"
        ></ui-filled-text-field>
      </div>
    `;
    }
    renderPassword(config) {
        return html `
      <div class="full-input">
        <ui-filled-text-field
          label="Password"
          name="password"
          type="password"
          .value="${live(config.password || '')}"
          ?disabled="${this.disabled}"
          ?readOnly="${this.readOnly}"
          @change="${this.handlePassword}"
        ></ui-filled-text-field>
      </div>
    `;
    }
    renderDomain(config) {
        return html `
      <div class="full-input">
        <ui-filled-text-field
          label="NT Domain"
          name="domain"
          .value="${live(config.domain || '')}"
          ?disabled="${this.disabled}"
          ?readOnly="${this.readOnly}"
          @change="${this.handleDomain}"
        ></ui-filled-text-field>
      </div>
    `;
    }
}
//# sourceMappingURL=NtlmAuthorization.js.map