close site settings when pressing ESC

assets/src/js/components/SiteSettings.js

@@ -14,7 +14,9 @@ class SiteSettings extends Component {
         }
     }
 
-    componentDidMount() {}
+    componentDidMount() {
+        document.addEventListener('keydown', this.handleKeydownEvent);
+    }
     componentWillUnmount() {}
 
     @bind
@@ -53,16 +55,15 @@ class SiteSettings extends Component {
           }).then((d) => {
               this.props.onUpdate(d)
           })
-
     }
 
     @bind 
-    onTextareaClick(evt) {
+    handleTextareaClickEvent(evt) {
         evt.target.select()
     }
 
     @bind 
-    maybeCloseModal(evt) {
+    handleClickEvent(evt) {
         // don't close if click was inside the modal
         if ( evt.target.matches('.modal *, .modal')) {
             return;
@@ -71,6 +72,19 @@ class SiteSettings extends Component {
         this.props.onClose()
     }
 
+    @bind 
+    handleKeydownEvent(evt) {
+        // close modal when pressing ESC 
+        if(evt.keyCode == 27) {
+            this.props.onClose()
+        }
+    }
+
+    @bind
+    setTextarea(el) {
+       this.textarea = el
+    }
+
     @bind 
     updateSiteName(evt) {
         this.props.site.name = evt.target.value;
@@ -81,7 +95,7 @@ class SiteSettings extends Component {
 
         // TODO: Render different form for new sites vs. existing sites
         return (
-        <div class="modal-wrap" style={"display: " + ( props.visible ? '' : 'none')} onClick={this.maybeCloseModal}>
+        <div class="modal-wrap" style={"display: " + ( props.visible ? '' : 'none')} onClick={this.handleClickEvent}>
             <div class="modal">
                 <p>{newSite ? 'Add a new site to track with Fathom' : 'Update your site name or get your tracking code'}</p>
                 <form onSubmit={this.onSubmit}>
@@ -92,7 +106,7 @@ class SiteSettings extends Component {
 
                     <fieldset style={newSite ? 'display: none;' : ''}>
                         <label>Add this code to your website    <small class="right">(site ID = {props.site.trackingId})</small></label>
-                        <textarea ref={(el) => { this.textarea = el }} onClick={this.onTextareaClick} readonly="readonly">{`<!-- Fathom - simple website analytics - https://github.com/usefathom/fathom -->
+                        <textarea ref={this.setTextarea} onClick={this.handleTextareaClickEvent} readonly="readonly">{`<!-- Fathom - simple website analytics - https://github.com/usefathom/fathom -->
 <script>
 (function(f, a, t, h, o, m){
 	a[h]=a[h]||function(){

assets/src/js/pages/dashboard.js

@@ -26,6 +26,7 @@ class Dashboard extends Component {
       site: { id: 0 },
       sites: [],
       settingsOpen: false,
+      addingNewSite: false,
     }
   }
 
@@ -55,18 +56,31 @@ class Dashboard extends Component {
   }
 
   @bind 
-  openSiteSettings(site) {
+  showSiteSettings(site) {
-    this.setState( { settingsOpen: true, site: site && site.hasOwnProperty('id') ? site : this.state.site })
+    site = site && site.id == 0 ? site : this.state.site;
+    this.setState({ 
+      settingsOpen: true, 
+      site: site,
+      previousSite: this.state.site,
+    })
   }
 
   @bind
   closeSiteSettings() {
-    this.setState({settingsOpen: false})
+    this.setState({
+      settingsOpen: false, 
+
+      // switch back to previous site if we were showing site settings to add a new site
+      site: this.state.site.id > 0 ? this.state.site : this.state.previousSite,
+    })
   }
 
   @bind 
   changeSelectedSite(site) {
-    this.setState({site: site})
+    this.setState({
+      site: site,
+      previousSite: this.state.site,
+    })
   }
 
   @bind
@@ -94,7 +108,6 @@ class Dashboard extends Component {
     this.setState({ sites: newSites, site: newSites[0] })
   }
 
-
   render(props, state) {
     // only show logout link if this dashboard is not public
     let logoutMenuItem = state.isPublic ? '' : (
@@ -109,8 +122,8 @@ class Dashboard extends Component {
         <nav class="main-nav">
             <ul>
               <li class="logo"><a href="/">Fathom</a></li>
-              <SiteSwitcher sites={state.sites} selectedSite={state.site} onChange={this.changeSelectedSite} onAdd={this.openSiteSettings} showAdd={!state.isPublic}/>
+              <SiteSwitcher sites={state.sites} selectedSite={state.site} onChange={this.changeSelectedSite} onAdd={this.showSiteSettings} showAdd={!state.isPublic}/>
-              <Gearwheel onClick={this.openSiteSettings} visible={!state.isPublic} />
+              <Gearwheel onClick={this.showSiteSettings} visible={!state.isPublic} />
               <li class="visitors"><Realtime siteId={state.site.id} /></li>
           </ul>
         </nav>

pkg/api/sites.go

@@ -79,13 +79,13 @@ func (api *API) DeleteSiteHandler(w http.ResponseWriter, r *http.Request) error
 }
 
 func generateTrackingID() string {
-	return randomString(2) + "-" + randomString(2)
+	return randomString(5)
 }
 
 func randomString(len int) string {
 	bytes := make([]byte, len)
 	for i := 0; i < len; i++ {
-		bytes[i] = byte(97 + rand.Intn(25)) //a=97 and z = 97+25
+		bytes[i] = byte(65 + rand.Intn(25)) //a=65 and z = 65+25
 	}
 
 	return string(bytes)