Merge branch 'lebihae/1190' into 'main'

fix(signup): force opening major picker before anything else (closes #1190) Closes #1190 See merge request churros/churros!282
inp-net · Nov 19, 2024 · d6a5120 · d6a5120
2 parents ab7a9a9 + 0453154
commit d6a5120
Show file tree

Hide file tree

Showing 5 changed files with 91 additions and 47 deletions.
diff --git a/.changeset/quick-buses-kneel.md b/.changeset/quick-buses-kneel.md
@@ -0,0 +1,5 @@
+---
+'@churros/app': patch
+---
+
+don't trigger form submissions when picking an option in a modal picker
diff --git a/.changeset/quiet-pans-train.md b/.changeset/quiet-pans-train.md
@@ -0,0 +1,5 @@
+---
+'@churros/app': minor
+---
+
+fix(signup): force opening major picker before anything else (closes #1190)
diff --git a/packages/app/src/lib/components/InputMajor.svelte b/packages/app/src/lib/components/InputMajor.svelte
@@ -6,8 +6,11 @@
   import LoadingText from '$lib/components/LoadingText.svelte';
   import PickMajor from '$lib/components/PickMajor.svelte';
   import { loading, type MaybeLoading } from '$lib/loading';
+  import { createEventDispatcher } from 'svelte';
   import IconChevronRight from '~icons/msl/chevron-right';
 
+  const dispatch = createEventDispatcher<{ open: undefined }>();
+
   /** Selected major uid */
   export let major: string;
 
@@ -96,14 +99,20 @@
           <slot name="clear-button">
             <ButtonSecondary
               on:click={() => {
+                dispatch('open');
                 major = '';
               }}
             >
               <LoadingText value={clearLabel} />
             </ButtonSecondary>
           </slot>
         {/if}
-        <ButtonSecondary on:click={open}>
+        <ButtonSecondary
+          on:click={() => {
+            open?.();
+            dispatch('open');
+          }}
+        >
           {#if major || clearable}Changer{:else}Choisir{/if}
         </ButtonSecondary>
       </PickMajor>

diff --git a/packages/app/src/lib/components/PickThings.svelte b/packages/app/src/lib/components/PickThings.svelte
@@ -86,6 +86,7 @@
         {/if}
         <li>
           <button
+            type="button"
             class:selected
             on:click={() => {
               if (!loaded(option.uid)) return;

diff --git a/packages/app/src/routes/signup/FormSignup.svelte b/packages/app/src/routes/signup/FormSignup.svelte
@@ -105,6 +105,7 @@
 
   $: selectedMajor = args.major ? $Data.majors.find((m) => m.uid === args.major) : null;
 
+  let majorWasChosen = false;
   let loading = false;
   let success = false;
 </script>
@@ -172,61 +173,73 @@
   >
     <div class="curriculum">
       <div class="major">
+        {#if !majorWasChosen}
+          <p class="major-first-title">Premièrement, à quelle école appartient-tu?</p>
+        {/if}
         <InputMajor
+          on:open={() => {
+            setTimeout(() => {
+              majorWasChosen = true;
+            }, 200);
+          }}
           clearable={!$dataQuickSignup}
           clearLabel="Externe"
           options={$Data}
           bind:major={args.major}
           initialSchool={$dataQuickSignup?.school ?? null}
         />
       </div>
-      <div class="promotion">
-        <InputRadios
-          bind:value={args.graduationYear}
-          options={[
-            [fromYearTier(1), '1re année'],
-            [fromYearTier(2), '2e année'],
-            [fromYearTier(3), '3e année'],
-          ]}
-        />
-      </div>
-      <div class="apprenticeship">
-        <InputRadios
-          value={args.apprentice ? 1 : 0}
-          on:change={({ detail }) => {
-            args.apprentice = Boolean(detail);
-          }}
-          options={[
-            [0, 'FISE (Étudiant.e.s)'],
-            [1, 'FISA (Apprenti.e.s)'],
-          ]}
-        />
-      </div>
+      {#if majorWasChosen}
+        <div class="promotion">
+          <InputRadios
+            bind:value={args.graduationYear}
+            options={[
+              [fromYearTier(1), '1re année'],
+              [fromYearTier(2), '2e année'],
+              [fromYearTier(3), '3e année'],
+            ]}
+          />
+        </div>
+        <div class="apprenticeship">
+          <InputRadios
+            value={args.apprentice ? 1 : 0}
+            on:change={({ detail }) => {
+              args.apprentice = Boolean(detail);
+            }}
+            options={[
+              [0, 'FISE (Étudiant.e.s)'],
+              [1, 'FISA (Apprenti.e.s)'],
+            ]}
+          />
+        </div>
+      {/if}
     </div>
-    <InputStudentEmail
-      major={selectedMajor ?? null}
-      usingQuickSignupCode={$dataQuickSignup !== null}
-      label="Ton email"
-      bind:value={args.email}
-    />
-    <div class="side-by-side">
-      <InputText bind:value={args.firstName} required label="Prénom" />
-      <InputText bind:value={args.lastName} required label="Nom de famille" />
-    </div>
-    <InputPassword label="Un mot de passe" bind:value={args.password} />
-    <InputPassword
-      hint=""
-      label="Le même mot de passe"
-      bind:value={args.passwordConfirmation}
-      errors={args.password &&
-      args.passwordConfirmation &&
-      args.password !== args.passwordConfirmation
-        ? ['Les mot de passes ne correspondent pas']
-        : []}
-    />
-    <section class="submit">
-      <ButtonPrimary submits>M'inscrire</ButtonPrimary>
-    </section>
+    {#if majorWasChosen}
+      <InputStudentEmail
+        major={selectedMajor ?? null}
+        usingQuickSignupCode={$dataQuickSignup !== null}
+        label="Ton email"
+        bind:value={args.email}
+      />
+      <div class="side-by-side">
+        <InputText bind:value={args.firstName} required label="Prénom" />
+        <InputText bind:value={args.lastName} required label="Nom de famille" />
+      </div>
+      <InputPassword label="Un mot de passe" bind:value={args.password} />
+      <InputPassword
+        hint=""
+        label="Le même mot de passe"
+        bind:value={args.passwordConfirmation}
+        errors={args.password &&
+        args.passwordConfirmation &&
+        args.password !== args.passwordConfirmation
+          ? ['Les mot de passes ne correspondent pas']
+          : []}
+      />
+      <section class="submit">
+        <ButtonPrimary submits>M'inscrire</ButtonPrimary>
+      </section>
+    {/if}
   </form>
 {/if}
 
@@ -277,6 +290,13 @@
     align-items: center;
   }
 
+  .major-first-title {
+    margin: 0 1rem 1rem;
+    font-weight: bold;
+    color: var(--primary);
+    text-align: center;
+  }
+
   .major {
     margin-bottom: 2rem;
   }
@@ -296,6 +316,10 @@
     max-height: 25vh;
   }
 
+  header p {
+    text-align: center;
+  }
+
   .check {
     font-size: 5rem;
     color: var(--primary);