// Import useState hook from React
import { useState } from 'react';
// Import core UI components and utilities from react-native
import {
View, // Container for layout
Text, // Text display
TextInput, // Input field for text
StyleSheet, // For styling components
SafeAreaView, // Ensures content is within safe area boundaries
} from 'react-native';
// Function to evaluate password strength
const getPasswordStrength = (password) => {
// Array of regex conditions to check password criteria
const conditions = [
/\d/, // has digit
/[a-z]/, // has lowercase
/[A-Z]/, // has uppercase
/[@#$%^&*!.,]/, // has special char
/^\S+$/, // no whitespace
];
// Filter conditions that the password passes
const passed = conditions.filter((regex) => regex.test(password));
// Array to store suggestions for improving password
const suggestions = [];
// Add suggestion if password lacks a digit
if (!/\d/.test(password)) suggestions.push('Add at least one digit (0-9)');
// Add suggestion if password lacks a lowercase letter
if (!/[a-z]/.test(password)) suggestions.push('Add a lowercase letter (a-z)');
// Add suggestion if password lacks an uppercase letter
if (!/[A-Z]/.test(password)) suggestions.push('Add an uppercase letter (A-Z)');
// Add suggestion if password lacks a special character
if (!/[@#$%^&*!.,]/.test(password)) suggestions.push('Add a special character (@#$%^&*!)');
// Add suggestion if password contains whitespace
if (!/^\S+$/.test(password)) suggestions.push('Remove any whitespace');
// Number of conditions passed
const strength = passed.length;
// Return password strength details
return {
score: strength, // Number of criteria met
suggestions, // Suggestions for improvement
label: // Strength label based on number of criteria met
strength === 5
? 'Strong'
: strength >= 3
? 'Medium'
: strength > 0
? 'Weak'
: 'Very Weak',
};
};
// Main App component
export default function App() {
// State to store password input
const [password, setPassword] = useState('');
// Destructure password strength details
const { score, label, suggestions } = getPasswordStrength(password);
// Function to get color based on strength label
const getColor = () => {
switch (label) {
case 'Strong':
return 'green'; // Green for strong password
case 'Medium':
return 'orange'; // Orange for medium password
case 'Weak':
return 'red'; // Red for weak password
default:
return 'gray'; // Gray for very weak or default
}
};
// Render UI
return (
<SafeAreaView style={styles.container}>
{/* Title */}
<Text style={styles.title}>Password Validator</Text>
{/* Password input field */}
<TextInput
style={styles.input}
secureTextEntry // Hide input text
placeholder="Enter your password"
value={password}
onChangeText={setPassword} // Update password state on change
/>
{/* Strength meter bar */}
<View
style={[
styles.strengthMeter,
{
backgroundColor: getColor(), // Color based on strength
width: `${(score / 5) * 100}%`, // Width proportional to score
},
]}
/>
{/* Strength label */}
<Text style={[styles.label, { color: getColor() }]}>
Strength: {label}
</Text>
{/* Suggestions box, shown if there are suggestions */}
{suggestions.length > 0 && (
<View style={styles.suggestionBox}>
<Text style={styles.suggestionTitle}>
Suggestions to improve password:
</Text>
{/* List each suggestion */}
{suggestions.map((s, index) => (
<Text key={index} style={styles.suggestionText}>
• {s}
</Text>
))}
</View>
)}
</SafeAreaView>
);
}
// Styles for the components
const styles = StyleSheet.create({
container: {
padding: 24, // Padding around content
flex: 1, // Fill available space
backgroundColor: '#f7f7f7', // Light background color
},
title: {
fontSize: 24, // Large font size
marginBottom: 20, // Space below title
paddingTop: 30, // Space above title
fontWeight: 'bold', // Bold text
textAlign: 'center', // Centered text
},
input: {
borderWidth: 1, // Border thickness
padding: 12, // Padding inside input
fontSize: 16, // Font size
borderRadius: 8, // Rounded corners
borderColor: '#ddd', // Border color
marginBottom: 16, // Space below input
backgroundColor: '#fff', // White background
},
strengthMeter: {
height: 8, // Height of meter bar
borderRadius: 4, // Rounded corners
marginBottom: 8, // Space below meter
},
label: {
fontSize: 16, // Font size
marginBottom: 12, // Space below label
fontWeight: '600', // Semi-bold text
},
suggestionBox: {
backgroundColor: '#fff', // White background
padding: 12, // Padding inside box
borderRadius: 8, // Rounded corners
borderColor: '#eee', // Border color
borderWidth: 1, // Border thickness
},
suggestionTitle: {
fontWeight: 'bold', // Bold text
marginBottom: 6, // Space below title
color: '#333', // Dark text color
},
suggestionText: {
color: '#555', // Slightly lighter text color
fontSize: 14, // Font size
},
});