From f965af6b713902a0f77f49bd37da8e41343e1467 Mon Sep 17 00:00:00 2001
From: Deepak Sangle <sangleds20@iitk.ac.in>
Date: Wed, 13 Dec 2023 21:17:07 +0530
Subject: [PATCH] loader at login and register added

---
 mobile-client/src/screens/HomePage.js     |  5 ++++-
 mobile-client/src/screens/Login.js        |  9 ++++++++-
 mobile-client/src/screens/Registration.js | 11 +++++++++++
 mobile-client/src/styles/home.js          |  7 +++++++
 mobile-client/src/styles/login.js         | 12 ++++++++++++
 5 files changed, 42 insertions(+), 2 deletions(-)

diff --git a/mobile-client/src/screens/HomePage.js b/mobile-client/src/screens/HomePage.js
index bed21f7..3268f29 100644
--- a/mobile-client/src/screens/HomePage.js
+++ b/mobile-client/src/screens/HomePage.js
@@ -10,6 +10,7 @@ import {
   TouchableOpacity,
   Easing,
   Keyboard,
+  ActivityIndicator,
   ScrollView,
   ImageBackground,
 } from "react-native";
@@ -304,7 +305,9 @@ const HomePage = ({ route, navigation }) => {
                   {events!==undefined && <RenderAllEntries />}
               </View>
           </View>}
-
+          {selectedTab===1 && secondLoading && <View style={styles.loadingView}>
+            <ActivityIndicator size="large" color={PRIMARY_COLOR} />
+          </View>}
 
         </ScrollView>
         
diff --git a/mobile-client/src/screens/Login.js b/mobile-client/src/screens/Login.js
index 73d043f..8a32d7f 100644
--- a/mobile-client/src/screens/Login.js
+++ b/mobile-client/src/screens/Login.js
@@ -1,11 +1,12 @@
 import React, { Component, useState, useRef } from 'react';
-import { Linking, View, Text, StyleSheet, TextInput, Button, TouchableHighlight, TouchableOpacity, Image, ScrollView, ImageBackground } from 'react-native';
+import { Linking, View, Text, StyleSheet, ActivityIndicator, TextInput, Button, TouchableHighlight, TouchableOpacity, Image, ScrollView, ImageBackground } from 'react-native';
 import styles from '../styles/login';
 
 const Login = ({navigation}) => {
 
   const [name, setName] = useState('');
   const [passcode, setPasscode] = useState(['','','','']);
+  const [loading, setLoading] = useState(false);
 
   const {BASE_URI, PRIMARY_COLOR} = require('../constant.js');
 
@@ -13,6 +14,7 @@ const Login = ({navigation}) => {
 
   const login = async () => {
     try{
+      setLoading(true);
       const res = await fetch(`${BASE_URI}/login`, {
         method : 'POST',
         headers: {
@@ -26,6 +28,7 @@ const Login = ({navigation}) => {
         })
       });
       const data = await res.json();
+      setLoading(false);
       if(data.success === true){
         navigation.navigate('/', {state : data.data});
       }
@@ -35,6 +38,7 @@ const Login = ({navigation}) => {
     }
     catch(e){
       alert(e.response.data.message);
+      setLoading(false);
     }
   }
 
@@ -117,6 +121,9 @@ const Login = ({navigation}) => {
 
         </View>
       </ImageBackground>
+      {loading && <View style={styles.loadingView}>
+        <ActivityIndicator size="large" color={PRIMARY_COLOR} />
+      </View>}
     </ScrollView>
   )
 }
diff --git a/mobile-client/src/screens/Registration.js b/mobile-client/src/screens/Registration.js
index 33dc5db..32ac438 100644
--- a/mobile-client/src/screens/Registration.js
+++ b/mobile-client/src/screens/Registration.js
@@ -6,6 +6,7 @@ import {
   TextInput,
   Button,
   TouchableHighlight,
+  ActivityIndicator,
   TouchableOpacity,
   Image,
   ScrollView,
@@ -22,6 +23,7 @@ const Registration = ({ navigation }) => {
   const [isAvailable, setIsAvailable] = useState(true);
   const [usersNames, setUsersNames] = useState([]);
   const [name, setName] = useState("");
+  const [loading, setLoading] = useState(false);
   const [passcode, setPasscode] = useState("");
   const [cpasscode, setCpasscode] = useState("");
   
@@ -35,6 +37,7 @@ const Registration = ({ navigation }) => {
         alert("You have to make your password of exactly 4 digit long");
         return;
       }
+      setLoading(true);
       const res = await fetch(`${BASE_URI}/register`, {
         method: "POST",
         credentials : 'include',
@@ -49,12 +52,14 @@ const Registration = ({ navigation }) => {
         }),
       });
       const data = await res.json();
+      setLoading(false);
       if (data.success === true) {
         navigation.navigate("/login");
       } else {
         alert(data.message);
       }
     } catch (e) {
+      setLoading(false);
       alert(e.response.data.message);
     }
   };
@@ -66,6 +71,9 @@ const Registration = ({ navigation }) => {
       return;
     } else if (isAvailable && name !== "") {
       saveName();
+    } else if (!isAvailable) {
+      alert("Username is not available");
+      return;
     }
   }
 
@@ -194,6 +202,9 @@ const Registration = ({ navigation }) => {
           </View>
         </View>
       </ImageBackground>
+      {loading && <View style={styles.loadingView}>
+        <ActivityIndicator size="large" color={PRIMARY_COLOR} />
+      </View>}
     </ScrollView>
   );
 };
diff --git a/mobile-client/src/styles/home.js b/mobile-client/src/styles/home.js
index e21d7e7..177faa3 100644
--- a/mobile-client/src/styles/home.js
+++ b/mobile-client/src/styles/home.js
@@ -55,6 +55,13 @@ const styles = StyleSheet.create({
   entry: { 
     textAlign: "center" 
   },
+  loadingView : {
+    transform : "scale(1.5)",
+    display : "flex", 
+    height : HEIGHT,
+    justifyContent : "center", 
+    alignItems : "center"
+  },
   entryDate: { 
     margin: 0,
     display : "flex",
diff --git a/mobile-client/src/styles/login.js b/mobile-client/src/styles/login.js
index fc5d03f..684dc06 100644
--- a/mobile-client/src/styles/login.js
+++ b/mobile-client/src/styles/login.js
@@ -18,6 +18,18 @@ const styles = StyleSheet.create({
     marginBottom : 10,
     fontFamily: "Inter_900Black"
   },
+  loadingView : {
+    transform : 'scale(1.5)',
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    top: 0,
+    backgroundColor : "black",
+    opacity : 0.7,
+    bottom: 0,
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
   description: {
     fontFamily: "Nunito_400Regular",
     color : PRIMARY_COLOR,