Merge pull request #40 from beabee-communityrm/chore/simpler-join

chore: simplify join form
beabee-communityrm · Aug 2, 2024 · c6e47b4 · c6e47b4
2 parents fc7e752 + 5ea0942
commit c6e47b4
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 30 deletions.
diff --git a/apps/frontend/src/components/pages/join/AccountSection.vue b/apps/frontend/src/components/pages/join/AccountSection.vue
@@ -1,26 +1,5 @@
 <template>
   <section>
-    <AppSubHeading>{{ t('join.memberAccount') }}</AppSubHeading>
-
-    <p class="mb-2 text-sm">
-      {{ t('join.memberAlready') }}
-      <a
-        v-if="isEmbed"
-        href="/auth/login"
-        target="_blank"
-        class="text-link underline hover:text-primary"
-      >
-        {{ t('join.login') }}
-      </a>
-      <router-link
-        v-else
-        to="/auth/login"
-        class="text-link underline hover:text-primary"
-      >
-        {{ t('join.login') }}
-      </router-link>
-    </p>
-
     <div class="mb-4">
       <AppInput
         v-model="emailProxy"
@@ -29,6 +8,25 @@
         name="email"
         required
       />
+
+      <p class="mt-2 text-sm">
+        {{ t('join.memberAlready') }}
+        <a
+          v-if="isEmbed"
+          href="/auth/login"
+          target="_blank"
+          class="text-link underline hover:text-primary"
+        >
+          {{ t('join.login') }}
+        </a>
+        <router-link
+          v-else
+          to="/auth/login"
+          class="text-link underline hover:text-primary"
+        >
+          {{ t('join.login') }}
+        </router-link>
+      </p>
     </div>
   </section>
 </template>
@@ -37,7 +35,6 @@
 import AppInput from '../../forms/AppInput.vue';
 import { useI18n } from 'vue-i18n';
 import { computed } from 'vue';
-import AppSubHeading from '../../AppSubHeading.vue';
 import { isEmbed } from '../../../store';
 
 const emit = defineEmits(['update:email']);

diff --git a/apps/frontend/src/components/pages/join/JoinForm.vue b/apps/frontend/src/components/pages/join/JoinForm.vue
@@ -1,17 +1,21 @@
 <template>
-  <AuthBox :title="joinContent.title" :preview="preview">
+  <AuthBox v-if="generalContent.hideContribution">
+    <template v-if="!isEmbed">
+      <AppTitle>{{ joinContent.title }}</AppTitle>
+      <div class="content-message mb-6" v-html="joinContent.subtitle" />
+    </template>
+    <AppForm :button-text="buttonText" full-button @submit="onSubmit">
+      <AccountSection v-model:email="signUpData.email" class="mb-6" />
+    </AppForm>
+  </AuthBox>
+
+  <AuthBox v-else :title="joinContent.title" :preview="preview">
     <template #header>
       <div class="content-message" v-html="joinContent.subtitle" />
     </template>
 
     <AppForm :button-text="buttonText" full-button @submit="onSubmit">
-      <AccountSection
-        v-if="generalContent.hideContribution"
-        v-model:email="signUpData.email"
-        class="mb-6"
-      />
       <Contribution
-        v-else
         v-model:amount="signUpData.amount"
         v-model:period="signUpData.period"
         v-model:payFee="signUpData.payFee"
@@ -60,7 +64,7 @@
 import { computed, toRef } from 'vue';
 import { useI18n } from 'vue-i18n';
 import useVuelidate from '@vuelidate/core';
-import { generalContent } from '@store';
+import { generalContent, isEmbed } from '@store';
 import { useJoin } from './use-join';
 
 import beabeeLogo from '@assets/images/beabee-logo.png';
@@ -72,6 +76,7 @@ import AppForm from '@components/forms/AppForm.vue';
 import AuthBox from '@components/AuthBox.vue';
 
 import type { ContentJoinData, ContentPaymentData } from '@type';
+import AppTitle from '@components/AppTitle.vue';
 
 const props = defineProps<{
   joinContent: ContentJoinData;