diff --git a/locales/en.json b/locales/en.json index b8bfbd7..e42979a 100644 --- a/locales/en.json +++ b/locales/en.json @@ -186,11 +186,12 @@ "password": "Password", "passwordError": "Please enter a password", "resetPassword": "Forgot Password", - "whyAccountTitle": "Why have an account?", - "whyAccountSub": "What can you do wth an account", - "whyAccountParagraph": "An Amicale account allows you to take part in several activities around campus. You can join a club, or even create your own!", - "whyAccountParagraph2": "Logging into your Amicale account on the app will allow you to see all available clubs on the campus, vote for the upcoming elections, and more to come!", - "noAccount": "No Account? Go to the Amicale's building during open hours to create one." + "mascotDialog": { + "title": "Why have an account?", + "message": "An Amicale account allows you to take part in several activities around campus. You can join a club, or even create your own!\n\nLogging into your Amicale account on the app will allow you to see all available clubs on the campus, vote for the upcoming elections, and more to come!\n\nNo Account? Go to the Amicale's building during open hours to create one.", + "button": "OK" + } + }, "profile": { "title": "Profile", diff --git a/locales/fr.json b/locales/fr.json index c8d9524..3d0065b 100644 --- a/locales/fr.json +++ b/locales/fr.json @@ -186,11 +186,11 @@ "password": "Mot de passe", "passwordError": "Merci d'entrer un mot de passe", "resetPassword": "Mdp oublié", - "whyAccountTitle": "Un compte ?", - "whyAccountSub": "Ce qu'un compte t'apporte", - "whyAccountParagraph": "Un compte Amicale te donne la possibilité de participer à diverses activités sur le campus. tu peux rejoindre des clubs ou même créer le tiens !", - "whyAccountParagraph2": "Te connecter à ton compte Amicale sur l'appli te permettra de voir tous les clubs en activité, de réserver du matériel, de voter pour les prochaines élections, et plus à venir !", - "noAccount": "Pas de compte ? Passe à l'Amicale pendant une perm pour en créer un." + "mascotDialog": { + "title": "Un compte ?", + "message": "Un compte Amicale te donne la possibilité de participer à diverses activités sur le campus. tu peux rejoindre des clubs ou même créer le tiens !\n\nTe connecter à ton compte Amicale sur l'appli te permettra de voir tous les clubs en activité, de réserver du matériel, de voter pour les prochaines élections, et plus à venir !\n\nPas de compte ? Passe à l'Amicale pendant une perm pour en créer un.", + "button": "Dac" + } }, "profile": { "title": "Profil", diff --git a/src/managers/AsyncStorageManager.js b/src/managers/AsyncStorageManager.js index fc7c701..12ce6f1 100644 --- a/src/managers/AsyncStorageManager.js +++ b/src/managers/AsyncStorageManager.js @@ -84,6 +84,11 @@ export default class AsyncStorageManager { default: '1', current: '', }, + loginShowBanner: { + key: 'loginShowBanner', + default: '1', + current: '', + }, proxiwashWatchedMachines: { key: 'proxiwashWatchedMachines', default: '[]', diff --git a/src/navigation/MainNavigator.js b/src/navigation/MainNavigator.js index 90e9dc4..127b431 100644 --- a/src/navigation/MainNavigator.js +++ b/src/navigation/MainNavigator.js @@ -90,14 +90,8 @@ function MainStackComponent(props: { createTabNavigator: () => React.Node }) { title: i18n.t("screens.game.title"), }} /> - - + {createScreenCollapsibleStack("login", MainStack, LoginScreen, i18n.t('screens.login.title'), + true, {headerTintColor: "#fff"}, 'transparent')} {getWebsiteStack("website", MainStack, WebsiteScreen, "")} diff --git a/src/screens/Amicale/LoginScreen.js b/src/screens/Amicale/LoginScreen.js index 512fcea..25325fc 100644 --- a/src/screens/Amicale/LoginScreen.js +++ b/src/screens/Amicale/LoginScreen.js @@ -1,18 +1,20 @@ // @flow import * as React from 'react'; -import {Animated, KeyboardAvoidingView, StyleSheet, View} from "react-native"; -import {Avatar, Button, Card, HelperText, Paragraph, TextInput, withTheme} from 'react-native-paper'; +import {Animated, Dimensions, Image, KeyboardAvoidingView, StyleSheet, View} from "react-native"; +import {Button, Card, HelperText, TextInput, withTheme} from 'react-native-paper'; import ConnectionManager from "../../managers/ConnectionManager"; import i18n from 'i18n-js'; import ErrorDialog from "../../components/Dialogs/ErrorDialog"; import {withCollapsible} from "../../utils/withCollapsible"; import {Collapsible} from "react-navigation-collapsible"; -import CustomTabBar from "../../components/Tabbar/CustomTabBar"; import type {CustomTheme} from "../../managers/ThemeManager"; import AsyncStorageManager from "../../managers/AsyncStorageManager"; import {StackNavigationProp} from "@react-navigation/stack"; import AvailableWebsites from "../../constants/AvailableWebsites"; +import {MASCOT_STYLE} from "../../components/Mascot/Mascot"; +import MascotPopup from "../../components/Mascot/MascotPopup"; +import LinearGradient from "react-native-linear-gradient"; type Props = { navigation: StackNavigationProp, @@ -29,6 +31,7 @@ type State = { loading: boolean, dialogVisible: boolean, dialogError: number, + mascotDialogVisible: boolean, } const ICON_AMICALE = require('../../../assets/amicale.png'); @@ -47,11 +50,13 @@ class LoginScreen extends React.Component { loading: false, dialogVisible: false, dialogError: 0, + mascotDialogVisible: AsyncStorageManager.getInstance().preferences.loginShowBanner.current === "1" }; onEmailChange: (value: string) => null; onPasswordChange: (value: string) => null; passwordInputRef: { current: null | TextInput }; + windowHeight: number; nextScreen: string | null; @@ -61,6 +66,7 @@ class LoginScreen extends React.Component { this.onEmailChange = this.onInputChange.bind(this, true); this.onPasswordChange = this.onInputChange.bind(this, false); this.props.navigation.addListener('focus', this.onScreenFocus); + this.windowHeight = Dimensions.get('window').height; } onScreenFocus = () => { @@ -79,6 +85,18 @@ class LoginScreen extends React.Component { } } + hideMascotDialog = () => { + AsyncStorageManager.getInstance().savePref( + AsyncStorageManager.getInstance().preferences.loginShowBanner.key, + '0' + ); + this.setState({mascotDialogVisible: false}) + }; + + showMascotDialog = () => { + this.setState({mascotDialogVisible: true}) + }; + /** * Shows an error dialog with the corresponding login error * @@ -111,7 +129,11 @@ class LoginScreen extends React.Component { /** * Navigates to the Amicale website screen with the reset password link as navigation parameters */ - onResetPasswordClick = () => this.props.navigation.navigate("website", {host: AvailableWebsites.websites.AMICALE, path: RESET_PASSWORD_PATH, title: i18n.t('screens.websites.amicale')}); + onResetPasswordClick = () => this.props.navigation.navigate("website", { + host: AvailableWebsites.websites.AMICALE, + path: RESET_PASSWORD_PATH, + title: i18n.t('screens.websites.amicale') + }); /** * The user has unfocused the input, his email is ready to be validated @@ -283,18 +305,31 @@ class LoginScreen extends React.Component { */ getMainCard() { return ( - + } + style={{ + width: props.size, + height: props.size, + }}/>} /> {this.getFormInput()} - + + + - - ); - } - - /** - * Gets the card containing the information about the Amicale account - * - * @returns {*} - */ - getSecondaryCard() { - return ( - - } - /> - - {i18n.t("screens.login.whyAccountParagraph")} - {i18n.t("screens.login.whyAccountParagraph2")} - {i18n.t("screens.login.noAccount")} - - + ); } render() { const {containerPaddingTop, scrollIndicatorInsetTop, onScroll} = this.props.collapsibleStack; return ( - - + - - {this.getMainCard()} - {this.getSecondaryCard()} - - - - + + + {this.getMainCard()} + + + + + + + + ); } } @@ -381,11 +415,10 @@ class LoginScreen extends React.Component { const styles = StyleSheet.create({ container: { flex: 1, - flexDirection: 'column', - justifyContent: 'center', }, card: { - margin: 10, + marginTop: 'auto', + marginBottom: 'auto', }, header: { fontSize: 36, diff --git a/src/utils/CollapsibleUtils.js b/src/utils/CollapsibleUtils.js index 952a5a9..e93e34f 100644 --- a/src/utils/CollapsibleUtils.js +++ b/src/utils/CollapsibleUtils.js @@ -18,6 +18,7 @@ import StackNavigator, {StackNavigationOptions} from "@react-navigation/stack"; * Set to false if the screen uses a webview as this component does not support native driver. * In all other cases, set it to true for increase performance. * @param options Screen options to use, or null if no options are necessary. + * @param headerColor The color of the header. Uses default color if not specified * @returns {JSX.Element} */ export function createScreenCollapsibleStack( @@ -26,7 +27,8 @@ export function createScreenCollapsibleStack( component: React.Node, title: string, useNativeDriver?: boolean, - options?: StackNavigationOptions) { + options?: StackNavigationOptions, + headerColor?: string) { const {colors} = useTheme(); const screenOptions = options != null ? options : {}; return createCollapsibleStack( @@ -36,13 +38,13 @@ export function createScreenCollapsibleStack( options={{ title: title, headerStyle: { - backgroundColor: colors.surface, + backgroundColor: headerColor!=null ? headerColor :colors.surface, }, ...screenOptions, }} />, { - collapsedColor: colors.surface, + collapsedColor: headerColor!=null ? headerColor :colors.surface, useNativeDriver: useNativeDriver != null ? useNativeDriver : true, // native driver does not work with webview } )