@asgardeo/react 0.6.23 → 0.6.25

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -25,7 +25,7 @@ export declare const renderSignInComponents: (components: EmbeddedFlowComponent[
25
25
  buttonClassName?: string;
26
26
  inputClassName?: string;
27
27
  onInputBlur?: (name: string) => void;
28
- onSubmit?: (component: EmbeddedFlowComponent, data?: Record<string, any>) => void;
28
+ onSubmit?: (component: EmbeddedFlowComponent, data?: Record<string, any>, skipValidation?: boolean) => void;
29
29
  size?: "small" | "medium" | "large";
30
30
  variant?: any;
31
31
  }) => ReactElement[];
@@ -36,7 +36,7 @@ export declare const renderSignUpComponents: (components: EmbeddedFlowComponent[
36
36
  buttonClassName?: string;
37
37
  inputClassName?: string;
38
38
  onInputBlur?: (name: string) => void;
39
- onSubmit?: (component: EmbeddedFlowComponent, data?: Record<string, any>) => void;
39
+ onSubmit?: (component: EmbeddedFlowComponent, data?: Record<string, any>, skipValidation?: boolean) => void;
40
40
  size?: "small" | "medium" | "large";
41
41
  variant?: any;
42
42
  }) => ReactElement[];
package/dist/index.js CHANGED
@@ -6877,9 +6877,10 @@ import {
6877
6877
  // src/components/presentation/auth/AuthOptionFactory.tsx
6878
6878
  import React from "react";
6879
6879
  import {
6880
- AsgardeoRuntimeError as AsgardeoRuntimeError7,
6881
6880
  FieldType as FieldType7,
6882
- EmbeddedFlowComponentTypeV2 as EmbeddedFlowComponentType
6881
+ EmbeddedFlowComponentTypeV2 as EmbeddedFlowComponentType,
6882
+ EmbeddedFlowActionVariantV2 as EmbeddedFlowActionVariant,
6883
+ EmbeddedFlowEventTypeV2 as EmbeddedFlowEventType
6883
6884
  } from "@asgardeo/browser";
6884
6885
 
6885
6886
  // src/components/adapters/SmsOtpButton.tsx
@@ -6944,9 +6945,12 @@ var getTypographyVariant = (variant) => {
6944
6945
  };
6945
6946
  return variantMap[variant] || "h3";
6946
6947
  };
