Using TarButton component.

Logitar · Dec 26, 2023 · f94e306 · f94e306
1 parent 919072c
commit f94e306
Show file tree

Hide file tree

Showing 7 changed files with 16 additions and 63 deletions.
diff --git a/package.json b/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.1.0",
+    "logitar-vue3-ui": "^0.3.2",
     "nanoid": "^5.0.4",
     "pinia": "^2.1.7",
     "pinia-plugin-persistedstate": "^3.2.1",

diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
@@ -1,17 +1,7 @@
-<script setup lang="ts">
-import { parsingUtils, TarCheckbox, type CheckboxOptions } from "logitar-vue3-ui";
-
-const options: CheckboxOptions = {
-  label: "Test",
-  switch: true,
-};
-
-console.log(parsingUtils.parseBoolean("TRUE   "));
-</script>
+<script setup lang="ts"></script>
 
 <template>
   <main class="container">
     <h1>This is a home page</h1>
-    <TarCheckbox v-bind="options" />
   </main>
 </template>
diff --git a/src/views/account/RecoverPasswordView.vue b/src/views/account/RecoverPasswordView.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
-import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import { TarCheckbox } from "logitar-vue3-ui";
+import { TarButton, TarCheckbox } from "logitar-vue3-ui";
 import { ref } from "vue";
 import { useRouter } from "vue-router";
 
@@ -38,24 +37,14 @@ function onResetPassword(): void {
     <TarCheckbox class="mb-3" id="success" label="Success" switch v-model="success" />
     <div v-if="success">
       <div class="alert alert-success">Success!</div>
-      <button v-if="payload.username" type="button" class="btn btn-warning" @click="onResetPassword">
-        <FontAwesomeIcon :icon="['fas', 'key']" />
-        Reset your password
-      </button>
+      <TarButton v-if="payload.username" :icon="['fas', 'key']" text="Reset your password" variant="warning" @click="onResetPassword" />
     </div>
     <form v-else @submit.prevent="submit">
       <div class="mb-3">
         <label class="form-label" for="username">Username or Email Address <span class="text-danger">*</span></label>
         <input class="form-control" id="username" placeholder="Username or Email Address" required type="text" v-model.trim="payload.username" />
       </div>
-      <button class="btn btn-primary me-2" :disabled="loading" type="submit">
-        <span v-if="loading">
-          <span class="spinner-border spinner-border-sm" aria-hidden="true"></span>
-          <span class="visually-hidden">Loading...</span>
-        </span>
-        <FontAwesomeIcon v-else :icon="['fas', 'key']" />
-        Recover Password
-      </button>
+      <TarButton class="me-2" :disabled="loading" :icon="['fas', 'key']" :loading="loading" text="Recover Password" type="submit" />
       <RouterLink :to="{ name: 'SignIn' }">I remember my password</RouterLink>
     </form>
   </main>

diff --git a/src/views/account/RegisterView.vue b/src/views/account/RegisterView.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
-import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import { TarCheckbox } from "logitar-vue3-ui";
+import { TarButton, TarCheckbox } from "logitar-vue3-ui";
 import { ref } from "vue";
 import { useRouter } from "vue-router";
 
@@ -49,10 +48,7 @@ function onEmailAddressUpdate(e: Event): void {
     <TarCheckbox class="mb-3" id="success" label="Success" switch v-model="success" />
     <div v-if="success">
       <div class="alert alert-success">Success!</div>
-      <button v-if="payload.emailAddress" type="button" class="btn btn-warning" @click="onConfirm">
-        <FontAwesomeIcon :icon="['fas', 'user']" />
-        Confirm your account
-      </button>
+      <TarButton v-if="payload.emailAddress" :icon="['fas', 'user']" text="Confirm your account" variant="warning" @click="onConfirm" />
     </div>
     <form v-else @submit.prevent="submit">
       <div class="row">
@@ -114,14 +110,7 @@ function onEmailAddressUpdate(e: Event): void {
           </div>
         </div>
       </div>
-      <button class="btn btn-primary" :disabled="loading" type="submit">
-        <span v-if="loading">
-          <span class="spinner-border spinner-border-sm" aria-hidden="true"></span>
-          <span class="visually-hidden">Loading...</span>
-        </span>
-        <FontAwesomeIcon v-else :icon="['fas', 'user']" />
-        Register
-      </button>
+      <TarButton :disabled="loading" :icon="['fas', 'key']" :loading="loading" text="Register" type="submit" />
     </form>
   </main>
 </template>
diff --git a/src/views/account/ResetPasswordView.vue b/src/views/account/ResetPasswordView.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+import { TarButton } from "logitar-vue3-ui";
 import { onMounted, ref } from "vue";
 import { useRoute, useRouter } from "vue-router";
 
@@ -63,14 +63,7 @@ onMounted(() => (payload.value.token = route.params.token as string));
           </div>
         </div>
       </div>
-      <button class="btn btn-primary" :disabled="loading" type="submit">
-        <span v-if="loading">
-          <span class="spinner-border spinner-border-sm" aria-hidden="true"></span>
-          <span class="visually-hidden">Loading...</span>
-        </span>
-        <FontAwesomeIcon v-else :icon="['fas', 'key']" />
-        Reset Password
-      </button>
+      <TarButton :disabled="loading" :icon="['fas', 'key']" :loading="loading" text="Reset Password" type="submit" />
     </form>
   </main>
 </template>
diff --git a/src/views/account/SignInView.vue b/src/views/account/SignInView.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
-import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import { TarCheckbox } from "logitar-vue3-ui";
+import { TarButton, TarCheckbox } from "logitar-vue3-ui";
 import { ref } from "vue";
 import { useRoute, useRouter } from "vue-router";
 
@@ -55,14 +54,7 @@ async function submit(): Promise<void> {
         <input class="form-control" id="password" placeholder="Password" type="password" v-model="payload.password" />
       </div>
       <TarCheckbox class="mb-3" id="remember-be" label="Remember Me" v-model="payload.remember" />
-      <button class="btn btn-primary me-2" :disabled="loading" type="submit">
-        <span v-if="loading">
-          <span class="spinner-border spinner-border-sm" aria-hidden="true"></span>
-          <span class="visually-hidden">Loading...</span>
-        </span>
-        <FontAwesomeIcon v-else :icon="['fas', 'right-to-bracket']" />
-        Sign In
-      </button>
+      <TarButton class="me-2" :disabled="loading" :icon="['fas', 'right-to-bracket']" :loading="loading" text="Sign In" type="submit" />
       <RouterLink :to="{ name: 'RecoverPassword' }">I forgot my password</RouterLink>
     </form>
   </main>

diff --git a/yarn.lock b/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.1.0:
-  version "0.1.0"
-  resolved "https://registry.yarnpkg.com/logitar-vue3-ui/-/logitar-vue3-ui-0.1.0.tgz#fcff174f7a996cdac59f5b2b1db2f0f604a55be0"
-  integrity sha512-hMoPWz0h6gw11TERmTfGkn8vRMrWz23ca1igQG53/+LO5PEiUozoILuRYiLir0PG5Dlig1yFeGqhFdjllxLZZg==
+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==
   dependencies:
     nanoid "^5.0.4"