Refactor loginRequired.js with Aphrodite and commonForm

- textbox and textbox__outlineable were copied from textbox.js to commonStyles.js

Since FormTextbox cannot be used for the input elements, I copied the styles applied for that element and applied to them. See: #7164 (comment)

The labels and input forms were grouped and placed with display:flex and justify-content:space-between. Also the elements inside each wrapper were aligned equally to make the length of the input forms always equal (l10n friendly).

Also colons in the label were removed to make the style consistent.

Closes #8009
Addresses #8010

Auditors:

Test Plan:
1. Visit http://browserspy.dk/password.php
2. Click "password-ok.php" link
3. Make sure you can log in successfully with the given credential
4. Change the lang setting on about:preferences
5. Try the same steps above and make sure the length of the input forms is equal

Author: Suguru Hirahara

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/styles/commonStyles.js

@@ -21,6 +21,20 @@ const styles = StyleSheet.create({
     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,

js/components/loginRequired.js

@@ -10,6 +10,17 @@ const appActions = require('../actions/appActions')
 const KeyCodes = require('../../app/common/constants/keyCodes')
 const urlResolve = require('url').resolve
 
+const {
+  CommonForm,
+  CommonFormSection,
+  CommonFormTitle,
+  CommonFormButtonWrapper
+} = require('../../app/renderer/components/commonForm')
+
+const {StyleSheet, css} = require('aphrodite/no-important')
+const globalStyles = require('../../app/renderer/components/styles/global')
+const commonStyles = require('../../app/renderer/components/styles/commonStyles')
+
 class LoginRequired extends React.Component {
   constructor () {
     super()
@@ -74,31 +85,81 @@ 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(styles.inputWrapper, styles.inputWrapper__label)}>
+              <label data-l10n-id='basicAuthUsernameLabel' htmlFor='loginUsername' />
+              <label className={css(styles.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(styles.inputWrapper, styles.inputWrapper__input)}>
+                <input className={css(
+                  commonStyles.formControl,
+                  commonStyles.textbox,
+                  commonStyles.textbox__outlineable,
+                  styles.input__box
+                )}
+                  spellCheck='false'
+                  onKeyDown={this.onKeyDown}
+                  onChange={this.onUsernameChange}
+                  value={this.state.username}
+                  ref={(loginUsername) => { this.loginUsername = loginUsername }}
+                />
+                <input className={css(
+                  commonStyles.formControl,
+                  commonStyles.textbox,
+                  commonStyles.textbox__outlineable,
+                  styles.input__box,
+                  styles.input__bottomRow
+                )}
+                  spellCheck='false'
+                  type='password'
+                  onKeyDown={this.onKeyDown}
+                  onChange={this.onPasswordChange}
+                  value={this.state.password}
+                />
+              </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: PropTypes.object }
+
+const styles = 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__box: {
+    fontSize: globalStyles.fontSize.flyoutDialog
+  }
+})
+
 module.exports = LoginRequired