@oxyhq/services/lib/commonjs/ui/components/OxySignInButton.js

OxyHQ Expo/React Native SDK — UI components, screens, and native features

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = exports.OxySignInButton = void 0;
var _react = require("react");
var _reactNative = require("react-native");
var _authStore = require("../stores/authStore.js");
var _shallow = require("zustand/react/shallow");
var _fonts = require("../styles/fonts.js");
var _OxyLogo = _interopRequireDefault(require("./OxyLogo.js"));
var _SignInModal = require("./SignInModal.js");
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
/**
 * A pre-styled button component for signing in with Oxy identity
 * 
 * This component opens the Oxy Auth flow which allows users to authenticate
 * using their Oxy Accounts identity (via QR code or deep link).
 * 
 * @example
 * ```tsx
 * // Basic usage
 * <OxySignInButton />
 * 
 * // Custom styling
 * <OxySignInButton 
 *   variant="contained" 
 *   style={{ marginTop: 20 }} 
 *   text="Login with Oxy" 
 * />
 * 
 * // Custom handler
 * <OxySignInButton onPress={() => {
 *   // Custom authentication flow
 *   console.log('Custom auth flow initiated');
 * }} />
 * ```
 */
const OxySignInButton = ({
  variant = 'default',
  onPress,
  style,
  textStyle,
  text = 'Sign in with Oxy',
  disabled = false,
  showWhenAuthenticated = false
}) => {
  const {
    isAuthenticated,
    isLoading
  } = (0, _authStore.useAuthStore)((0, _shallow.useShallow)(state => ({
    isAuthenticated: state.isAuthenticated,
    isLoading: state.isLoading
  })));
  const [isModalOpen, setIsModalOpen] = (0, _react.useState)(false);

  // Subscribe to modal close events
  (0, _react.useEffect)(() => {
    return (0, _SignInModal.subscribeToSignInModal)(setIsModalOpen);
  }, []);

  // Handle button press - opens full-screen sign-in modal with QR code and auth options
  const handlePress = (0, _react.useCallback)(() => {
    if (onPress) {
      onPress();
      return;
    }
    setIsModalOpen(true);
    // Show the full-screen sign-in modal on all platforms
    (0, _SignInModal.showSignInModal)();
  }, [onPress]);

  // Don't show the button if already authenticated (unless explicitly overridden)
  if (isAuthenticated && !showWhenAuthenticated) return null;
  const isButtonDisabled = disabled || isLoading || isModalOpen;

  // Determine the button style based on the variant
  const getButtonStyle = () => {
    switch (variant) {
      case 'outline':
        return [styles.buttonOutline, style];
      case 'contained':
        return [styles.buttonContained, style];
      default:
        return [styles.buttonDefault, style];
    }
  };

  // Determine the text style based on the variant
  const getTextStyle = () => {
    switch (variant) {
      case 'outline':
        return [styles.textOutline, textStyle];
      case 'contained':
        return [styles.textContained, textStyle];
      default:
        return [styles.textDefault, textStyle];
    }
  };
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
    style: [styles.button, getButtonStyle(), isButtonDisabled && styles.buttonDisabled],
    onPress: handlePress,
    disabled: isButtonDisabled,
    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
      style: styles.buttonContent,
      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_OxyLogo.default, {
        width: 20,
        height: 20,
        fillColor: variant === 'contained' ? 'white' : '#d169e5',
        secondaryFillColor: variant === 'contained' ? '#d169e5' : undefined,
        style: isButtonDisabled ? {
          opacity: 0.6
        } : undefined
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
        style: [styles.text, getTextStyle(), isButtonDisabled && styles.textDisabled],
        children: isLoading || isModalOpen ? 'Signing in...' : text
      })]
    })
  });
};
exports.OxySignInButton = OxySignInButton;
const styles = _reactNative.StyleSheet.create({
  button: {
    padding: 14,
    borderRadius: 35,
    alignItems: 'center',
    justifyContent: 'center'
  },
  buttonDefault: {
    backgroundColor: '#FFFFFF',
    borderWidth: 1,
    borderColor: '#DDDDDD',
    ..._reactNative.Platform.select({
      web: {
        boxShadow: '0 2px 4px rgba(0,0,0,0.1)'
      },
      default: {
        shadowColor: '#000000',
        shadowOffset: {
          width: 0,
          height: 2
        },
        shadowOpacity: 0.1,
        shadowRadius: 4,
        elevation: 2
      }
    })
  },
  buttonOutline: {
    backgroundColor: 'transparent',
    borderWidth: 1,
    borderColor: '#d169e5'
  },
  buttonContained: {
    backgroundColor: '#d169e5'
  },
  buttonDisabled: {
    opacity: 0.6
  },
  buttonContent: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center'
  },
  text: {
    fontFamily: _fonts.fontFamilies.interSemiBold,
    fontWeight: _reactNative.Platform.OS === 'web' ? '600' : undefined,
    fontSize: 16,
    marginLeft: 10
  },
  textDefault: {
    color: '#333333'
  },
  textOutline: {
    color: '#d169e5'
  },
  textContained: {
    color: '#FFFFFF'
  },
  textDisabled: {
    color: '#888888'
  }
});
var _default = exports.default = OxySignInButton;
//# sourceMappingURL=OxySignInButton.js.map