powr-sdk-web 6.18.0 → 6.18.1

package/dist/auth/index.js

@@ -11,6 +11,7 @@ var _AddPhonePanel = _interopRequireDefault(require("../onboarding/AddPhonePanel
 var _PhoneInput = _interopRequireDefault(require("../components/PhoneInput"));
 var _utils = require("../onboarding/utils");
 var _profileNameStep = require("../onboarding/steps/profileNameStep");
+var _libphonenumberJs = require("libphonenumber-js");
 var _phone = require("../utils/phone");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
 var cache;
@@ -552,7 +553,6 @@ var PowrLogin = function PowrLogin(_ref) {
             }
             setIsLogin(false);
             setLoginGate('password');
-            setSuccess('New number. Set a password to create your PowrAccount.');
             return _context4.a(2);
           case 9:
             if (!(ok && data.exists && !data.hasPassword)) {
@@ -799,6 +799,22 @@ var PowrLogin = function PowrLogin(_ref) {
     }
     setError('Your session timed out. Sign in again to add your phone number.');
   };
+  var changeNumber = function changeNumber() {
+    setIsLogin(true);
+    setLoginGate('phone');
+    setSmsResetStep(null);
+    setError('');
+    setSuccess('');
+    setFieldErrors({});
+    setFormData(function (prev) {
+      return _objectSpread(_objectSpread({}, prev), {}, {
+        password: '',
+        confirmPassword: '',
+        fullName: ''
+      });
+    });
+  };
+  var numberLocked = !isLogin || loginGate !== 'phone' || Boolean(smsResetStep);
   var smsMobile = function smsMobile() {
     var digits = formData.phoneOrEmail.replace(/\D/g, '');
     if (digits.length === 10) return digits;
@@ -1179,13 +1195,13 @@ var PowrLogin = function PowrLogin(_ref) {
     onMouseLeave: function onMouseLeave() {
       return setShowTooltip(false);
     }
-  }, "PowrAccount")), isLogin ? /*#__PURE__*/_react["default"].createElement("p", {
+  }, "PowrAccount")), isLogin && (loginGate === 'password' || loginGate === 'help' || smsResetStep) ? /*#__PURE__*/_react["default"].createElement("p", {
     style: _objectSpread(_objectSpread({}, styles.subtitle), {}, {
       marginTop: 6,
       fontSize: 14,
       fontWeight: 400
     })
-  }, loginGate === 'password' ? 'Enter your password.' : smsResetStep === 'otp' ? 'Enter the code we sent.' : loginGate === 'help' ? 'WhatsApp us to reset.' : smsResetStep === 'password' ? 'Set a password for next time.' : 'Enter your mobile number.') : null, showTooltip && /*#__PURE__*/_react["default"].createElement("div", {
+  }, smsResetStep === 'otp' ? 'Enter the code we sent.' : smsResetStep === 'password' ? 'Set a password for next time.' : loginGate === 'help' ? 'WhatsApp us to reset.' : 'Enter your password.') : null, showTooltip && /*#__PURE__*/_react["default"].createElement("div", {
     style: styles.tooltip
   }, "Secure authentication powered by Lawazia Tech"))), authView === 'add-name' && pendingAuth ? /*#__PURE__*/_react["default"].createElement(_profileNameStep.profileNameStep.Component, {
     ctx: {
@@ -1215,32 +1231,22 @@ var PowrLogin = function PowrLogin(_ref) {
   }) : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("form", {
     onSubmit: handleSubmit,
     style: styles.form
-  }, !isLogin && /*#__PURE__*/_react["default"].createElement("div", {
-    style: styles.formGroup
-  }, /*#__PURE__*/_react["default"].createElement("label", {
-    htmlFor: "fullName",
-    style: styles.label
-  }, "Full Name"), /*#__PURE__*/_react["default"].createElement("input", {
-    type: "text",
-    id: "fullName",
-    name: "fullName",
-    value: formData.fullName,
-    onChange: handleInputChange,
-    style: _objectSpread(_objectSpread({}, styles.input), fieldErrors.fullName ? styles.inputError : {}),
-    placeholder: "Enter your full name",
-    required: true
-  }), fieldErrors.fullName && /*#__PURE__*/_react["default"].createElement("div", {
-    style: styles.fieldError
-  }, fieldErrors.fullName)), /*#__PURE__*/_react["default"].createElement("div", {
+  }, /*#__PURE__*/_react["default"].createElement("div", {
     style: styles.formGroup
   }, /*#__PURE__*/_react["default"].createElement("label", {
     htmlFor: "phoneOrEmail",
     style: styles.label
-  }, "Mobile"), /*#__PURE__*/_react["default"].createElement(_PhoneInput["default"], {
+  }, "Mobile"), numberLocked ? /*#__PURE__*/_react["default"].createElement("div", {
+    style: styles.lockedPhone
+  }, /*#__PURE__*/_react["default"].createElement("span", null, "+", (0, _libphonenumberJs.getCountryCallingCode)(phoneCountry), " ", formData.phoneOrEmail), /*#__PURE__*/_react["default"].createElement("button", {
+    type: "button",
+    onClick: changeNumber,
+    style: styles.changeNumber
+  }, "Change")) : /*#__PURE__*/_react["default"].createElement(_PhoneInput["default"], {
     value: formData.phoneOrEmail,
     country: phoneCountry,
     onChange: handleRegisterPhoneChange,
-    international: international,
+    international: true,
     allowedCountries: allowedCountries,
     defaultCountry: resolvedDefaultCountry,
     inputStyle: _objectSpread({}, fieldErrors.phoneOrEmail ? styles.inputError : {})
@@ -1261,7 +1267,23 @@ var PowrLogin = function PowrLogin(_ref) {
     style: styles.successText
   }, "Phone number verified successfully!"), /*#__PURE__*/_react["default"].createElement("div", {
     id: "recaptcha-container"
-  })), (!isLogin || loginGate === 'password') && smsResetStep !== 'otp' && smsResetStep !== 'password' && /*#__PURE__*/_react["default"].createElement("div", {
+  })), !isLogin && /*#__PURE__*/_react["default"].createElement("div", {
+    style: styles.formGroup
+  }, /*#__PURE__*/_react["default"].createElement("label", {
+    htmlFor: "fullName",
+    style: styles.label
+  }, "Full Name"), /*#__PURE__*/_react["default"].createElement("input", {
+    type: "text",
+    id: "fullName",
+    name: "fullName",
+    value: formData.fullName,
+    onChange: handleInputChange,
+    style: _objectSpread(_objectSpread({}, styles.input), fieldErrors.fullName ? styles.inputError : {}),
+    placeholder: "Enter your full name",
+    required: true
+  }), fieldErrors.fullName && /*#__PURE__*/_react["default"].createElement("div", {
+    style: styles.fieldError
+  }, fieldErrors.fullName)), (!isLogin || loginGate === 'password') && smsResetStep !== 'otp' && smsResetStep !== 'password' && /*#__PURE__*/_react["default"].createElement("div", {
     style: styles.formGroup
   }, /*#__PURE__*/_react["default"].createElement("label", {
     htmlFor: "password",
@@ -1433,21 +1455,7 @@ var PowrLogin = function PowrLogin(_ref) {
     style: _objectSpread(_objectSpread({}, styles.spinner), {}, {
       animation: 'spin 1s linear infinite'
     })
-  }) : isLogin ? loginGate === 'password' ? 'Sign In' : 'Continue' : 'Sign Up'), !isLogin && !smsResetStep && /*#__PURE__*/_react["default"].createElement("div", {
-    style: {
-      textAlign: 'center',
-      marginTop: 12
-    }
-  }, /*#__PURE__*/_react["default"].createElement("button", {
-    type: "button",
-    onClick: function onClick() {
-      setIsLogin(true);
-      setLoginGate('phone');
-      setError('');
-      setSuccess('');
-    },
-    style: styles.forgotPasswordLink
-  }, "I already have a password")), isLogin && loginGate === 'password' && !smsResetStep && /*#__PURE__*/_react["default"].createElement("div", {
+  }) : isLogin ? loginGate === 'password' ? 'Sign In' : 'Continue' : 'Sign Up'), isLogin && loginGate === 'password' && !smsResetStep && /*#__PURE__*/_react["default"].createElement("div", {
     style: {
       textAlign: 'center',
       marginTop: 12
@@ -1582,6 +1590,30 @@ var styles = {
     flexDirection: 'column',
     gap: '8px'
   },
+  lockedPhone: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    gap: 12,
+    height: 48,
+    padding: '0 14px',
+    border: '2px solid #e5e7eb',
+    borderRadius: 8,
+    background: '#f9fafb',
+    fontSize: 16,
+    fontWeight: 600,
+    color: '#111827'
+  },
+  changeNumber: {
+    border: 'none',
+    background: 'transparent',
+    color: '#ff6b35',
+    fontSize: 14,
+    fontWeight: 600,
+    cursor: 'pointer',
+    padding: 0,
+    flex: '0 0 auto'
+  },
   label: {
     fontSize: '14px',
     fontWeight: '600',

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "powr-sdk-web",
-    "version": "6.18.0",
+    "version": "6.18.1",
     "main": "dist/index.js",
     "files": [
         "dist"