@pisell/private-materials 6.3.35 → 6.3.37

package/lib/pro/Login2.0/Login2.js

@@ -104,14 +104,11 @@ var Login2 = ({
   (0, import_react.useEffect)(() => {
     var _a2;
     if (loginMethods.length > 0 && !currentLoginMethod) {
-      const nonOAuthMethod = loginMethods.find(
-        (method) => method.type === "email" || method.type === "phone"
-      );
-      const first = nonOAuthMethod || loginMethods[0];
-      setCurrentLoginMethod(first);
-      if (first.type === "email" || first.type === "phone") {
+      const initialMethod = loginMethods[0];
+      setCurrentLoginMethod(initialMethod);
+      if ((initialMethod == null ? void 0 : initialMethod.type) === "email" || (initialMethod == null ? void 0 : initialMethod.type) === "phone") {
         setCurrentVerificationMethod(
-          ((_a2 = first.verificationMethods) == null ? void 0 : _a2[0]) || "password"
+          ((_a2 = initialMethod.verificationMethods) == null ? void 0 : _a2[0]) || "password"
         );
       }
     }
@@ -1219,12 +1216,16 @@ var Login2 = ({
   };
   const renderSwitchOptions = () => {
     if (!currentLoginMethod) return null;
-    const nonOauthButtons = [];
-    if (currentLoginMethod.type === "email" || currentLoginMethod.type === "phone") {
+    const primaryMethod = loginMethods[0];
+    const currentIsFormMethod = currentLoginMethod.type === "email" || currentLoginMethod.type === "phone";
+    const primaryIsFormMethod = (primaryMethod == null ? void 0 : primaryMethod.type) === "email" || (primaryMethod == null ? void 0 : primaryMethod.type) === "phone";
+    const shouldUseFormLayout = currentIsFormMethod || primaryIsFormMethod;
+    const verificationSwitchButtons = [];
+    if (currentIsFormMethod) {
       (currentLoginMethod.verificationMethods || []).filter((method) => method !== currentVerificationMethod).forEach((method) => {
         if (method === "verification_code") {
           const text = currentLoginMethod.type === "email" ? import_utils.locales.getText("pisell-login2-switch-to-email-code") : import_utils.locales.getText("pisell-login2-switch-to-sms-code");
-          nonOauthButtons.push(
+          verificationSwitchButtons.push(
             /* @__PURE__ */ import_react.default.createElement(
               "button",
               {
@@ -1237,7 +1238,7 @@ var Login2 = ({
             )
           );
         } else {
-          nonOauthButtons.push(
+          verificationSwitchButtons.push(
             /* @__PURE__ */ import_react.default.createElement(
               "button",
               {
@@ -1252,17 +1253,15 @@ var Login2 = ({
         }
       });
     }
+    const emailPhoneSwitchButtons = [];
     loginMethods.forEach((method, index) => {
       if (method.type === "email" || method.type === "phone") {
-        if (method.type === currentLoginMethod.type) {
-          return;
-        }
+        if (method.type === currentLoginMethod.type) return;
         const isLast = isLastLoginMethod(method.type);
-        const className2 = (0, import_classnames.default)(
-          "login2-switch-option-button",
-          { "has-last-login-badge": isLast }
-        );
-        nonOauthButtons.push(
+        const className2 = (0, import_classnames.default)("login2-switch-option-button", {
+          "has-last-login-badge": isLast
+        });
+        emailPhoneSwitchButtons.push(
           /* @__PURE__ */ import_react.default.createElement(
             "button",
             {
@@ -1282,7 +1281,10 @@ var Login2 = ({
         );
       }
     });
-    const showDivider = nonOauthButtons.length > 0 && oauthProviders.length > 0;
+    const nonOauthButtons = [
+      ...verificationSwitchButtons,
+      ...emailPhoneSwitchButtons
+    ];
     const registerPrompt = onSwitchToRegister && /* @__PURE__ */ import_react.default.createElement("div", { className: "login2-register-prompt" }, /* @__PURE__ */ import_react.default.createElement("span", { className: "register-prompt-text" }, import_utils.locales.getText("pisell-login2-no-account")), /* @__PURE__ */ import_react.default.createElement(
       "button",
       {
@@ -1294,15 +1296,76 @@ var Login2 = ({
     if (!nonOauthButtons.length && !oauthProviders.length) {
       return registerPrompt;
     }
-    return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, showDivider && /* @__PURE__ */ import_react.default.createElement("div", { className: "login2-divider" }, import_utils.locales.getText("pisell-login2-or")), (nonOauthButtons.length > 0 || oauthProviders.length > 0) && /* @__PURE__ */ import_react.default.createElement("div", { className: "login2-switch-groups" }, nonOauthButtons.length > 0 && /* @__PURE__ */ import_react.default.createElement("div", { className: "login2-switch-options" }, nonOauthButtons), oauthProviders.length > 0 && /* @__PURE__ */ import_react.default.createElement(
+    if (shouldUseFormLayout) {
+      const groups = [];
+      if (nonOauthButtons.length > 0) {
+        groups.push(
+          /* @__PURE__ */ import_react.default.createElement("div", { key: "non-oauth", className: "login2-switch-options" }, nonOauthButtons)
+        );
+      }
+      if (oauthProviders.length > 0) {
+        groups.push(
+          /* @__PURE__ */ import_react.default.createElement(
+            import_OAuthButtonGroup.default,
+            {
+              key: "oauth",
+              providers: oauthProviders,
+              wrapperClassName: "login2-oauth-buttons",
+              buttonClassName: "login2-oauth-button",
+              gap: 12
+            }
+          )
+        );
+      }
+      if (!groups.length) {
+        return registerPrompt;
+      }
+      return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement("div", { className: "login2-divider" }, import_utils.locales.getText("pisell-login2-or")), /* @__PURE__ */ import_react.default.createElement("div", { className: "login2-switch-groups" }, groups), registerPrompt);
+    }
+    const primaryProvider = oauthProviders.find(
+      (provider) => provider.key === (primaryMethod == null ? void 0 : primaryMethod.type)
+    );
+    const secondaryOauthProviders = oauthProviders.filter(
+      (provider) => provider.key !== (primaryMethod == null ? void 0 : primaryMethod.type)
+    );
+    const hasSecondaryButtons = nonOauthButtons.length > 0 || secondaryOauthProviders.length > 0;
+    return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement("div", { className: "login2-switch-groups" }, primaryProvider ? /* @__PURE__ */ import_react.default.createElement(
+      import_OAuthButtonGroup.default,
+      {
+        providers: [primaryProvider],
+        wrapperClassName: "login2-oauth-buttons",
+        buttonClassName: "login2-oauth-button",
+        gap: 12
+      }
+    ) : /* @__PURE__ */ import_react.default.createElement("div", { className: "login2-switch-options" }, /* @__PURE__ */ import_react.default.createElement(
+      "button",
+      {
+        key: "primary-fallback",
+        className: "login2-switch-option-button",
+        onClick: () => {
+          if ((primaryMethod == null ? void 0 : primaryMethod.type) === "guest") {
+            handleGuestLogin();
+          } else if ((primaryMethod == null ? void 0 : primaryMethod.type) === "google" || (primaryMethod == null ? void 0 : primaryMethod.type) === "facebook" || (primaryMethod == null ? void 0 : primaryMethod.type) === "apple") {
+            handleOAuthClick(primaryMethod.type);
+          }
+        }
+      },
+      /* @__PURE__ */ import_react.default.createElement(
+        import_materials2.Iconfont,
+        {
+          type: (primaryMethod == null ? void 0 : primaryMethod.type) === "guest" ? "pisell2-user-01" : (primaryMethod == null ? void 0 : primaryMethod.type) === "google" ? "pisell2-google" : (primaryMethod == null ? void 0 : primaryMethod.type) === "facebook" ? "pisell2-facebook" : "pisell2-apple"
+        }
+      ),
+      /* @__PURE__ */ import_react.default.createElement("span", { className: "option-text" }, (primaryMethod == null ? void 0 : primaryMethod.type) === "guest" ? import_utils.locales.getText("pisell-login2-login-as-guest") : `${import_utils.locales.getText("pisell-login2-continue-with")} ${(primaryMethod == null ? void 0 : primaryMethod.type) ? primaryMethod.type.charAt(0).toUpperCase() + primaryMethod.type.slice(1) : ""}`)
+    )), hasSecondaryButtons && /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement("div", { className: "login2-divider" }, import_utils.locales.getText("pisell-login2-or")), nonOauthButtons.length > 0 && /* @__PURE__ */ import_react.default.createElement("div", { className: "login2-switch-options" }, nonOauthButtons), secondaryOauthProviders.length > 0 && /* @__PURE__ */ import_react.default.createElement(
       import_OAuthButtonGroup.default,
       {
-        providers: oauthProviders,
+        providers: secondaryOauthProviders,
         wrapperClassName: "login2-oauth-buttons",
         buttonClassName: "login2-oauth-button",
         gap: 12
       }
-    )), registerPrompt);
+    ))), registerPrompt);
   };
   if (!visible) {
     return null;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pisell/private-materials",
-  "version": "6.3.35",
+  "version": "6.3.37",
   "main": "./lib/index.js",
   "module": "./es/index.js",
   "types": "./lib/index.d.ts",
@@ -62,8 +62,8 @@
     "@react-spring/web": "^9.6.1",
     "@use-gesture/react": "^10.3.1",
     "@pisell/utils": "3.0.1",
-    "@pisell/icon": "0.0.11",
     "@pisell/materials": "6.3.10",
+    "@pisell/icon": "0.0.11",
     "@pisell/date-picker": "3.0.4"
   },
   "peerDependencies": {