From 77e274caf8ab07d4fa8b047b4dc083533620d9f7 Mon Sep 17 00:00:00 2001
From: David Ma <davidma415@gmail.com>
Date: Mon, 15 Apr 2024 08:15:14 -0600
Subject: [PATCH 1/5] fix: backwards compatibility for kalert

---
 src/components/ForgotPasswordForm.vue | 1 +
 src/components/LoginForm.vue          | 3 +++
 2 files changed, 4 insertions(+)

diff --git a/src/components/ForgotPasswordForm.vue b/src/components/ForgotPasswordForm.vue
index 5a45931de..bb3942ed2 100644
--- a/src/components/ForgotPasswordForm.vue
+++ b/src/components/ForgotPasswordForm.vue
@@ -5,6 +5,7 @@
     </div>
     <div v-else-if="currentState.matches('success')">
       <KAlert
+        :alert-message="successText"
         appearance="info"
         class="form-error"
         data-testid="kong-auth-forgot-password-success-message"
diff --git a/src/components/LoginForm.vue b/src/components/LoginForm.vue
index c4f0927ae..6e27d1ee8 100644
--- a/src/components/LoginForm.vue
+++ b/src/components/LoginForm.vue
@@ -43,6 +43,7 @@
 
       <div v-else-if="currentState.matches('reset_password')" class="form-error">
         <KAlert
+          :alert-message="messages.login.passwordResetSuccess"
           appearance="success"
           class="justify-content-center"
           data-testid="kong-auth-login-password-reset-message"
@@ -52,6 +53,7 @@
 
       <div v-else-if="currentState.matches('confirmed_email')" class="form-error">
         <KAlert
+          :alert-message="messages.login.confirmedEmailSuccess"
           appearance="success"
           class="justify-content-center"
           data-testid="kong-auth-login-confirmed-email-message"
@@ -61,6 +63,7 @@
 
       <div v-else-if="currentState.matches('from_register')" class="form-error">
         <KAlert
+          :alert-message="registerSuccessText"
           appearance="success"
           class="justify-content-center"
           data-testid="kong-auth-login-register-success-message"

From 0bd72a4993407d37cd1c48b8aa351f0bb80eb988 Mon Sep 17 00:00:00 2001
From: David Ma <davidma415@gmail.com>
Date: Mon, 15 Apr 2024 08:40:32 -0600
Subject: [PATCH 2/5] chore: add logic to error message

---
 src/components/ErrorMessage.vue | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/src/components/ErrorMessage.vue b/src/components/ErrorMessage.vue
index 98d1fe1a5..e1551bb2b 100644
--- a/src/components/ErrorMessage.vue
+++ b/src/components/ErrorMessage.vue
@@ -11,6 +11,13 @@
       </ul>
     </template>
     <template v-else #default>{{ errorMessage }}</template>
+    <template v-if="passwordRequirements.length" #alertMessage>
+      <p>{{ capitalizeFirstChar(errorMessage) }}:</p>
+      <ul>
+        <li v-for="(error, idx) in passwordRequirements" :key="idx">{{ capitalizeFirstChar(error) }}</li>
+      </ul>
+    </template>
+    <template v-else #alertMessage>{{ errorMessage }}</template>
   </KAlert>
 </template>
 

From 9af0374035734075d35550756e55baf5d91278df Mon Sep 17 00:00:00 2001
From: David Ma <davidma415@gmail.com>
Date: Mon, 15 Apr 2024 09:05:01 -0600
Subject: [PATCH 3/5] chore: refactor

---
 src/components/ErrorMessage.vue | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/ErrorMessage.vue b/src/components/ErrorMessage.vue
index e1551bb2b..ba8c18c17 100644
--- a/src/components/ErrorMessage.vue
+++ b/src/components/ErrorMessage.vue
@@ -4,20 +4,20 @@
     class="kong-auth-error-message error-message"
     data-testid="kong-auth-error-message"
   >
-    <template v-if="passwordRequirements.length" #default>
+    <template v-if="passwordRequirements.length" #alertMessage>
       <p>{{ capitalizeFirstChar(errorMessage) }}:</p>
       <ul>
         <li v-for="(error, idx) in passwordRequirements" :key="idx">{{ capitalizeFirstChar(error) }}</li>
       </ul>
     </template>
-    <template v-else #default>{{ errorMessage }}</template>
-    <template v-if="passwordRequirements.length" #alertMessage>
+    <template v-else #alertMessage>{{ errorMessage }}</template>
+    <template v-if="passwordRequirements.length" #default>
       <p>{{ capitalizeFirstChar(errorMessage) }}:</p>
       <ul>
         <li v-for="(error, idx) in passwordRequirements" :key="idx">{{ capitalizeFirstChar(error) }}</li>
       </ul>
     </template>
