update login-error prompt (#2586)

okTurtles · Feb 7, 2025 · a64f8e0 · a64f8e0
1 parent a7d8df0
commit a64f8e0
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 15 deletions.
diff --git a/frontend/controller/app/identity.js b/frontend/controller/app/identity.js
@@ -432,12 +432,14 @@ export default (sbp('sbp/selectors/register', {
             question: wipeOut
               ? L('The server\'s history for your identity contract has diverged from ours. This can happen in extremely rare circumstances due to either malicious activity or a bug. {br_}To fix this, the contract needs to be resynced, and some recent events may be missing. {br_}Would you like to log out and resync data on your next login? {br_}Error details: {err}.', { err: errMessage, ...LTags() })
               : L('Do you want to log out? {br_}Error details: {err}.', { err: errMessage, ...LTags() }),
-            primaryButton: L('No'),
-            secondaryButton: L('Yes')
+            primaryButton: L('Yes'),
+            secondaryButton: L('No'),
+            primaryButtonStyle: 'primary', // make primary button 'filled' style
+            isContentCentered: !wipeOut
           }
 
           const result = await sbp('gi.ui/prompt', promptOptions)
-          if (!result) {
+          if (result) {
             sbp('gi.ui/clearBanner')
             return sbp('gi.app/identity/_private/logout', state, wipeOut)
           } else {

diff --git a/frontend/views/components/modal/Modal.vue b/frontend/views/components/modal/Modal.vue
@@ -58,13 +58,19 @@ export default ({
           if (this.content) this.replaceModal(toModal, omit(to.query, 'modal')) // if another modal is already open, replace it.
           else this.content = toModal
         }
-        const subcontent = to.query.subcontent ? to.query.subcontent.split('+').pop() : []
-        if (subcontent !== this.activeSubContent) {
-          // Try to find the new subcontent in the list of subcontent
-          const i = this.subcontent.indexOf(subcontent)
-          if (i !== -1) {
-            this.subcontent = this.subcontent.slice(0, i)
-          } else this.subcontent = subcontent
+
+        // Sometimes, the query string for modal has both 'modal' and 'subcontent' eg.) '/app/?modal=SignupModal&subcontent=Prompt'
+        if (to.query.subcontent) {
+          const subContentTo = to.query.subcontent.split('+').pop()
+          if (subContentTo !== this.activeSubContent) {
+            // Try to find the target subcontent in the list of subcontent
+            const i = this.subcontent.indexOf(subContentTo)
+            if (i !== -1) {
+              this.subcontent = this.subcontent.slice(0, i)
+            } else {
+              this.subcontent = [subContentTo]
+            }
+          }
         }
       } else {
         // Prevent a bug where we click to close a modal at the same time we

diff --git a/frontend/views/components/modal/Prompt.vue b/frontend/views/components/modal/Prompt.vue
@@ -8,7 +8,7 @@ modal-template(ref='modal' class='is-prompt' :a11yTitle='$attrs.heading' :modalF
       @submit.prevent=''
       novalidate='true'
     )
-      fieldset.field
+      fieldset.field.c-prompt-content(:class='{ "is-text-center": isContentCentered }')
         legend.label(v-safe-html:a='$attrs.question')
 
       .buttons
@@ -18,8 +18,9 @@ modal-template(ref='modal' class='is-prompt' :a11yTitle='$attrs.heading' :modalF
           @click='closeModal'
         ) {{ $attrs.secondaryButton || L('No')}}
 
-        button-submit.is-outlined(
+        button-submit(
           v-if='$attrs.primaryButton'
+          :class='"is-" + primaryButtonStyle'
           @click='submit'
           data-test='submitPrompt'
         ) {{ $attrs.primaryButton || L('Yes')}}
@@ -39,6 +40,16 @@ export default ({
     ButtonSubmit,
     L
   },
+  props: {
+    primaryButtonStyle: {
+      type: String,
+      default: 'outlined'
+    },
+    isContentCentered: {
+      type: Boolean,
+      default: true
+    }
+  },
   mounted () {
     if (Object.keys(this.$attrs).length === 0) this.closeModal()
   },
@@ -60,7 +71,6 @@ export default ({
 
 .c-container {
   width: 100%;
-  text-align: center;
 
   .buttons {
     justify-content: center;
@@ -70,8 +80,16 @@ export default ({
     }
   }
 
-  fieldset.field > legend.label {
-    margin: 0 auto 0.5rem auto;
+  .c-prompt-content {
+    position: relative;
+
+    &.is-text-center {
+      text-align: center;
+    }
+
+    legend.label {
+      margin: 0 auto 0.5rem auto;
+    }
   }
 }