Added basic frontend structure
This commit is contained in:
parent
6ec1ce9088
commit
07c9fcdea1
GPG Key ID:
F40E70337AB24C9B
|
|
@ -0,0 +1,41 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<!-- Standard Meta -->
|
||||
<meta charset="utf-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
|
||||
|
||||
<title>Books</title>
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="/assets/semantic-ui/semantic.min.css">
|
||||
|
||||
<style type="text/css">
|
||||
body {
|
||||
background-color: #efefef;
|
||||
}
|
||||
body > .grid {
|
||||
height: 100%;
|
||||
}
|
||||
.image {
|
||||
margin-top: -100px;
|
||||
}
|
||||
.column {
|
||||
max-width: 450px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<noscript>
|
||||
You need Javascript for this to work.
|
||||
</noscript>
|
||||
|
||||
<div id="app"></div>
|
||||
|
||||
<script src="/assets/js/jquery-3.1.1.min.js"></script>
|
||||
<script src="/assets/semantic-ui/semantic.min.js"></script>
|
||||
<script src="/assets/dist/app.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
{
|
||||
"name": "Library",
|
||||
"version": "1.0.0",
|
||||
"description": "An application to manage your libray",
|
||||
"scripts": {
|
||||
"dev": "webpack-dev-server --inline --hot",
|
||||
"build": "webpack"
|
||||
},
|
||||
"author": "kolaente",
|
||||
"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": {
|
||||
"vue-resource": "^0.1.17",
|
||||
"vue-router": "^0.7.5",
|
||||
"vue": "^1.0.7"
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,48 @@
|
|||
import {router} from '../index'
|
||||
|
||||
const API_URL = 'http://localhost:8082/api/v1/'
|
||||
const LOGIN_URL = 'http://localhost:8082/login'
|
||||
|
||||
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
|
||||
})
|
||||
},
|
||||
|
||||
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')
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
<template>
|
||||
<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>
|
||||
<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>
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
<template>
|
||||
<p v-if="user.authenticated">Logged in</p>
|
||||
<p v-if="!user.authenticated">not logged in</p>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
|
||||
data() {
|
||||
return {
|
||||
quote: '',
|
||||
user: auth.user
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
getQuote() {
|
||||
this.$http
|
||||
.get('http://localhost:3001/api/random-quote', (data) => {
|
||||
this.quote = data;
|
||||
})
|
||||
.
|
||||
error((err) => console.log(err)
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,65 @@
|
|||
<template>
|
||||
<div class="ui middle aligned center aligned grid">
|
||||
<div class="column">
|
||||
<h2 class="ui blue image header">
|
||||
<div class="content">
|
||||
Login
|
||||
</div>
|
||||
</h2>
|
||||
<form class="ui large form" id="loginform">
|
||||
<div class="ui stacked segment">
|
||||
<div class="field">
|
||||
<div class="ui left icon input">
|
||||
<i class="user icon"></i>
|
||||
<input type="text" name="username" placeholder="Username" v-model="credentials.username">
|
||||
</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<div class="ui left icon input">
|
||||
<i class="lock icon"></i>
|
||||
<input type="password" name="password" placeholder="Password" v-model="credentials.password">
|
||||
</div>
|
||||
</div>
|
||||
<div class="ui fluid large blue submit button" @click="submit()">Login</div>
|
||||
</div>
|
||||
|
||||
<div class="ui error message" v-if="error">
|
||||
{{ error }}
|
||||
</div>
|
||||
|
||||
</form>
|
||||
</div>
|
||||
</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, 'home')
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
import Vue from 'vue'
|
||||
import App from './components/App.vue'
|
||||
import Home from './components/Home.vue'
|
||||
import Login from './components/Login.vue'
|
||||
import VueRouter from 'vue-router'
|
||||
import VueResource from 'vue-resource'
|
||||
|
||||
Vue.use(VueResource)
|
||||
Vue.use(VueRouter)
|
||||
import auth from './auth'
|
||||
|
||||
// Set default auth header
|
||||
Vue.http.headers.common['Authorization'] = 'Bearer ' + localStorage.getItem('id_token');
|
||||
|
||||
// Check the user's auth status when the app starts
|
||||
auth.checkAuth()
|
||||
|
||||
export var router = new VueRouter()
|
||||
|
||||
router.map({
|
||||
'/home': {
|
||||
component: Home
|
||||
},
|
||||
'/login': {
|
||||
component: Login
|
||||
}
|
||||
})
|
||||
|
||||
router.redirect({
|
||||
'*': '/home'
|
||||
})
|
||||
|
||||
router.start(App, '#app')
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
module.exports = {
|
||||
// the main entry of our app
|
||||
entry: ['./src/index.js', './src/auth/index.js'],
|
||||
// output configuration
|
||||
output: {
|
||||
path: __dirname + '/dist/',
|
||||
publicPath: 'assets/dist/',
|
||||
filename: 'app.js'
|
||||
},
|
||||
// how modules should be transformed
|
||||
module: {
|
||||
loaders: [
|
||||
// process *.vue files using vue-loader
|
||||
{ test: /\.vue$/, loader: 'vue' },
|
||||
// process *.js files using babel-loader
|
||||
// the exclude pattern is important so that we don't
|
||||
// apply babel transform to all the dependencies!
|
||||
{ test: /\.js$/, loader: 'babel', exclude: /node_modules/ }
|
||||
]
|
||||
},
|
||||
// configure babel-loader.
|
||||
// this also applies to the JavaScript inside *.vue files
|
||||
babel: {
|
||||
presets: ['es2015'],
|
||||
plugins: ['transform-runtime']
|
||||
}
|
||||
}
|
||||
|
|
@ -30,6 +30,7 @@ func HashPassword(password string) (string, error) {
|
|||
// CheckUserCredentials checks user credentials
|
||||
func CheckUserCredentials(username, password string) (User, error) {
|
||||
|
||||
fmt.Println(username, password)
|
||||
// Check if the user exists
|
||||
var user = User{Username: username}
|
||||
exists, err := x.Get(&user)
|
||||
|
|
|
|||
|
|
@ -27,7 +27,10 @@ func NewEcho() *echo.Echo {
|
|||
func RegisterRoutes(e *echo.Echo) {
|
||||
|
||||
// Basic Route
|
||||
e.Static("/", "templates/index.tpl")
|
||||
e.Static("/", "assets/index.html")
|
||||
|
||||
// Login Route
|
||||
e.POST("/login", Login)
|
||||
|
||||
// API Routes
|
||||
a := e.Group("/api/v1")
|
||||
|
|
@ -46,9 +49,6 @@ func RegisterRoutes(e *echo.Echo) {
|
|||
a.GET("/publishers/:id", apiv1.PublisherShow)
|
||||
a.GET("/publishers/search", apiv1.PublisherSearch)
|
||||
|
||||
// Login Route
|
||||
e.POST("/login", Login)
|
||||
|
||||
// ===== Routes with Authetification =====
|
||||
// Authetification
|
||||
a.Use(middleware.JWT(models.Config.JWTLoginSecret))
|
||||
|
|
|
|||
Loading…
Reference in New Issue