@buoy-gg/license 1.7.8 → 2.1.2

package/lib/commonjs/DeviceRegistrationModal.js

@@ -0,0 +1,189 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DeviceRegistrationModal = DeviceRegistrationModal;
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _LicenseManager = require("./LicenseManager.js");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+/**
+ * DeviceRegistrationModal - Prompts user to name their device during first registration
+ *
+ * Styled to match the Buoy brand design system.
+ */
+
+// Buoy brand colors - matches shared/src/ui/gameUI/constants/gameUIColors.ts
+const buoyColors = {
+  base: "#121212",
+  card: "#1A1A1A",
+  hover: "#242424",
+  input: "#2A2A2A",
+  border: "#333333",
+  borderStrong: "#444444",
+  text: "#E0E0E0",
+  textSecondary: "#A0A0A0",
+  textMuted: "#888888",
+  primary: "#20C997",
+  // Buoy teal
+  success: "#20C997",
+  warning: "#FFA94D",
+  error: "#EF4444",
+  info: "#00B8E6"
+};
+function DeviceRegistrationModal({
+  title = "Name Your Device",
+  description = "Give this device a name to help you identify it later.",
+  buttonText = "Continue",
+  onComplete
+}) {
+  const [visible, setVisible] = (0, _react.useState)(false);
+  const [deviceName, setDeviceName] = (0, _react.useState)("");
+  const [defaultName, setDefaultName] = (0, _react.useState)("");
+  const [isRegistering, setIsRegistering] = (0, _react.useState)(false);
+  (0, _react.useEffect)(() => {
+    // Subscribe to device registration requests
+    const unsubscribe = _LicenseManager.LicenseManager.onDeviceRegistrationNeeded(info => {
+      setDefaultName(info.defaultName);
+      setDeviceName(info.defaultName);
+      setVisible(true);
+    });
+    return unsubscribe;
+  }, []);
+  const handleSubmit = (0, _react.useCallback)(async () => {
+    const name = deviceName.trim() || defaultName;
+    setIsRegistering(true);
+    try {
+      await _LicenseManager.LicenseManager.completeDeviceRegistration(name);
+      setVisible(false);
+      onComplete?.(name);
+    } catch (error) {
+      console.warn("[Buoy] Device registration failed:", error);
+      // Still close the modal - registration failure shouldn't block the user
+      setVisible(false);
+    } finally {
+      setIsRegistering(false);
+    }
+  }, [deviceName, defaultName, onComplete]);
+  if (!visible) return null;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Modal, {
+    visible: visible,
+    transparent: true,
+    animationType: "fade",
+    onRequestClose: () => {
+      // Allow closing without naming - use default
+      handleSubmit();
+    },
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.KeyboardAvoidingView, {
+      behavior: _reactNative.Platform.OS === "ios" ? "padding" : "height",
+      style: styles.overlay,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: styles.container,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+          style: styles.accentBar
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+          style: styles.content,
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+            style: styles.title,
+            children: title
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+            style: styles.description,
+            children: description
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TextInput, {
+            style: styles.input,
+            value: deviceName,
+            onChangeText: setDeviceName,
+            placeholder: defaultName,
+            placeholderTextColor: buoyColors.textMuted,
+            autoFocus: true,
+            returnKeyType: "done",
+            onSubmitEditing: handleSubmit,
+            editable: !isRegistering,
+            selectionColor: buoyColors.primary
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+            style: [styles.button, isRegistering && styles.buttonDisabled],
+            onPress: handleSubmit,
+            disabled: isRegistering,
+            activeOpacity: 0.8,
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+              style: styles.buttonText,
+              children: isRegistering ? "Registering..." : buttonText
+            })
+          })]
+        })]
+      })
+    })
+  });
+}
+const styles = _reactNative.StyleSheet.create({
+  overlay: {
+    flex: 1,
+    backgroundColor: "rgba(0, 0, 0, 0.75)",
+    justifyContent: "center",
+    alignItems: "center"
+  },
+  container: {
+    backgroundColor: buoyColors.card,
+    borderRadius: 12,
+    width: "85%",
+    maxWidth: 400,
+    borderWidth: 1,
+    borderColor: buoyColors.border,
+    shadowColor: buoyColors.primary,
+    shadowOffset: {
+      width: 0,
+      height: 0
+    },
+    shadowOpacity: 0.2,
+    shadowRadius: 20,
+    elevation: 20,
+    overflow: "hidden"
+  },
+  accentBar: {
+    height: 3,
+    backgroundColor: buoyColors.primary
+  },
+  content: {
+    padding: 24
+  },
+  title: {
+    fontSize: 20,
+    fontWeight: "600",
+    color: buoyColors.text,
+    marginBottom: 8,
+    textAlign: "center"
+  },
+  description: {
+    fontSize: 14,
+    color: buoyColors.textSecondary,
+    marginBottom: 24,
+    textAlign: "center",
+    lineHeight: 20
+  },
+  input: {
+    borderWidth: 1,
+    borderColor: buoyColors.border,
+    borderRadius: 8,
+    padding: 14,
+    fontSize: 16,
+    color: buoyColors.text,
+    backgroundColor: buoyColors.input,
+    marginBottom: 20
+  },
+  button: {
+    backgroundColor: buoyColors.primary,
+    borderRadius: 8,
+    padding: 14,
+    alignItems: "center"
+  },
+  buttonDisabled: {
+    backgroundColor: buoyColors.textMuted
+  },
+  buttonText: {
+    color: buoyColors.base,
+    fontSize: 16,
+    fontWeight: "600"
+  }
+});