feat(experimental): add SocialLoginReversed stage

Author: vatsalparikh

experimental/custom/stages/social-login-reversed/social-login-reversed.svelte

@@ -0,0 +1,131 @@
+<!--
+@component
+Type: stage
+Name: SocialLoginReversed
+
+Custom login stage that renders username/password before social login buttons,
+regardless of the callback order AM sends. Set the "Stage" field on your AM
+Page Node to "SocialLoginReversed" to activate this layout.
+-->
+
+<script lang="ts">
+  import { afterUpdate, onMount } from 'svelte';
+
+  import Alert from '$components/primitives/alert/alert.svelte';
+  import Button from '$components/primitives/button/button.svelte';
+  import Form from '$components/primitives/form/form.svelte';
+  import { interpolate } from '$core/_utilities/i18n.utilities';
+  import { styleStore } from '$core/style.store';
+  import CallbackMapper from '$journey/_utilities/callback-mapper.svelte';
+  import { captureLinks } from '$journey/stages/_utilities/stage.utilities';
+  import { convertStringToKey } from '$journey/stages/_utilities/step.utilities';
+
+  import type { JourneyStep } from '@forgerock/journey-client/types';
+
+  import type { Maybe } from '$core/interfaces';
+  import type {
+    CallbackMetadata,
+    StageFormObject,
+    StageJourneyObject,
+    StepMetadata,
+  } from '$journey/journey.interfaces';
+
+  export let componentStyle: 'app' | 'inline' | 'modal';
+  export let form: StageFormObject;
+  export let formEl: HTMLFormElement | null = null;
+  export let journey: StageJourneyObject;
+  export let metadata: Maybe<{ callbacks: CallbackMetadata[]; step: StepMetadata }>;
+  export let step: JourneyStep;
+
+  let alertNeedsFocus = false;
+  let formMessageKey = '';
+  let linkWrapper: HTMLElement;
+
+  function determineSubmission() {
+    if (metadata?.step?.derived.isStepSelfSubmittable()) {
+      form?.submit();
+    }
+  }
+
+  afterUpdate(() => {
+    alertNeedsFocus = !!form?.message;
+  });
+
+  onMount(() => {
+    if (componentStyle === 'modal') {
+      captureLinks(linkWrapper, journey);
+    }
+  });
+
+  $: formMessageKey = convertStringToKey(form?.message);
+
+  $: indexedCallbacks = (step?.callbacks ?? []).map((cb, idx) => ({ cb, idx }));
+  $: credentialEntries = indexedCallbacks.filter((e) => e.cb.payload?.type !== 'SelectIdPCallback');
+  $: socialEntries = indexedCallbacks.filter((e) => e.cb.payload?.type === 'SelectIdPCallback');
+</script>
+
+<Form bind:formEl ariaDescribedBy="socialLastFailureAlert" onSubmitWhenValid={form?.submit}>
+  {#if form?.message}
+    <Alert id="socialLastFailureAlert" needsFocus={alertNeedsFocus} type="error">
+      {interpolate(formMessageKey, null, form?.message)}
+    </Alert>
+  {/if}
+
+  {#each credentialEntries as { cb, idx }}
+    <CallbackMapper
+      props={{
+        callback: cb,
+        callbackMetadata: metadata?.callbacks[idx],
+        selfSubmitFunction: determineSubmission,
+        stepMetadata: metadata?.step && { ...metadata.step },
+        style: $styleStore,
+      }}
+    />
+  {/each}
+
+  {#if metadata?.step?.derived.isUserInputOptional || !metadata?.step?.derived.isStepSelfSubmittable()}
+    <Button busy={journey?.loading} style="primary" type="submit" width="full">
+      {interpolate('next', null, 'Next')}
+    </Button>
+  {/if}
+
+  {#if socialEntries.length > 0}
+    <div class="divider">
+      <span>{interpolate('orContinueWith', null, 'or continue with')}</span>
+    </div>
+
+    {#each socialEntries as { cb, idx }}
+      <CallbackMapper
+        props={{
+          callback: cb,
+          callbackMetadata: metadata?.callbacks[idx],
+          selfSubmitFunction: determineSubmission,
+          stepMetadata: metadata?.step && { ...metadata.step },
+          style: $styleStore,
+        }}
+      />
+    {/each}
+  {/if}
+
+  {#if componentStyle !== 'inline'}
+    <div bind:this={linkWrapper}></div>
+  {/if}
+</Form>
+
+<style>
+  .divider {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    margin: 0.5rem 0;
+    color: var(--color-secondary-dark, #6b7280);
+    font-size: 0.875rem;
+  }
+
+  .divider::before,
+  .divider::after {
+    content: '';
+    flex: 1;
+    border-top: 1px solid var(--color-border, #e5e7eb);
+  }
+</style>