[CL-11] Submit button (#2971)

* Begin implementing submit button * Add submit button * Update figma url * Add disabled when loading * Update existing submit buttons * Move template to it's own file
2025-12-18 01:03:35 +00:00 · 2022-06-29 16:27:42 +02:00
parent 4ea359a2d2
commit e105a8f222
16 changed files with 121 additions and 82 deletions
--- a/apps/web/src/app/modules/organizations/users/enroll-master-password-reset.component.html
+++ b/apps/web/src/app/modules/organizations/users/enroll-master-password-reset.component.html
@@ -32,16 +32,9 @@
        <app-user-verification [(ngModel)]="verification" name="secret"> </app-user-verification>
      </div>
      <div class="modal-footer">
-        <button bitButton buttonType="primary" type="submit" [disabled]="form.loading">
-          <i
-            class="bwi bwi-spinner bwi-spin"
-            title="{{ 'loading' | i18n }}"
-            *ngIf="form.loading"
-          ></i>
-          <span>
-            {{ "submit" | i18n }}
-          </span>
-        </button>
+        <bit-submit-button [loading]="form.loading">
+          {{ "submit" | i18n }}
+        </bit-submit-button>
        <button
          bitButton
          buttonType="secondary"
--- a/apps/web/src/app/modules/shared.module.ts
+++ b/apps/web/src/app/modules/shared.module.ts
@@ -57,7 +57,13 @@ import { InfiniteScrollModule } from "ngx-infinite-scroll";
 import { ToastrModule } from "ngx-toastr";

 import { JslibModule } from "@bitwarden/angular/jslib.module";
-import { BadgeModule, ButtonModule, CalloutModule, MenuModule } from "@bitwarden/components";
+import {
+  BadgeModule,
+  ButtonModule,
+  CalloutModule,
+  MenuModule,
+  SubmitButtonModule,
+} from "@bitwarden/components";

 registerLocaleData(localeAf, "af");
 registerLocaleData(localeAz, "az");
@@ -126,6 +132,7 @@ registerLocaleData(localeZhTw, "zh-TW");
    BadgeModule,
    ButtonModule,
    MenuModule,
+    SubmitButtonModule,
  ],
  exports: [
    CommonModule,
@@ -142,6 +149,7 @@ registerLocaleData(localeZhTw, "zh-TW");
    BadgeModule,
    ButtonModule,
    MenuModule,
+    SubmitButtonModule,
  ],
  providers: [DatePipe],
  bootstrap: [],
--- a/apps/web/src/app/organizations/settings/account.component.html
+++ b/apps/web/src/app/organizations/settings/account.component.html
@@ -66,10 +66,9 @@
      <app-avatar data="{{ org.name }}" dynamic="true" size="75" fontSize="35"></app-avatar>
    </div>
  </div>
-  <button type="submit" class="btn btn-primary btn-submit" [disabled]="form.loading">
-    <i class="bwi bwi-spinner bwi-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
-    <span>{{ "save" | i18n }}</span>
-  </button>
+  <bit-submit-button [loading]="form.loading">
+    {{ "save" | i18n }}
+  </bit-submit-button>
 </form>
 <ng-container *ngIf="canUseApi">
  <div class="secondary-header border-0 mb-0">
--- a/apps/web/src/app/reports/breach-report.component.html
+++ b/apps/web/src/app/reports/breach-report.component.html
@@ -17,10 +17,9 @@
      <small class="form-text text-muted">{{ "breachCheckUsernameEmail" | i18n }}</small>
    </div>
  </div>
-  <button bitButton buttonType="primary" class="btn-submit" type="submit" [disabled]="form.loading">
-    <i class="bwi bwi-spinner bwi-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
-    <span>{{ "checkBreaches" | i18n }}</span>
-  </button>
+  <bit-submit-button [loading]="form.loading">
+    {{ "checkBreaches" | i18n }}
+  </bit-submit-button>
 </form>
 <div class="mt-4" *ngIf="!form.loading && checkedUsername">
  <p *ngIf="error">{{ "reportError" | i18n }}...</p>
--- a/apps/web/src/app/reports/exposed-passwords-report.component.html
+++ b/apps/web/src/app/reports/exposed-passwords-report.component.html
@@ -2,17 +2,9 @@
  <h1>{{ "exposedPasswordsReport" | i18n }}</h1>
 </div>
 <p>{{ "exposedPasswordsReportDesc" | i18n }}</p>
-<button
-  bitButton
-  buttonType="primary"
-  type="button"
-  class="btn-submit"
-  [disabled]="loading"
-  (click)="load()"
->
-  <i class="bwi bwi-spinner bwi-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
-  <span>{{ "checkExposedPasswords" | i18n }}</span>
-</button>
+<bit-submit-button [loading]="loading" (click)="load()">
+  {{ "checkExposedPasswords" | i18n }}
+</bit-submit-button>
 <div class="mt-4" *ngIf="hasLoaded">
  <app-callout type="success" title="{{ 'goodNews' | i18n }}" *ngIf="!ciphers.length">
    {{ "noExposedPasswords" | i18n }}
