@atom_design/login

A 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.

✨ Features

• 🔐 Microsoft Account Integration - SSO-ready login flow
• 🎨 Fully Customizable - Colors, text, icons, and styles
• ✨ Animated Loaders - Dots animation or spinner options
• 🖼️ Custom Branding - Logo and background image support
• 🔗 Request Access Link - Built-in access request functionality
• ♿ Fully Accessible - Screen reader support with proper roles
• 📱 Responsive Design - Works on all screen sizes
• 🎯 TypeScript Support - Full type definitions included

📦 Installation

npm install @atom_design/login

Or with yarn:

yarn add @atom_design/login

Peer Dependencies

Make sure you have the required peer dependencies installed:

npm install react-native-vector-icons prop-types

For react-native-vector-icons setup, follow the installation guide.

📥 Import

import Login from '@atom_design/login';
// or
import { Login } from '@atom_design/login';

🎯 Basic Usage

import React, { useState } from 'react';
import { SafeAreaView } from 'react-native';
import Login from '@atom_design/login';

function LoginScreen() {
  const [isLoading, setIsLoading] = useState(false);

  const handleLogin = async () => {
    setIsLoading(true);
    try {
      // Your authentication logic here
      await authenticateWithMicrosoft();
    } finally {
      setIsLoading(false);
    }
  };

  return (
    <SafeAreaView style={{ flex: 1 }}>
      <Login
        onLogin={handleLogin}
        isLoading={isLoading}
        logoSource={require('./assets/logo.png')}
        backgroundSource={require('./assets/background.png')}
      />
    </SafeAreaView>
  );
}

📋 Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | onLogin | () => void | Required | Callback when login button is pressed | | onRequestAccess | () => void | - | Callback when request access is pressed | | isLoading | boolean | false | Show loading state on button | | logoSource | ImageSource | - | Logo image source | | backgroundSource | ImageSource | - | Background image source | | buttonText | string | 'Login Via Microsoft Account' | Login button text | | buttonIcon | string | 'login' | MaterialIcons icon name | | primaryColor | string | '#d9232d' | Button background color | | secondaryColor | string | '#086AC9' | Link color | | title | string | - | Title text above button | | subtitle | string | 'This workspace allows...' | Description below button | | showRequestAccess | boolean | true | Show request access section | | requestAccessText | string | "Don't have access?" | Request access label | | requestAccessLinkText | string | 'Request Now' | Request access link text | | requestAccessUrl | string | - | URL to open for access request | | loaderType | 'dots' \| 'spinner' | 'dots' | Type of loading animation | | disabled | boolean | false | Disable the login button | | containerStyle | ViewStyle | - | Container style override | | cardStyle | ViewStyle | - | Card style override | | buttonStyle | ViewStyle | - | Button style override | | testID | string | - | Test ID for testing |

🎨 Customization Examples

Custom Branding

<Login
  onLogin={handleLogin}
  logoSource={{ uri: 'https://yourcompany.com/logo.png' }}
  backgroundSource={require('./assets/bg-pattern.png')}
  primaryColor="#4CAF50"
  secondaryColor="#2196F3"
  title="Welcome to MyApp"
  subtitle="Sign in with your corporate account"
/>

Custom Button Text & Icon

<Login
  onLogin={handleLogin}
  buttonText="Sign In with SSO"
  buttonIcon="account-circle"
  primaryColor="#1976D2"
/>

Spinner Loader

<Login
  onLogin={handleLogin}
  isLoading={isLoading}
  loaderType="spinner"
/>

Without Background Image

<Login
  onLogin={handleLogin}
  logoSource={logo}
  // No backgroundSource - uses default gray background
/>

With Request Access URL

<Login
  onLogin={handleLogin}
  requestAccessUrl="https://yourcompany.com/request-access"
  requestAccessText="Need an account?"
  requestAccessLinkText="Sign Up Here"
/>

Hide Request Access

<Login
  onLogin={handleLogin}
  showRequestAccess={false}
/>

🧪 Test Screen Example

import React, { useState } from 'react';
import { View, Text, SafeAreaView, StyleSheet, Alert, Switch } from 'react-native';
import Login from '@atom_design/login';

