Fix/dialogs behind keyboard on Android and IOS

src/components/Account/Login/Login.component.js

@@ -22,7 +22,12 @@ export class Login extends Component {
     intl: intlShape.isRequired,
     isDialogOpen: PropTypes.bool.isRequired,
     onClose: PropTypes.func.isRequired,
-    onResetPasswordClick: PropTypes.func.isRequired
+    onResetPasswordClick: PropTypes.func.isRequired,
+    dialogWithKeyboardStyle: PropTypes.object
+  };
+
+  static defaultProps = {
+    dialogWithKeyboardStyle: {}
   };
 
   state = {
@@ -45,16 +50,28 @@ export class Login extends Component {
 
   render() {
     const { isLogging, loginStatus } = this.state;
-    const { intl, isDialogOpen, onClose, onResetPasswordClick } = this.props;
+    const {
+      intl,
+      isDialogOpen,
+      onClose,
+      onResetPasswordClick,
+      dialogWithKeyboardStyle
+    } = this.props;
+    const { dialogStyle, dialogContentStyle } = dialogWithKeyboardStyle ?? {};
 
     const isButtonDisabled = isLogging || !!loginStatus.success;
 
     return (
-      <Dialog open={isDialogOpen} onClose={onClose} aria-labelledby="login">
+      <Dialog
+        open={isDialogOpen}
+        onClose={onClose}
+        aria-labelledby="login"
+        style={dialogStyle}
+      >
         <DialogTitle id="login">
           <FormattedMessage {...messages.login} />
         </DialogTitle>
-        <DialogContent>
+        <DialogContent style={dialogContentStyle}>
           <div
             className={classNames('Login__status', {
               'Login__status--error': !loginStatus.success,

src/components/Account/SignUp/SignUp.component.js

@@ -22,7 +22,13 @@ export class SignUp extends Component {
   static propTypes = {
     intl: intlShape.isRequired,
     isDialogOpen: PropTypes.bool.isRequired,
-    onClose: PropTypes.func.isRequired
+    onClose: PropTypes.func.isRequired,
+    isKeyboardOpen: PropTypes.bool,
+    dialogWithKeyboardStyle: PropTypes.object
+  };
+
+  static defaultProps = {
+    dialogWithKeyboardStyle: {}
   };
 
   state = {
@@ -52,16 +58,23 @@ export class SignUp extends Component {
 
   render() {
     const { signUpStatus, isSigningUp } = this.state;
-    const { isDialogOpen, onClose, intl } = this.props;
+    const { isDialogOpen, onClose, intl, dialogWithKeyboardStyle } = this.props;
+
+    const { dialogStyle, dialogContentStyle } = dialogWithKeyboardStyle ?? {};
 
     const isButtonDisabled = isSigningUp || !!signUpStatus.success;
 
     return (
-      <Dialog open={isDialogOpen} onClose={onClose} aria-labelledby="sign-up">
+      <Dialog
+        open={isDialogOpen}
+        onClose={onClose}
+        aria-labelledby="sign-up"
+        style={dialogStyle}
+      >
         <DialogTitle id="sign-up">
           <FormattedMessage {...messages.signUp} />
         </DialogTitle>
-        <DialogContent>
+        <DialogContent style={dialogContentStyle}>
           <div
             className={classNames('SignUp__status', {
               'SignUp__status--error': !signUpStatus.success,

src/components/WelcomeScreen/WelcomeScreen.container.js

@@ -21,11 +21,21 @@ import ResetPassword from '../Account/ResetPassword';
 import CboardLogo from './CboardLogo/CboardLogo.component';
 import './WelcomeScreen.css';
 import { API_URL } from '../../constants';
-import { isAndroid, isElectron, isIOS } from '../../cordova-util';
+import {
+  isAndroid,
+  isElectron,
+  isIOS,
+  manageKeyboardEvents
+} from '../../cordova-util';
 
 export class WelcomeScreen extends Component {
   state = {
-    activeView: ''
+    activeView: '',
+    keyboard: { isKeyboardOpen: false, keyboardHeight: undefined },
+    dialogWithKeyboardStyle: {
+      dialogStyle: {},
+      dialogContentStyle: {}
+    }
   };
 
   static propTypes = {
@@ -35,6 +45,18 @@ export class WelcomeScreen extends Component {
     onClose: PropTypes.func
   };
 
+  handleKeyboardDidShow = event => {
+    this.setState({
+      keyboard: { isKeyboardOpen: true, keyboardHeight: event.keyboardHeight }
+    });
+  };
+
+  handleKeyboardDidHide = () => {
+    this.setState({
+      keyboard: { isKeyboardOpen: false, keyboardHeight: null }
+    });
+  };
+
   handleActiveView = activeView => {
     this.setState({
       activeView
@@ -115,9 +137,58 @@ export class WelcomeScreen extends Component {
     window.location = `${API_URL}login/apple-web`;
   };
 
+  updateDialogStyle() {
+    if (!(isAndroid() || isIOS())) return;
+    const { isKeyboardOpen, keyboardHeight } = this.state.keyboard;
+    if (isKeyboardOpen) {
+      const KEYBOARD_MARGIN_TOP = 30;
+      const DEFAULT_KEYBOARD_SPACE = 310;
+      const keyboardSpace = keyboardHeight
+        ? keyboardHeight + KEYBOARD_MARGIN_TOP
+        : DEFAULT_KEYBOARD_SPACE;
+      return {
+        dialogStyle: {
+          marginBottom: `${keyboardSpace}px`
+        },
+        dialogContentStyle: {
+          maxHeight: `calc(92vh - ${keyboardSpace}px)`,
+          overflow: 'scroll'
+        }
+      };
+    }
+    return null;
+  }
+
+  componentDidUpdate(prevProps, prevState) {
+    if (!(isAndroid() || isIOS())) return;
+    const { isKeyboardOpen: wasKeyboardOpen } = prevState.keyboard;
+    const { isKeyboardOpen } = this.state.keyboard;
+    if (wasKeyboardOpen !== isKeyboardOpen) {
+      this.setState({
+        dialogWithKeyboardStyle: this.updateDialogStyle()
+      });
+    }
+  }
+
+  componentDidMount() {
+    if (!(isAndroid() || isIOS())) return;
+    manageKeyboardEvents({
+      onShow: this.handleKeyboardDidShow,
+      onHide: this.handleKeyboardDidHide
+    });
+  }
+  componentWillUnmount() {
+    if (!(isAndroid() || isIOS())) return;
+    manageKeyboardEvents({
+      onShow: this.handleKeyboardDidShow,
+      onHide: this.handleKeyboardDidHide,
+      removeEvent: true
+    });
+  }
+
   render() {
     const { finishFirstVisit, heading, text, onClose } = this.props;
-    const { activeView } = this.state;
+    const { activeView, dialogWithKeyboardStyle } = this.state;
 
     return (
       <div className="WelcomeScreen">
@@ -212,6 +283,7 @@ export class WelcomeScreen extends Component {
           isDialogOpen={activeView === 'login'}
           onResetPasswordClick={this.onResetPasswordClick}
           onClose={this.resetActiveView}
+          dialogWithKeyboardStyle={dialogWithKeyboardStyle}
         />
         <ResetPassword
           isDialogOpen={activeView === 'forgot'}
@@ -220,6 +292,7 @@ export class WelcomeScreen extends Component {
         <SignUp
           isDialogOpen={activeView === 'signup'}
           onClose={this.resetActiveView}
+          dialogWithKeyboardStyle={dialogWithKeyboardStyle}
         />
       </div>
     );

src/cordova-util.js

@@ -14,6 +14,20 @@ export const onCordovaReady = onReady =>
 export const onAndroidPause = onPause =>
   document.addEventListener('pause', onPause, false);
 
+export const manageKeyboardEvents = ({
+  onShow,
+  onHide,
+  removeEvent = false
+}) => {
+  if (!removeEvent) {
+    window.addEventListener('keyboardDidShow', onShow, false);
+    window.addEventListener('keyboardDidHide', onHide, false);
+    return;
+  }
+  window.removeEventListener('keyboardDidShow', onShow, false);
+  window.removeEventListener('keyboardDidHide', onHide, false);
+};
+
 export const onCvaResume = onResume =>
   document.addEventListener('resume', onResume, false);