(feat) handle email confirmation deeplink, fix top bar issues with email message

.prettierrc.js

 module.exports = {
+  "prettier.printWidth": 100,
   bracketSpacing: false,
   jsxBracketSameLine: true,
   singleQuote: true,
+  semi: true,
+  bracketSpacing: true,
   trailingComma: 'all',
 };

locales/en.json

@@ -601,9 +601,13 @@
   "validation":{
     "email":"Invalid email",
     "number":"Invalid number",
-    "confirm":"Please confirm your email anddress. Didn't get it?",
+  },
+  "emailConfirm": {
+    "confirmed":"Email address confirmed!",
+    "confirm":"Please confirm your email address. Didn't get it?",
     "sendAgain": "Click here to send again.",
-    "confirmNote": "Note: If you change your email address, it will need to be confirmed again."
+    "confirmNote": "Note: If you change your email address, it will need to be confirmed again.",
+    "sent":"Email sent"
   },
   "imagePicker":{
     "gallery":"Choose from gallery",

src/auth/UserStore.js

@@ -14,6 +14,14 @@ import { Alert } from 'react-native';
  */
 class UserStore {
   @observable me = {};
+  @observable emailConfirmMessageDismiss = false;
+
+  @action
+  setDissmis(value) {
+    console.log(this.emailConfirmMessageDismiss)
+    this.emailConfirmMessageDismiss = value;
+    console.log(this.emailConfirmMessageDismiss)
+  }
 
   @action
   setUser(user) {

src/channel/UserModel.js

@@ -56,6 +56,22 @@ export default class UserModel extends BaseModel {
    */
   @observable email_confirmed = false;
 
+  /**
+   * Confirm email
+   * @param {Object} params
+   */
+  confirmEmail = async params => {
+    // call any api endpoint with the param
+    try {
+      console.log( { urn: this.urn, ...params });
+      await apiService.get('api/v2/entities/', { urn: this.urn, ...params });
+      this.setEmailConfirmed(true);
+      return true;
+    } catch (error) {
+      return false;
+    }
+  };
+
   getOwnerIcontime() {
     if (sessionService.getUser().guid === this.guid) {
       return sessionService.getUser().icontime;

src/common/services/email-confirmation.service.js

@@ -12,6 +12,7 @@ class EmailConfirmationService {
       return Boolean(response && response.sent);
     } catch (err) {
       logService.exception('[EmailConfirmationService] send', err);
+      return false;
     }
   }
 }

src/config/Config.e2e.js

@@ -23,7 +23,7 @@ export const MINDS_URI_SETTINGS = {
 
 export const MINDS_MAX_VIDEO_LENGTH = 5; // in minutes
 
-export const SOCKET_URI = 'wss://ha-socket-io-us-east-1.minds.com:3030'
+export const SOCKET_URI = 'wss://ha-socket-io-us-east-1.minds.com:3030';
 
 export const MINDS_CDN_URI = 'https://cdn.minds.com/';
 export const MINDS_ASSETS_CDN_URI = 'https://cdn-assets.minds.com/';
@@ -45,6 +45,7 @@ export const MINDS_FEATURES = {
  * Deeplink to screen/params maping
  */
 export const MINDS_DEEPLINK = [
+  ['email-confirmation', 'EmailConfirmation'],
   ['groups/profile/:guid/feed', 'GroupView'],
   ['groups/profile/:guid', 'GroupView'],
   ['notifications', 'Notifications'],
@@ -59,7 +60,7 @@ export const MINDS_DEEPLINK = [
   ['wallet/tokens/:section', 'Wallet'],
 ];
 
-export const DISABLE_PASSWORD_INPUTS = true;
+export const DISABLE_PASSWORD_INPUTS = false;
 
 // IF TRUE COMMENT THE SMS PERMISSIONS IN ANDROID MANIFEST TOO!!!
 export const GOOGLE_PLAY_STORE = DeviceInfo.getBuildNumber() < 1050000000 && Platform.OS == 'android';

src/onboarding/EmailConfirmationScreen.js

-import React, {Component} from 'react';
+import React, { Component } from 'react';
 
-import {View, Text} from 'react-native';
-import { CommonStyle } from '../styles/Common';
+import { View, Text } from 'react-native';
+import { CommonStyle as CS } from '../styles/Common';
+import CenteredLoading from '../common/components/CenteredLoading';
+import i18n from '../common/services/i18n.service';
+import sessionService from '../common/services/session.service';
 
 /**
  * Email confirmation screen
  */
 export default class EmailConfirmationScreen extends Component {
+
+  static navigationOptions = {
+    title: 'Email confirm',
+  };
+
+  /**
+   * State
+   */
+  state = {
+    confirmed: false,
+    error: false,
+  };
+
   /**
    * Component did mount
    */
   componentDidMount() {
-    // TODO: Implement call to the api for confirmation using the deeplinks params (this.props.navigation.state.params)
-    console.log('ConfirmParams', this.props.navigation.state.params);
+    this.confirm();
+  }
+
+  /**
+   * Confirm
+   */
+  confirm = async () => {
+    this.setState({ error: false });
+
+    const result = await sessionService
+      .getUser()
+      .confirmEmail(this.props.navigation.state.params);
+
+    if (!result) {
+      this.setState({ error: true });
+    } else {
+      this.setState({ confirmed: true });
+    }
+  };
+
+  /**
+   * Render body
+   */
+  renderBody() {
+    if (this.state.error) {
+      return (
+        <Text
+          style={[CS.fontL, CS.textCenter, CS.colorDarkGreyed]}
+          onPress={this.confirm}>
+          {i18n.t('errorMessage') + '\n'}
+          <Text style={[CS.colorPrimary]}>{i18n.t('tryAgain')}</Text>
+        </Text>
+      );
+    }
+
+    if (this.state.confirmed) {
+      return (
+        <Text
+          style={[CS.fontXL, CS.textCenter, CS.colorDarkGreyed]}
+          onPress={() => this.props.navigation.goBack()}>
+          {i18n.t('emailConfirm.confirmed') + '\n'}
+          <Text style={[CS.colorPrimary]}>{i18n.t('goback')}</Text>
+        </Text>
+      );
+    }
+    return <CenteredLoading />;
   }
 
   /**
@@ -20,9 +80,7 @@ export default class EmailConfirmationScreen extends Component {
    */
   render() {
     return (
-      <View style={CommonStyle.flexContainer}>
-        <Text style={CommonStyle.fontL}>Sending email confirmation</Text>
-      </View>
+      <View style={[CS.flexContainer, CS.centered]}>{this.renderBody()}</View>
     );
   }
 }

src/settings/screens/EmailScreen.js

@@ -91,7 +91,8 @@ export default class EmailScreen extends Component {
     // validate
     const error = validator.emailMessage(email);
     const message = error ? <FormValidationMessage>{error}</FormValidationMessage> : null;
-    const confirmNote = showConfirmNote ? <FormValidationMessage>{i18n.t('validation.confirmNote')}</FormValidationMessage> : null;
+    const confirmNote = showConfirmNote ? <FormValidationMessage>{i18n.t('emailConfirm.confirmNote')}</FormValidationMessage> : null;
+
     return (
       <View style={[CommonStyle.flexContainer, CommonStyle.backgroundWhite]}>
         <FormLabel labelStyle={CommonStyle.fieldLabel}>{i18n.t('settings.currentEmail')}</FormLabel>

src/topbar/EmailConfirmation.js

-import React, {Component} from 'react';
-import {Text, StyleSheet, View} from 'react-native';
+import React, { Component } from 'react';
+import { Text, StyleSheet, View, Alert } from 'react-native';
 import i18n from '../common/services/i18n.service';
-import Touchable from '../common/components/Touchable';
 import emailConfirmationService from '../common/services/email-confirmation.service';
 import IonIcon from 'react-native-vector-icons/Ionicons';
+import { CommonStyle as CS } from '../styles/Common';
+import { observer, inject } from 'mobx-react/native';
 
-export default class EmailConfirmation extends Component {
-  send = () => {
-    const sended = emailConfirmationService.send();
-  };
-
-  state = {
-    dismiss: false,
+/**
+ * Email Confirmation Message
+ */
+export default
+@inject('user')
+@observer
+class EmailConfirmation extends Component {
+  /**
+   * Send confirmation email
+   */
+  send = async () => {
+    if (await emailConfirmationService.send()) {
+      Alert.alert(i18n.t('emailConfirm.sent'));
+    } else {
+      Alert.alert(i18n.t('pleaseTryAgain'));
+    }
   };
 
+  /**
+   * Dismiss message
+   */
   dismiss = () => {
-    this.setState({dismiss: true});
+    this.props.user.setDissmis(true);
   };
 
+  /**
+   * Render
+   */
   render() {
     const show =
-      !this.state.dismiss && this.props.user.me.email_confirmed === false;
+      !this.props.user.emailConfirmMessageDismiss &&
+      this.props.user.me.email_confirmed === false;
+
+    if (!show) {
+      return null;
+    }
+
     return (
-      show && <View style={styles.container}>
-        <Text style={[styles.text, styles.paddingRight]}>{i18n.t('validation.confirm')}</Text>
-        <Touchable style={styles.paddingRight} onPress={this.send}>
-          <Text style={styles.textBold}>{i18n.t('validation.sendAgain')}</Text>
-        </Touchable>
+      <View style={styles.container}>
+        <Text style={[CS.fontM, CS.colorWhite]}>
+          {i18n.t('emailConfirm.confirm')}
+        </Text>
+        <Text style={[CS.bold, CS.colorWhite]} onPress={this.send}>
+          {i18n.t('emailConfirm.sendAgain')}
+        </Text>
         <IonIcon
-          style={styles.modalCloseIcon}
+          style={[styles.modalCloseIcon, CS.colorWhite]}
           size={28}
           name="ios-close"
           onPress={this.dismiss}
-          color={'#FFF'}
         />
       </View>
     );
@@ -47,19 +70,9 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     flexDirection: 'column',
   },
-  text: {
-    color: '#fff',
-  },
-  textBold: {
-    color: '#fff',
-    fontWeight: '700'
-  },
   modalCloseIcon: {
     position: 'absolute',
     alignSelf: 'flex-end',
     paddingRight: 15,
   },
-  paddingRight: {
-    paddingRight: 15,
-  }
 });

src/topbar/Topbar.js

@@ -19,13 +19,15 @@ import featuresService from '../common/services/features.service';
 import { SafeAreaView } from 'react-navigation';
 import isIphoneX from '../common/helpers/isIphoneX';
 import testID from '../common/helpers/testID';
+import EmailConfirmation from './EmailConfirmation';
 
 const forceInset = isIphoneX ? {top: 32} : null
 
+export default
 @inject('user')
 @inject('wallet')
 @observer
-export default class Topbar extends Component {
+class Topbar extends Component {
 
   componentDidMount() {
     this.props.wallet.refresh();
@@ -57,7 +59,6 @@ export default class Topbar extends Component {
               testID="AvatarButton"
             /> }
           </View>
-
           <TouchableOpacity onPress={() => this.props.navigation.navigate('More', { navigation: this.props.navigation })} {...testID('Main menu button')}>
             <View style={styles.topbarRight}>
               <Icon name="menu" size={22} color='#444' style={ styles.button }/>
@@ -65,6 +66,7 @@ export default class Topbar extends Component {
           </TouchableOpacity>
 
         </View>
+        <EmailConfirmation user={this.props.user} />
       </SafeAreaView>
     );
   }
@@ -81,7 +83,7 @@ const styles = StyleSheet.create({
   container: {
     height: topbarHeight,
     display: 'flex',
-    flexDirection: 'row',
+    flexDirection: 'column',
     borderBottomWidth: StyleSheet.hairlineWidth,
     borderBottomColor: '#EEE',
     backgroundColor: '#FFFFFF',