@fy-/fws-vue 2.3.94 → 2.3.96

package/components/fws/UserFlow.vue

@@ -3,7 +3,7 @@ import type { KlbFlowData, KlbUserFlowField } from '@fy-/fws-types'
 import type { APIResult } from '../../composables/rest'
 import { EnvelopeIcon } from '@heroicons/vue/24/solid'
 import { useSessionStorage } from '@vueuse/core'
-import { onMounted, ref } from 'vue'
+import { computed, onMounted, ref } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { useEventBus } from '../../composables/event-bus'
 import { useRest } from '../../composables/rest'
@@ -28,6 +28,11 @@ const props = withDefaults(
     returnDefault: '/',
   },
 )
+function closeWindow() {
+  if (typeof window !== 'undefined') {
+    window.close()
+  }
+}
 function isExternalUrl(url: string) {
   return url.startsWith('http://') || url.startsWith('https://')
 }
@@ -62,6 +67,12 @@ const formData = ref<Record<string, any>>({
 })
 const completed = ref(false)
 
+const isMessageOnly = computed(() => {
+  return !!responseMessage.value
+    && responseFields.value.length > 0
+    && responseFields.value.every(f => f.cat === 'label')
+})
+
 function autocompleteValue(fieldName: string): string | undefined {
   switch (fieldName) {
     case 'username':
@@ -255,7 +266,7 @@ onMounted(async () => {
           id="login-title"
           class="text-lg font-medium text-fv-neutral-700 dark:text-fv-neutral-300"
         >
-          {{ responseMessage }}
+          {{ $t(responseMessage) }}
         </h2>
       </div>
 
@@ -378,7 +389,7 @@ onMounted(async () => {
                   "
                   :error="fieldsError[field.name]"
                   :type="field.type"
-                  :req="responseReq.includes(field.name)"
+                  :req="responseReq ? responseReq.includes(field.name) : false"
                   :autocomplete="autocompleteValue(field.name)"
                 />
               </template>
@@ -393,7 +404,7 @@ onMounted(async () => {
                 :label="field.label"
                 :error="fieldsError[field.name]"
                 :type="field.type"
-                :req="responseReq.includes(field.name)"
+                :req="responseReq ? responseReq.includes(field.name) : false"
                 :link-icon="field.link"
               />
             </template>
@@ -434,7 +445,7 @@ onMounted(async () => {
 
           <!-- Password recovery link -->
           <div
-            v-if="responseReq.includes('password') && response?.data?.user"
+            v-if="responseReq ? responseReq.includes('password') && response?.data?.user : false"
             class="text-right my-2"
           >
             <button
@@ -451,8 +462,23 @@ onMounted(async () => {
             </button>
           </div>
 
+          <!-- Close page button (message-only, e.g. magic link sent) -->
+          <button
+            v-if="isMessageOnly"
+            type="button"
+            class="w-full flex justify-center py-2.5 px-4 border border-transparent rounded-lg shadow-sm
+                   text-white bg-fv-neutral-600 hover:bg-fv-neutral-700 dark:bg-fv-neutral-700 dark:hover:bg-fv-neutral-800
+                   focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-fv-neutral-500 dark:focus:ring-fv-neutral-600
+                   dark:focus:ring-offset-fv-neutral-800 font-medium transition-all duration-200"
+            aria-label="Close"
+            @click="closeWindow()"
+          >
+            {{ $t("cta_close_page") }}
+          </button>
+
           <!-- Submit button -->
           <button
+            v-else
             type="submit"
             class="w-full flex justify-center py-2.5 px-4 border border-transparent rounded-lg shadow-sm
                    text-white bg-fv-primary-600 hover:bg-fv-primary-700 dark:bg-fv-primary-700 dark:hover:bg-fv-primary-800

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fy-/fws-vue",
-  "version": "2.3.94",
+  "version": "2.3.96",
   "author": "Florian 'Fy' Gasquez <m@fy.to>",
   "license": "MIT",
   "homepage": "https://github.com/fy-to/FWJS#readme",