added loader

1 files changed, 41 insertions, 33 deletions

diff --git a/components/Login.jsx b/components/Login.jsx
index db4b15b..1a6ef92 100644
--- a/components/Login.jsx
+++ b/components/Login.jsx
@@ -1,47 +1,55 @@
 import { StyleSheet, Text, TextInput, Pressable, View } from 'react-native'
 import { useState } from 'react'
 import { handleLogin } from '../utils/helpers'
+import Loader from './Loader'
 
 const Login = ({ setSession, showError }) => {
   const [email, setEmail] = useState('');
   const [password, setPassword] = useState('');
   const disabled = (e, p) => !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(e) || p.length < 6;
+  const [loading, setLoading ] = useState(false)
 
   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={password}
-        onChange={e => setPassword(e.nativeEvent.text)}
-      />
-      <Pressable
-        onPress={() => handleLogin({ email, password, setSession, showError })}
-        style={{...styles.button, opacity: disabled(email, password) ? .3 : 1}}
-        disabled={disabled(email, password)}
-      >
-        <Text style={styles.buttonText}>Login</Text>
-      </Pressable>
+      {loading
+        ? <Loader style={{ width: 100 }} text="Signing in..." />
+        : (
+          <>
+          <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={password}
+            onChange={e => setPassword(e.nativeEvent.text)}
+          />
+          <Pressable
+            onPress={() => handleLogin({ email, password, setSession, setLoading, showError })}
+            style={{...styles.button, opacity: disabled(email, password) ? .3 : 1}}
+            disabled={disabled(email, password)}
+          >
+            <Text style={styles.buttonText}>Login</Text>
+          </Pressable>
+        </>
+      )}
     </View>
   );
 };