From ee13d099feeeaa5a3e53a7b896f0a25a4467e353 Mon Sep 17 00:00:00 2001
From: Arnaud Vergnet <vergnet@etud.insa-toulouse.fr>
Date: Wed, 1 Apr 2020 14:25:25 +0200
Subject: [PATCH] Improved translations and improved alert popup

---
 components/AlertDialog.js      | 37 ++++++++++++++++++++++++++++++++++
 components/LogoutDialog.js     | 13 ++++++++----
 screens/Amicale/LoginScreen.js | 35 +++++++++++++++++++++++---------
 translations/en.json           | 10 +++++++++
 translations/fr.json           | 10 +++++++++
 5 files changed, 91 insertions(+), 14 deletions(-)
 create mode 100644 components/AlertDialog.js

diff --git a/components/AlertDialog.js b/components/AlertDialog.js
new file mode 100644
index 0000000..32633b0
--- /dev/null
+++ b/components/AlertDialog.js
@@ -0,0 +1,37 @@
+import * as React from 'react';
+import {Button, Dialog, Paragraph, Portal, withTheme} from 'react-native-paper';
+
+type Props = {
+    navigation: Object,
+    visible: boolean,
+    onDismiss: Function,
+    title: string,
+    message: string,
+}
+
+class AlertDialog extends React.PureComponent<Props> {
+
+    constructor(props) {
+        super(props);
+    }
+
+    render() {
+        return (
+            <Portal>
+                <Dialog
+                    visible={this.props.visible}
+                    onDismiss={this.props.onDismiss}>
+                    <Dialog.Title>{this.props.title}</Dialog.Title>
+                    <Dialog.Content>
+                        <Paragraph>{this.props.message}</Paragraph>
+                    </Dialog.Content>
+                    <Dialog.Actions>
+                        <Button onPress={this.props.onDismiss}>OK</Button>
+                    </Dialog.Actions>
+                </Dialog>
+            </Portal>
+        );
+    }
+}
+
+export default withTheme(AlertDialog);
diff --git a/components/LogoutDialog.js b/components/LogoutDialog.js
index ea7227d..60f25c8 100644
--- a/components/LogoutDialog.js
+++ b/components/LogoutDialog.js
@@ -1,6 +1,7 @@
 import * as React from 'react';
 import {ActivityIndicator, Button, Dialog, Paragraph, Portal, withTheme} from 'react-native-paper';
 import ConnectionManager from "../managers/ConnectionManager";
