Improved login screen

screens/Amicale/LoginScreen.js

@@ -2,7 +2,7 @@
 
 import * as React from 'react';
 import {Keyboard, KeyboardAvoidingView, ScrollView, StyleSheet, TouchableWithoutFeedback, View} from "react-native";
-import {Avatar, Button, Card, HelperText, Text, TextInput, withTheme} from 'react-native-paper';
+import {Avatar, Button, Card, HelperText, Paragraph, TextInput, withTheme} from 'react-native-paper';
 import ConnectionManager, {ERROR_TYPE} from "../../managers/ConnectionManager";
 import {openBrowser} from "../../utils/WebBrowser";
 import i18n from 'i18n-js';
@@ -73,7 +73,7 @@ class LoginScreen extends React.Component<Props, State> {
             dialogVisible: true
         });
 
-    hideErrorDialog = () => this.setState({ dialogVisible: false });
+    hideErrorDialog = () => this.setState({dialogVisible: false});
 
     onResetPasswordClick() {
         openBrowser(RESET_PASSWORD_LINK, this.colors.primary);
@@ -236,6 +236,13 @@ class LoginScreen extends React.Component<Props, State> {
                 <Card.Content>
                     {this.getFormInput()}
                     <Card.Actions>
+                        <Button
+                            icon="help-circle"
+                            mode="contained"
+                            onPress={this.onResetPasswordClick}
+                            style={{marginLeft: 'auto'}}>
+                            {i18n.t("loginScreen.resetPassword")}
+                        </Button>
                         <Button
                             icon="send"
                             mode="contained"
@@ -254,18 +261,19 @@ class LoginScreen extends React.Component<Props, State> {
     getSecondaryCard() {
         return (
             <Card style={styles.card}>
+                <Card.Title
+                    title={i18n.t("loginScreen.whyAccountTitle")}
+                    subtitle={i18n.t("loginScreen.whyAccountSub")}
+                    left={(props) => <Avatar.Icon
+                        {...props}
+                        icon={"help"}
+                        color={this.colors.primary}
+                        style={{backgroundColor: 'transparent'}}/>}
+                />
                 <Card.Content>
-                    <Text>{i18n.t("loginScreen.forgotPassword")}</Text>
+                    <Paragraph>{i18n.t("loginScreen.whyAccountParagraph")}</Paragraph>
-                    <View style={styles.btnContainer}>
+                    <Paragraph>{i18n.t("loginScreen.whyAccountParagraph2")}</Paragraph>
-                        <Button
+                    <Paragraph>{i18n.t("loginScreen.noAccount")}</Paragraph>
-                            icon="reload"
-                            mode="contained"
-                            onPress={this.onResetPasswordClick}
-                            style={{marginLeft: 'auto'}}>
-                            {i18n.t("loginScreen.resetPassword")}
-                        </Button>
-                    </View>
-                    <Text>{i18n.t("loginScreen.noAccount")}</Text>
                 </Card.Content>
             </Card>
         );

translations/en.json

@@ -231,8 +231,11 @@
     "password": "Password",
     "passwordError": "Please enter a password",
     "login": "Login",
-    "forgotPassword": "Forgot your password? Click on the button below to get a new one.",
+    "resetPassword": "Forgot Password",
-    "resetPassword": "Reset 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.",
     "errors": {
       "title": "Error!",

translations/fr.json

@@ -230,9 +230,12 @@
     "emailError": "Merci d'entrer un email valide",
     "password": "Mot de passe",
     "passwordError": "Merci d'entrer un mot de passe",
-    "login": "Se Connecter",
+    "login": "Connexion",
-    "forgotPassword": "Mot de passe oublié ? Cliquez sur le bouton ci-dessous pour en créer un nouveau.",
+    "resetPassword": "Mdp oublié",
-    "resetPassword": "Réinitialiser mot de passe",
+    "whyAccountTitle": "Pourquoi avoir un compte?",
+    "whyAccountSub": "Ce que vous pouvez faire avec un compte",
+    "whyAccountParagraph": "Un compte Amicale vous donne la possibilité de participer à diverses activités sur le campus. Vous pouvez rejoindre des clubs ou même créer le votre !",
+    "whyAccountParagraph2": "Vous connecter à votre compte Amicale sur l'appli vous permettra de voir tous les clubs en activité, de voter pour les prochaines élections, et plus à venir !",
     "noAccount": "Pas de compte ? Passez à l'Amicale pendant une perm pour en créer un.",
     "errors": {
       "title": "Erreur !",