// Import necessary hooks and components from React and React Native
import { useState } from 'react';
import {
View, // Container component for layout
Text, // For displaying text
TextInput, // For user input fields
TouchableOpacity, // For clickable buttons
StyleSheet, // For styling components
Clipboard, // For copying text to clipboard
Switch // For toggle switches
} from 'react-native';
// Main App component
const App = () => {
// State to store the generated password
const [password, setPassword] = useState('');
// State to store the desired password length (as string for TextInput)
const [passwordLength, setPasswordLength] = useState('12');
// State to determine if symbols should be included
const [useSymbols, setUseSymbols] = useState(true);
// State to determine if numbers should be included
const [useNumbers, setUseNumbers] = useState(true);
// State to determine if lowercase letters should be included
const [useLowerCase, setUseLowerCase] = useState(true);
// State to determine if uppercase letters should be included
const [useUpperCase, setUseUpperCase] = useState(true);
// State to store the success message after copying password
const [successMessage, setSuccessMessage] = useState('');
// Function to generate a random password based on user preferences
const generatePassword = () => {
let charset = ''; // Initialize character set
let newPassword = ''; // Initialize new password string
// Add symbols to charset if selected
if (useSymbols) charset += '!@#$%^&*()';
// Add numbers to charset if selected
if (useNumbers) charset += '0123456789';
// Add lowercase letters to charset if selected
if (useLowerCase) charset += 'abcdefghijklmnopqrstuvwxyz';
// Add uppercase letters to charset if selected
if (useUpperCase) charset += 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
// Loop to generate password of desired length
for (let i = 0; i < parseInt(passwordLength); i++) {
// Append a random character from charset to newPassword
newPassword +=
charset.charAt(Math.floor(
Math.random() * charset.length));
}
// Update password state with the newly generated password
setPassword(newPassword);
};
// Function to copy the generated password to clipboard
const copyToClipboard = () => {
Clipboard.setString(password); // Copy password to clipboard
setSuccessMessage('Password copied to clipboard!'); // Show success message
setTimeout(() => setSuccessMessage(''), 2000); // Hide message after 2 seconds
};
// Render the UI
return (
<View style={styles.container}>
{/* App header */}
<Text style={styles.header}>
Geeksforgeeks
</Text>
{/* Sub-header */}
<Text style={styles.subHeader}>
Random Password Generator
</Text>
{/* Input for password length */}
<View style={styles.inputContainer}>
<Text style={styles.label}>
Password Length:
</Text>
<TextInput
keyboardType="numeric" // Only allow numeric input
value={passwordLength} // Bind to passwordLength state
onChangeText={(text) => setPasswordLength(text)} // Update state on change
style={styles.input}
/>
</View>
{/* Switch for including symbols */}
<View style={styles.checkbox}>
<Switch
value={useSymbols} // Bind to useSymbols state
onValueChange={() => setUseSymbols(!useSymbols)} // Toggle state
/>
<Text style={styles.checkboxLabel}>
Symbols
</Text>
</View>
{/* Switch for including numbers */}
<View style={styles.checkbox}>
<Switch
value={useNumbers} // Bind to useNumbers state
onValueChange={() => setUseNumbers(!useNumbers)} // Toggle state
/>
<Text style={styles.checkboxLabel}>
Numbers
</Text>
</View>
{/* Switch for including lowercase letters */}
<View style={styles.checkbox}>
<Switch
value={useLowerCase} // Bind to useLowerCase state
onValueChange={() => setUseLowerCase(!useLowerCase)} // Toggle state
/>
<Text style={styles.checkboxLabel}>
LowerCase
</Text>
</View>
{/* Switch for including uppercase letters */}
<View style={styles.checkbox}>
<Switch
value={useUpperCase} // Bind to useUpperCase state
onValueChange={() => setUseUpperCase(!useUpperCase)} // Toggle state
/>
<Text style={styles.checkboxLabel}>UpperCase</Text>
</View>
{/* Button to generate password */}
<TouchableOpacity style={styles.button}
onPress={generatePassword}>
<Text style={styles.buttonText}>
Generate Password
</Text>
</TouchableOpacity>
{/* Display generated password and copy button if password exists */}
{password !== '' && (
<View style={styles.inputContainer}>
<Text style={styles.label}>
Generated Password:
</Text>
<TextInput value={password}
style={styles.input} />
<TouchableOpacity style={styles.copyButton}
onPress={copyToClipboard}>
<Text style={styles.buttonText}>
Copy
</Text>
</TouchableOpacity>
</View>
)}
{/* Show success message if present */}
{successMessage !== '' &&
<Text style={styles.successMessage}>
{successMessage}
</Text>}
</View>
);
};
// Styles for the components
const styles = StyleSheet.create({
container: {
margin: 20, // Outer margin
marginTop: 100, // Top margin
padding: 20, // Inner padding
borderColor: '#ccc', // Border color
borderRadius: 8, // Rounded corners
borderWidth: 1, // Border width
shadowColor: 'grey', // Shadow color
shadowOffset: { width: 0, height: 0 }, // Shadow offset
shadowOpacity: 1, // Shadow opacity
shadowRadius: 10, // Shadow radius
elevation: 5, // Android shadow
backgroundColor: '#fff', // Background color
},
header: {
color: 'green', // Text color
textAlign: 'center', // Centered text
fontSize: 30, // Font size
marginBottom: 10, // Bottom margin
},
subHeader: {
textAlign: 'center', // Centered text
fontSize: 18, // Font size
marginBottom: 10, // Bottom margin
},
inputContainer: {
flexDirection: 'row', // Horizontal layout
alignItems: 'center', // Vertically center items
marginBottom: 10, // Bottom margin
},
label: {
flex: 1, // Take up 1 part of available space
fontSize: 18, // Font size
},
input: {
flex: 2, // Take up 2 parts of available space
padding: 10, // Inner padding
borderWidth: 1, // Border width
borderColor: '#ccc', // Border color
borderRadius: 8, // Rounded corners
fontSize: 16, // Font size
},
checkboxLabel: {
fontSize: 20, // Font size
},
button: {
padding: 13, // Inner padding
backgroundColor: '#007bff', // Button background color
color: '#fff', // Text color
borderRadius: 5, // Rounded corners
overflow: 'hidden', // Hide overflow
textAlign: 'center', // Centered text
fontSize: 16, // Font size
fontWeight: 'bold', // Bold text
margin: 15, // Margin
},
buttonText: {
color: '#fff', // Text color
fontSize: 16, // Font size
fontWeight: 'bold', // Bold text
},
copyButton: {
marginLeft: 10, // Left margin
backgroundColor: '#007bff', // Button background color
color: '#fff', // Text color
borderRadius: 5, // Rounded corners
overflow: 'hidden', // Hide overflow
padding: 10, // Inner padding
fontSize: 14, // Font size
},
successMessage: {
color: 'green', // Text color
textAlign: 'center', // Centered text
fontSize: 20, // Font size
},
});
// Export the App component as default
export default App;