+import i18n from 'i18n-js';
 
 type Props = {
     navigation: Object,
@@ -49,21 +50,25 @@ class LogoutDialog extends React.PureComponent<Props, State> {
                 <Dialog
                     visible={this.props.visible}
                     onDismiss={this.onDismiss}>
-                    <Dialog.Title>DISCONNECT</Dialog.Title>
+                    <Dialog.Title>
+                        {this.state.loading
+                            ? i18n.t("dialog.disconnect.titleLoading")
+                            : i18n.t("dialog.disconnect.title")}
+                    </Dialog.Title>
                     <Dialog.Content>
                         {this.state.loading
                             ? <ActivityIndicator
                                 animating={true}
                                 size={'large'}
                                 color={this.colors.primary}/>
-                            : <Paragraph>DISCONNECT?</Paragraph>
+                            : <Paragraph>{i18n.t("dialog.disconnect.message")}</Paragraph>
                         }
                     </Dialog.Content>
                     {this.state.loading
                         ? null
                         : <Dialog.Actions>
-                            <Button onPress={this.onClickAccept}>YES</Button>
-                            <Button onPress={this.onDismiss}>NO</Button>
+                            <Button onPress={this.onDismiss} style={{marginRight: 10}}>{i18n.t("dialog.cancel")}</Button>
+                            <Button onPress={this.onClickAccept}>{i18n.t("dialog.yes")}</Button>
                         </Dialog.Actions>
                     }
 
diff --git a/screens/Amicale/LoginScreen.js b/screens/Amicale/LoginScreen.js
index 9694b85..8c84279 100644
--- a/screens/Amicale/LoginScreen.js
+++ b/screens/Amicale/LoginScreen.js
@@ -1,19 +1,12 @@
 // @flow
 
 import * as React from 'react';
-import {
-    Alert,
-    Keyboard,
-    KeyboardAvoidingView,
-    ScrollView,
-    StyleSheet,
-    TouchableWithoutFeedback,
-    View
-} from "react-native";
+import {Keyboard, KeyboardAvoidingView, ScrollView, StyleSheet, TouchableWithoutFeedback, View} from "react-native";
 import {Avatar, Button, Card, HelperText, Text, TextInput, withTheme} from 'react-native-paper';
 import ConnectionManager, {ERROR_TYPE} from "../../managers/ConnectionManager";
 import {openBrowser} from "../../utils/WebBrowser";
 import i18n from 'i18n-js';
+import AlertDialog from "../../components/AlertDialog";
 
 type Props = {
     navigation: Object,
@@ -25,6 +18,9 @@ type State = {
     isEmailValidated: boolean,
     isPasswordValidated: boolean,
     loading: boolean,
+    dialogVisible: boolean,
+    dialogTitle: string,
+    dialogMessage: string,
 }
 
 const ICON_AMICALE = require('../../assets/amicale.png');
@@ -41,6 +37,9 @@ class LoginScreen extends React.Component<Props, State> {
         isEmailValidated: false,
         isPasswordValidated: false,
         loading: false,
+        dialogVisible: false,
+        dialogTitle: '',
+        dialogMessage: '',
     };
 
     colors: Object;
@@ -67,6 +66,15 @@ class LoginScreen extends React.Component<Props, State> {
         this.colors = props.theme.colors;
     }
 
+    showErrorDialog = (title: string, message: string) =>
+        this.setState({
+            dialogTitle: title,
+            dialogMessage: message,
+            dialogVisible: true
+        });
+
+    hideErrorDialog = () => this.setState({ dialogVisible: false });
+
     onResetPasswordClick() {
         openBrowser(RESET_PASSWORD_LINK, this.colors.primary);
     }
@@ -157,7 +165,7 @@ class LoginScreen extends React.Component<Props, State> {
                 message = i18n.t("loginScreen.errors.unknown");
                 break;
         }
-        Alert.alert(title, message);
+        this.showErrorDialog(title, message);
     }
 
     getFormInput() {
@@ -279,6 +287,13 @@ class LoginScreen extends React.Component<Props, State> {
                             {this.getSecondaryCard()}
                         </View>
                     </TouchableWithoutFeedback>
+                    <AlertDialog
+                        {...this.props}
+                        visible={this.state.dialogVisible}
+                        title={this.state.dialogTitle}
+                        message={this.state.dialogMessage}
+                        onDismiss={this.hideErrorDialog}
+                    />
                 </ScrollView>
             </KeyboardAvoidingView>
         );
diff --git a/translations/en.json b/translations/en.json
index 6c1a142..1c389de 100644
--- a/translations/en.json
+++ b/translations/en.json
@@ -241,6 +241,16 @@
       "unknown": "Unknown error, please contact support."
     }
   },
+  "dialog": {
+    "ok": "OK",
+    "yes": "Yes",
+    "cancel": "Cancel",
+    "disconnect": {
+      "title": "Disconnect",
+      "titleLoading": "Disconnecting...",
+      "message": "Are you sure you want to disconnect from your Amicale account?"
+    }
+  },
   "general": {
     "loading": "Loading...",
     "networkError": "Unable to contact servers. Make sure you are connected to Internet."
diff --git a/translations/fr.json b/translations/fr.json
index 3926a24..52c87df 100644
--- a/translations/fr.json
+++ b/translations/fr.json
@@ -242,6 +242,16 @@
       "unknown": "Erreur inconnue, merci de contacter le support."
     }
   },
+  "dialog": {
+    "ok": "OK",
+    "yes": "Oui",
+    "cancel": "Annuler",
+    "disconnect": {
+      "title": "Déconnexion",
+      "titleLoading": "Déconnexion...",
+      "message": "Voulez vous vraiment vous déconnecter de votre compte Amicale ??"
+    }
+  },
   "general": {
     "loading": "Chargement...",
     "networkError": "Impossible de contacter les serveurs. Assurez-vous d'être connecté à internet."