[UPD] separated some windows and added the form to change the password
This commit is contained in:
Chloé CHAUVIN
committed by
Clément Le Bihan
Clément Le Bihan
parent
ec4ee5b94a
commit
185f415e8d
@@ -0,0 +1,36 @@
|
|||||||
|
import React from "react";
|
||||||
|
import { View } from 'react-native';
|
||||||
|
import { Center, Button, Text, Switch, Heading } from "native-base";
|
||||||
|
import { translate } from "../../i18n/i18n";
|
||||||
|
|
||||||
|
const NotificationsView = ({navigation}) => {
|
||||||
|
return (
|
||||||
|
<Center style={{ flex: 1, justifyContent: 'center' }}>
|
||||||
|
|
||||||
|
<Heading style={{ textAlign: "center" }}>{ translate('notifBtn')}</Heading>
|
||||||
|
<Button variant='outline' style={{ margin: 10}} onPress={() => navigation.navigate('Settings')} >{ translate('backBtn') }</Button>
|
||||||
|
|
||||||
|
<View style={{margin: 20}} >
|
||||||
|
<Text style={{ textAlign: "center" }}>Push notifications</Text>
|
||||||
|
<Switch style={{ alignSelf: 'center', margin: 10 }} colorScheme="primary"/>
|
||||||
|
</View>
|
||||||
|
|
||||||
|
<View style={{margin: 20}}>
|
||||||
|
<Text style={{ textAlign: "center" }}>Email notifications</Text>
|
||||||
|
<Switch style={{ alignSelf: 'center', margin: 10 }} colorScheme="primary"/>
|
||||||
|
</View>
|
||||||
|
|
||||||
|
<View style={{margin: 20}}>
|
||||||
|
<Text style={{ textAlign: "center" }}>Training reminder</Text>
|
||||||
|
<Switch style={{ alignSelf: 'center', margin: 10 }} colorScheme="primary"/>
|
||||||
|
</View>
|
||||||
|
|
||||||
|
<View style={{margin: 20}}>
|
||||||
|
<Text style={{ textAlign: "center" }}>New songs</Text>
|
||||||
|
<Switch style={{ alignSelf: 'center', margin: 10 }} colorScheme="primary"/>
|
||||||
|
</View>
|
||||||
|
</Center>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default NotificationsView;
|
||||||
@@ -0,0 +1,88 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import { View } from 'react-native';
|
||||||
|
import { Center, Button, Text, Switch, Slider, Select, Heading } from "native-base";
|
||||||
|
import { useLanguage } from "../../state/LanguageSlice";
|
||||||
|
import i18n, { AvailableLanguages, DefaultLanguage, translate } from "../../i18n/i18n";
|
||||||
|
|
||||||
|
const PreferencesView = ({navigation}) => {
|
||||||
|
const dispatch = useDispatch();
|
||||||
|
const language: AvailableLanguages = useSelector((state) => state.language.value);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Center style={{ flex: 1}}>
|
||||||
|
<Heading style={{ textAlign: "center" }}>{ translate('prefBtn')}</Heading>
|
||||||
|
|
||||||
|
<Button variant='outline' onPress={() => navigation.navigate('Settings')} style={{ margin: 10}}>{ translate('backBtn') }</Button>
|
||||||
|
|
||||||
|
<View style={{margin: 20, maxHeight: 100, maxWidth: 500, width: '80%'}}>
|
||||||
|
<Select selectedValue={undefined}
|
||||||
|
placeholder={'Theme'}
|
||||||
|
style={{ alignSelf: 'center'}}
|
||||||
|
// onValueChange={(itemValue, itemIndex) => switch themes}
|
||||||
|
>
|
||||||
|
<Select.Item label={ translate('dark') } value='dark'/>
|
||||||
|
<Select.Item label={ translate('light') } value='light'/>
|
||||||
|
<Select.Item label={ translate('system') } value='system'/>
|
||||||
|
</Select>
|
||||||
|
</View>
|
||||||
|
|
||||||
|
<View style={{margin: 20, maxHeight: 100, maxWidth: 500, width: '80%'}}>
|
||||||
|
<Select selectedValue={language}
|
||||||
|
placeholder={translate('langBtn')}
|
||||||
|
style={{ alignSelf: 'center'}}
|
||||||
|
onValueChange={(itemValue: AvailableLanguages, itemIndex) => {
|
||||||
|
let newLanguage = DefaultLanguage;
|
||||||
|
newLanguage = itemValue;Heading
|
||||||
|
dispatch(useLanguage(newLanguage));
|
||||||
|
}}>
|
||||||
|
<Select.Item label='Français' value='fr'/>
|
||||||
|
<Select.Item label='English' value='en'/>
|
||||||
|
<Select.Item label='Italiano' value='it'/>
|
||||||
|
<Select.Item label='Espanol' value='sp'/>
|
||||||
|
</Select>
|
||||||
|
</View>
|
||||||
|
|
||||||
|
<View style={{margin: 20, maxHeight: 100, maxWidth: 500, width: '80%'}}>
|
||||||
|
<Select selectedValue={undefined}
|
||||||
|
placeholder={ translate('diffBtn') }
|
||||||
|
style={{ height: 50, width: 150, alignSelf: 'center'}}
|
||||||
|
// onValueChange={(itemValue, itemIndex) => change level}
|
||||||
|
>
|
||||||
|
|
||||||
|
<Select.Item label={ translate('easy') } value='easy'/>
|
||||||
|
<Select.Item label={ translate('medium') } value='medium'/>
|
||||||
|
<Select.Item label={ translate('hard') } value='hard'/>
|
||||||
|
</Select>
|
||||||
|
</View>
|
||||||
|
|
||||||
|
<View style={{margin: 20}}>
|
||||||
|
<Text style={{ textAlign: "center" }}>Color blind mode</Text>
|
||||||
|
<Switch style={{ alignSelf: 'center'}} colorScheme="primary"/>
|
||||||
|
</View>
|
||||||
|
|
||||||
|
<View style={{margin: 20, maxHeight: 100, maxWidth: 500, width: '80%'}}>
|
||||||
|
<Text style={{ textAlign: "center" }}>Mic volume</Text>
|
||||||
|
<Slider defaultValue={50} minValue={0} maxValue={1000} accessibilityLabel="hello world" step={10}>
|
||||||
|
<Slider.Track>
|
||||||
|
<Slider.FilledTrack/>
|
||||||
|
</Slider.Track>
|
||||||
|
<Slider.Thumb/>
|
||||||
|
</Slider>
|
||||||
|
</View>
|
||||||
|
|
||||||
|
<View style={{margin: 20, maxHeight: 100, maxWidth: 500, width: '80%'}}>
|
||||||
|
<Select selectedValue={undefined}
|
||||||
|
placeholder={'Device'}
|
||||||
|
style={{ height: 50, width: 150, alignSelf: 'center'}}
|
||||||
|
// onValueChange={(itemValue, itemIndex) => change device}
|
||||||
|
>
|
||||||
|
<Select.Item label='Mic_0' value='0'/>
|
||||||
|
<Select.Item label='Mic_1' value='1'/>
|
||||||
|
<Select.Item label='Mic_2' value='2'/>
|
||||||
|
</Select>
|
||||||
|
</View>
|
||||||
|
</Center>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default PreferencesView;
|
||||||
@@ -0,0 +1,31 @@
|
|||||||
|
import React from "react";
|
||||||
|
import { View } from 'react-native';
|
||||||
|
import { Center, Button, Text, Switch, Heading } from "native-base";
|
||||||
|
import { translate } from "../../i18n/i18n";
|
||||||
|
|
||||||
|
const PrivacyView = ({navigation}) => {
|
||||||
|
return (
|
||||||
|
<Center style={{ flex: 1}}>
|
||||||
|
<Heading style={{ textAlign: "center" }}>{ translate('privBtn')}</Heading>
|
||||||
|
|
||||||
|
<Button variant='outline' onPress={() => navigation.navigate('Settings')} style={{ margin: 10 }}>{ translate('backBtn') }</Button>
|
||||||
|
|
||||||
|
<View style={{margin: 20}} >
|
||||||
|
<Text style={{ textAlign: "center" }}>Data Collection</Text>
|
||||||
|
<Switch style={{ alignSelf: 'center', margin: 10 }} colorScheme="primary"/>
|
||||||
|
</View>
|
||||||
|
|
||||||
|
<View style={{margin: 20}}>
|
||||||
|
<Text style={{ textAlign: "center" }}>Custom Adds</Text>
|
||||||
|
<Switch style={{ alignSelf: 'center', margin: 10 }} colorScheme="primary"/>
|
||||||
|
</View>
|
||||||
|
|
||||||
|
<View style={{margin: 20}}>
|
||||||
|
<Text style={{ textAlign: "center" }}>Recommendations</Text>
|
||||||
|
<Switch style={{ alignSelf: 'center', margin: 10 }} colorScheme="primary"/>
|
||||||
|
</View>
|
||||||
|
</Center>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default PrivacyView;
|
||||||
@@ -0,0 +1,111 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import { Center, Button, Text, Heading } from "native-base";
|
||||||
|
import { createNativeStackNavigator } from '@react-navigation/native-stack';
|
||||||
|
import { unsetUserToken } from '../../state/UserSlice';
|
||||||
|
import { useDispatch } from "react-redux";
|
||||||
|
import { translate } from "../../i18n/i18n";
|
||||||
|
import API from '../../API';
|
||||||
|
import PreferencesView from './PreferencesView';
|
||||||
|
import NotificationsView from './NotificationView';
|
||||||
|
import PrivacyView from './PrivacyView';
|
||||||
|
import ChangePasswordForm from '../../components/forms/changePasswordForm';
|
||||||
|
|
||||||
|
const SettingsStack = createNativeStackNavigator();
|
||||||
|
|
||||||
|
const handleChangeEmail = async (newEmail: string): Promise<string> => {
|
||||||
|
try {
|
||||||
|
let response = await API.updateUserCredentials("email", newEmail);
|
||||||
|
return response as string;
|
||||||
|
} catch (error) {
|
||||||
|
return ("error: " + error);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleChangePassword = async (oldPassword: string, newPassword: string): Promise<string> => {
|
||||||
|
try {
|
||||||
|
let response = await API.updateUserCredentials("password", newPassword);
|
||||||
|
return response as string;
|
||||||
|
} catch (error) {
|
||||||
|
return ("error: " + error);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const MainView = ({navigation}) => {
|
||||||
|
const dispatch = useDispatch();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Center style={{ flex: 1}}>
|
||||||
|
<Button variant='ghost' onPress={() => navigation.navigate('Preferences')}>
|
||||||
|
{ translate('prefBtn')}
|
||||||
|
</Button>
|
||||||
|
|
||||||
|
<Button variant='ghost' onPress={() => navigation.navigate('Notifications')}>
|
||||||
|
{ translate('notifBtn')}
|
||||||
|
</Button>
|
||||||
|
|
||||||
|
<Button variant='ghost' onPress={() => navigation.navigate('Privacy')}>
|
||||||
|
{ translate('privBtn')}
|
||||||
|
</Button>
|
||||||
|
|
||||||
|
<Button variant='ghost' onPress={() => navigation.navigate('ChangePassword')}>
|
||||||
|
{ translate('changepasswdBtn')}
|
||||||
|
</Button>
|
||||||
|
|
||||||
|
<Button variant='ghost' onPress={() => navigation.navigate('ChangeEmail')}>
|
||||||
|
{ translate('changeemailBtn')}
|
||||||
|
</Button>
|
||||||
|
|
||||||
|
<Button variant='ghost' onPress={() => navigation.navigate('GoogleAccount')}>
|
||||||
|
{ translate('googleacctBtn')}
|
||||||
|
</Button>
|
||||||
|
|
||||||
|
<Button variant='ghost' onPress={() => dispatch(unsetUserToken())} >
|
||||||
|
{ translate('signoutBtn')}
|
||||||
|
</Button>
|
||||||
|
</Center>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
const ChangePasswordView = ({navigation}) => {
|
||||||
|
return (
|
||||||
|
<Center style={{ flex: 1}}>
|
||||||
|
<Heading paddingBottom={'2%'}>{translate('changePassword')}</Heading>
|
||||||
|
<ChangePasswordForm onSubmit={(oldPassword, newPassword) => handleChangePassword(oldPassword, newPassword)}/>
|
||||||
|
<Button paddingTop={'2%'} variant='outline' onPress={() => navigation.navigate('Settings')}>Back</Button>
|
||||||
|
</Center>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
const ChangeEmailView = ({navigation}) => {
|
||||||
|
return (
|
||||||
|
<Center style={{ flex: 1}}>
|
||||||
|
<Button variant='outline' onPress={() => navigation.navigate('Settings')}>Back</Button>
|
||||||
|
<Text>ChangeEmail</Text>
|
||||||
|
</Center>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
const GoogleAccountView = ({navigation}) => {
|
||||||
|
return (
|
||||||
|
<Center style={{ flex: 1}}>
|
||||||
|
<Button variant='outline' onPress={() => navigation.navigate('Settings')}>Back</Button>
|
||||||
|
<Text>GoogleAccount</Text>
|
||||||
|
</Center>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
const SetttingsNavigator = () => {
|
||||||
|
return (
|
||||||
|
<SettingsStack.Navigator initialRouteName='Settings' screenOptions={{headerShown: false}}>
|
||||||
|
<SettingsStack.Screen name='Settings' component={MainView} />
|
||||||
|
<SettingsStack.Screen name='Preferences' component={PreferencesView} />
|
||||||
|
<SettingsStack.Screen name='Notifications' component={NotificationsView} />
|
||||||
|
<SettingsStack.Screen name='Privacy' component={PrivacyView} />
|
||||||
|
<SettingsStack.Screen name='ChangePassword' component={ChangePasswordView} />
|
||||||
|
<SettingsStack.Screen name='ChangeEmail' component={ChangeEmailView} />
|
||||||
|
<SettingsStack.Screen name='GoogleAccount' component={GoogleAccountView} />
|
||||||
|
</SettingsStack.Navigator>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default SetttingsNavigator;
|
||||||
Reference in New Issue
Block a user