Using TarAlert component.

package.json

@@ -22,7 +22,7 @@
     "@fortawesome/vue-fontawesome": "^3.0.5",
     "@popperjs/core": "^2.11.8",
     "bootstrap": "^5.3.2",
-    "logitar-vue3-ui": "^0.3.2",
+    "logitar-vue3-ui": "^0.4.0",
     "nanoid": "^5.0.4",
     "pinia": "^2.1.7",
     "pinia-plugin-persistedstate": "^3.2.1",

src/views/account/RecoverPasswordView.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { TarButton, TarCheckbox } from "logitar-vue3-ui";
+import { TarAlert, TarButton, TarCheckbox } from "logitar-vue3-ui";
 import { ref } from "vue";
 import { useRouter } from "vue-router";
 
@@ -36,7 +36,7 @@ function onResetPassword(): void {
     <h1>Recover Password</h1>
     <TarCheckbox class="mb-3" id="success" label="Success" switch v-model="success" />
     <div v-if="success">
-      <div class="alert alert-success">Success!</div>
+      <TarAlert show variant="success">Success!</TarAlert>
       <TarButton v-if="payload.username" :icon="['fas', 'key']" text="Reset your password" variant="warning" @click="onResetPassword" />
     </div>
     <form v-else @submit.prevent="submit">

src/views/account/RegisterView.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { TarButton, TarCheckbox } from "logitar-vue3-ui";
+import { TarAlert, TarButton, TarCheckbox } from "logitar-vue3-ui";
 import { ref } from "vue";
 import { useRouter } from "vue-router";
 
@@ -47,7 +47,7 @@ function onEmailAddressUpdate(e: Event): void {
     <h1>Register</h1>
     <TarCheckbox class="mb-3" id="success" label="Success" switch v-model="success" />
     <div v-if="success">
-      <div class="alert alert-success">Success!</div>
+      <TarAlert show variant="success">Success!</TarAlert>
       <TarButton v-if="payload.emailAddress" :icon="['fas', 'user']" text="Confirm your account" variant="warning" @click="onConfirm" />
     </div>
     <form v-else @submit.prevent="submit">

src/views/account/SignInView.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { TarButton, TarCheckbox } from "logitar-vue3-ui";
+import { TarAlert, TarButton, TarCheckbox } from "logitar-vue3-ui";
 import { ref } from "vue";
 import { useRoute, useRouter } from "vue-router";
 
@@ -43,7 +43,7 @@ async function submit(): Promise<void> {
 <template>
   <main class="container">
     <h1>Sign In</h1>
-    <div v-if="invalidCredentials" class="alert alert-warning">Invalid Credentials!</div>
+    <TarAlert v-if="invalidCredentials" show variant="warning">Invalid Credentials!</TarAlert>
     <form @submit.prevent="submit">
       <div class="mb-3">
         <label class="form-label" for="username">Username or Email Address <span class="text-danger">*</span></label>

yarn.lock

@@ -2256,10 +2256,10 @@ lodash@^4.17.21:
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
   integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
 
-logitar-vue3-ui@^0.3.2:
-  version "0.3.2"
-  resolved "https://registry.yarnpkg.com/logitar-vue3-ui/-/logitar-vue3-ui-0.3.2.tgz#4b07a75b44dd926b9d0049821bd434741e699c40"
-  integrity sha512-5dFZRhdtqYidSJaRmlQqUFl78inSTFkoES9UkNoTcaxAUPgxW1C9yZvziDn60EVWUePzWgAXH1SfEeeH6YMxMg==
+logitar-vue3-ui@^0.4.0:
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/logitar-vue3-ui/-/logitar-vue3-ui-0.4.0.tgz#2f941caadf39053bf9491c6008ac69eb20d31cfa"
+  integrity sha512-ETXPmWThbzi/sckmiO6Gvsbul9nSQKmWPJzWshGW3QnHYuOh+gBjPaJDdalRt7n5IjAsNI7an9+Mt8QtXjlJDw==
   dependencies:
     nanoid "^5.0.4"