From a3664ba751db82ff9a0b45e838d833c6125ddd9e Mon Sep 17 00:00:00 2001
From: Vahe Hovhannisyan <vhpoet@gmail.com>
Date: Fri, 23 Jun 2017 09:58:35 -0700
Subject: [PATCH] fix: cleanup mobile auth ui

---
 .../ChangePasswordForm/ChangePasswordForm.js  |  2 +-
 .../ForgotPasswordForm/ForgotPasswordForm.js  |  2 +-
 src/containers/App/App.js                     | 22 ++++++++++++++++++-
 src/containers/App/App.scss                   |  8 ++++---
 src/containers/Auth/Auth.js                   | 10 ++++++++-
 src/containers/Auth/Auth.scss                 |  9 ++++----
 src/helpers/Html.js                           |  2 +-
 src/theme/theme.scss                          |  9 ++++----
 8 files changed, 47 insertions(+), 17 deletions(-)

diff --git a/src/components/ChangePasswordForm/ChangePasswordForm.js b/src/components/ChangePasswordForm/ChangePasswordForm.js
index 619fc583..88869820 100755
--- a/src/components/ChangePasswordForm/ChangePasswordForm.js
+++ b/src/components/ChangePasswordForm/ChangePasswordForm.js
@@ -89,7 +89,7 @@ export default class ChangePasswordForm extends Component {
               label='Repeat Password'
               size='lg' />
           </div>
-          <div className='row'>
+          <div>
             <button type='submit' className='btn btn-success' disabled={pristine || (invalid && !submitFailed) || submitting}>
               {submitting ? ' Submitting...' : ' Submit'}
             </button>
diff --git a/src/components/ForgotPasswordForm/ForgotPasswordForm.js b/src/components/ForgotPasswordForm/ForgotPasswordForm.js
index 134f884f..46a0a4bb 100755
--- a/src/components/ForgotPasswordForm/ForgotPasswordForm.js
+++ b/src/components/ForgotPasswordForm/ForgotPasswordForm.js
@@ -72,7 +72,7 @@ export default class ForgotPasswordForm extends Component {
               focus
               autoCapitalize='off' />
           </div>
-          <div className='row'>
+          <div>
             <button type='submit' className='btn btn-success btn-lg' disabled={pristine || (invalid && !submitFailed) || submitting}>
               {submitting ? ' Submitting...' : ' Submit'}
             </button>
diff --git a/src/containers/App/App.js b/src/containers/App/App.js
index 603c4c29..2f8cff0f 100755
--- a/src/containers/App/App.js
+++ b/src/containers/App/App.js
@@ -97,6 +97,16 @@ export default class App extends Component {
         this.props.verify(params.username, params.verifyCode)
       }
     }
+
+    // Disable scaling
+    document.addEventListener('touchmove', function(event) {
+      event = event.originalEvent || event
+      if (event.scale !== 1) {
+        event.preventDefault()
+      }
+    }, false)
+
+    this.fixAppHeight()
   }
 
   componentWillReceiveProps (nextProps) {
@@ -110,6 +120,14 @@ export default class App extends Component {
     }
   }
 
