first working

valasek · Apr 9, 2017 · c77887d · c77887d
1 parent 421ec45
commit c77887d
Show file tree

Hide file tree

Showing 18 changed files with 780 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -22,3 +22,8 @@ _testmain.go
 *.exe
 *.test
 *.prof
+
+node_modules
+client/build
+*.db
+*.DS_Store
diff --git a/.vscode/launch.json b/.vscode/launch.json
@@ -0,0 +1,18 @@
+{
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "name": "Launch",
+      "type": "go",
+      "request": "launch",
+      "mode": "debug",
+      "remotePath": "",
+      "port": 2345,
+      "host": "127.0.0.1",
+      "program": "${fileDirname}",
+      "env": {},
+      "args": [],
+      "showLog": true
+    }
+  ]
+}
diff --git a/client/README.md b/client/README.md
@@ -0,0 +1,5 @@
+Start the Golang server, then run the [webpack development server](http://webpack.github.io/docs/webpack-dev-server.html). It will watch for changes with **hot reloading**:
+
+```bash
+npm run dev
+```
diff --git a/client/index.html b/client/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title>Hello World!</title>
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
+  </head>
+  <body>
+    <div id="app"></div>      
+    <script src="build/build.js"></script>
+  </body>
+</html>
diff --git a/client/package.json b/client/package.json
@@ -0,0 +1,32 @@
+{
+  "name": "go-vue-starter",
+  "version": "1.0.0",
+  "description": "Starter project with Go API server and JWT Authentication with Vue.js",
+  "scripts": {
+    "dev": "webpack-dev-server --inline --hot",
+    "build": "webpack"
+  },
+  "author": "markcheno",
+  "license": "MIT",
+  "devDependencies": {
+    "babel-core": "^6.0.0",
+    "babel-loader": "^6.0.0",
+    "babel-plugin-transform-runtime": "^6.0.0",
+    "babel-preset-es2015": "^6.0.0",
+    "babel-preset-stage-2": "^6.0.0",
+    "babel-runtime": "^5.8.0",
+    "css-loader": "^0.21.0",
+    "style-loader": "^0.13.0",
+    "vue-hot-reload-api": "^1.2.1",
+    "vue-html-loader": "^1.0.0",
+    "vue-loader": "^7.0.1",
+    "webpack": "^1.12.3",
+    "webpack-dev-server": "^1.12.1"
+  },
+  "dependencies": {
+    "bootstrap": "^3.3.5",
+    "vue-resource": "^0.1.17",
+    "vue-router": "^0.7.5",
+    "vue": "^1.0.7"
+  }
+}
diff --git a/client/src/auth/index.js b/client/src/auth/index.js
@@ -0,0 +1,64 @@
+import {router} from '../index'
+
+const API_URL = 'http://localhost:3000/'
+const LOGIN_URL = API_URL + 'login'
+const SIGNUP_URL = API_URL + 'signup'
+
+export default {
+
+  user: {
+    authenticated: false
+  },
+
+  login(context, creds, redirect) {
+    context.$http.post(LOGIN_URL, creds, (data) => {
+      localStorage.setItem('id_token', data.id_token)
+
+      this.user.authenticated = true
+
+      if(redirect) {
+        router.go(redirect)        
+      }
+
+    }).error((err) => {
+      context.error = err
+    })
+  },
+
+  signup(context, creds, redirect) {
+    context.$http.post(SIGNUP_URL, creds, (data) => {
+      localStorage.setItem('id_token', data.id_token)
+
+      this.user.authenticated = true
+
+      if(redirect) {
+        router.go(redirect)        
+      }
+
+    }).error((err) => {
+      context.error = err
+    })
+  },
+
+  logout() {
+    localStorage.removeItem('id_token')
+    this.user.authenticated = false
+  },
+
+  checkAuth() {
+    var jwt = localStorage.getItem('id_token')
+    if(jwt) {
+      this.user.authenticated = true
+    }
+    else {
+      this.user.authenticated = false      
+    }
+  },
+
+
+  getAuthHeader() {
+    return {
+      'Authorization': 'Bearer ' + localStorage.getItem('id_token')
+    }
+  }
+}
diff --git a/client/src/components/App.vue b/client/src/components/App.vue
@@ -0,0 +1,35 @@
+<template>
+  <nav class="navbar navbar-default">
+    <div class="container">
+      <ul class="nav navbar-nav">
+        <li><a v-link="'home'">Home</a></li>
+        <li v-if="!user.authenticated"><a v-link="'login'">Login</a></li>
+        <li v-if="!user.authenticated"><a v-link="'signup'">Sign Up</a></li>
+        <li v-if="user.authenticated"><a v-link="'secretquote'">Secret Quote</a></li>
+        <li v-if="user.authenticated"><a v-link="'login'" @click="logout()">Logout</a></li>
+      </ul>
+    </div>    
+  </nav>
+  <div class="container">
+    <router-view></router-view>
+  </div>
+</template>
+
+<script>
+import auth from '../auth'
+
+export default {
+  data() {
+    return {
+      user: auth.user
+    }
+  },
+
+  methods: {
+
+    logout() {
+      auth.logout()
+    }
+  }
+}
+</script>
diff --git a/client/src/components/Home.vue b/client/src/components/Home.vue
@@ -0,0 +1,32 @@
+<template>
+  <div class="col-sm-6 col-sm-offset-3">
+    <h1>Get a Free Chuck Norris Quote!</h1>
+    <button class="btn btn-primary" v-on:click="getQuote()">Get a Quote</button>
+    <div class="quote-area" v-if="quote">
+      <h2><blockquote>{{ quote }}</blockquote></h2>      
+    </div>
+  </div>
+</template>
+
+<script>
+
+export default {
+
+  data() {
+    return {
+      quote: ''
+    }
+  },
+
+  methods: {
+    getQuote() {
+      this.$http
+        .get('http://localhost:3000/api/random-quote', (data) => {
+          this.quote = data;
+        })
+        .error((err) => console.log(err))
+    }
+  }
+
+}
+</script>
diff --git a/client/src/components/Login.vue b/client/src/components/Login.vue
@@ -0,0 +1,58 @@
+<template>
+  <div class="col-sm-4 col-sm-offset-4">
+    <h2>Log In</h2>
+    <p>Log in to your account to get some great quotes.</p>
+    <div class="alert alert-danger" v-if="error">
+      <p>{{ error }}</p>
+    </div>
+    <div class="form-group">
+      <input 
+        type="text" 
+        class="form-control"
+        placeholder="Enter your username"
+        v-model="credentials.username"
+      >
+    </div>
+    <div class="form-group">
+      <input
+        type="password"
+        class="form-control"
+        placeholder="Enter your password"
+        v-model="credentials.password"
+      >
+    </div>
+    <button class="btn btn-primary" @click="submit()">Access</button>
+  </div>
+</template>
+
+<script>
+import auth from '../auth'
+
+export default {
+
+  data() {
+    return {
+      credentials: {
+        username: '',
+        password: ''
+      },
+      error: ''
+    }
+  },
+
+  methods: {
+
+    submit() {
+
+      var credentials = {
+        username: this.credentials.username,
+        password: this.credentials.password
+      }
+
+      auth.login(this, credentials, 'secretquote')
+
+    }
+  }
+  
+}
+</script>
diff --git a/client/src/components/SecretQuote.vue b/client/src/components/SecretQuote.vue
@@ -0,0 +1,41 @@
+<template>
+  <div class="col-sm-6 col-sm-offset-3">
+    <h1>Get a Secret Chuck Norris Quote!</h1>
+    <button class="btn btn-warning" v-on:click="getQuote()">Get a Quote</button>
+    <div class="quote-area" v-if="quote">
+      <h2><blockquote>{{ quote }}</blockquote></h2>      
+    </div>
+  </div>
+</template>
+
+<script>
+import auth from '../auth'
+
+export default {
+
+  data() {
+    return {
+      quote: ''
+    }
+  },
+
+  methods: {
+    getQuote() {
+      this.$http
+        .get('http://localhost:3000/api/protected/random-quote', (data) => {
+          this.quote = data;
+        }, { 
+          headers: auth.getAuthHeader()
+        })
+        .error((err) => console.log(err))
+    }
+  },
+
+  route: {
+    canActivate() {
+      return auth.user.authenticated
+    }
+  }
+
+}
+</script>
diff --git a/client/src/components/Signup.vue b/client/src/components/Signup.vue
@@ -0,0 +1,56 @@
+<template>
+  <div class="col-sm-4 col-sm-offset-4">
+    <h2>Sign Up</h2>
+    <p>Sign up for a free account to get some great quotes.</p>
+    <div class="alert alert-danger" v-if="error">
+      <p>{{ error }}</p>
+    </div>
+    <div class="form-group">
+      <input 
+        type="text" 
+        class="form-control"
+        placeholder="Enter your username"
+        v-model="credentials.username"
+      >
+    </div>
+    <div class="form-group">
+      <input
+        type="password"
+        class="form-control"
+        placeholder="Enter your password"
+        v-model="credentials.password"
+      >
+    </div>
+    <button class="btn btn-primary" @click="submit()">Access</button>
+  </div>
+</template>
+
+<script>
+import auth from '../auth'
+
+export default {
+
+  data() {
+    return {
+      credentials: {
+        username: '',
+        password: ''
+      },
+      error: ''
+    }
+  },
+
+  methods: {
+
+    submit() {
+
+      var credentials = {
+        username: this.credentials.username,
+        password: this.credentials.password
+      }
+
+      auth.signup(this, credentials, 'secretquote')
+    }
+  }
+}
+</script>