{"_id":"@atom-design-mog/login","_rev":"3-bfba3203784c32420c8b21f344cbfca0","name":"@atom-design-mog/login","dist-tags":{"latest":"1.0.2"},"versions":{"1.0.0":{"name":"@atom-design-mog/login","version":"1.0.0","keywords":["react-native","login","authentication","microsoft","ui-component"],"author":{"name":"Avi Gupta"},"license":"MIT","_id":"@atom-design-mog/login@1.0.0","maintainers":[{"name":"avi-moglix","email":"avi.gupta@moglix.com"}],"dist":{"shasum":"45950a8411203246ab8579642a29275b60693604","tarball":"https://registry.npmjs.org/@atom-design-mog/login/-/login-1.0.0.tgz","fileCount":3,"integrity":"sha512-My1LeJqI/CzDb/BoYsiYDJKYQC1L31h4xFUSKc5HtYDs7hokf16sPfMnvPp9tldND47WeclXSr5+0RV11pHZeQ==","signatures":[{"sig":"MEUCIGPkIVj0wkD5GBvwE9AUfuYL2lGrx9NlGZU3Lj+lJAVOAiEAoV7guwuqbl4dz8P86mfzNvROAcmO1tTF5Clw+dxmT4g=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":4845},"main":"index.js","_npmUser":{"name":"avi-moglix","email":"avi.gupta@moglix.com"},"_npmVersion":"10.8.2","description":"A React Native login component with Microsoft account integration and loader animation.","directories":{},"_nodeVersion":"20.19.5","_hasShrinkwrap":false,"peerDependencies":{"react":">=17.0.0","react-native":">=0.64.0"},"_npmOperationalInternal":{"tmp":"tmp/login_1.0.0_1763725707705_0.5230726544944297","host":"s3://npm-registry-packages-npm-production"}},"1.0.1":{"name":"@atom-design-mog/login","version":"1.0.1","keywords":["react-native","login","authentication","microsoft","ui-component"],"author":{"name":"Avi Gupta"},"license":"MIT","_id":"@atom-design-mog/login@1.0.1","maintainers":[{"name":"avi-moglix","email":"avi.gupta@moglix.com"}],"dist":{"shasum":"a8ab83138fdb1409708178e6a26c4c9b7dfd1fb1","tarball":"https://registry.npmjs.org/@atom-design-mog/login/-/login-1.0.1.tgz","fileCount":4,"integrity":"sha512-04ltGxRhg2X4sKT6ta4eR/Wo47a/I6Y+KL0humxeRATH+Zkh/k3gj//jUeIIVRwXZmQfIxTanEq/GDKKioAVPw==","signatures":[{"sig":"MEUCIC2utJsu3hB6xvkRBkNvRlqomLrSkuS7K6fwNvT02tCYAiEA60K6PsKDOkneNFG3C4BuzTSB+p1R6w0QcjhH9z/zQzo=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":7492},"main":"index.js","_npmUser":{"name":"avi-moglix","email":"avi.gupta@moglix.com"},"_npmVersion":"10.8.2","description":"A React Native login component with Microsoft account integration and loader animation.","directories":{},"_nodeVersion":"20.19.5","_hasShrinkwrap":false,"peerDependencies":{"react":">=17.0.0","react-native":">=0.64.0"},"_npmOperationalInternal":{"tmp":"tmp/login_1.0.1_1763966860672_0.3926230333026721","host":"s3://npm-registry-packages-npm-production"}},"1.0.2":{"name":"@atom-design-mog/login","version":"1.0.2","description":"A React Native login component with Microsoft account integration and loader animation.","main":"index.js","author":{"name":"Avi Gupta"},"license":"MIT","keywords":["react-native","login","authentication","microsoft","ui-component"],"peerDependencies":{"react":">=17.0.0","react-native":">=0.64.0"},"_id":"@atom-design-mog/login@1.0.2","_nodeVersion":"20.19.5","_npmVersion":"10.8.2","dist":{"integrity":"sha512-avroParL1tbQImJWyKLCapi3N5DukrnJf9ICD+AZURdFB5pQ1JYtFZYHq+t2BqiUMOSJLwtqLOHTE1GF8VjpFQ==","shasum":"5e49a2f7543908b3a02ddbebcd164e500db4c373","tarball":"https://registry.npmjs.org/@atom-design-mog/login/-/login-1.0.2.tgz","fileCount":4,"unpackedSize":7488,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQCXi+JwXvF2qklAGXW/CXN3CagnphZ3YxPWk/p5APUnQAIgSn8QkBf3UfCMSK/KzrvrP7fIjHfTmFTIVO7mHzEsFNk="}]},"_npmUser":{"name":"avi-moglix","email":"avi.gupta@moglix.com"},"directories":{},"maintainers":[{"name":"avi-moglix","email":"avi.gupta@moglix.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/login_1.0.2_1763966939647_0.018868688372243758"},"_hasShrinkwrap":false}},"time":{"created":"2025-11-21T11:48:27.604Z","modified":"2025-11-24T06:49:00.043Z","1.0.0":"2025-11-21T11:48:27.901Z","1.0.1":"2025-11-24T06:47:40.860Z","1.0.2":"2025-11-24T06:48:59.813Z"},"author":{"name":"Avi Gupta"},"license":"MIT","keywords":["react-native","login","authentication","microsoft","ui-component"],"description":"A React Native login component with Microsoft account integration and loader animation.","maintainers":[{"name":"avi-moglix","email":"avi.gupta@moglix.com"}],"readme":"# @atom-design-mog/login\n\nA sleek, animated React Native **Login** component for the Atom Design System — supports a customizable logo, background image, and a loading animation.\n\n---\n\n## 🚀 Installation\n\nInstall using npm:\n\n```bash\nnpm install @atom-design-mog/login\n```\n\nOr with yarn:\n\n```bash\nyarn add @atom-design-mog/login\n```\n\n### 📦 Peer dependencies\nMake sure your project includes:\n\n- `react`\n- `react-native`\n\n---\n\n## 🔧 Usage Example\n\n```jsx\nimport React, { useState } from 'react';\nimport { SafeAreaView } from 'react-native';\nimport Login from '@atom-design-mog/login';\n\nexport default function TestLoginScreen() {\n  const [isLoading, setIsLoading] = useState(false);\n\n  const handleLogin = () => {\n    setIsLoading(true);\n\n    setTimeout(() => {\n      setIsLoading(false);\n      alert('Logged in!');\n    }, 2000);\n  };\n\n  return (\n    <SafeAreaView style={{ flex: 1 }}>\n      <Login\n        onLogin={handleLogin}\n        isLoading={isLoading}\n        logoSource={{ uri: 'https://atom.moglix.com/assets/img/moglix-logo.png' }}\n        backgroundSource={{\n          uri: 'https://atom.moglix.com/assets/img/login_banckround@2x.png',\n        }}\n      />\n    </SafeAreaView>\n  );\n}\n```\n\n## 📋 Props\n\n| Prop                 | Type                  | Default      | Description                                                  |\n| -------------------- | --------------------- | ------------ | ------------------------------------------------------------ |\n| **onLogin**          | `() => void`          | **Required** | Called when the login button is pressed                      |\n| **isLoading**        | `boolean`             | `false`      | Whether to show the loader animation inside the login button |\n| **logoSource**       | `ImageSourcePropType` | `undefined`  | Image for the logo at the top of the login container         |\n| **backgroundSource** | `ImageSourcePropType` | `undefined`  | Background image behind the login container                  |\n\n\n## 🎨 Features\n\n- Animated loading indicator built from 4 dots\n- Looping animation while `isLoading === true`\n- Custom logo and background support\n- Button disables itself during loading\n- Clean, centered UI box with rounded corners\n- Styled with Atom design system colors\n\n## 📝 Notes\n\n- The loading animation uses React Native’s `Animated.loop` and `Animated.timing`.\n- Ensure `logoSource` and `backgroundSource` are valid React Native image sources (local `require()` or remote `{ uri }`).\n- The button icon is a Segoe UI glyph (). If that glyph is not available on your platform, replace it or use a custom icon component.\n\n👤 Author\nAvi Gupta\n","readmeFilename":"README.md"}