+  fixAppHeight = () => {
+    // Viewport height
+    const height = Math.max(document.documentElement.clientHeight, window.innerHeight || 0)
+    document.getElementsByClassName(cx('App'))[0].style['min-height'] = height + 'px'
+
+    window.addEventListener('resize', this.fixAppHeight, false)
+  }
+
   connect = (props = this.props) => {
     if (!props.user || !props.user.username) return
 
@@ -149,7 +167,7 @@ export default class App extends Component {
     const { user, config = {}, advancedMode, verified, verificationEmailSent } = this.props
 
     return (
-      <div className={cx('App', !user && 'darkBg')}>
+      <div className={cx('App', !user && 'guest')}>
         <Helmet defaultTitle={config.title} titleTemplate={config.title && '%s - ' + config.title}>
           <meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no' />
           <meta property='og:type' content='website' />
@@ -261,6 +279,8 @@ export default class App extends Component {
           </Link>
         </div>}
 
+        {user && <PaymentHandler />}
+
         {advancedMode && <div className={cx('version')}>Version: {config.versions && (config.versions.current + '-' + config.versions.hash)}</div>}
       </div>
     )
diff --git a/src/containers/App/App.scss b/src/containers/App/App.scss
index a3098962..7fc55e7d 100755
--- a/src/containers/App/App.scss
+++ b/src/containers/App/App.scss
@@ -2,11 +2,13 @@
 @import 'mixins';
 
 .App {
-  min-height: 100%;
   padding-bottom: 30px;
 
-  &.darkBg {
-    background: #333333;
+  @include mobile {
+    padding-bottom: 50px;
+  }
+
+  &.guest {
     padding-bottom: 0;
   }
 }
diff --git a/src/containers/Auth/Auth.js b/src/containers/Auth/Auth.js
index 1fe2dc3f..7ae80107 100755
--- a/src/containers/Auth/Auth.js
+++ b/src/containers/Auth/Auth.js
@@ -45,10 +45,18 @@ export default class Home extends Component {
     this.setCurrentView()
   }
 
+  componentDidMount () {
+    document.getElementsByTagName('body')[0].className = 'guest'
+  }
+
   componentWillReceiveProps (nextProps) {
     this.setCurrentView(nextProps)
   }
 
+  componentWillUnmount () {
+    document.getElementsByTagName('body')[0].className = ''
+  }
+
   setCurrentView (props) {
     const prps = props || this.props
     const fullPath = prps.route.path
@@ -74,7 +82,7 @@ export default class Home extends Component {
     const appConfig = this.props.config || {}
 
     return (
-      <div className={cx('Auth', 'container')}>
+      <div className={cx('Auth')}>
         <div>
           <div className={cx('header')}>
             <h1 className={cx('title')}>{appConfig.title}</h1>
diff --git a/src/containers/Auth/Auth.scss b/src/containers/Auth/Auth.scss
index 2f2b11d4..be93410d 100755
--- a/src/containers/Auth/Auth.scss
+++ b/src/containers/Auth/Auth.scss
@@ -7,10 +7,7 @@
   align-items: center;
   justify-content: center;
 
-  // just to bring the .window a bit higher
-  padding-bottom: 3%;
-
-  min-height: 100vh;
+  min-height: 80vh;
 }
 .header {
   margin: 0 0 20px;
@@ -24,6 +21,10 @@
   background: #fff;
   border-radius: 3px;
   padding: 25px;
+
+  @include mobile {
+    width: 90vw;
+  }
 }
 .oauthBox {
   color: #d9d9d9;
diff --git a/src/helpers/Html.js b/src/helpers/Html.js
index 992076f1..5d0a3170 100644
--- a/src/helpers/Html.js
+++ b/src/helpers/Html.js
@@ -35,7 +35,7 @@ export default class Html extends Component {
           {helmet.script.toComponent()}
 
           <link rel='shortcut icon' href='/favicon.png' />
-          <meta name='viewport' content='width=device-width, initial-scale=1' />
+          <meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no' />
           {/* styles (will be present only in production with webpack extract text plugin) */}
           <link href={assets.styles.main} media='screen, projection' rel='stylesheet' type='text/css' charSet='UTF-8' />
           <link href='https://fonts.googleapis.com/css?family=Open+Sans:300' rel='stylesheet' />
diff --git a/src/theme/theme.scss b/src/theme/theme.scss
index 430ca4ea..98595cab 100644
--- a/src/theme/theme.scss
+++ b/src/theme/theme.scss
@@ -4,21 +4,20 @@ html,
 body {
   height: 100%;
   background: #fff;
+
+  &.guest {
+    background: #333333;
+  }
 }
 
 #content {
   display: table;
   width: 100%;
   height: inherit;
-
-  @include mobile {
-    padding-bottom: 50px;
-  }
 }
 #app {
   display: table-cell;
 }
-
 a {
   cursor: pointer;
 }