Refactor loginRequired.js with Aphrodite and commonForm

app/extensions/brave/locales/en-US/app.properties

@@ -80,8 +80,8 @@ moreBookmarks=More bookmarks…
 fullScreenModeWarning={{host}} entered full screen mode, press ESC to exit.
 braveMenuTotalReplacements=Total Replacements: {{count}}
 basicAuthRequired=Authentication Required
-basicAuthUsernameLabel=Username:
-basicAuthPasswordLabel=Password:
+basicAuthUsernameLabel=Username
+basicAuthPasswordLabel=Password
 basicAuthMessage={{host}} requires a username and password.
 crashScreenHeader=Something went wrong =(
 crashScreenText=An error occurred while displaying this webpage. To continue, reload or navigate to another page.

app/renderer/components/commonForm.js

@@ -10,6 +10,7 @@ const globalStyles = require('./styles/global')
 const commonStyles = require('./styles/commonStyles')
 
 const {FormDropdown} = require('./dropdown')
+const {FormTextbox} = require('./textbox')
 
 class CommonForm extends ImmutableComponent {
   render () {
@@ -23,6 +24,12 @@ class CommonFormDropdown extends ImmutableComponent {
   }
 }
 
+class CommonFormTextbox extends ImmutableComponent {
+  render () {
+    return <FormTextbox data-isCommonForm='true' {...this.props} />
+  }
+}
+
 class CommonFormClickable extends ImmutableComponent {
   render () {
     return <div className={css(styles.CommonFormClickable)} {...this.props} />
@@ -71,6 +78,7 @@ const styles = StyleSheet.create({
     padding: 0,
     top: '40px',
     cursor: 'default',
+    width: '100%',
     maxWidth: '422px',
     WebkitUserSelect: 'none'
 
@@ -109,13 +117,42 @@ const styles = StyleSheet.create({
   }
 })
 
+const commonFormStyles = StyleSheet.create({
+  sectionWrapper: {
+    display: 'flex',
+    justifyContent: 'space-between'
+  },
+  inputWrapper: {
+    display: 'flex',
+    flexFlow: 'column',
+    justifyContent: 'space-around'
+  },
+  inputWrapper__label: {
+    marginRight: `calc(${globalStyles.spacing.dialogInsideMargin} / 2)`
+  },
+  inputWrapper__input: {
+    flexGrow: 1
+  },
+  input__bottomRow: {
+    marginTop: `calc(${globalStyles.spacing.dialogInsideMargin} / 3)`
+  },
+  input__marginRow: {
+    marginTop: `calc(${globalStyles.spacing.dialogInsideMargin} / 3)`
+  },
+  input__box: {
+    fontSize: globalStyles.fontSize.flyoutDialog
+  }
+})
+
 module.exports = {
   CommonForm,
   CommonFormDropdown,
+  CommonFormTextbox,
   CommonFormClickable,
   CommonFormSection,
   CommonFormTitle,
   CommonFormSubSection,
   CommonFormButtonWrapper,
-  CommonFormBottomWrapper
+  CommonFormBottomWrapper,
+  commonFormStyles
 }

app/renderer/components/styles/commonStyles.js

@@ -20,6 +20,22 @@ const styles = StyleSheet.create({
     padding: '0.4em',
     width: '100%'
   },
+
+  // Textbox -- copied from textbox.js
+  textbox: {
+    boxSizing: 'border-box',
+    width: 'auto'
+  },
+  textbox__outlineable: {
+    ':focus': {
+      outlineColor: globalStyles.color.statsBlue,
+      outlineOffset: '-4px',
+      outlineStyle: 'solid',
+      outlineWidth: '1px'
+    }
+  },
+
+  // Dialogs
   flyoutDialog: {
     background: globalStyles.color.toolbarBackground,
     borderRadius: globalStyles.radius.borderRadius,

app/renderer/components/textbox.js

@@ -4,7 +4,7 @@
 
 const React = require('react')
 const ImmutableComponent = require('../../../js/components/immutableComponent')
-const {StyleSheet, css} = require('aphrodite')
+const {StyleSheet, css} = require('aphrodite/no-important')
 const globalStyles = require('./styles/global')
 const commonStyles = require('./styles/commonStyles')
 
@@ -14,8 +14,9 @@ class Textbox extends ImmutableComponent {
     const className = css(
       this.props['data-isFormControl'] && commonStyles.formControl,
       styles.textbox,
-      this.props['data-isSettings'] && styles.isSettings,
       (this.props.readonly || this.props.readOnly) ? styles.readOnly : styles.outlineable,
+      this.props['data-isCommonForm'] && styles.isCommonForm,
+      this.props['data-isSettings'] && styles.isSettings,
       this.props['data-isRecoveryKeyTextbox'] && styles.recoveryKeys
     )
 
@@ -73,6 +74,10 @@ const styles = StyleSheet.create({
       outlineWidth: '1px'
     }
   },
+  isCommonForm: {
+    fontSize: globalStyles.fontSize.flyoutDialog,
+    width: '100%'
+  },
   isSettings: {
     width: '280px'
   },

js/components/loginRequired.js

@@ -9,6 +9,18 @@ const appActions = require('../actions/appActions')
 const KeyCodes = require('../../app/common/constants/keyCodes')
 const urlResolve = require('url').resolve
 
+const {StyleSheet, css} = require('aphrodite/no-important')
+const commonStyles = require('../../app/renderer/components/styles/commonStyles')
+
+const {
+  CommonForm,
+  CommonFormSection,
+  CommonFormTitle,
+  CommonFormTextbox,
+  CommonFormButtonWrapper,
+  commonFormStyles
+} = require('../../app/renderer/components/commonForm')
+
 class LoginRequired extends React.Component {
   constructor () {
     super()
@@ -73,31 +85,66 @@ class LoginRequired extends React.Component {
       host: urlResolve(this.detail.getIn(['request', 'url']), '/')
     }
     return <Dialog onHide={this.onClose} isClickDismiss>
-      <div className='genericForm' onClick={this.onClick.bind(this)}>
-        <h2 data-l10n-id='basicAuthRequired' />
-        <div className='genericFormSubtitle' data-l10n-id='basicAuthMessage' data-l10n-args={JSON.stringify(l10nArgs)} />
-        <div className='genericFormTable'>
-          <div id='loginUsername' className='formRow'>
-            <label data-l10n-id='basicAuthUsernameLabel' htmlFor='loginUsername' />
-            <input spellCheck='false' onKeyDown={this.onKeyDown} onChange={this.onUsernameChange} value={this.state.username} ref={(loginUsername) => { this.loginUsername = loginUsername }} />
-          </div>
-          {
-            !this.isFolder
-            ? <div id='loginPassword' className='formRow'>
-              <label data-l10n-id='basicAuthPasswordLabel' htmlFor='loginPassword' />
-              <input spellCheck='false' type='password' onKeyDown={this.onKeyDown} onChange={this.onPasswordChange} value={this.state.password} />
+      <CommonForm onClick={this.onClick.bind(this)}>
+        <CommonFormTitle data-l10n-id='basicAuthRequired' />
+        <CommonFormSection data-l10n-id='basicAuthMessage' data-l10n-args={JSON.stringify(l10nArgs)} />
+        <CommonFormSection>
+          <div className={css(styles.sectionWrapper)}>
+            <div data-test-id='loginLabel'
+              className={css(commonFormStyles.inputWrapper,
+              commonFormStyles.inputWrapper__label
+            )}>
+              <label data-l10n-id='basicAuthUsernameLabel' htmlFor='loginUsername' />
+              <label className={css(commonFormStyles.input__bottomRow)} data-l10n-id='basicAuthPasswordLabel' htmlFor='loginPassword' />
             </div>
-            : null
-          }
-          <div className='formRow'>
-            <Button l10nId='cancel' className='whiteButton' onClick={this.onClose} />
-            <Button l10nId='ok' className='primaryButton' onClick={this.onSave.bind(this)} />
+            {
+              !this.isFolder
+              ? <div id='loginInput' className={css(
+                  commonFormStyles.inputWrapper,
+                  commonFormStyles.inputWrapper__input
+                )}>
+                <input className={css(
+                  commonStyles.formControl,
+                  commonStyles.textbox,
+                  commonStyles.textbox__outlineable,
+                  commonFormStyles.input__box
+                )}
+                  spellCheck='false'
+                  onKeyDown={this.onKeyDown}
+                  onChange={this.onUsernameChange}
+                  value={this.state.username}
+                  ref={(loginUsername) => { this.loginUsername = loginUsername }}
+                />
+                <div className={css(commonFormStyles.input__marginRow)}>
+                  <CommonFormTextbox
+                    spellCheck='false'
+                    type='password'
+                    onKeyDown={this.onKeyDown}
+                    onChange={this.onPasswordChange}
+                    value={this.state.password}
+                  />
+                </div>
+              </div>
+              : null
+            }
           </div>
-        </div>
-      </div>
+        </CommonFormSection>
+        <CommonFormButtonWrapper>
+          <Button l10nId='cancel' className='whiteButton' onClick={this.onClose} />
+          <Button l10nId='ok' className='primaryButton' onClick={this.onSave.bind(this)} />
+        </CommonFormButtonWrapper>
+      </CommonForm>
     </Dialog>
   }
 }
 
 LoginRequired.propTypes = { frameProps: React.PropTypes.object }
+
+const styles = StyleSheet.create({
+  sectionWrapper: {
+    display: 'flex',
+    justifyContent: 'space-between'
+  }
+})
+
 module.exports = LoginRequired