1 files changed, 90 insertions, 0 deletions
diff --git a/components/Login.jsx b/components/Login.jsx
new file mode 100644
index 0000000..4c6ffb0
--- /dev/null
+++ b/components/Login.jsx
@@ -0,0 +1,90 @@
+import { StyleSheet, Text, TextInput, Pressable, View } from 'react-native';
+import { useState } from 'react';
+
+const Login = ({ login }) => {
+  const [email, setEmail] = useState('');
+  const [pass, setPass] = useState('');
+  const disabled = (e, p) => !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(e) || p.length < 6;
+
+  return (
+    <View style={styles.container}>
+      <Text style={styles.title}>Login to Notes</Text>
+      <Text style={styles.text}>Account can be created through apps.pruss.it website</Text>
+      <TextInput
+        style={styles.input}
+        autoComplete="email"
+        placeholder="Email"
+        placeholderTextColor="#BBB"
+        keyboardType="email-address"
+        returnKeyType="next"
+        autoComplete="email"
+        textContentType="emailAddress"
+        value={email}
+        onChange={e => setEmail(e.nativeEvent.text.toLowerCase())}
+      />
+      <TextInput
+        style={styles.input}
+        autoComplete="password"
+        placeholder="Password"
+        placeholderTextColor="#BBB"
+        returnKeyType="next"
+        autoComplete="password-new"
+        secureTextEntry={true}
+        textContentType="newPassword"
+        value={pass}
+        onChange={e => setPass(e.nativeEvent.text)}
+      />
+      <Pressable
+        onPress={() => login(email, pass)}
+        style={{...styles.button, opacity: disabled(email, pass) ? .3 : 1}}
+        disabled={disabled(email, pass)}
+      >
+        <Text style={styles.buttonText}>Login</Text>
+      </Pressable>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    height: '100%'
+  },
+  title: {
+    color: 'white',
+    fontSize: 26,
+    marginBottom: 40,
+  },
+  text: {
+    color: 'white',
+    marginBottom: 50,
+  },
+  input: {
+    height: 50,
+    width: 280,
+    padding: 10,
+    marginBottom: 20,
+    color: 'white',
+    backgroundColor: '#444',
+    borderColor: '#aaa',
+    borderWidth: 1,
+    borderStyle: 'solid',
+    borderRadius: 10,
+  },
+  button: {
+    width: 100,
+    height: 40,
+    backgroundColor: '#666',
+    borderRadius: 5,
+    marginTop: 40,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  buttonText: {
+    color: 'white',
+  }
+});
+
+export default Login;