const LoginTestScreen = () => {
  const [isLoading, setIsLoading] = useState(false);
  const [useSpinner, setUseSpinner] = useState(false);
  const [showBackground, setShowBackground] = useState(true);

  const handleLogin = () => {
    setIsLoading(true);
    
    // Simulate authentication
    setTimeout(() => {
      setIsLoading(false);
      Alert.alert('Success', 'Login successful!');
    }, 2000);
  };

  const handleRequestAccess = () => {
    Alert.alert('Request Access', 'Redirecting to access request form...');
  };

  return (
    <SafeAreaView style={styles.container}>
      {/* Controls */}
      <View style={styles.controls}>
        <Text style={styles.controlsTitle}>Test Controls</Text>
        
        <View style={styles.controlRow}>
          <Text>Use Spinner Loader:</Text>
          <Switch value={useSpinner} onValueChange={setUseSpinner} />
        </View>
        
        <View style={styles.controlRow}>
          <Text>Show Background:</Text>
          <Switch value={showBackground} onValueChange={setShowBackground} />
        </View>
      </View>

      {/* Login Component */}
      <View style={styles.loginContainer}>
        <Login
          onLogin={handleLogin}
          onRequestAccess={handleRequestAccess}
          isLoading={isLoading}
          loaderType={useSpinner ? 'spinner' : 'dots'}
          logoSource={{ 
            uri: 'https://www.moglix.com/assets/img/moglix-logo.png' 
          }}
          backgroundSource={showBackground ? {
            uri: 'https://images.unsplash.com/photo-1557683316-973673baf926?w=800'
          } : undefined}
          title="Welcome Back"
          subtitle="Sign in with your Moglix corporate account to access the dashboard."
          requestAccessText="New to the platform?"
          requestAccessLinkText="Request Access"
        />
      </View>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#F5F5F5',
  },
  controls: {
    backgroundColor: '#FFFFFF',
    padding: 16,
    margin: 16,
    borderRadius: 12,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.1,
    shadowRadius: 4,
    elevation: 3,
  },
  controlsTitle: {
    fontSize: 16,
    fontWeight: '600',
    marginBottom: 12,
    color: '#1A1A1A',
  },
  controlRow: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    paddingVertical: 8,
  },
  loginContainer: {
    flex: 1,
  },
});

export default LoginTestScreen;

🎭 Multiple Login Variants

import React, { useState } from 'react';
import { View, Text, ScrollView, StyleSheet, Alert } from 'react-native';
import Login from '@atom_design/login';

const LoginVariantsScreen = () => {
  const [loading1, setLoading1] = useState(false);
  const [loading2, setLoading2] = useState(false);

  const simulateLogin = (setLoading) => {
    setLoading(true);
    setTimeout(() => {
      setLoading(false);
      Alert.alert('Logged In!');
    }, 2000);
  };

  return (
    <ScrollView style={styles.container}>
      <Text style={styles.header}>Atom Design - Login Variants</Text>

      {/* Default Moglix Style */}
      <View style={styles.section}>
        <Text style={styles.sectionTitle}>Default (Moglix)</Text>
        <View style={styles.loginWrapper}>
          <Login
            onLogin={() => simulateLogin(setLoading1)}
            isLoading={loading1}
            logoSource={{ uri: 'https://www.moglix.com/assets/img/moglix-logo.png' }}
          />
        </View>
      </View>

      {/* Custom Green Theme */}
      <View style={styles.section}>
        <Text style={styles.sectionTitle}>Custom Theme</Text>
        <View style={styles.loginWrapper}>
          <Login
            onLogin={() => simulateLogin(setLoading2)}
            isLoading={loading2}
            loaderType="spinner"
            primaryColor="#2E7D32"
            secondaryColor="#1565C0"
            buttonText="Sign In"
            buttonIcon="vpn-key"
            title="Secure Login"
            subtitle="Access your enterprise dashboard securely."
            showRequestAccess={false}
          />
        </View>
      </View>

      {/* Disabled State */}
      <View style={styles.section}>
        <Text style={styles.sectionTitle}>Disabled State</Text>
        <View style={styles.loginWrapper}>
          <Login
            onLogin={() => {}}
            disabled
            subtitle="Login is currently unavailable. Please try again later."
            showRequestAccess={false}
          />
        </View>
      </View>
    </ScrollView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#F5F5F5',
  },
  header: {
    fontSize: 24,
    fontWeight: 'bold',
    textAlign: 'center',
    marginVertical: 20,
    color: '#1A1A1A',
  },
  section: {
    marginBottom: 24,
  },
  sectionTitle: {
    fontSize: 16,
    fontWeight: '600',
    marginHorizontal: 16,
    marginBottom: 8,
    color: '#333',
  },
  loginWrapper: {
    height: 350,
  },
});

export default LoginVariantsScreen;

♿ Accessibility

The Login component includes comprehensive accessibility support:

• Login button uses accessibilityRole="button"
• Request access link uses accessibilityRole="link"
• Logo image has accessibilityLabel="Company logo"
• Disabled states are properly announced
• accessibilityHint provides usage instructions

📝 TypeScript

Full TypeScript definitions are included:

import Login, { LoginProps } from '@atom_design/login';

const MyLoginScreen: React.FC = () => {
  const handleLogin = (): void => {
    // Authentication logic
  };

  const props: LoginProps = {
    onLogin: handleLogin,
    isLoading: false,
    primaryColor: '#d9232d',
  };

  return <Login {...props} />;
};

🔧 Available Icons

The buttonIcon prop accepts any MaterialIcons name:

• login (default)
• account-circle
• vpn-key
• security
• fingerprint
• lock
• person

📄 License

MIT © Atom Design

👤 Author

Atom Design Team

Part of the Atom Design System for React Native.