fix: cleanup mobile auth ui

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>

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>

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' />

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;
   }
 }

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>

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;

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' />

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;
 }