[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
36
front/views/settings/NotificationView.tsx
Normal file
36
front/views/settings/NotificationView.tsx
Normal file
@@ -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;
|
||||
88
front/views/settings/PreferencesView.tsx
Normal file
88
front/views/settings/PreferencesView.tsx
Normal file
@@ -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;
|
||||
31
front/views/settings/PrivacyView.tsx
Normal file
31
front/views/settings/PrivacyView.tsx
Normal file
@@ -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;
|
||||
111
front/views/settings/SettingsView.tsx
Normal file
111
front/views/settings/SettingsView.tsx
Normal file
@@ -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