profile

src/App.tsx

@@ -1,6 +1,4 @@
 import React, {useEffect, Fragment} from 'react';
-
-import {View, Text} from 'react-native';
 import {NavigationContainer} from '@react-navigation/native';
 
 import {Provider, useSelector} from 'react-redux';
@@ -78,6 +76,7 @@ const MainComponent = () => {
   const currentAppStatus = useSelector(
     (state: RootState) => state.nonSaveVariables.appStatus,
   );
+
   return (
     <Fragment>
       <StartHelper />

src/components/MyInput.tsx

@@ -5,7 +5,7 @@ interface MyIconInputProps {
   text: string;
   iconName: string;
   keyboardType?: KeyboardTypeOptions;
-  secureTextEntry?: boolean | undefined;
+  secureTextEntry?: boolean;
   value?: string;
   onChangeText?: (text: string) => void;
   disableContainer?: boolean;
@@ -29,13 +29,12 @@ export function MyIconInput({text, iconName, keyboardType, secureTextEntry, valu
             backgroundColor: '#212137',
             height: 40,
             borderRadius: 10,
-            paddingLeft: 10,
+            paddingLeft: 10
           }}
           keyboardType={keyboardType}
           secureTextEntry={secureTextEntry}
           value={value}
           onChangeText={onChangeText}
-          
         />
       </View>
     </View>

src/components/MyScreenContainer.tsx

@@ -17,25 +17,15 @@ export function MyScreenContainer({
     flex: 1,
     paddingLeft: 20,
     paddingRight: 20,
-  }
+  };
-
-  const ScreenView = () => (
-    <View
-      style={[
-        style,
-        !scrollView && containerStyle,
-      ]}>
-      {children}
-    </View>
-  );
 
   if (scrollView) {
     return (
       <ScrollView style={containerStyle}>
-        <ScreenView />
+        <View style={[style, !scrollView && containerStyle]}>{children}</View>
       </ScrollView>
     );
   }
 
-  return <ScreenView />;
+  return <View style={[style, !scrollView && containerStyle]}>{children}</View>;
 }

src/navigation/registration/registration.tsx

@@ -20,7 +20,7 @@ import AppleLogo from '@assets/apple-logo.png';
 import Logo from '@assets/logo.png';
 
 import {MyDividerWithText} from '@components/MyDivider';
-import {MyButton, MyImageButton} from '@components/MyButton';
+import {MyButton, MyIconButton, MyImageButton} from '@components/MyButton';
 import {MyClickableText} from '@components/MyClickableText';
 import {OpenURL} from '@helper/linking';
 import {Constants} from '@utils/utils';

src/navigation/tabs/main/ProfileTab.tsx

@@ -74,7 +74,7 @@ export default function ProfileTab() {
         name="UpdateUsername"
         options={{
           animation: 'slide_from_right',
-          title: 'Update Account Name',
+          title: 'Update Username',
           headerShown: true,
           headerStyle: {backgroundColor: '#212137'},
           headerTitleAlign: 'center',

src/pages/profile/profile.tsx

@@ -1,5 +1,5 @@
 import {MyScreenContainer} from '@components/MyScreenContainer';
-import {Image, ScrollView, TouchableOpacity} from 'react-native';
+import {Image, ScrollView, TextInput, TouchableOpacity} from 'react-native';
 import {Text, View} from 'react-native';
 
 import Avatar from '@assets/profile.png';
@@ -10,7 +10,10 @@ import {useNavigation} from '@react-navigation/native';
 import {ProfileScreenNavigationProp} from '@navigation/tabs/main/ProfileTab';
 import {MyIconInput} from '@components/MyInput';
 import {useEffect, useState} from 'react';
-import {RootScreenNavigationProp} from '@navigation/navigation';
+import {
+  RootScreenNavigationProp,
+  RootStackNavigatorParamList,
+} from '@navigation/navigation';
 
 function UserAvatar() {
   return (
@@ -80,6 +83,8 @@ function Statistic({value, title}: StatisticProps) {
 export function ProfileSettings() {
   const navigation = useNavigation<ProfileScreenNavigationProp>();
 
+  const rootNavigation = useNavigation<RootScreenNavigationProp>();
+
   return (
     <ScrollView>
       <MyScreenContainer
@@ -133,7 +138,13 @@ export function ProfileSettings() {
             onPress={() => navigation.navigate('About')}
           />
 
-          <SettingsItem icon="logout" title="Logout" />
+          <SettingsItem
+            icon="logout"
+            title="Logout"
+            onPress={() =>
+              rootNavigation.navigate('Registration', {screen: 'LoginPreview'})
+            }
+          />
         </SettingsItemContainer>
       </MyScreenContainer>
     </ScrollView>
@@ -208,16 +219,17 @@ export function UpdateUsername() {
   const [newUsername, setNewUsername] = useState(username);
 
   useEffect(() => {
-    const changed = username === newUsername;
+    const changed = username !== newUsername;
 
     navigation.setOptions({
-      headerRight: () => (
+      headerRight: () =>
-        <TouchableOpacity
+        changed ? (
-          onPress={() => navigation.goBack()}
+          <TouchableOpacity onPress={() => navigation.goBack()}>
-          disabled={changed}>
+            <MyIcon name="done" size={24} color={!changed ? '#fff' : '#ccc'} />
-          <MyIcon name="done" size={24} color={!changed ? '#fff' : '#ccc'} />
+          </TouchableOpacity>
-        </TouchableOpacity>
+        ) : (
-      ),
+          <></>
+        ),
     });
   }, [navigation, newUsername]);
 
@@ -227,7 +239,9 @@ export function UpdateUsername() {
         iconName="person"
         text="USERNAME"
         value={newUsername}
-        onChangeText={text => setNewUsername(text)}
+        onChangeText={text => {
+          setNewUsername(text);
+        }}
       />
       <Text style={{marginTop: 12}}>You can use a-z, 0-9 and underscores.</Text>
       <Text>Minimum length is 5 characters.</Text>
@@ -238,18 +252,31 @@ export function UpdateUsername() {
 export function UpdatePassword() {
   const navigation = useNavigation<RootScreenNavigationProp>();
 
+  const [currentPassword, setCurrentPassword] = useState('');
+  const [newPassword, setNewPassword] = useState('');
+  const [repeatNewPassword, setRepeatNewPassword] = useState('');
+
   useEffect(() => {
+    const passwordChanged =
+      currentPassword.length > 0 &&
+      newPassword.length > 0 &&
+      repeatNewPassword.length > 0 &&
+      newPassword === repeatNewPassword;
+
     navigation.setOptions({
-      headerRight: () => (
+      headerRight: () =>
-        <TouchableOpacity
+        passwordChanged ? (
-          onPress={() =>
+          <TouchableOpacity
-            navigation.navigate('Registration', {screen: 'LoginPreview'})
+            onPress={() =>
-          }>
+              navigation.navigate('Registration', {screen: 'LoginPreview'})
-          <MyIcon name="done" size={24} color="#fff" />
+            }>
-        </TouchableOpacity>
+            <MyIcon name="done" size={24} color="#fff" />
-      ),
+          </TouchableOpacity>
+        ) : (
+          <></>
+        ),
     });
-  }, [navigation]);
+  }, [navigation, currentPassword, newPassword, repeatNewPassword]);
 
   return (
     <MyScreenContainer style={{paddingTop: 20}} scrollView>
@@ -263,21 +290,24 @@ export function UpdatePassword() {
           iconName="lock"
           text="CURRENT PASSWORD"
           secureTextEntry={true}
-          value="123456"
+          value={currentPassword}
+          onChangeText={text => setCurrentPassword(text)}
           disableContainer
         />
         <MyIconInput
           iconName="lock"
           text="NEW PASSWORD"
           secureTextEntry={true}
-          value="123456"
+          value={newPassword}
+          onChangeText={text => setNewPassword(text)}
           disableContainer
         />
         <MyIconInput
           iconName="lock"
           text="REPEAT NEW PASSWORD"
           secureTextEntry={true}
-          value="123456"
+          value={repeatNewPassword}
+          onChangeText={text => setRepeatNewPassword(text)}
           disableContainer
         />
       </View>