Skip to content

Commit

Permalink
FINALE
Browse files Browse the repository at this point in the history
  • Loading branch information
@ekifakhrureza
ekifakhrureza committed Apr 26, 2018
1 parent ed1703a commit a0b4187
Show file tree
Hide file tree
Showing 5 changed files with 242 additions and 17 deletions.
158 changes: 152 additions & 6 deletions client/src/App.vue
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,77 @@
<template>
<div id="app">
<form class="form-inline my-2 my-lg-0" v-if="getToken===null">
<button style="margin-right: 20px" class="btn btn-outline-success my-2 my-sm-0" data-toggle="modal" data-target="#loginModal" data-whatever="@getbootstrap">Login</button>
<button class="btn btn-outline-info my-2 my-sm-0" data-toggle="modal" data-target="#registerModal" data-whatever="@getbootstrap">Register</button>
</form>
<form class="form-inline my-2 my-lg-0" v-else>
<button class="btn btn-dark" @click="logout()">Logout</button>
</form>
<div class="modal fade" id="loginModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Login</h5>
<button type="button" id="closelogin" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<form @submit.prevent="onSubmit()">
<div class="modal-body">
<div class="form-group">
<label for="recipient-name" class="col-form-label">Username:</label>
<input v-model="username" name="username" type="text" class="form-control" id="recipient-name" v-validate="'required|email'" :class="{'error': errors.has('username') }">
<span v-show="errors.has('username')" class="text-danger">{{ errors.first('username') }}</span>
</div>
<div class="form-group">
<label for="message-text" class="col-form-label">Password:</label>
<input v-model="password" name="password" type="password" class="form-control" id="recipient-name" v-validate="'required|min:6'" :class="{'error': errors.has('password') }">
<span v-show="errors.has('password')" class="text-danger">{{ errors.first('password') }}</span>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary" @click="login()">Login</button>
</div>
</form>
</div>
</div>
</div>
<div class="modal fade" id="registerModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Register</h5>
<button id="close" type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<form @submit.prevent="onSubmit()">
<div class="modal-body">
<div class="form-group">
<label for="recipient-name" class="col-form-label">Name:</label>
<input v-model="name" name="name" type="text" class="form-control" id="recipient-name" v-validate="'required'" :class="{'error': errors.has('name') }">
<span v-show="errors.has('name')" class="text-danger">{{ errors.first('name') }}</span>
</div>
<div class="form-group">
<label for="recipient-name" class="col-form-label">Username:</label>
<input v-model="username" name="username" type="text" class="form-control" id="recipient-name" v-validate="'required|email'" :class="{'error': errors.has('username') }">
<span v-show="errors.has('username')" class="text-danger">{{ errors.first('username') }}</span>
</div>
<div class="form-group">
<label for="message-text" class="col-form-label">Password:</label>
<input v-model="password" name="password" type="password" class="form-control" id="recipient-name" v-validate="'required|min:6'" :class="{'error': errors.has('password') }">
<span v-show="errors.has('password')" class="text-danger">{{ errors.first('password') }}</span>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary" @click="register()">Register</button>
</div>
</form>
</div>
</div>
</div>
<div class="wrapper">
<!-- Sidebar Holder -->
<nav id="sidebar">
Expand Down Expand Up @@ -27,34 +99,108 @@
</li>
</ul>
</nav>
<router-view :listarticles="articles"/>
<router-view/>
</div>
</div>
</template>

<script>
import axios from "axios";
import {
mapActions,
mapGetters,
mapState
mapState,
mapMutations
} from 'vuex'
export default {
name: 'ArticleList',
components : {
// AddArticle
},
},
data() {
return {
email: '',
name: '',
password: ''
};
},
methods: {
...mapActions(['getAllArticle', 'getDetailArticle']),
...mapActions(['getAllArticle', 'getDetailArticle']),
...mapMutations(['setToken']),
onSubmit () {
this.$validator.validateAll()
},
register () {
console.log(this.email);
let username = this.username;
let name = this.name;
let password = this.password;
axios
.post("http://localhost:3000/users/register", {
username: username,
name: name,
password: password
})
.then(data => {
if (data.status === 202) {
alert("Email Already Exist");
} else {
console.log(data);
localStorage.setItem("token", data.data.token)
this.setToken(localStorage.getItem('token'))
document.getElementById("close").click()
this.username = ''
this.name = ''
this.password = ''
}
})
.catch(err => {
console.log(err)
});
},
login () {
let username = this.username;
let password = this.password;
axios
.post("http://localhost:3000/users/login", {
username: username,
password: password
})
.then(data => {
if (data.status === 202) {
alert("Wrong username/password")
} else {
localStorage.setItem("token", data.data.token)
this.setToken(localStorage.getItem('token'))
document.getElementById("closelogin").click()
this.username = ''
this.password = ''
}
})
.catch(err => {
console.log(err)
});
},
logout () {
console.log(this.getToken)
localStorage.removeItem('name')
localStorage.removeItem('token')
localStorage.removeItem('email')
this.setToken(null)
this.setTokenName(null)
}
},
created() {
console.log(this.getAllArticle()+'aaaaaaaaaaaaaaaaaaa');
this.getAllArticle()
},
computed: {
...mapGetters(['getArticle','getToken'])
}
...mapGetters(['getArticle','getToken'])
}
}
</script>

