chrome/browser/resources/settings/autofill_page/passkey_edit_dialog.ts

// Copyright 2022 The Chromium Authors
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.

/**
 * @fileoverview 'passkey-edit-dialog' is the dialog that allows showing or
 * editing a passkey.
 */

import 'chrome://resources/cr_elements/cr_button/cr_button.js';
import 'chrome://resources/cr_elements/cr_dialog/cr_dialog.js';
import 'chrome://resources/cr_elements/cr_icon_button/cr_icon_button.js';
import 'chrome://resources/cr_elements/cr_input/cr_input.js';
import 'chrome://resources/cr_elements/cr_icons.css.js';
import 'chrome://resources/cr_elements/cr_shared_vars.css.js';
import '../icons.html.js';
import '../settings_shared.css.js';
import '../settings_vars.css.js';
import './passwords_shared.css.js';

import {CrDialogElement} from 'chrome://resources/cr_elements/cr_dialog/cr_dialog.js';
import {I18nMixin} from 'chrome://resources/cr_elements/i18n_mixin.js';
import {PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';

import {getTemplate} from './passkey_edit_dialog.html.js';

export interface PasskeyEditDialogElement {
  $: {
    dialog: CrDialogElement,
  };
}

const PasskeyEditDialogElementBase = I18nMixin(PolymerElement);

export type SavedPasskeyEditedEvent = CustomEvent<string>;

declare global {
  interface HTMLElementEventMap {
    'saved-passkey-edited': SavedPasskeyEditedEvent;
  }
}

export class PasskeyEditDialogElement extends PasskeyEditDialogElementBase {
  static get is() {
    return 'passkey-edit-dialog';
  }

  static get template() {
    return getTemplate();
  }

  static get properties() {
    return {
      username: String,
      relyingPartyId: String,
      usernameInputErrorMessage_: String,
      dialogFootnote_: String,
      usernameInputInvalid_: {
        type: Boolean,
        computed: 'computeUsernameInputInvalid_(username)',
      },
    };
  }

  username: string;
  relyingPartyId: string;
  private usernameInputInvalid_: boolean;
  private usernameInputErrorMessage_: string|null;
  private dialogFootnote_: string|null;

  override ready() {
    super.ready();
    this.dialogFootnote_ =
        this.i18n('passkeyEditDialogFootnote', this.relyingPartyId);
  }

  private onSaveButtonClick_() {
    this.dispatchEvent(new CustomEvent('saved-passkey-edited', {
      bubbles: true,
      composed: true,
      detail: this.username,
    }));
    this.close();
  }

  private computeUsernameInputInvalid_(): boolean {
    if (this.username.length === 0) {
      this.usernameInputErrorMessage_ = this.i18n('passkeyLengthError');
      return true;
    }
    return false;
  }

  private onCancel_() {
    this.$.dialog.cancel();
  }

  close() {
    this.$.dialog.close();
  }
}

declare global {
  interface HTMLElementTagNameMap {
    'passkey-edit-dialog': PasskeyEditDialogElement;
  }
}

customElements.define(PasskeyEditDialogElement.is, PasskeyEditDialogElement);