Integrate identifier rules into name/email fields in preferences

 - Provides dialog error message with disallowed string
 - Disables save

app/src/ui/preferences/preferences.tsx

@@ -10,7 +10,7 @@ import { Git } from './git'
 import { assertNever } from '../../lib/fatal-error'
 import { Button } from '../lib/button'
 import { ButtonGroup } from '../lib/button-group'
-import { Dialog, DialogFooter } from '../dialog'
+import { Dialog, DialogFooter, DialogError } from '../dialog'
 import {
   getGlobalConfigValue,
   setGlobalConfigValue,
@@ -20,6 +20,7 @@ import {
 import { lookupPreferredEmail } from '../../lib/email'
 import { Shell, getAvailableShells } from '../../lib/shells'
 import { getAvailableEditors } from '../../lib/editors/lookup'
+import { disallowedCharacters } from './identifier-rules'
 
 interface IPreferencesProps {
   readonly dispatcher: Dispatcher
@@ -117,13 +118,20 @@ export class Preferences extends React.Component<
   }
 
   public render() {
+    const disallowedCharactersError = this.disallowedCharacterErrorMessage(
+      this.state.committerName,
+      this.state.committerEmail
+    )
+    const hasDisallowedCharacter = disallowedCharactersError !== null
+
     return (
       <Dialog
         id="preferences"
         title={__DARWIN__ ? 'Preferences' : 'Options'}
         onDismissed={this.props.onDismissed}
         onSubmit={this.onSave}
       >
+        {this.renderDisallowedCharactersError(disallowedCharactersError)}
         <TabBar
           onTabClicked={this.onTabClicked}
           selectedIndex={this.state.selectedIndex}
@@ -134,7 +142,7 @@ export class Preferences extends React.Component<
         </TabBar>
 
         {this.renderActiveTab()}
-        {this.renderFooter()}
+        {this.renderFooter(hasDisallowedCharacter)}
       </Dialog>
     )
   }
@@ -153,6 +161,31 @@ export class Preferences extends React.Component<
     this.props.dispatcher.removeAccount(account)
   }
 
+  private disallowedCharacterErrorMessage(name: string, email: string) {
+    const disallowedNameCharacters = disallowedCharacters(name)
+    const disallowedEmailCharacters = disallowedCharacters(email)
+
+    if (disallowedNameCharacters) {
+      return `Git name field cannot be a disallowed character "${
+        disallowedNameCharacters
+      }"`
+    } else if (disallowedEmailCharacters) {
+      return `Git email field cannot be a disallowed character "${
+        disallowedEmailCharacters
+      }"`
+    } else {
+      return null
+    }
+  }
+
+  private renderDisallowedCharactersError(message: string | null) {
+    if (message) {
+      return <DialogError>{message}</DialogError>
+    } else {
+      return null
+    }
+  }
+
   private renderActiveTab() {
     const index = this.state.selectedIndex
     switch (index) {
@@ -232,7 +265,7 @@ export class Preferences extends React.Component<
     this.setState({ selectedShell: shell })
   }
 
-  private renderFooter() {
+  private renderFooter(hasDisabledError: boolean) {
     const index = this.state.selectedIndex
     switch (index) {
       case PreferencesTab.Accounts:
@@ -242,7 +275,9 @@ export class Preferences extends React.Component<
         return (
           <DialogFooter>
             <ButtonGroup>
-              <Button type="submit">Save</Button>
+              <Button type="submit" disabled={hasDisabledError}>
+                Save
+              </Button>
               <Button onClick={this.props.onDismissed}>Cancel</Button>
             </ButtonGroup>
           </DialogFooter>