@oxyhq/services
Version:
Reusable OxyHQ module to handle authentication, user management, karma system, device-based session management and more 🚀
298 lines (297 loc) • 9.94 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _reactNative = require("react-native");
var _OxyProvider = _interopRequireDefault(require("../components/OxyProvider"));
var _core = require("../../core");
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
/**
* Demo component showcasing the complete account management UI flow
* This demonstrates how all the account screens work together
*/const AccountManagementDemo = () => {
const oxyServices = new _core.OxyServices({
baseURL: 'https://api.oxy.so'
});
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
style: styles.container,
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.ScrollView, {
style: styles.content,
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
style: styles.title,
children: "Account Management System Demo"
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
style: styles.description,
children: "Complete account management flow with 5 interconnected screens:"
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
style: styles.screensList,
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(ScreenCard, {
title: "AccountCenterScreen",
description: "Main account hub and entry point",
features: ['User profile display', 'Quick access to all account features', 'Multi-account switching', 'Session management access'],
navigatesTo: ['AccountOverview', 'AccountSwitcher', 'EditProfile', 'SessionManagement']
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(ScreenCard, {
title: "AccountOverviewScreen",
description: "Comprehensive account information and management",
features: ['Detailed profile information', 'Account settings shortcuts', 'Subscription management', 'Privacy and security overview'],
navigatesTo: ['EditProfile', 'SessionManagement']
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(ScreenCard, {
title: "EditProfileScreen",
description: "Complete account configuration and preferences",
features: ['Profile editing (username, email, name)', 'Password management', 'Security settings', 'Notification preferences', 'Tabbed interface for organization'],
navigatesTo: ['Previous screen via goBack()']
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(ScreenCard, {
title: "AccountSwitcherScreen",
description: "Multi-account management and switching",
features: ['View all saved accounts', 'Switch between accounts', 'Remove unwanted accounts', 'Device session management', 'Add new accounts'],
navigatesTo: ['SignIn', 'Account switching']
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(ScreenCard, {
title: "SessionManagementScreen",
description: "Active session management across devices",
features: ['View all active sessions', 'Device information display', 'Logout specific sessions', 'Logout all sessions', 'Session security monitoring'],
navigatesTo: ['Session logout actions']
})]
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
style: styles.navigationFlow,
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
style: styles.sectionTitle,
children: "Navigation Flow"
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
style: styles.flowDescription,
children: "The screens are designed with intuitive navigation patterns:"
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
style: styles.flowItem,
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
style: styles.flowStep,
children: "1. Entry Point"
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
style: styles.flowText,
children: "Users typically start at AccountCenterScreen"
})]
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
style: styles.flowItem,
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
style: styles.flowStep,
children: "2. Explore"
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
style: styles.flowText,
children: "Navigate to specific screens based on needs"
})]
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
style: styles.flowItem,
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
style: styles.flowStep,
children: "3. Manage"
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
style: styles.flowText,
children: "Perform account actions in specialized screens"
})]
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
style: styles.flowItem,
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
style: styles.flowStep,
children: "4. Return"
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
style: styles.flowText,
children: "Navigate back or to related screens seamlessly"
})]
})]
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
style: styles.demoSection,
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
style: styles.sectionTitle,
children: "Try the Demo"
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
style: styles.demoButton,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
style: styles.demoButtonText,
children: "Launch Account Center"
})
})]
})]
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_OxyProvider.default, {
oxyServices: oxyServices,
initialScreen: "AccountCenter",
theme: "light",
autoPresent: false
})]
});
};
const ScreenCard = ({
title,
description,
features,
navigatesTo
}) => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
style: styles.screenCard,
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
style: styles.screenTitle,
children: title
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
style: styles.screenDescription,
children: description
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
style: styles.featuresTitle,
children: "Features:"
}), features.map((feature, index) => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
style: styles.feature,
children: ["\u2022 ", feature]
}, index)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
style: styles.navigationTitle,
children: "Navigates to:"
}), navigatesTo.map((nav, index) => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
style: styles.navigationItem,
children: ["\u2192 ", nav]
}, index))]
});
const styles = _reactNative.StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#F5F5F5'
},
content: {
flex: 1,
padding: 20
},
title: {
fontSize: 28,
fontWeight: 'bold',
color: '#333',
marginBottom: 10,
textAlign: 'center'
},
description: {
fontSize: 16,
color: '#666',
marginBottom: 20,
textAlign: 'center',
lineHeight: 22
},
screensList: {
marginBottom: 30
},
screenCard: {
backgroundColor: '#FFFFFF',
borderRadius: 12,
padding: 20,
marginBottom: 16,
shadowColor: '#000',
shadowOffset: {
width: 0,
height: 2
},
shadowOpacity: 0.1,
shadowRadius: 4,
elevation: 3
},
screenTitle: {
fontSize: 20,
fontWeight: 'bold',
color: '#0066CC',
marginBottom: 8
},
screenDescription: {
fontSize: 14,
color: '#666',
marginBottom: 12,
lineHeight: 20
},
featuresTitle: {
fontSize: 16,
fontWeight: '600',
color: '#333',
marginBottom: 8
},
feature: {
fontSize: 14,
color: '#555',
marginBottom: 4,
marginLeft: 10
},
navigationTitle: {
fontSize: 16,
fontWeight: '600',
color: '#333',
marginTop: 12,
marginBottom: 8
},
navigationItem: {
fontSize: 14,
color: '#0066CC',
marginBottom: 4,
marginLeft: 10
},
navigationFlow: {
backgroundColor: '#FFFFFF',
borderRadius: 12,
padding: 20,
marginBottom: 30,
shadowColor: '#000',
shadowOffset: {
width: 0,
height: 2
},
shadowOpacity: 0.1,
shadowRadius: 4,
elevation: 3
},
sectionTitle: {
fontSize: 22,
fontWeight: 'bold',
color: '#333',
marginBottom: 12
},
flowDescription: {
fontSize: 14,
color: '#666',
marginBottom: 16,
lineHeight: 20
},
flowItem: {
flexDirection: 'row',
alignItems: 'flex-start',
marginBottom: 12
},
flowStep: {
fontSize: 14,
fontWeight: 'bold',
color: '#0066CC',
minWidth: 80
},
flowText: {
fontSize: 14,
color: '#555',
flex: 1,
lineHeight: 20
},
demoSection: {
backgroundColor: '#FFFFFF',
borderRadius: 12,
padding: 20,
alignItems: 'center',
shadowColor: '#000',
shadowOffset: {
width: 0,
height: 2
},
shadowOpacity: 0.1,
shadowRadius: 4,
elevation: 3
},
demoButton: {
backgroundColor: '#0066CC',
borderRadius: 25,
paddingHorizontal: 30,
paddingVertical: 12,
marginTop: 10
},
demoButtonText: {
color: '#FFFFFF',
fontSize: 16,
fontWeight: '600'
}
});
var _default = exports.default = AccountManagementDemo;
//# sourceMappingURL=AccountManagementDemo.js.map