From 9920f1a204d19e223b0e826beada58c3ac27fb5c Mon Sep 17 00:00:00 2001
From: Alex Velez <alanvele@espol.edu.ec>
Date: Mon, 19 Dec 2022 06:23:51 -0500
Subject: [PATCH] [Accounts] Use KDS Buttons

---
 .../accounts/components/MessageLayout.vue     |  5 ++-
 .../frontend/accounts/pages/Create.vue        |  9 ++++--
 .../frontend/accounts/pages/Main.vue          | 32 +++++++++----------
 .../pages/accountDeleted/AccountDeleted.vue   |  9 +-----
 .../pages/activateAccount/AccountCreated.vue  |  9 +-----
 .../activateAccount/AccountNotActivated.vue   |  9 ++++--
 .../activateAccount/ActivationExpired.vue     |  9 ++++--
 .../RequestNewActivationLink.vue              | 17 ++++++++--
 .../pages/resetPassword/ForgotPassword.vue    | 17 ++++++++--
 .../pages/resetPassword/ResetLinkExpired.vue  |  9 ++++--
 .../pages/resetPassword/ResetPassword.vue     | 17 ++++++++--
 11 files changed, 88 insertions(+), 54 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/accounts/components/MessageLayout.vue b/contentcuration/contentcuration/frontend/accounts/components/MessageLayout.vue
index 0a89c4ba5d..869ccf3a88 100644
--- a/contentcuration/contentcuration/frontend/accounts/components/MessageLayout.vue
+++ b/contentcuration/contentcuration/frontend/accounts/components/MessageLayout.vue
@@ -13,7 +13,10 @@
           <slot></slot>
           <p class="mt-4">
             <slot name="back">
-              <ActionLink :to="{ name: 'Main' }" :text="$tr('backToLogin')" />
+              <KRouterLink
+                :to="{ name: 'Main' }"
+                :text="$tr('backToLogin')"
+              />
             </slot>
           </p>
         </div>
diff --git a/contentcuration/contentcuration/frontend/accounts/pages/Create.vue b/contentcuration/contentcuration/frontend/accounts/pages/Create.vue
index 361ffce01d..e323c1dd9b 100644
--- a/contentcuration/contentcuration/frontend/accounts/pages/Create.vue
+++ b/contentcuration/contentcuration/frontend/accounts/pages/Create.vue
@@ -164,9 +164,12 @@
         <p class="mb-4">
           {{ $tr('contactMessage') }}
         </p>
-        <VBtn color="primary" large :disabled="offline" type="submit">
-          {{ $tr('finishButton') }}
-        </VBtn>
+        <KButton
+          primary
+          :disabled="offline"
+          :text="$tr('finishButton')"
+          type="submit"
+        />
       </VForm>
 
     </VLayout>
diff --git a/contentcuration/contentcuration/frontend/accounts/pages/Main.vue b/contentcuration/contentcuration/frontend/accounts/pages/Main.vue
index dc05d5204c..ffb927a472 100644
--- a/contentcuration/contentcuration/frontend/accounts/pages/Main.vue
+++ b/contentcuration/contentcuration/frontend/accounts/pages/Main.vue
@@ -58,24 +58,20 @@
                 :text="$tr('forgotPasswordLink')"
               />
             </p>
-            <VBtn
-              block
-              color="primary"
-              large
-              type="submit"
+            <KButton
+              primary
+              class="w-100"
+              :text="$tr('signInButton')"
               :disabled="offline || busy"
-            >
-              {{ $tr('signInButton') }}
-            </VBtn>
-            <VBtn
-              block
-              flat
-              color="primary"
-              class="mt-2"
+              type="submit"
+            />
+            <KRouterLink
+              primary
+              class="mt-2 w-100"
+              :text="$tr('createAccountButton')"
               :to="{ name: 'Create' }"
-            >
-              {{ $tr('createAccountButton') }}
-            </VBtn>
+              appearance="flat-button"
+            />
           </VForm>
           <VDivider />
           <p class="mt-4 text-xs-center">
@@ -226,4 +222,8 @@
     content: '•';
   }
 
+  .w-100 {
+    width: 100%;
+  }
+
 </style>
