feat(home+auth): promote external-link safety + org-setup error UX from trawl (#4237)

T8: add buttonTarget/buttonRel computed props to home.content.component.vue
— auto-applies target=_blank + rel=noopener noreferrer for external links
T9: add user-visible error alert to organizationSetup.component.vue
— replaces console.error with v-alert on createOrganization failure

Closes #4236. Partially closes pierreb-projects/infra#38 (T8+T9).

Author: PierreBrisorgueil

src/modules/auth/components/organizationSetup.component.vue

@@ -54,6 +54,19 @@
           </v-divider>
         </template>
 
+        <!-- Error alert -->
+        <v-alert
+          v-if="error"
+          type="error"
+          variant="tonal"
+          class="mb-4"
+          :class="config.vuetify.theme.rounded"
+          closable
+          @click:close="error = null"
+        >
+          {{ error }}
+        </v-alert>
+
         <!-- Create organization form -->
         <v-form ref="form" v-model="valid">
           <v-text-field
@@ -121,6 +134,7 @@ export default {
       loading: false,
       requestLoading: false,
       requestSent: false,
+      error: null,
       organizationName: this.defaultName ? `${this.defaultName}'s organization` : '',
       rules: {
         required: (v) => (!!v && !!v.trim()) || 'Organization name is required',
@@ -136,6 +150,7 @@ export default {
       if (!form.valid) return;
 
       this.loading = true;
+      this.error = null;
       const organizationsStore = useOrganizationsStore();
       try {
         const organization = await organizationsStore.createOrganization({
@@ -145,7 +160,7 @@ export default {
           this.$emit('created', organization);
         }
       } catch (err) {
-        console.error(err);
+        this.error = err?.response?.data?.message || err?.message || 'Could not create organization. Please try again.';
       } finally {
         this.loading = false;
       }

src/modules/auth/tests/auth.organizationSetup.component.unit.tests.js

@@ -124,4 +124,65 @@ describe('auth.organizationSetup.component', () => {
 
     expect(wrapper.vm.loading).toBe(false);
   });
+
+  // --- error alert UX (T9) ---
+
+  it('initializes error as null', () => {
+    const wrapper = mountComponent();
+    expect(wrapper.vm.error).toBeNull();
+  });
+
+  it('sets error from response data message on createOrganization failure', async () => {
+    const apiError = { response: { data: { message: 'Name already taken' } } };
+    createOrganizationMock.mockRejectedValueOnce(apiError);
+
+    const wrapper = mountComponent();
+    await flushPromises();
+
+    wrapper.vm.organizationName = 'Duplicate Org';
+    await wrapper.vm.submit();
+
+    expect(wrapper.vm.error).toBe('Name already taken');
+  });
+
+  it('falls back to err.message when no response data message', async () => {
+    const apiError = new Error('Network error');
+    createOrganizationMock.mockRejectedValueOnce(apiError);
+
+    const wrapper = mountComponent();
+    await flushPromises();
+
+    wrapper.vm.organizationName = 'Test Org';
+    await wrapper.vm.submit();
+
+    expect(wrapper.vm.error).toBe('Network error');
+  });
+
+  it('falls back to generic message when error has no message', async () => {
+    createOrganizationMock.mockRejectedValueOnce({});
+
+    const wrapper = mountComponent();
+    await flushPromises();
+
+    wrapper.vm.organizationName = 'Test Org';
+    await wrapper.vm.submit();
+
+    expect(wrapper.vm.error).toBe('Could not create organization. Please try again.');
+  });
+
+  it('clears error at the start of a new submit', async () => {
+    const wrapper = mountComponent();
+    await flushPromises();
+
+    // First submission fails
+    createOrganizationMock.mockRejectedValueOnce(new Error('First error'));
+    wrapper.vm.organizationName = 'Test Org';
+    await wrapper.vm.submit();
+    expect(wrapper.vm.error).toBe('First error');
+
+    // Second submission succeeds — error must be cleared
+    createOrganizationMock.mockResolvedValueOnce({ name: 'Test Org', _id: '456' });
+    await wrapper.vm.submit();
+    expect(wrapper.vm.error).toBeNull();
+  });
 });

src/modules/home/components/utils/home.content.component.vue

@@ -77,6 +77,8 @@
     >
       <v-btn
         :href="setup.button.link"
+        :target="buttonTarget"
+        :rel="buttonRel"
         variant="text"
         class="my-4 text-none text-body-large"
         :style="themeColor ? { color: setup.button.color || themeColor } : {}"
@@ -181,6 +183,15 @@ export default {
       }
       return null;
     },
+    buttonTarget() {
+      const explicit = this.setup.button?.target;
+      if (explicit) return explicit;
+      const link = this.setup.button?.link || '';
+      return /^https?:\/\//i.test(link) ? '_blank' : null;
+    },
+    buttonRel() {
+      return this.buttonTarget === '_blank' ? 'noopener noreferrer' : null;
+    },
   },
 };
 </script>

src/modules/home/tests/home.content.component.unit.tests.js

@@ -172,4 +172,54 @@ describe('HomeContentComponent', () => {
     expect(validator('right')).toBe(true);
     expect(validator('bogus')).toBe(false);
   });
+
+  // --- buttonTarget / buttonRel (external-link safety) ---
+
+  it('buttonTarget returns _blank for an external https link', () => {
+    const wrapper = mount(HomeContentComponent, {
+      props: { setup: { ...baseSetup, button: { title: 'Go', link: 'https://example.com' } } },
+      global: globalOpts(vuetify),
+    });
+    expect(wrapper.vm.buttonTarget).toBe('_blank');
+  });
+
+  it('buttonTarget returns _blank for an external http link', () => {
+    const wrapper = mount(HomeContentComponent, {
+      props: { setup: { ...baseSetup, button: { title: 'Go', link: 'http://example.com' } } },
+      global: globalOpts(vuetify),
+    });
+    expect(wrapper.vm.buttonTarget).toBe('_blank');
+  });
+
+  it('buttonTarget returns null for an internal (relative) link', () => {
+    const wrapper = mount(HomeContentComponent, {
+      props: { setup: { ...baseSetup, button: { title: 'Go', link: '/internal' } } },
+      global: globalOpts(vuetify),
+    });
+    expect(wrapper.vm.buttonTarget).toBeNull();
+  });
+
+  it('buttonTarget returns the explicit target when setup.button.target is provided', () => {
+    const wrapper = mount(HomeContentComponent, {
+      props: { setup: { ...baseSetup, button: { title: 'Go', link: '/internal', target: '_self' } } },
+      global: globalOpts(vuetify),
+    });
+    expect(wrapper.vm.buttonTarget).toBe('_self');
+  });
+
+  it('buttonRel is "noopener noreferrer" when buttonTarget is _blank', () => {
+    const wrapper = mount(HomeContentComponent, {
+      props: { setup: { ...baseSetup, button: { title: 'Go', link: 'https://external.com' } } },
+      global: globalOpts(vuetify),
+    });
+    expect(wrapper.vm.buttonRel).toBe('noopener noreferrer');
+  });
+
+  it('buttonRel is null when buttonTarget is null (internal link)', () => {
+    const wrapper = mount(HomeContentComponent, {
+      props: { setup: { ...baseSetup, button: { title: 'Go', link: '/internal' } } },
+      global: globalOpts(vuetify),
+    });
+    expect(wrapper.vm.buttonRel).toBeNull();
+  });
 });