[SM-468] Add eslint rule for forcing type to buttons (#4576)

* Add eslint rule for forcing type to buttons * Fix eslint js errors
2025-12-15 07:43:35 +00:00 · 2023-01-31 18:39:10 +01:00
parent 8ac8cc0274
commit 4d6e333d8d
58 changed files with 1200 additions and 132 deletions
--- a/apps/browser/src/popup/vault/vault-select.component.html
+++ b/apps/browser/src/popup/vault/vault-select.component.html
@@ -1,3 +1,5 @@
+<!-- Please remove this disable statement when editing this file! -->
+<!-- eslint-disable @angular-eslint/template/button-has-type -->
 <ng-container *ngIf="loaded && organizations$ | async as organizations">
  <div class="content org-filter-content" *ngIf="loaded && shouldShow(organizations)">
    <ng-container *ngIf="selectedVault$ | async as vaultFilterDisplay">
--- a/apps/browser/src/popup/vault/view.component.html
+++ b/apps/browser/src/popup/vault/view.component.html
@@ -1,3 +1,5 @@
+<!-- Please remove this disable statement when editing this file! -->
+<!-- eslint-disable @angular-eslint/template/button-has-type -->
 <header>
  <div class="left">
    <button type="button" (click)="close()">{{ "close" | i18n }}</button>
--- a/apps/desktop/src/app/layout/account-switcher.component.html
+++ b/apps/desktop/src/app/layout/account-switcher.component.html
@@ -1,3 +1,5 @@
+<!-- Please remove this disable statement when editing this file! -->
+<!-- eslint-disable @angular-eslint/template/button-has-type -->
 <button
  class="account-switcher"
  (click)="toggle()"
--- a/apps/desktop/src/app/send/send.component.html
+++ b/apps/desktop/src/app/send/send.component.html
@@ -1,3 +1,5 @@
+<!-- Please remove this disable statement when editing this file! -->
+<!-- eslint-disable @angular-eslint/template/button-has-type -->
 <div id="sends" class="vault">
  <div class="left-nav">
    <div class="vault-filters">
--- a/apps/desktop/src/app/vault/vault-filter/filters/collection-filter.component.html
+++ b/apps/desktop/src/app/vault/vault-filter/filters/collection-filter.component.html
@@ -1,3 +1,5 @@
+<!-- Please remove this disable statement when editing this file! -->
+<!-- eslint-disable @angular-eslint/template/button-has-type -->
 <ng-container *ngIf="show">
  <div class="filter-heading">
    <h2>
--- a/apps/desktop/src/app/vault/vault-filter/filters/folder-filter.component.html
+++ b/apps/desktop/src/app/vault/vault-filter/filters/folder-filter.component.html
@@ -1,3 +1,5 @@
+<!-- Please remove this disable statement when editing this file! -->
+<!-- eslint-disable @angular-eslint/template/button-has-type -->
 <ng-container *ngIf="!hide">
  <div class="filter-heading">
    <h2>
--- a/apps/desktop/src/app/vault/vault-filter/filters/organization-filter.component.html
+++ b/apps/desktop/src/app/vault/vault-filter/filters/organization-filter.component.html
@@ -1,3 +1,5 @@
+<!-- Please remove this disable statement when editing this file! -->
+<!-- eslint-disable @angular-eslint/template/button-has-type -->
 <ng-container *ngIf="show">
  <ng-container [ngSwitch]="displayMode">
    <ng-container *ngSwitchCase="'personalOwnershipPolicy'">
--- a/apps/desktop/src/app/vault/vault-filter/filters/status-filter.component.html
+++ b/apps/desktop/src/app/vault/vault-filter/filters/status-filter.component.html
@@ -1,3 +1,5 @@
+<!-- Please remove this disable statement when editing this file! -->
+<!-- eslint-disable @angular-eslint/template/button-has-type -->
 <ng-container *ngIf="show">
  <h2 class="sr-only">{{ "filters" | i18n }}</h2>
  <ul class="filter-options">
--- a/apps/desktop/src/app/vault/vault-filter/filters/type-filter.component.html
+++ b/apps/desktop/src/app/vault/vault-filter/filters/type-filter.component.html
@@ -1,3 +1,5 @@
+<!-- Please remove this disable statement when editing this file! -->
+<!-- eslint-disable @angular-eslint/template/button-has-type -->
 <div class="filter-heading">
  <h2>
    <button
--- a/apps/desktop/src/app/vault/vault-items.component.html
+++ b/apps/desktop/src/app/vault/vault-items.component.html
@@ -1,3 +1,5 @@
+<!-- Please remove this disable statement when editing this file! -->
+<!-- eslint-disable @angular-eslint/template/button-has-type -->
 <div class="container loading-spinner" *ngIf="!loaded">
  <i class="bwi bwi-spinner bwi-spin bwi-3x" aria-hidden="true"></i>
 </div>
--- a/apps/desktop/src/app/vault/view.component.html
+++ b/apps/desktop/src/app/vault/view.component.html
@@ -1,3 +1,5 @@
+<!-- Please remove this disable statement when editing this file! -->
+<!-- eslint-disable @angular-eslint/template/button-has-type -->
 <div class="content">
  <div class="inner-content" *ngIf="cipher">
    <div class="box">
--- a/apps/web/src/app/accounts/trial-initiation/trial-initiation.component.html
+++ b/apps/web/src/app/accounts/trial-initiation/trial-initiation.component.html
@@ -1,3 +1,5 @@
+<!-- Please remove this disable statement when editing this file! -->
+<!-- eslint-disable @angular-eslint/template/button-has-type -->
 <div *ngIf="accountCreateOnly" class="">
  <h1 class="tw-mt-12 tw-text-center tw-text-xl">{{ "createAccount" | i18n }}</h1>
  <div
--- a/apps/web/src/app/accounts/trial-initiation/vertical-stepper/vertical-step-content.component.html
+++ b/apps/web/src/app/accounts/trial-initiation/vertical-stepper/vertical-step-content.component.html
@@ -1,3 +1,5 @@
+<!-- Please remove this disable statement when editing this file! -->
+<!-- eslint-disable @angular-eslint/template/button-has-type -->
 <div class="tw-m-2.5 tw-h-16 tw-text-center">
  <button
    (click)="selectStep()"
--- a/apps/web/src/app/components/user-verification-prompt.component.html
+++ b/apps/web/src/app/components/user-verification-prompt.component.html
@@ -1,3 +1,5 @@
+<!-- Please remove this disable statement when editing this file! -->
+<!-- eslint-disable @angular-eslint/template/button-has-type -->
 <div class="modal fade" role="dialog" aria-modal="true" aria-labelledby="confirmUserTitle">
  <div class="modal-dialog modal-dialog-scrollable" role="document">
    <form class="modal-content" #form (ngSubmit)="submit()">
--- a/apps/web/src/app/layouts/navbar.component.html
+++ b/apps/web/src/app/layouts/navbar.component.html
@@ -1,3 +1,5 @@
+<!-- Please remove this disable statement when editing this file! -->
+<!-- eslint-disable @angular-eslint/template/button-has-type -->
 <nav class="navbar navbar-expand navbar-dark" [ngClass]="{ 'nav-background-alt': selfHosted }">
  <div class="container">
    <a class="navbar-brand" routerLink="/" appA11yTitle="{{ 'pageTitle' | i18n: 'Bitwarden' }}">
--- a/apps/web/src/app/layouts/product-switcher/product-switcher.component.html
+++ b/apps/web/src/app/layouts/product-switcher/product-switcher.component.html
@@ -1,3 +1,5 @@
+<!-- Please remove this disable statement when editing this file! -->
+<!-- eslint-disable @angular-eslint/template/button-has-type -->
 <ng-template [ngIf]="isEnabled">
  <button
    bitIconButton="bwi bwi-fw bwi-filter"
--- a/apps/web/src/app/organizations/billing/organization-billing-history-view.component.html
+++ b/apps/web/src/app/organizations/billing/organization-billing-history-view.component.html
@@ -1,3 +1,5 @@
+<!-- Please remove this disable statement when editing this file! -->
+<!-- eslint-disable @angular-eslint/template/button-has-type -->
 <div class="d-flex page-header">
  <h1>
    {{ "billingHistory" | i18n }}
--- a/apps/web/src/app/organizations/manage/groups.component.html
+++ b/apps/web/src/app/organizations/manage/groups.component.html
@@ -1,3 +1,5 @@
+<!-- Please remove this disable statement when editing this file! -->
+<!-- eslint-disable @angular-eslint/template/button-has-type -->
 <div class="container page-content">
  <div class="tw-mb-4 tw-flex">
    <h1>{{ "groups" | i18n }}</h1>
--- a/apps/web/src/app/organizations/members/people.component.html
+++ b/apps/web/src/app/organizations/members/people.component.html
@@ -1,3 +1,5 @@
+<!-- Please remove this disable statement when editing this file! -->
+<!-- eslint-disable @angular-eslint/template/button-has-type -->
 <div class="container page-content">
  <div class="tw-mb-4 tw-flex tw-flex-col tw-space-y-4">
    <h1>{{ "members" | i18n }}</h1>
--- a/apps/web/src/app/organizations/vault/vault.component.html
+++ b/apps/web/src/app/organizations/vault/vault.component.html
@@ -1,3 +1,5 @@
+<!-- Please remove this disable statement when editing this file! -->
+<!-- eslint-disable @angular-eslint/template/button-has-type -->
 <div class="container page-content">
  <div class="row">
    <div class="col-3">
--- a/apps/web/src/app/send/add-edit.component.html
+++ b/apps/web/src/app/send/add-edit.component.html
@@ -1,3 +1,5 @@
+<!-- Please remove this disable statement when editing this file! -->
+<!-- eslint-disable @angular-eslint/template/button-has-type -->
 <div class="modal fade" role="dialog" aria-modal="true" aria-labelledby="sendAddEditTitle">
  <div class="modal-dialog modal-dialog-scrollable modal-lg" role="document">
    <form
--- a/apps/web/src/app/send/send.component.html
+++ b/apps/web/src/app/send/send.component.html
@@ -1,3 +1,5 @@
+<!-- Please remove this disable statement when editing this file! -->
+<!-- eslint-disable @angular-eslint/template/button-has-type -->
 <div class="container page-content">
  <app-callout type="warning" title="{{ 'sendDisabled' | i18n }}" *ngIf="disableSend">
    <span>{{ "sendDisabledWarning" | i18n }}</span>
--- a/apps/web/src/app/settings/account.component.html
+++ b/apps/web/src/app/settings/account.component.html
@@ -1,3 +1,5 @@
+<!-- Please remove this disable statement when editing this file! -->
+<!-- eslint-disable @angular-eslint/template/button-has-type -->
 <div class="page-header">
  <h1>{{ "myAccount" | i18n }}</h1>
 </div>
--- a/apps/web/src/app/settings/billing-history-view.component.html
+++ b/apps/web/src/app/settings/billing-history-view.component.html
@@ -1,3 +1,5 @@
+<!-- Please remove this disable statement when editing this file! -->
+<!-- eslint-disable @angular-eslint/template/button-has-type -->
 <div class="d-flex tabbed-header">
  <h1>
    {{ "billingHistory" | i18n }}
--- a/apps/web/src/app/settings/emergency-access.component.html
+++ b/apps/web/src/app/settings/emergency-access.component.html
@@ -1,3 +1,5 @@
+<!-- Please remove this disable statement when editing this file! -->
+<!-- eslint-disable @angular-eslint/template/button-has-type -->
 <div class="page-header">
  <h1>{{ "emergencyAccess" | i18n }}</h1>
 </div>
--- a/apps/web/src/app/settings/payment-method.component.html
+++ b/apps/web/src/app/settings/payment-method.component.html
@@ -1,3 +1,5 @@
+<!-- Please remove this disable statement when editing this file! -->
+<!-- eslint-disable @angular-eslint/template/button-has-type -->
 <div class="d-flex" [ngClass]="headerClass">
  <h1>
    {{ "paymentMethod" | i18n }}
--- a/apps/web/src/app/settings/security-keys.component.html
+++ b/apps/web/src/app/settings/security-keys.component.html
@@ -1,3 +1,5 @@
+<!-- Please remove this disable statement when editing this file! -->
+<!-- eslint-disable @angular-eslint/template/button-has-type -->
 <app-change-kdf *ngIf="showChangeKdf"></app-change-kdf>
 <div
  [ngClass]="{ 'tabbed-header': !showChangeKdf, 'secondary-header': showChangeKdf }"
--- a/apps/web/src/app/settings/sponsoring-org-row.component.html
+++ b/apps/web/src/app/settings/sponsoring-org-row.component.html
@@ -1,3 +1,5 @@
+<!-- Please remove this disable statement when editing this file! -->
+<!-- eslint-disable @angular-eslint/template/button-has-type -->
 <td>
  {{ sponsoringOrg.familySponsorshipFriendlyName }}
 </td>
--- a/apps/web/src/app/settings/two-factor-setup.component.html
+++ b/apps/web/src/app/settings/two-factor-setup.component.html
@@ -1,3 +1,5 @@
+<!-- Please remove this disable statement when editing this file! -->
+<!-- eslint-disable @angular-eslint/template/button-has-type -->
 <div class="tabbed-header">
  <h1 *ngIf="!organizationId">{{ "twoStepLogin" | i18n }}</h1>
  <h1 *ngIf="organizationId">{{ "twoStepLoginEnforcement" | i18n }}</h1>
--- a/apps/web/src/app/tools/password-generator-history.component.html
+++ b/apps/web/src/app/tools/password-generator-history.component.html
@@ -1,3 +1,5 @@
+<!-- Please remove this disable statement when editing this file! -->
+<!-- eslint-disable @angular-eslint/template/button-has-type -->
 <div class="modal fade" role="dialog" aria-modal="true" aria-labelledby="passHistoryTitle">
  <div class="modal-dialog modal-dialog-scrollable" role="document">
    <div class="modal-content">
--- a/apps/web/src/app/vault/organization-badge/organization-name-badge.component.html
+++ b/apps/web/src/app/vault/organization-badge/organization-name-badge.component.html
@@ -1,3 +1,5 @@
+<!-- Please remove this disable statement when editing this file! -->
+<!-- eslint-disable @angular-eslint/template/button-has-type -->
 <button
  bitBadge
  [style.color]="textColor"
--- a/apps/web/src/app/vault/vault-filter/components/organization-options.component.html
+++ b/apps/web/src/app/vault/vault-filter/components/organization-options.component.html
@@ -1,3 +1,5 @@
+<!-- Please remove this disable statement when editing this file! -->
+<!-- eslint-disable @angular-eslint/template/button-has-type -->
 <ng-container *ngIf="!loaded">
  <i
    class="bwi bwi-spinner bwi-spin text-muted tw-m-2"
--- a/apps/web/src/app/vault/vault-filter/shared/components/vault-filter-section.component.html
+++ b/apps/web/src/app/vault/vault-filter/shared/components/vault-filter-section.component.html
@@ -1,3 +1,5 @@
+<!-- Please remove this disable statement when editing this file! -->
+<!-- eslint-disable @angular-eslint/template/button-has-type -->
 <ng-container *ngIf="filters && filters.length">
  <div *ngIf="headerInfo.showHeader" class="filter-heading">
    <button
--- a/apps/web/src/app/vault/vault-items.component.html
+++ b/apps/web/src/app/vault/vault-items.component.html
@@ -1,3 +1,5 @@
+<!-- Please remove this disable statement when editing this file! -->
+<!-- eslint-disable @angular-eslint/template/button-has-type -->
 <ng-container>
  <bit-table
    *ngIf="filteredCiphers.length || filteredCollections.length"
--- a/apps/web/src/connectors/webauthn-fallback.html
+++ b/apps/web/src/connectors/webauthn-fallback.html
@@ -1,3 +1,5 @@
+<!-- Please remove this disable statement when editing this file! -->
+<!-- eslint-disable @angular-eslint/template/button-has-type -->
 <!DOCTYPE html>
 <html class="theme_light">
  <head>
--- a/apps/web/src/connectors/webauthn-mobile.html
+++ b/apps/web/src/connectors/webauthn-mobile.html
@@ -1,3 +1,5 @@
+<!-- Please remove this disable statement when editing this file! -->
+<!-- eslint-disable @angular-eslint/template/button-has-type -->
 <!DOCTYPE html>
 <html>
  <head>
--- a/apps/web/src/connectors/webauthn.html
+++ b/apps/web/src/connectors/webauthn.html
@@ -1,3 +1,5 @@
+<!-- Please remove this disable statement when editing this file! -->
+<!-- eslint-disable @angular-eslint/template/button-has-type -->
 <!DOCTYPE html>
 <html>
  <head>