[EC-694] Verify Email - Replace Bootstrap with Tailwind (#4211)

* [EC-694] Replace Boostrap with Tailwind

* [EC-694] Simplify tailwind classes

* [EC-694] Update bitAction handler method to remove Promise wrapper

* [EC-694] Coerce bitButton block boolean

* [EC-694] Remove unnecessary try/catch and logging

* [EC-694] Coersce block boolean

* [EC-694] Update boolean coercion

* [EC-694] Apply default value for block boolean and simplify attr class conditional

* [EC-694] Fix block class application / test

apps/web/src/app/settings/verify-email.component.html

@@ -1,21 +1,11 @@
-<div class="card border-warning">
-  <div class="card-header bg-warning text-white">
+<div class="tw-rounded tw-border tw-border-solid tw-border-warning-500 tw-bg-background">
+  <div class="tw-bg-warning-500 tw-px-5 tw-py-2.5 tw-font-bold tw-uppercase tw-text-contrast">
     <i class="bwi bwi-envelope bwi-fw" aria-hidden="true"></i> {{ "verifyEmail" | i18n }}
   </div>
-  <div class="card-body">
+  <div class="tw-p-5">
     <p>{{ "verifyEmailDesc" | i18n }}</p>
-    <button
-      type="button"
-      class="btn btn-block btn-outline-secondary btn-submit"
-      #sendBtn
-      [appApiAction]="actionPromise"
-      [disabled]="$any(sendBtn).loading"
-      (click)="send()"
-    >
-      <i class="bwi bwi-spin bwi-spinner" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
-      <span>
+    <button id="sendBtn" bitButton type="button" block [bitAction]="send">
       {{ "sendEmail" | i18n }}
-      </span>
     </button>
   </div>
 </div>

apps/web/src/app/settings/verify-email.component.ts

@@ -39,17 +39,7 @@ export class VerifyEmailComponent {
     );
   }
 
-  async send() {
-    if (this.actionPromise != null) {
-      return;
-    }
-
-    try {
-      this.actionPromise = this.verifyEmail();
-      await this.actionPromise;
-    } catch (e) {
-      this.logService.error(e);
-    }
-    this.actionPromise = null;
-  }
+  send = async () => {
+    await this.verifyEmail();
+  };
 }

libs/components/src/button/button.component.ts

@@ -1,3 +1,4 @@
+import { coerceBooleanProperty } from "@angular/cdk/coercion";
 import { Input, HostBinding, Component } from "@angular/core";
 
 import { ButtonLikeAbstraction, ButtonType } from "../shared/button-like.abstraction";
@@ -68,9 +69,7 @@ export class ButtonComponent implements ButtonLikeAbstraction {
       "hover:tw-no-underline",
       "focus:tw-outline-none",
     ]
-      .concat(
-        this.block == null || this.block === false ? ["tw-inline-block"] : ["tw-w-full", "tw-block"]
-      )
+      .concat(this.block ? ["tw-w-full", "tw-block"] : ["tw-inline-block"])
       .concat(buttonStyles[this.buttonType ?? "secondary"]);
   }
 
@@ -81,7 +80,17 @@ export class ButtonComponent implements ButtonLikeAbstraction {
   }
 
   @Input() buttonType: ButtonType;
-  @Input() block?: boolean;
+
+  private _block = false;
+
+  @Input()
+  get block(): boolean {
+    return this._block;
+  }
+
+  set block(value: boolean | "") {
+    this._block = coerceBooleanProperty(value);
+  }
 
   @Input() loading = false;