6947
- var matchesSocialProvider = (actionId, eventType, buttonText, provider, authType) => {
6948
+ var matchesSocialProvider = (actionId, eventType, buttonText, provider, authType, componentVariant) => {
6948
6949
  const providerId = `${provider}_auth`;
6949
6950
  const providerMatches = actionId === providerId || eventType === providerId;
6951
+ if (componentVariant?.toUpperCase() === EmbeddedFlowActionVariant.Social) {
6952
+ return buttonText.toLowerCase().includes(provider);
6953
+ }
6950
6954
  if (authType === "signup") {
6951
6955
  return providerMatches || buttonText.toLowerCase().includes(provider);
6952
6956
  }
@@ -6981,6 +6985,11 @@ var createAuthComponentFromFlow = (component, formValues, touchedFields, formErr
6981
6985
  return React.cloneElement(field, { key });
6982
6986
  }
6983
6987
  case EmbeddedFlowComponentType.Action: {
6988
+ const actionId = component.id;
6989
+ const eventType = component.eventType || "";
6990
+ const buttonText = component.label || "";
6991
+ const componentVariant = component.variant || "";
6992
+ const shouldSkipValidation = eventType.toUpperCase() === EmbeddedFlowEventType.Trigger;
6984
6993
  const handleClick = () => {
6985
6994
  if (options.onSubmit) {
6986
6995
  const formData = {};
@@ -6989,28 +6998,25 @@ var createAuthComponentFromFlow = (component, formValues, touchedFields, formErr
6989
6998
  formData[field] = formValues[field];
6990
6999
  }
6991
7000
  });
6992
- options.onSubmit(component, formData);
7001
+ options.onSubmit(component, formData, shouldSkipValidation);
6993
7002
  }
6994
7003
  };
6995
- const actionId = component.id;
6996
- const eventType = component.eventType || "";
6997
- const buttonText = component.label || "";
6998
- if (matchesSocialProvider(actionId, eventType, buttonText, "google", authType)) {
7004
+ if (matchesSocialProvider(actionId, eventType, buttonText, "google", authType, componentVariant)) {
6999
7005
  return /* @__PURE__ */ jsx55(GoogleButton_default, { onClick: handleClick, className: options.buttonClassName }, key);
7000
7006
  }
7001
- if (matchesSocialProvider(actionId, eventType, buttonText, "github", authType)) {
7007
+ if (matchesSocialProvider(actionId, eventType, buttonText, "github", authType, componentVariant)) {
7002
7008
  return /* @__PURE__ */ jsx55(GitHubButton_default, { onClick: handleClick, className: options.buttonClassName }, key);
7003
7009
  }
7004
- if (matchesSocialProvider(actionId, eventType, buttonText, "facebook", authType)) {
7010
+ if (matchesSocialProvider(actionId, eventType, buttonText, "facebook", authType, componentVariant)) {
7005
7011
  return /* @__PURE__ */ jsx55(FacebookButton_default, { onClick: handleClick, className: options.buttonClassName }, key);
7006
7012
  }
7007
- if (matchesSocialProvider(actionId, eventType, buttonText, "microsoft", authType)) {
7013
+ if (matchesSocialProvider(actionId, eventType, buttonText, "microsoft", authType, componentVariant)) {
7008
7014
  return /* @__PURE__ */ jsx55(MicrosoftButton_default, { onClick: handleClick, className: options.buttonClassName }, key);
7009
7015
  }
7010
- if (matchesSocialProvider(actionId, eventType, buttonText, "linkedin", authType)) {
7016
+ if (matchesSocialProvider(actionId, eventType, buttonText, "linkedin", authType, componentVariant)) {
7011
7017
  return /* @__PURE__ */ jsx55(LinkedInButton_default, { onClick: handleClick, className: options.buttonClassName }, key);
7012
7018
  }
7013
- if (matchesSocialProvider(actionId, eventType, buttonText, "ethereum", authType)) {
7019
+ if (matchesSocialProvider(actionId, eventType, buttonText, "ethereum", authType, componentVariant)) {
7014
7020
  return /* @__PURE__ */ jsx55(SignInWithEthereumButton_default, { onClick: handleClick, className: options.buttonClassName }, key);
7015
7021
  }
7016
7022
  if (actionId === "prompt_mobile" || eventType === "prompt_mobile") {
@@ -7034,6 +7040,9 @@ var createAuthComponentFromFlow = (component, formValues, touchedFields, formErr
7034
7040
  const variant = getTypographyVariant(component.variant);
7035
7041
  return /* @__PURE__ */ jsx55(Typography_default, { variant, children: component.label || "" }, key);
7036
7042
  }
7043
+ case EmbeddedFlowComponentType.Divider: {
7044
+ return /* @__PURE__ */ jsx55(Divider_default, { children: component.label || "" }, key);
7045
+ }
7037
7046
  case EmbeddedFlowComponentType.Block: {
7038
7047
  if (component.components && component.components.length > 0) {
7039
7048
  const blockComponents = component.components.map(
@@ -7052,17 +7061,13 @@ var createAuthComponentFromFlow = (component, formValues, touchedFields, formErr
7052
7061
  }
7053
7062
  )
7054
7063
  ).filter(Boolean);
7055
- return /* @__PURE__ */ jsx55("div", { children: blockComponents }, key);
7064
+ return /* @__PURE__ */ jsx55("form", { id: component.id, children: blockComponents }, key);
7056
7065
  }
7057
7066
  return null;
7058
7067
  }
7059
7068
  default:
7060
- throw new AsgardeoRuntimeError7(
7061
- `Unsupported component type: ${component.type}`,
7062
- `${authType === "signin" ? "SignIn" : "SignUp"}-UnsupportedComponentType-001`,
7063
- "react",
7064
- `Something went wrong while rendering the ${authType} component. Please try again later.`
7065
- );
7069
+ console.warn(`Unsupported component type: ${component.type}. Skipping render.`);
7070
+ return null;
7066
7071
  }
7067
7072
  };
7068
7073
  var renderSignInComponents = (components, formValues, touchedFields, formErrors, isLoading, isFormValid, onInputChange, options) => components.map(
@@ -7348,11 +7353,13 @@ var BaseSignInContent2 = ({
7348
7353
  const handleInputBlur = (name) => {
7349
7354
  setFormTouched(name, true);
7350
7355
  };
7351
- const handleSubmit = async (component, data) => {
7352
- touchAllFields();
7353
- const validation = validateForm();
7354
- if (!validation.isValid) {
7355
- return;
7356
+ const handleSubmit = async (component, data, skipValidation) => {
7357
+ if (!skipValidation) {
7358
+ touchAllFields();
7359
+ const validation = validateForm();
7360
+ if (!validation.isValid) {
7361
+ return;
7362
+ }
7356
7363
  }
7357
7364
  setIsSubmitting(true);
7358
7365
  clearMessages();
@@ -9150,10 +9157,17 @@ var BaseSignUpContent2 = ({
9150
9157
  setFormValue(name, value);
9151
9158
  setFormTouched(name, true);
9152
9159
  };
9153
- const handleSubmit = async (component, data) => {
9160
+ const handleSubmit = async (component, data, skipValidation) => {
9154
9161
  if (!currentFlow) {
9155
9162
  return;
9156
9163
  }
9164
+ if (!skipValidation) {
9165
+ touchAllFields();
9166
+ const validation = validateForm();
9167
+ if (!validation.isValid) {
9168
+ return;
9169
+ }
9170
+ }
9157
9171
  setIsLoading(true);
9158
9172
  clearMessages();
9159
9173
  try {