Expand Down
63 changes: 63 additions & 0 deletions client/src/components/AddArticle.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,63 @@
<template>
<div class="modal fade" id="AddArticle" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Ask The Question</h5>
<button id="closearticle" type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<form class="needs-validation" novalidate>
<div class="form-group">
<label for="recipient-name" class="col-form-label">Title:</label>
<input v-model='title' name="title" type="text" class="form-control" id="recipient-name" placeholder="Input Title" v-validate="'required'" :class="{'error': errors.has('title') }">
</div>
<div class="form-group">
<label for="message-text" class="col-form-label">Content:</label>
<textarea v-model='content' name="content" class="form-control" id="message-text" placeholder="Input Content" v-validate="'required'" :class="{'error': errors.has('content') }"></textarea>
</div>
<div class="form-group">
<label for="message-text" class="col-form-label">Category:</label>
<textarea v-model='category' name="category" class="form-control" id="message-text" placeholder="Input Category" v-validate="'required'" :class="{'error': errors.has('category') }"></textarea>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" @click='add()'>Add</button>
</div>
</div>
</div>
</div>
</template>

<script>
import {
mapActions, mapMutations,mapState,mapGetters
} from 'vuex'
export default {
name: 'AddArticle',
data () {
return {
title: '',
content: ''
}
},
methods: {
...mapActions([
'addArticle'
]),
add () {
let newArticle = {
title: this.title,
content: this.content,
category: this.category,
}
this.addArticle(newArticle)
document.getElementById('closearticle').click()
}
}
}
</script>
13 changes: 8 additions & 5 deletions client/src/components/ArticleList.vue
View file
Original file line number Diff line number Diff line change
@@ -1,23 +1,26 @@
<template>
<div class="container">
<div v-if="getToken!==null">
<button class="float-left btn btn-outline-success ml-2" data-toggle="modal" data-target="#AddArticle">
<i class="far fa-plus-square"> Add Article</i>
</button>

</div>
<h2 class="text-center">Article List</h2>
<button v-if="getToken!==null" class="float-left btn btn-outline-success ml-2" data-toggle="modal" data-target="#AddArticle">
<i class="far fa-plus-square"> Add Article</i>
</button>
<div class="card">
<div class="card-body">
<div class="row" v-for="(getArticle,index) in getArticle" :key="index">
<div class="col-md-2">
<p class="text-secondary text-center">Author : {{ getArticle.author.name }}</p>
<p class="text-secondary text-center">Category : {{ getArticle.category }}</p>
</div>
<div class="col-md-10">
<p style="color:#007bff">
<strong>{{ getArticle.title }}</strong>
</p>
<div class="clearfix"></div>
<p>{{ getArticle.content }}</p>

</div>
</div>
</div>
Expand All @@ -27,7 +30,7 @@
</template>

<script>
// import AddArticle from './AddArticle'
import AddArticle from './AddArticle'
import {
mapActions,
mapGetters,
Expand All @@ -37,7 +40,7 @@
export default {
name: 'ArticleList',
components : {
// AddArticle
AddArticle
},
methods: {
...mapActions(['getAllArticle', 'getDetailArticle']),
Expand Down
11 changes: 7 additions & 4 deletions client/src/store.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import axios from 'axios'
Vue.use(Vuex)
const instance = axios.create({
baseURL: 'http://localhost:3000',
// headers: { 'token': localStorage.getItem('token') }
// headers: { 'token': localStorage.getItem('token') }
})
export default new Vuex.Store({
state: {
Expand Down Expand Up @@ -55,7 +55,7 @@ export default new Vuex.Store({
},
getDetailArticle({ commit }, payload) {
axios
.get(`http://localhost:3000/questions/${payload}`, {})
.get(`http://localhost:3000/articles/${payload}`, {})
.then(response => {
commit('setArticle', response.data.data)
})
Expand All @@ -67,10 +67,13 @@ export default new Vuex.Store({
instance
.post('/articles/add', {
title: payload.title,
content: payload.content
content: payload.content,
category: payload.category
},{
headers: { 'token': localStorage.getItem('token') }
})
.then(response => {
context.dispatch('getAllQuestion')
context.dispatch('getAllArticle')
})
.catch(err => {
console.log(err)
Expand Down
14 changes: 12 additions & 2 deletions server/controllers/user.controller.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ module.exports = {
username: username,
}).then(data => {
if (data) {
var result = bcrypt.compareSync(password, data.password);
res.status(202).json({
message: 'Username Already Exist'
})
Expand All @@ -24,12 +25,19 @@ module.exports = {

})
newUser.save()

.then(response => {
let payload = {
id: response._id,
email: response.email,
name: response.name,
}
console.log('sukses');

let token = jwt.sign(payload, process.env.SECRETKEY)
res.status(200).json({
message: 'query register user success',
data: response
data: response,
token: token,
})
}).catch(err => {
console.log(err);
Expand All @@ -39,6 +47,8 @@ module.exports = {
})
}
}).catch(err => {
console.log('masuk error');

console.log(err);

})
Expand Down

0 comments on commit a0b4187

Please sign in to comment.