diff --git a/contentcuration/contentcuration/frontend/accounts/pages/accountDeleted/AccountDeleted.vue b/contentcuration/contentcuration/frontend/accounts/pages/accountDeleted/AccountDeleted.vue
index f881737065..325482ddfd 100644
--- a/contentcuration/contentcuration/frontend/accounts/pages/accountDeleted/AccountDeleted.vue
+++ b/contentcuration/contentcuration/frontend/accounts/pages/accountDeleted/AccountDeleted.vue
@@ -2,13 +2,7 @@
 
   <MessageLayout
     :header="$tr('accountDeletedTitle')"
-  >
-    <template #back>
-      <VBtn color="primary" :to="{ name: 'Main' }" large>
-        {{ $tr('continueToSignIn') }}
-      </VBtn>
-    </template>
-  </MessageLayout>
+  />
 
 </template>
 
@@ -24,7 +18,6 @@
     },
     $trs: {
       accountDeletedTitle: 'Account successfully deleted',
-      continueToSignIn: 'Continue to sign-in page',
     },
   };
 
diff --git a/contentcuration/contentcuration/frontend/accounts/pages/activateAccount/AccountCreated.vue b/contentcuration/contentcuration/frontend/accounts/pages/activateAccount/AccountCreated.vue
index b55bbdf418..b8edb22ee2 100644
--- a/contentcuration/contentcuration/frontend/accounts/pages/activateAccount/AccountCreated.vue
+++ b/contentcuration/contentcuration/frontend/accounts/pages/activateAccount/AccountCreated.vue
@@ -2,13 +2,7 @@
 
   <MessageLayout
     :header="$tr('accountCreatedTitle')"
-  >
-    <template #back>
-      <VBtn color="primary" :to="{ name: 'Main' }" large>
-        {{ $tr('continueToSignIn') }}
-      </VBtn>
-    </template>
-  </MessageLayout>
+  />
 
 </template>
 
@@ -24,7 +18,6 @@
     },
     $trs: {
       accountCreatedTitle: 'Account successfully created',
-      continueToSignIn: 'Continue to sign-in',
     },
   };
 
diff --git a/contentcuration/contentcuration/frontend/accounts/pages/activateAccount/AccountNotActivated.vue b/contentcuration/contentcuration/frontend/accounts/pages/activateAccount/AccountNotActivated.vue
index a0db43bca2..ccbec003d1 100644
--- a/contentcuration/contentcuration/frontend/accounts/pages/activateAccount/AccountNotActivated.vue
+++ b/contentcuration/contentcuration/frontend/accounts/pages/activateAccount/AccountNotActivated.vue
@@ -4,9 +4,12 @@
     :header="$tr('title')"
     :text="$tr('text')"
   >
-    <VBtn color="primary" large :to="{ name: 'RequestNewActivationLink' }">
-      {{ $tr('requestNewLink') }}
-    </VBtn>
+    <KRouterLink
+      primary
+      :text="$tr('requestNewLink')"
+      :to="{ name: 'RequestNewActivationLink' }"
+      appearance="raised-button"
+    />
   </MessageLayout>
 
 </template>
diff --git a/contentcuration/contentcuration/frontend/accounts/pages/activateAccount/ActivationExpired.vue b/contentcuration/contentcuration/frontend/accounts/pages/activateAccount/ActivationExpired.vue
index cdf2db7a43..9dd1dad18c 100644
--- a/contentcuration/contentcuration/frontend/accounts/pages/activateAccount/ActivationExpired.vue
+++ b/contentcuration/contentcuration/frontend/accounts/pages/activateAccount/ActivationExpired.vue
@@ -4,9 +4,12 @@
     :header="$tr('activationExpiredTitle')"
     :text="$tr('activationExpiredText')"
   >
-    <VBtn color="primary" large :to="{ name: 'RequestNewActivationLink' }" class="mb-4">
-      {{ $tr('requestNewLink') }}
-    </VBtn>
+    <KRouterLink
+      primary
+      :text="$tr('requestNewLink')"
+      :to="{ name: 'RequestNewActivationLink' }"
+      appearance="raised-button"
+    />
   </MessageLayout>
 
 </template>
