{"_id":"@atom_design/login","name":"@atom_design/login","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@atom_design/login","version":"1.0.0","description":"A React Native login component with Microsoft account integration, animated loaders, and full customization.","main":"index.js","types":"index.d.ts","author":{"name":"Atom Design"},"license":"MIT","keywords":["react-native","login","authentication","microsoft","sso","ui-component","accessibility","atom-design"],"peerDependencies":{"react":">=17.0.0","react-native":">=0.64.0","prop-types":">=15.0.0","react-native-vector-icons":">=9.0.0"},"_id":"@atom_design/login@1.0.0","_nodeVersion":"20.19.5","_npmVersion":"10.8.2","dist":{"integrity":"sha512-SpK5hcJm0RHX/0Oom6lNnVrwYAlAMdnt1lqe1kuIgOTxEUxEb/cepnTu2hR1TtUNiJNXU96gL99Fdq0LZCbxQA==","shasum":"b57153beafd566ccea73c132b21b4d130cddd0ff","tarball":"https://registry.npmjs.org/@atom_design/login/-/login-1.0.0.tgz","fileCount":5,"unpackedSize":24729,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQDYdjpYN2uFAN04F98TH/WAgGlk+RYE4Q3AoKa8QELMRwIgUzedkRIagxfENbJNjngDNjLF2n2cNZkB1EKoU3Tzte0="}]},"_npmUser":{"name":"avi-moglix","email":"avi.gupta@moglix.com"},"directories":{},"maintainers":[{"name":"moglix","email":"devops@moglix.com"},{"name":"avi-moglix","email":"avi.gupta@moglix.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/login_1.0.0_1764757743032_0.8010645385475856"},"_hasShrinkwrap":false}},"time":{"created":"2025-12-03T10:29:02.924Z","1.0.0":"2025-12-03T10:29:03.217Z","modified":"2025-12-03T10:29:03.521Z"},"maintainers":[{"name":"moglix","email":"devops@moglix.com"},{"name":"avi-moglix","email":"avi.gupta@moglix.com"}],"description":"A React Native login component with Microsoft account integration, animated loaders, and full customization.","keywords":["react-native","login","authentication","microsoft","sso","ui-component","accessibility","atom-design"],"author":{"name":"Atom Design"},"license":"MIT","readme":"# @atom_design/login\n\nA sleek, animated **Login Component** for React Native with Microsoft account integration. Built as part of the **Atom Design System** with full customization support and accessibility features.\n\n---\n\n## ✨ Features\n\n- 🔐 **Microsoft Account Integration** - SSO-ready login flow\n- 🎨 **Fully Customizable** - Colors, text, icons, and styles\n- ✨ **Animated Loaders** - Dots animation or spinner options\n- 🖼️ **Custom Branding** - Logo and background image support\n- 🔗 **Request Access Link** - Built-in access request functionality\n- ♿ **Fully Accessible** - Screen reader support with proper roles\n- 📱 **Responsive Design** - Works on all screen sizes\n- 🎯 **TypeScript Support** - Full type definitions included\n\n---\n\n## 📦 Installation\n\n```bash\nnpm install @atom_design/login\n```\n\nOr with yarn:\n\n```bash\nyarn add @atom_design/login\n```\n\n### Peer Dependencies\n\nMake sure you have the required peer dependencies installed:\n\n```bash\nnpm install react-native-vector-icons prop-types\n```\n\nFor `react-native-vector-icons` setup, follow the [installation guide](https://github.com/oblador/react-native-vector-icons#installation).\n\n---\n\n## 📥 Import\n\n```javascript\nimport Login from '@atom_design/login';\n// or\nimport { Login } from '@atom_design/login';\n```\n\n---\n\n## 🎯 Basic Usage\n\n```jsx\nimport React, { useState } from 'react';\nimport { SafeAreaView } from 'react-native';\nimport Login from '@atom_design/login';\n\nfunction LoginScreen() {\n  const [isLoading, setIsLoading] = useState(false);\n\n  const handleLogin = async () => {\n    setIsLoading(true);\n    try {\n      // Your authentication logic here\n      await authenticateWithMicrosoft();\n    } finally {\n      setIsLoading(false);\n    }\n  };\n\n  return (\n    <SafeAreaView style={{ flex: 1 }}>\n      <Login\n        onLogin={handleLogin}\n        isLoading={isLoading}\n        logoSource={require('./assets/logo.png')}\n        backgroundSource={require('./assets/background.png')}\n      />\n    </SafeAreaView>\n  );\n}\n```\n\n---\n\n## 📋 Props\n\n| Prop | Type | Default | Description |\n|------|------|---------|-------------|\n| `onLogin` | `() => void` | **Required** | Callback when login button is pressed |\n| `onRequestAccess` | `() => void` | - | Callback when request access is pressed |\n| `isLoading` | `boolean` | `false` | Show loading state on button |\n| `logoSource` | `ImageSource` | - | Logo image source |\n| `backgroundSource` | `ImageSource` | - | Background image source |\n| `buttonText` | `string` | `'Login Via Microsoft Account'` | Login button text |\n| `buttonIcon` | `string` | `'login'` | MaterialIcons icon name |\n| `primaryColor` | `string` | `'#d9232d'` | Button background color |\n| `secondaryColor` | `string` | `'#086AC9'` | Link color |\n| `title` | `string` | - | Title text above button |\n| `subtitle` | `string` | `'This workspace allows...'` | Description below button |\n| `showRequestAccess` | `boolean` | `true` | Show request access section |\n| `requestAccessText` | `string` | `\"Don't have access?\"` | Request access label |\n| `requestAccessLinkText` | `string` | `'Request Now'` | Request access link text |\n| `requestAccessUrl` | `string` | - | URL to open for access request |\n| `loaderType` | `'dots' \\| 'spinner'` | `'dots'` | Type of loading animation |\n| `disabled` | `boolean` | `false` | Disable the login button |\n| `containerStyle` | `ViewStyle` | - | Container style override |\n| `cardStyle` | `ViewStyle` | - | Card style override |\n| `buttonStyle` | `ViewStyle` | - | Button style override |\n| `testID` | `string` | - | Test ID for testing |\n\n---\n\n## 🎨 Customization Examples\n\n### Custom Branding\n\n```jsx\n<Login\n  onLogin={handleLogin}\n  logoSource={{ uri: 'https://yourcompany.com/logo.png' }}\n  backgroundSource={require('./assets/bg-pattern.png')}\n  primaryColor=\"#4CAF50\"\n  secondaryColor=\"#2196F3\"\n  title=\"Welcome to MyApp\"\n  subtitle=\"Sign in with your corporate account\"\n/>\n```\n\n### Custom Button Text & Icon\n\n```jsx\n<Login\n  onLogin={handleLogin}\n  buttonText=\"Sign In with SSO\"\n  buttonIcon=\"account-circle\"\n  primaryColor=\"#1976D2\"\n/>\n```\n\n### Spinner Loader\n\n```jsx\n<Login\n  onLogin={handleLogin}\n  isLoading={isLoading}\n  loaderType=\"spinner\"\n/>\n```\n\n### Without Background Image\n\n```jsx\n<Login\n  onLogin={handleLogin}\n  logoSource={logo}\n  // No backgroundSource - uses default gray background\n/>\n```\n\n### With Request Access URL\n\n```jsx\n<Login\n  onLogin={handleLogin}\n  requestAccessUrl=\"https://yourcompany.com/request-access\"\n  requestAccessText=\"Need an account?\"\n  requestAccessLinkText=\"Sign Up Here\"\n/>\n```\n\n### Hide Request Access\n\n```jsx\n<Login\n  onLogin={handleLogin}\n  showRequestAccess={false}\n/>\n```\n\n---\n\n## 🧪 Test Screen Example\n\n```jsx\nimport React, { useState } from 'react';\nimport { View, Text, SafeAreaView, StyleSheet, Alert, Switch } from 'react-native';\nimport Login from '@atom_design/login';\n\nconst LoginTestScreen = () => {\n  const [isLoading, setIsLoading] = useState(false);\n  const [useSpinner, setUseSpinner] = useState(false);\n  const [showBackground, setShowBackground] = useState(true);\n\n  const handleLogin = () => {\n    setIsLoading(true);\n    \n    // Simulate authentication\n    setTimeout(() => {\n      setIsLoading(false);\n      Alert.alert('Success', 'Login successful!');\n    }, 2000);\n  };\n\n  const handleRequestAccess = () => {\n    Alert.alert('Request Access', 'Redirecting to access request form...');\n  };\n\n  return (\n    <SafeAreaView style={styles.container}>\n      {/* Controls */}\n      <View style={styles.controls}>\n        <Text style={styles.controlsTitle}>Test Controls</Text>\n        \n        <View style={styles.controlRow}>\n          <Text>Use Spinner Loader:</Text>\n          <Switch value={useSpinner} onValueChange={setUseSpinner} />\n        </View>\n        \n        <View style={styles.controlRow}>\n          <Text>Show Background:</Text>\n          <Switch value={showBackground} onValueChange={setShowBackground} />\n        </View>\n      </View>\n\n      {/* Login Component */}\n      <View style={styles.loginContainer}>\n        <Login\n          onLogin={handleLogin}\n          onRequestAccess={handleRequestAccess}\n          isLoading={isLoading}\n          loaderType={useSpinner ? 'spinner' : 'dots'}\n          logoSource={{ \n            uri: 'https://www.moglix.com/assets/img/moglix-logo.png' \n          }}\n          backgroundSource={showBackground ? {\n            uri: 'https://images.unsplash.com/photo-1557683316-973673baf926?w=800'\n          } : undefined}\n          title=\"Welcome Back\"\n          subtitle=\"Sign in with your Moglix corporate account to access the dashboard.\"\n          requestAccessText=\"New to the platform?\"\n          requestAccessLinkText=\"Request Access\"\n        />\n      </View>\n    </SafeAreaView>\n  );\n};\n\nconst styles = StyleSheet.create({\n  container: {\n    flex: 1,\n    backgroundColor: '#F5F5F5',\n  },\n  controls: {\n    backgroundColor: '#FFFFFF',\n    padding: 16,\n    margin: 16,\n    borderRadius: 12,\n    shadowColor: '#000',\n    shadowOffset: { width: 0, height: 2 },\n    shadowOpacity: 0.1,\n    shadowRadius: 4,\n    elevation: 3,\n  },\n  controlsTitle: {\n    fontSize: 16,\n    fontWeight: '600',\n    marginBottom: 12,\n    color: '#1A1A1A',\n  },\n  controlRow: {\n    flexDirection: 'row',\n    justifyContent: 'space-between',\n    alignItems: 'center',\n    paddingVertical: 8,\n  },\n  loginContainer: {\n    flex: 1,\n  },\n});\n\nexport default LoginTestScreen;\n```\n\n---\n\n## 🎭 Multiple Login Variants\n\n```jsx\nimport React, { useState } from 'react';\nimport { View, Text, ScrollView, StyleSheet, Alert } from 'react-native';\nimport Login from '@atom_design/login';\n\nconst LoginVariantsScreen = () => {\n  const [loading1, setLoading1] = useState(false);\n  const [loading2, setLoading2] = useState(false);\n\n  const simulateLogin = (setLoading) => {\n    setLoading(true);\n    setTimeout(() => {\n      setLoading(false);\n      Alert.alert('Logged In!');\n    }, 2000);\n  };\n\n  return (\n    <ScrollView style={styles.container}>\n      <Text style={styles.header}>Atom Design - Login Variants</Text>\n\n      {/* Default Moglix Style */}\n      <View style={styles.section}>\n        <Text style={styles.sectionTitle}>Default (Moglix)</Text>\n        <View style={styles.loginWrapper}>\n          <Login\n            onLogin={() => simulateLogin(setLoading1)}\n            isLoading={loading1}\n            logoSource={{ uri: 'https://www.moglix.com/assets/img/moglix-logo.png' }}\n          />\n        </View>\n      </View>\n\n      {/* Custom Green Theme */}\n      <View style={styles.section}>\n        <Text style={styles.sectionTitle}>Custom Theme</Text>\n        <View style={styles.loginWrapper}>\n          <Login\n            onLogin={() => simulateLogin(setLoading2)}\n            isLoading={loading2}\n            loaderType=\"spinner\"\n            primaryColor=\"#2E7D32\"\n            secondaryColor=\"#1565C0\"\n            buttonText=\"Sign In\"\n            buttonIcon=\"vpn-key\"\n            title=\"Secure Login\"\n            subtitle=\"Access your enterprise dashboard securely.\"\n            showRequestAccess={false}\n          />\n        </View>\n      </View>\n\n      {/* Disabled State */}\n      <View style={styles.section}>\n        <Text style={styles.sectionTitle}>Disabled State</Text>\n        <View style={styles.loginWrapper}>\n          <Login\n            onLogin={() => {}}\n            disabled\n            subtitle=\"Login is currently unavailable. Please try again later.\"\n            showRequestAccess={false}\n          />\n        </View>\n      </View>\n    </ScrollView>\n  );\n};\n\nconst styles = StyleSheet.create({\n  container: {\n    flex: 1,\n    backgroundColor: '#F5F5F5',\n  },\n  header: {\n    fontSize: 24,\n    fontWeight: 'bold',\n    textAlign: 'center',\n    marginVertical: 20,\n    color: '#1A1A1A',\n  },\n  section: {\n    marginBottom: 24,\n  },\n  sectionTitle: {\n    fontSize: 16,\n    fontWeight: '600',\n    marginHorizontal: 16,\n    marginBottom: 8,\n    color: '#333',\n  },\n  loginWrapper: {\n    height: 350,\n  },\n});\n\nexport default LoginVariantsScreen;\n```\n\n---\n\n## ♿ Accessibility\n\nThe Login component includes comprehensive accessibility support:\n\n- Login button uses `accessibilityRole=\"button\"`\n- Request access link uses `accessibilityRole=\"link\"`\n- Logo image has `accessibilityLabel=\"Company logo\"`\n- Disabled states are properly announced\n- `accessibilityHint` provides usage instructions\n\n---\n\n## 📝 TypeScript\n\nFull TypeScript definitions are included:\n\n```typescript\nimport Login, { LoginProps } from '@atom_design/login';\n\nconst MyLoginScreen: React.FC = () => {\n  const handleLogin = (): void => {\n    // Authentication logic\n  };\n\n  const props: LoginProps = {\n    onLogin: handleLogin,\n    isLoading: false,\n    primaryColor: '#d9232d',\n  };\n\n  return <Login {...props} />;\n};\n```\n\n---\n\n## 🔧 Available Icons\n\nThe `buttonIcon` prop accepts any [MaterialIcons](https://fonts.google.com/icons) name:\n\n- `login` (default)\n- `account-circle`\n- `vpn-key`\n- `security`\n- `fingerprint`\n- `lock`\n- `person`\n\n---\n\n## 📄 License\n\nMIT © Atom Design\n\n---\n\n## 👤 Author\n\n**Atom Design Team**\n\nPart of the Atom Design System for React Native.\n","readmeFilename":"README.md","_rev":"1-7365da345855bf16e83185f350305ea2"}