Fix/mobile

frontend/occupi-mobile4/screens/Login/CreatePassword.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useRef, useState, useEffect } from 'react';
 import {
   VStack,
   Box,
@@ -14,12 +14,14 @@ import {
   Input,
   useToast,
   Toast,
+  Icon,
   InputField,
   ToastTitle,
   FormControlHelper,
   FormControlError,
   FormControlErrorIcon,
   FormControlErrorText,
+  ChevronLeftIcon,
   InputIcon,
   InputSlot,
   ScrollView,
@@ -28,15 +30,16 @@ import {
 } from '@gluestack-ui/themed';
 import { AlertTriangle } from 'lucide-react-native';
 import { LinearGradient } from 'expo-linear-gradient';
-import Logo from './assets/images/Occupi/file.png';
+import Logo from '../../screens/Login/assets/images/Occupi/Occupi-gradient.png';
 import { useForm, Controller } from 'react-hook-form';
 import { z } from 'zod';
-import { Keyboard } from 'react-native';
+import { Keyboard,StyleSheet, TextInput,Animated, Easing } from 'react-native';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { widthPercentageToDP as wp, heightPercentageToDP as hp } from 'react-native-responsive-screen';
 import GuestLayout from '../../layouts/GuestLayout';
 import { router } from 'expo-router';
 import { styled } from '@gluestack-style/react';
+import StyledExpoRouterLink from '../../components/StyledExpoRouterLink';
 
 const StyledImage = styled(Image, {
   props: {
@@ -165,14 +168,42 @@ export default function CreatePassword() {
   });
 
   function ScreenText() {
+    const spinValue = useRef(new Animated.Value(0)).current;
+
+    useEffect(() => {
+      Animated.loop(
+        Animated.timing(spinValue, {
+          toValue: 2,
+          duration: 10000,
+          easing: Easing.linear,
+          useNativeDriver: true,
+        })
+      ).start();
+    }, []);
+
+    const spin = spinValue.interpolate({
+      inputRange: [0, 1],
+      outputRange: ['0deg', '360deg'],
+    });
+
     return (
       <VStack space="md">
+        <StyledExpoRouterLink href="/login">
+        <Icon
+          as={ChevronLeftIcon}
+          color="$textLight800"
+          m="$0" w="$10" h="$16"
+          sx={{ _dark: { color: '$textDark800' } }}
+        />
+      </StyledExpoRouterLink>
          <HStack space="md" alignItems="center" justifyContent="center">
+         <Animated.View style={{ transform: [{ rotate: spin }] }}>
           <Image
             alt="logo"
             source={Logo}
             style={{ width: wp('27%'), height: wp('27%') }}
           />
+           </Animated.View>
         </HStack>
         <Heading
           fontSize={wp('6%')}
@@ -190,25 +221,7 @@ export default function CreatePassword() {
     );
   }
 
-  function WebSideContainer() {
-    return (
-      <Center
-        flex={1}
-        bg="$primary500"
-        sx={{
-          _dark: { bg: '$primary500' },
-        }}
-      >
-        <StyledImage
-          w="$80"
-          h="$10"
-          alt="Gluestack-ui pro"
-          resizeMode="contain"
-          source={require('./assets/images/gluestackUiProLogo_web_light.svg')}
-        />
-      </Center>
-    );
-  }
+
   return (
     <GuestLayout>
       <Box
@@ -224,7 +237,6 @@ export default function CreatePassword() {
         }}
         flex={1}
       >
-        <WebSideContainer />
       </Box>
       <ScrollView
         contentContainerStyle={{

frontend/occupi-mobile4/screens/Login/ForgotPassword.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useRef, useState, useEffect }  from 'react';
 import { LinearGradient } from 'expo-linear-gradient';
 import {
   FormControl,
@@ -23,11 +23,11 @@ import {
   FormControlLabelText,
 } from '@gluestack-ui/themed';
 import GuestLayout from '../../layouts/GuestLayout';
-import Logo from '../../screens/Login/assets/images/Occupi/file.png';
+import Logo from '../../screens/Login/assets/images/Occupi/Occupi-gradient.png';
 import { useForm, Controller } from 'react-hook-form';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { z } from 'zod';
-import { Keyboard, StyleSheet } from 'react-native';
+import { Keyboard, StyleSheet, TextInput,Animated, Easing } from 'react-native';
 import { widthPercentageToDP as wp, heightPercentageToDP as hp } from 'react-native-responsive-screen';
 import { AlertTriangle } from 'lucide-react-native';
 import StyledExpoRouterLink from '../../components/StyledExpoRouterLink';
@@ -130,9 +130,27 @@ export default function ForgotPassword() {
     }
   });
 
+  const spinValue = useRef(new Animated.Value(0)).current;
+
+  useEffect(() => {
+    Animated.loop(
+      Animated.timing(spinValue, {
+        toValue: 2,
+        duration: 10000,
+        easing: Easing.linear,
+        useNativeDriver: true,
+      })
+    ).start();
+  }, []);
+
+  const spin = spinValue.interpolate({
+    inputRange: [0, 1],
+    outputRange: ['0deg', '360deg'],
+  });
+
   return (
     <GuestLayout>
-      <StyledExpoRouterLink bg="$white" href="..">
+      <StyledExpoRouterLink  href="/login">
         <Icon
           as={ChevronLeftIcon}
           color="$textLight800"
@@ -146,15 +164,16 @@ export default function ForgotPassword() {
           '_dark': { bg: '$backgroundDark900' },
         }}
         flex={1}
-        bg="white"
       >
         <Box sx={{ '$md': { display: 'none' } }}>
           <HStack space="$md" alignItems="center" justifyContent="center">
+          <Animated.View style={{ transform: [{ rotate: spin }] }}>
             <Image
               alt="logo"
               source={Logo}
               style={{ width: 150, height: 150 }}
             />
+             </Animated.View>
           </HStack>
         </Box>
         <Box sx={{ '$md': { display: 'flex' } }} display="none" flex={1}>
@@ -211,7 +230,7 @@ export default function ForgotPassword() {
 
           <FormControl
             my="$8"
-            isInvalid={(!!errors.email || isEmailFocused) && !!errors.email}
+            isInvalid={(!!errors.email ) && !!errors.email}
             isRequired={true}
           >
             <FormControlLabel mb="$1">

frontend/occupi-mobile4/screens/Login/OtpVerification.tsx

@@ -1,12 +1,12 @@
 import React, { useRef, useState, useEffect } from 'react';
-import { View, StyleSheet, TextInput } from 'react-native';
+import { View, StyleSheet, TextInput,Animated, Easing } from 'react-native';
 import { VStack, Box, HStack, Image, Heading, Toast, useToast, ToastTitle, Text, } from '@gluestack-ui/themed';
 // import { useForm } from 'react-hook-form';
 import { z } from 'zod';
 // import { zodResolver } from '@hookform/resolvers/zod';
 import * as SecureStore from 'expo-secure-store';
 import { useRouter, useLocalSearchParams } from 'expo-router';
-import Logo from './assets/images/Occupi/file.png';
+import Logo from '../../screens/Login/assets/images/Occupi/Occupi-gradient.png';
 import StyledExpoRouterLink from '@/components/StyledExpoRouterLink';
 import { widthPercentageToDP as wp, heightPercentageToDP as hp } from 'react-native-responsive-screen';
 import { LinearGradient } from 'expo-linear-gradient';
@@ -21,7 +21,7 @@ type OTPSchemaType = z.infer<typeof OTPSchema>;
 const OTPVerification = () => {
   const [email, setEmail] = useState("");
   // const email = 'kamo@gmail.com';
-  const [remainingTime, setRemainingTime] = useState(60); // 1 minute
+  const [remainingTime, setRemainingTime] = useState(10); // 1 minute
   const otpSent = useState(false);
   const timerRef = useRef<NodeJS.Timeout | null>(null);
   const [loading, setLoading] = useState(false);
@@ -102,7 +102,10 @@ const OTPVerification = () => {
       locations={[0.02, 0.31, 0.67, 0.97]}
       start={[0, 1]}
       end={[1, 0]}
-      style={styles.buttonContainer}
+      style={{ 
+        ...styles.buttonContainer, 
+        marginTop: 16, 
+      }}
     >
       <Heading style={styles.buttonText} onPress={onPress}>
         {text}
@@ -115,7 +118,7 @@ const OTPVerification = () => {
       bg="$backgroundLight0"
       sx={{
         '@md': {
-          p: '$8',
+          p: '$5',
         },
         '_dark': {
           bg: '$backgroundDark800',
@@ -124,12 +127,16 @@ const OTPVerification = () => {
       py="$8"
       px="$4"
       flex={1}
+       mt="$4"
+          mb="$4"
     >
       <MainText email={email} />
-      <VStack space="md">
+      <VStack >
         <OTPInput otp={otp} setOtp={setOtp} />
-        <Text>Entered OTP: {otp.join('')}</Text>
-        <Text fontSize="$md">{remainingTime} seconds remaining</Text>
+        <HStack justifyContent="space-between" width="100%">
+          <Text>Entered OTP: {otp.join('')}</Text>
+          {/* <Text fontSize="$sm">{remainingTime} minutes remaining</Text> */}
+        </HStack>
         {loading ? (
           <GradientButton
             onPress={onSubmit}
@@ -141,7 +148,6 @@ const OTPVerification = () => {
             text="Verify"
           />
         )}
-
         <GradientButton text="Resend OTP" />
       </VStack>
       <AccountLink />
@@ -150,11 +156,30 @@ const OTPVerification = () => {
 };
 
 const MainText = (email) => {
-  // console.log("email",email.email);
+  const spinValue = useRef(new Animated.Value(0)).current;
+
+  useEffect(() => {
+    Animated.loop(
+      Animated.timing(spinValue, {
+        toValue: 2,
+        duration: 10000,
+        easing: Easing.linear,
+        useNativeDriver: true,
+      })
+    ).start();
+  }, []);
+
+  const spin = spinValue.interpolate({
+    inputRange: [0, 1],
+    outputRange: ['0deg', '360deg'],
+  });
+
   return (
     <VStack space="xs">
       <HStack space="md" alignItems="center" justifyContent="center" m="$12">
+      <Animated.View style={{ transform: [{ rotate: spin }] }}>
         <Image source={Logo} alt="occupi" style={{ width: wp('30%'), height: wp('30%') }} />
+        </Animated.View>
       </HStack>
       <Heading
         fontSize={wp('8%')}
@@ -169,7 +194,8 @@ const MainText = (email) => {
       <HStack space="sm" alignItems="center">
         <Text
           color="$black"
-          mt="$2"
+          mt="$4"
+          mb="$4"
           sx={{
             '@md': {
               pb: '$12',
@@ -181,7 +207,7 @@ const MainText = (email) => {
           fontSize={wp('5%')}
           fontWeight="$light"
         >
-          We have sent the OTP code to {email.email}
+          We have sent the OTP code to <Text fontWeight="bold">{email.email}</Text>
         </Text>
       </HStack>
     </VStack>
@@ -196,14 +222,13 @@ function AccountLink() {
           mt: '$40',
         },
       }}
-      mt="auto"
-      space="xs"
+      mt="$5"
       alignItems="center"
       justifyContent="center"
     >
       <Text
         color="$textLight800"
-        mt="$4"
+
         sx={{
           _dark: {
             color: '$textDark400',
@@ -214,7 +239,7 @@ function AccountLink() {
         Already have an account?
       </Text>
       <StyledExpoRouterLink href="/login">
-        <Text style={{ color: '#7FFF00', fontSize: wp('4%') }}>
+        <Text style={{ color: '#7FFF00', fontSize: wp('4%') }} >
           Login
         </Text>
       </StyledExpoRouterLink>