--- a/apps/web/src/app/settings/change-kdf.component.html
+++ b/apps/web/src/app/settings/change-kdf.component.html
@@ -71,8 +71,7 @@
      </div>
    </div>
  </div>
-  <button bitButton buttonType="primary" class="btn-submit" [disabled]="form.loading">
-    <i class="bwi bwi-spinner bwi-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
-    <span>{{ "changeKdf" | i18n }}</span>
-  </button>
+  <bit-submit-button [loading]="form.loading">
+    {{ "changeKdf" | i18n }}
+  </bit-submit-button>
 </form>
--- a/apps/web/src/app/settings/change-password.component.html
+++ b/apps/web/src/app/settings/change-password.component.html
@@ -87,8 +87,7 @@
      </a>
    </div>
  </div>
-  <button bitButton buttonType="primary" class="btn-submit" [disabled]="form.loading">
-    <i class="bwi bwi-spinner bwi-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
-    <span>{{ "changeMasterPassword" | i18n }}</span>
-  </button>
+  <bit-submit-button [loading]="form.loading">
+    {{ "changeMasterPassword" | i18n }}
+  </bit-submit-button>
 </form>
--- a/apps/web/src/app/settings/emergency-access-add-edit.component.html
+++ b/apps/web/src/app/settings/emergency-access-add-edit.component.html
@@ -100,20 +100,9 @@
        </div>
      </div>
      <div class="modal-footer">
-        <button
-          bitButton
-          type="submit"
-          buttonType="primary"
-          [disabled]="loading || form.loading || readOnly"
-        >
-          <i
-            class="bwi bwi-spinner bwi-spin"
-            title="{{ 'loading' | i18n }}"
-            aria-hidden="true"
-            *ngIf="loading || form.loading"
-          ></i>
-          <span *ngIf="!loading && !form.loading">{{ "save" | i18n }}</span>
-        </button>
+        <bit-submit-button [loading]="loading || form.loading" [disabled]="readOnly">
+          {{ "save" | i18n }}
+        </bit-submit-button>
        <button bitButton buttonType="secondary" type="button" data-dismiss="modal">
          {{ "cancel" | i18n }}
        </button>
--- a/apps/web/src/app/settings/premium.component.html
+++ b/apps/web/src/app/settings/premium.component.html
@@ -68,16 +68,9 @@
        "licenseFileDesc" | i18n: "bitwarden_premium_license.json"
      }}</small>
    </div>
-    <button
-      bitButton
-      buttonType="primary"
-      type="submit"
-      class="btn-submit"
-      [disabled]="form.loading"
-    >
-      <i class="bwi bwi-spinner bwi-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
-      <span>{{ "submit" | i18n }}</span>
-    </button>
+    <bit-submit-button [loading]="form.loading">
+      {{ "submit" | i18n }}
+    </bit-submit-button>
  </form>
 </ng-container>
 <form #form (ngSubmit)="submit()" [appApiAction]="formPromise" ngNativeValidate *ngIf="!selfHosted">
@@ -125,8 +118,7 @@
    </p>
  </div>
  <small class="text-muted font-italic">{{ "paymentChargedAnnually" | i18n }}</small>
-  <button bitButton buttonType="primary" type="submit" class="btn-submit" [disabled]="form.loading">
-    <i class="bwi bwi-spinner bwi-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
-    <span>{{ "submit" | i18n }}</span>
-  </button>
+  <bit-submit-button [loading]="form.loading">
+    {{ "submit" | i18n }}
+  </bit-submit-button>
 </form>
--- a/apps/web/src/app/settings/two-factor-setup.component.html
+++ b/apps/web/src/app/settings/two-factor-setup.component.html
@@ -77,22 +77,9 @@
        </div>
        <small class="form-text text-muted">{{ "deviceVerificationDesc" | i18n }}</small>
      </div>
-      <button
-        type="submit"
-        bitButton
-        buttonType="primary"
-        class="btn-submit"
-        [disabled]="form.loading"
-        *ngIf="isDeviceVerificationSectionEnabled"
-      >
-        <i
-          class="bwi bwi-spinner bwi-spin"
-          title="{{ 'loading' | i18n }}"
-          aria-hidden="true"
-          *ngIf="form.loading"
-        ></i>
-        <span>{{ "save" | i18n }}</span>
-      </button>
+      <bit-submit-button [loading]="form.loading" *ngIf="isDeviceVerificationSectionEnabled">
+        {{ "save" | i18n }}
+      </bit-submit-button>
    </div>
  </div>
 </form>