get secret & db creds from environment (file)

.babelrc

@@ -0,0 +1,5 @@
+{
+  "plugins": [
+    ["transform-react-jsx", { "pragma":"h" }]
+  ]
+}

.env.example

@@ -0,0 +1,5 @@
+ANA_DATABASE_NAME="ana"
+ANA_DATABASE_USER="root"
+ANA_DATABASE_PASSWORD=""
+ANA_DATABASE_HOST=""
+ANA_SECRET_KEY="TWEn6GXQDx45PZfmJWvyGpXf5M8b94bszgw8JcJWEd6WxgrnUkLatS34GwjPTvZb"

.gitignore

@@ -1,4 +1,4 @@
 node_modules
 static
-.*
+.env
 storage

api/auth.go

@@ -3,9 +3,10 @@ package api
 import (
   "net/http"
   "github.com/gorilla/sessions"
+  "os"
 )
 
-var store = sessions.NewFilesystemStore( "./storage/sessions/", []byte("something-very-secret"))
+var store = sessions.NewFilesystemStore( "./storage/sessions/", []byte(os.Getenv("ANA_SECRET_KEY")))
 
 // URL: POST /api/session
 var Login = http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
@@ -22,9 +23,10 @@ var Login = http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
 // URL: DELETE /api/session
 var Logout = http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
     session, _ := store.Get(r, "auth")
-    session.Options.MaxAge = -1
-    err := session.Save(r, w)
-    checkError(err)
+    if ! session.IsNew  {
+      session.Options.MaxAge = -1
+      session.Save(r, w)
+    }
 
     w.Header().Set("Content-Type", "application/json")
     w.WriteHeader(http.StatusOK)
@@ -34,8 +36,7 @@ var Logout = http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
 /* middleware */
 func Authorize(next http.Handler) http.Handler {
  return http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
-    session, err := store.Get(r, "auth")
-    checkError(err)
+    session, _ := store.Get(r, "auth")
 
     if _, ok := session.Values["user"]; !ok  {
       w.WriteHeader(http.StatusUnauthorized)

assets/js/components/Graph.js

@@ -28,7 +28,6 @@ class Graph extends Component {
   refreshChart() {
     if( ! this.canvas ) { return; }
 
-
     // clear canvas
     var newCanvas = document.createElement('canvas');
     this.canvas.parentNode.style.minHeight = this.canvas.parentNode.clientHeight + "px";
@@ -64,19 +63,28 @@ class Graph extends Component {
     // fetch visitor data
     fetch('/api/visits/count/day?period=' + period, {
       credentials: 'include'
-    }).then((r) => r.json())
-      .then((data) => {
-        this.setState({ visitorData: data })
-        window.setTimeout(() => (this.refreshChart()), 20);
+    }).then((r) => {
+      if( r.ok ) {
+        return r.json();
+      }
+      throw new Error();
+    }).then((data) => {
+      this.setState({ visitorData: data })
+      window.requestAnimationFrame(this.refreshChart.bind(this));
     });
 
     // fetch pageview data
     fetch('/api/pageviews/count/day?period=' + period, {
       credentials: 'include'
-    }).then((r) => r.json())
-      .then((data) => {
+    }).then((r) => {
+      if( r.ok ) {
+        return r.json();
+      }
+
+      throw new Error();
+    }).then((data) => {
         this.setState({ pageviewData: data })
-        window.setTimeout(() => (this.refreshChart()), 20);
+        window.requestAnimationFrame(this.refreshChart.bind(this));
     });
   }
 

assets/js/components/Pageviews.js

@@ -27,8 +27,12 @@ class Pageviews extends Component {
       if( r.ok ) {
         return r.json();
       }
+
+      throw new Error();
     }).then((data) => {
       this.setState({ records: data })
+    }).catch((e) => {
+
     });
   }
 

assets/js/components/Realtime.js

@@ -17,11 +17,12 @@ class Realtime extends Component {
   fetchData() {
     return fetch('/api/visits/count/realtime', {
       credentials: 'include'
-    })
-      .then((r) => r.json())
-      .then((data) => {
+    }).then((r) => {
+        if( r.ok ) { r.json(); }
+        throw new Error();
+     }).then((data) => {
         this.setState({ count: data })
-    });
+    }).catch((e) => {});
   }
 
   render() {

assets/js/components/Table.js

@@ -30,14 +30,22 @@ class Table extends Component {
         return r.json();
       }
 
+      // TODO: Make this pretty.
+      if( r.status == 401 ) {
+        this.props.onAuthError();
+      }
+
       // TODO: do something with error
+      throw new Error();
     }).then((data) => {
       this.setState({ records: data })
+    }).catch((e) => {
+
     });
   }
 
   render() {
-    const tableRows = this.state.records.map( (p, i) => (
+    const tableRows = this.state.records.map((p, i) => (
       <tr>
         <td class="muted">{i+1}</td>
         <td>{p.Label}</td>

assets/js/pages/dashboard.js

@@ -43,7 +43,7 @@ class Dashboard extends Component {
             <Table period={this.state.period} endpoint="countries" title="Countries" headers={["#", "Country", "Count", "%"]} />
           </div>
           <div class="col-2">
-            <Table period={this.state.period} endpoint="browsers" title="Browsers" headers={["#", "Browser", "Count", "%"]} />
+            <Table period={this.state.period} endpoint="browsers" title="Browsers" headers={["#", "Browser", "Count", "%"]} onAuthError={this.props.onLogout} />
           </div>
         </div>
       </div>

core/db.go

@@ -4,14 +4,17 @@ import (
   "database/sql"
   _"github.com/go-sql-driver/mysql"
   "log"
+  "os"
+  "fmt"
 )
 
 var DB *sql.DB
 
 func SetupDatabaseConnection() *sql.DB {
-  // setup db connection
   var err error
-  DB, err = sql.Open("mysql", "root:root@/ana")
+  var dataSourceName = fmt.Sprintf("%s:%s@%s/%s", os.Getenv("ANA_DATABASE_USER"), os.Getenv("ANA_DATABASE_PASSWORD"), os.Getenv("ANA_DATABASE_HOST"), os.Getenv("ANA_DATABASE_NAME"))
+
+  DB, err = sql.Open("mysql", dataSourceName)
   if err != nil {
       log.Fatal(err.Error()) // Just for example purpose. You should use proper error handling instead of panic
   }