diff --git a/contentcuration/contentcuration/frontend/accounts/pages/activateAccount/RequestNewActivationLink.vue b/contentcuration/contentcuration/frontend/accounts/pages/activateAccount/RequestNewActivationLink.vue
index df889b3ecb..afb06cdaca 100644
--- a/contentcuration/contentcuration/frontend/accounts/pages/activateAccount/RequestNewActivationLink.vue
+++ b/contentcuration/contentcuration/frontend/accounts/pages/activateAccount/RequestNewActivationLink.vue
@@ -11,9 +11,12 @@
     >
       <Banner :text="$tr('activationRequestFailed')" :value="error" error class="mb-4" />
       <EmailField v-model="email" autofocus />
-      <VBtn color="primary" large type="submit" block>
-        {{ $tr('submitButton') }}
-      </VBtn>
+      <KButton
+        primary
+        class="w-100"
+        :text="$tr('submitButton')"
+        type="submit"
+      />
     </VForm>
   </MessageLayout>
 
@@ -64,3 +67,11 @@
   };
 
 </script>
+
+<style lang="less" scoped>
+
+  .w-100 {
+    width: 100%;
+  }
+
+</style>
\ No newline at end of file
diff --git a/contentcuration/contentcuration/frontend/accounts/pages/resetPassword/ForgotPassword.vue b/contentcuration/contentcuration/frontend/accounts/pages/resetPassword/ForgotPassword.vue
index 13910a9bad..7349cf97ff 100644
--- a/contentcuration/contentcuration/frontend/accounts/pages/resetPassword/ForgotPassword.vue
+++ b/contentcuration/contentcuration/frontend/accounts/pages/resetPassword/ForgotPassword.vue
@@ -7,9 +7,12 @@
     <VForm ref="form" lazy-validation @submit.prevent="submit">
       <Banner :text="$tr('forgotPasswordFailed')" :value="error" error class="mb-4" />
       <EmailField v-model="email" autofocus />
-      <VBtn block color="primary" large type="submit">
-        {{ $tr('submitButton') }}
-      </VBtn>
+      <KButton
+        primary
+        class="w-100"
+        :text="$tr('submitButton')"
+        type="submit"
+      />
     </VForm>
   </MessageLayout>
 
@@ -65,3 +68,11 @@
   };
 
 </script>
+
+<style lang="less" scoped>
+
+  .w-100 {
+    width: 100%;
+  }
+
+</style>
\ No newline at end of file
diff --git a/contentcuration/contentcuration/frontend/accounts/pages/resetPassword/ResetLinkExpired.vue b/contentcuration/contentcuration/frontend/accounts/pages/resetPassword/ResetLinkExpired.vue
index 4f0c8fc057..0249fd9fda 100644
--- a/contentcuration/contentcuration/frontend/accounts/pages/resetPassword/ResetLinkExpired.vue
+++ b/contentcuration/contentcuration/frontend/accounts/pages/resetPassword/ResetLinkExpired.vue
@@ -4,9 +4,12 @@
     :header="$tr('resetExpiredTitle')"
     :text="$tr('resetExpiredText')"
   >
-    <VBtn color="primary" large :to="{ name: 'ForgotPassword' }" class="mb-4">
-      {{ $tr('requestNewLink') }}
-    </VBtn>
+    <KRouterLink
+      primary
+      :text="$tr('requestNewLink')"
+      :to="{ name: 'ForgotPassword' }"
+      appearance="raised-button"
+    />
   </MessageLayout>
 
 </template>
diff --git a/contentcuration/contentcuration/frontend/accounts/pages/resetPassword/ResetPassword.vue b/contentcuration/contentcuration/frontend/accounts/pages/resetPassword/ResetPassword.vue
index b3866f5ccd..ae43d92fbc 100644
--- a/contentcuration/contentcuration/frontend/accounts/pages/resetPassword/ResetPassword.vue
+++ b/contentcuration/contentcuration/frontend/accounts/pages/resetPassword/ResetPassword.vue
@@ -16,9 +16,12 @@
         :label="$tr('passwordConfirmLabel')"
         :additionalRules="passwordConfirmRules"
       />
-      <VBtn block color="primary" large type="submit">
-        {{ $tr('submitButton') }}
-      </VBtn>
+      <KButton
+        primary
+        class="w-100"
+        :text="$tr('submitButton')"
+        type="submit"
+      />
     </VForm>
   </MessageLayout>
 
@@ -84,3 +87,11 @@
   };
 
 </script>
+
+<style lang="less" scoped>
+
+  .w-100 {
+    width: 100%;
+  }
+
+</style>
\ No newline at end of file