-    <template v-else #alertMessage>{{ errorMessage }}</template>
+    <template v-else #default>{{ errorMessage }}</template>
   </KAlert>
 </template>
 

From 2815725028c87356308630508c760ef8a7fcc436 Mon Sep 17 00:00:00 2001
From: David Ma <davidma415@gmail.com>
Date: Mon, 15 Apr 2024 09:29:45 -0600
Subject: [PATCH 4/5] chore: remove list

---
 src/components/ErrorMessage.vue | 8 +-------
 1 file changed, 1 insertion(+), 7 deletions(-)

diff --git a/src/components/ErrorMessage.vue b/src/components/ErrorMessage.vue
index ba8c18c17..1342b77be 100644
--- a/src/components/ErrorMessage.vue
+++ b/src/components/ErrorMessage.vue
@@ -1,16 +1,10 @@
 <template>
   <KAlert
+    :alert-message="errorMessage"
     appearance="danger"
     class="kong-auth-error-message error-message"
     data-testid="kong-auth-error-message"
   >
-    <template v-if="passwordRequirements.length" #alertMessage>
-      <p>{{ capitalizeFirstChar(errorMessage) }}:</p>
-      <ul>
-        <li v-for="(error, idx) in passwordRequirements" :key="idx">{{ capitalizeFirstChar(error) }}</li>
-      </ul>
-    </template>
-    <template v-else #alertMessage>{{ errorMessage }}</template>
     <template v-if="passwordRequirements.length" #default>
       <p>{{ capitalizeFirstChar(errorMessage) }}:</p>
       <ul>

From 1e933bb3dbaaf9632f737af9eda299207ac17fe2 Mon Sep 17 00:00:00 2001
From: David Ma <davidma415@gmail.com>
Date: Mon, 15 Apr 2024 10:02:16 -0600
Subject: [PATCH 5/5] chore: add comment

---
 src/components/ErrorMessage.vue       | 1 +
 src/components/ForgotPasswordForm.vue | 1 +
 src/components/LoginForm.vue          | 3 +++
 3 files changed, 5 insertions(+)

diff --git a/src/components/ErrorMessage.vue b/src/components/ErrorMessage.vue
index 1342b77be..c1ede88a0 100644
--- a/src/components/ErrorMessage.vue
+++ b/src/components/ErrorMessage.vue
@@ -1,4 +1,5 @@
 <template>
+  <!-- NOTE: alert-message is added for backwards compatibility of host apps that arent using kongponents alpha -->
   <KAlert
     :alert-message="errorMessage"
     appearance="danger"
diff --git a/src/components/ForgotPasswordForm.vue b/src/components/ForgotPasswordForm.vue
index bb3942ed2..64ffc52f2 100644
--- a/src/components/ForgotPasswordForm.vue
+++ b/src/components/ForgotPasswordForm.vue
@@ -4,6 +4,7 @@
       <ErrorMessage :error="error" />
     </div>
     <div v-else-if="currentState.matches('success')">
+      <!-- NOTE: alert-message is added for backwards compatibility of host apps that arent using kongponents alpha -->
       <KAlert
         :alert-message="successText"
         appearance="info"
diff --git a/src/components/LoginForm.vue b/src/components/LoginForm.vue
index 6e27d1ee8..df0352c7d 100644
--- a/src/components/LoginForm.vue
+++ b/src/components/LoginForm.vue
@@ -42,6 +42,7 @@
       </div>
 
       <div v-else-if="currentState.matches('reset_password')" class="form-error">
+        <!-- NOTE: alert-message is added for backwards compatibility of host apps that arent using kongponents alpha -->
         <KAlert
           :alert-message="messages.login.passwordResetSuccess"
           appearance="success"
@@ -52,6 +53,7 @@
       </div>
 
       <div v-else-if="currentState.matches('confirmed_email')" class="form-error">
+        <!-- NOTE: alert-message is added for backwards compatibility of host apps that arent using kongponents alpha -->
         <KAlert
           :alert-message="messages.login.confirmedEmailSuccess"
           appearance="success"
@@ -62,6 +64,7 @@
       </div>
 
       <div v-else-if="currentState.matches('from_register')" class="form-error">
+        <!-- NOTE: alert-message is added for backwards compatibility of host apps that arent using kongponents alpha -->
         <KAlert
           :alert-message="registerSuccessText"
           appearance="success"