feat: [#174034065] Add info about session expiration

locales/en/index.yml

@@ -124,6 +124,7 @@ login:
   welcome:
     line1: welcome in your
     line2: Digital Citizenship
+  expiration_info: For security reasons, after 30 days from the last login, we will ask you to log in again to use IO
 inbox:
   enableButton: Enable Inbox
   disableButton: Disable Inbox

locales/it/index.yml

@@ -124,6 +124,7 @@ login:
   welcome:
     line1: benvenuto nella tua
     line2: Cittadinanza Digitale
+  expiration_info: Ti informiamo che per ragioni di sicurezza, dopo 30 giorni dall’ultimo accesso, ti chiederemo di effettuare un nuovo login per utilizzare IO.
 inbox:
   enableButton: Abilita Inbox
   disableButton: Disabilita Inbox

ts/components/AssistanceAdviceComponent.tsx → ts/components/AdviceComponent.tsx

@@ -1,9 +1,14 @@
 import { Text, View } from "native-base";
 import * as React from "react";
 import { StyleSheet } from "react-native";
-import I18n from "../i18n";
 import themeVariables from "../theme/variables";
 import IconFont from "./ui/IconFont";
+
+type Props = {
+  text: string;
+  iconName?: string;
+  iconColor?: string;
+};
 const styles = StyleSheet.create({
   container: {
     flexDirection: "row"
@@ -20,23 +25,21 @@ const styles = StyleSheet.create({
 
 const iconSize = 18;
 /**
- * This component displays a box with an icon and some text to inform about assistance work days/hours
+ * This component displays an info icon on top-left and a text message
  * @constructor
  */
-const AssistanceAdviceComponent: React.FunctionComponent<{}> = () => {
+const AdviceComponent: React.FunctionComponent<Props> = (props: Props) => {
   return (
     <View style={styles.container}>
       <IconFont
         style={styles.icon}
-        name={"io-notice"}
+        name={props.iconName || "io-notice"}
         size={iconSize}
-        color={themeVariables.brandPrimary}
+        color={props.iconColor || themeVariables.brandPrimary}
       />
-      <Text style={styles.text}>
-        {I18n.t("instabug.contextualHelp.assistanceWorkHours")}
-      </Text>
+      <Text style={styles.text}>{props.text}</Text>
     </View>
   );
 };
 
-export default React.memo(AssistanceAdviceComponent);
+export default React.memo(AdviceComponent);

ts/components/InstabugAssistanceComponent.tsx

@@ -2,7 +2,7 @@ import { BugReporting } from "instabug-reactnative";
 import { H3, Text, View } from "native-base";
 import * as React from "react";
 import I18n from "../i18n";
-import AssistanceAdviceComponent from "./AssistanceAdviceComponent";
+import AdviceComponent from "./AdviceComponent";
 import ButtonWithImage from "./ButtonWithImage";
 
 type Props = Readonly<{
@@ -23,7 +23,9 @@ class InstabugAssistanceComponent extends React.PureComponent<Props> {
         <View spacer={true} />
         <Text>{I18n.t("instabug.contextualHelp.descriptionChat")}</Text>
         <View spacer={true} large={true} />
-        <AssistanceAdviceComponent />
+        <AdviceComponent
+          text={I18n.t("instabug.contextualHelp.assistanceWorkHours")}
+        />
         <View spacer={true} />
         <ButtonWithImage
           icon={"io-bug"}

ts/screens/authentication/IdpSelectionScreen.tsx

@@ -5,6 +5,7 @@ import { NavigationScreenProps } from "react-navigation";
 import { connect } from "react-redux";
 import { Dispatch } from "redux";
 import { instabugLog, TypeLogs } from "../../boot/configureInstabug";
+import AdviceComponent from "../../components/AdviceComponent";
 import ButtonDefaultOpacity from "../../components/ButtonDefaultOpacity";
 import IdpsGrid from "../../components/IdpsGrid";
 import BaseScreenComponent, {
@@ -169,6 +170,13 @@ class IdpSelectionScreen extends React.PureComponent<Props, State> {
               <Text>{I18n.t("global.buttons.cancel")}</Text>
             </ButtonDefaultOpacity>
           </View>
+          <View style={{ padding: variables.contentPadding }}>
+            <View spacer={true} />
+            <AdviceComponent
+              text={I18n.t("login.expiration_info")}
+              iconColor={"black"}
+            />
+          </View>
         </Content>
       </BaseScreenComponent>
     );

ts/screens/authentication/cie/CiePinScreen.tsx

@@ -10,6 +10,7 @@ import {
 } from "react-native";
 import { NavigationInjectedProps } from "react-navigation";
 import { connect } from "react-redux";
+import AdviceComponent from "../../../components/AdviceComponent";
 import CieRequestAuthenticationOverlay from "../../../components/cie/CieRequestAuthenticationOverlay";
 import CiePinpad from "../../../components/CiePinpad";
 import { withLightModalContext } from "../../../components/helpers/withLightModalContext";
@@ -127,6 +128,11 @@ class CiePinScreen extends React.PureComponent<Props, State> {
               onPinChanged={this.handelOnPinChanged}
               onSubmit={this.showModal}
             />
+            <View spacer={true} />
+            <AdviceComponent
+              text={I18n.t("login.expiration_info")}
+              iconColor={"black"}
+            />
           </View>
         </ScrollView>
         {this.state.pin.length === CIE_PIN_LENGTH && (