Skip to content

Instantly share code, notes, and snippets.

/index.html

Created January 26, 2017 13:41
Show Gist options
  • Save anonymous/d5f906f2af667dcffd3487dd7cab60b4 to your computer and use it in GitHub Desktop.
Save anonymous/d5f906f2af667dcffd3487dd7cab60b4 to your computer and use it in GitHub Desktop.
Download ZIP
JS Bin // source http://jsbin.com/natiwusedo
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.16/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-resource/1.0.3/vue-resource.min.js"></script>
<div id="home">
<div class="container-fluid">
<ul class="list-group">
<post v-for="comment in comments" :post="comment"></post>
</ul>
</div>
</div>
<template id="post-template">
<li class="list-group-item" v-if="post.title">
<i class="glyphicon glyphicon-chevron-up" @click="upvote" :class="{disabled: upvoted}"></i>
<span class="label label-primary">@{{ votes }}</span>
<i class="glyphicon glyphicon-chevron-down" @click="downvote" :class="{disabled: downvoted}"></i>
<a>@{{ post.title }}</a>
</li>
</template>
<script id="jsbin-javascript">
$(document).ready(function(){
//Vue.http.headers.common['X-CSRF-TOKEN'] = document.querySelector('#signup_token').getAttribute('value');
Vue.component('post',{
template: "#post-template",
props:['post'],
data:function(){
return {
upvoted:false,
downvoted:false
};
},
methods:{
upvote:function(){
this.upvoted = !this.upvoted;
this.downvoted = false;
},
downvote:function(){
this.downvoted = !this.downvoted;
this.upvoted = false;
}
},
computed:{
votes:function(){
if(this.upvoted){
return this.post.votes + 1;
}
else if(this.downvoted){
return this.post.votes - 1;
}
else{
return this.post.votes;
}
}
}
});
new Vue({
el: '#home',
data: {
comments:[{
title: "Hello Minna San",
votes: 0
},{
title: "Hello World",
votes: 2
}],
comment: "",
// Credentials
personal_credentials: {
username: '',
email: '',
password: '',
password_confirmation: ''
},
business_credentials: {
company_name: '',
email: '',
password: '',
password_confirmation: ''
},
login_credentials: {
login_email: '',
login_password: '',
property_id: '',
user_id: '',
},
forgotpass_credentials: {
forgotpass_email: ''
},
// Errors
personal_errors : {
username: '',
email: '',
password: ''
},
business_errors: {
company_name: '',
email: '',
password: ''
},
login_errors: {
login_email: '',
login_password: ''
},
// Statuses
registration_success: false,
fp_success: false,
status_login: false,
status_fp: false,
// Response messages
registration_success_msg: '',
invalid_credentials: '',
fp_invalid_credentials: ''
},
methods: {
postComment:function(){
this.comments.push({
title: this.comment,
votes: 0
})
this.comment = "";
},
sendPropertyId: function(property_id){
return this.login_credentials.property_id = property_id;
},
sendUserId: function(user_id){
return this.login_credentials.user_id = user_id;
},
logIn: function() {
var login_credentials = {
login_email: this.login_credentials.login_email,
login_password: this.login_credentials.login_password,
property_id : this.login_credentials.property_id,
user_id : this.login_credentials.user_id,
};
this.$http.post('/sessions', login_credentials).then(function(response) {
this.status_login = true;
// Empty
this.login_credentials = { login_email:'', login_password:''};
setTimeout(function (){
$('#loginModal').modal('hide');
}, 1000);
role = response.data.userRole.slug;
setTimeout(function (){
if(role == 'admins') {
window.location.href = "/admin";
} else if(role == 'users') {
var property_id = response.data.property_id;
var user_id = response.data.user_id;
if(user_id){
window.location.href = "/profile#6";
}
else if(property_id){
window.location.href = "/profile#7";
}
else if(user_id){
window.location.href = "/profile#6";
}
else{
window.location.href = "/profile";
}
} else {
window.location.href = "/";
}
}, 1000);
}, function(response) {
// Request errors
this.login_errors = response.data;
// Invalid credentials provided
var errorLogIn = response.data.errorLogIn;
this.invalid_credentials = errorLogIn;
this.login_credentials = { login_password: '' }
});
},
signUpPersonalUser: function() {
var credentials = {
username: this.personal_credentials.username,
email: this.personal_credentials.email,
password: this.personal_credentials.password,
password_confirmation: this.personal_credentials.password_confirmation
};
this.$http.post('/register/personal_user', credentials).then(function(response){
this.registration_success = true;
this.registration_success_msg = response.data.successSignUp;
this.personal_credentials = { username:'', email:'', password:''};
$('#registerModal').modal('hide');
setTimeout(function (){
$('#loginModal').modal('show');
}, 1000);
}, function(response) {
this.have_personal_errors = true;
this.personal_errors = response.data
}
)
},
signUpBusinessUser: function() {
var credentials = {
company_name: this.business_credentials.company_name,
email: this.business_credentials.email,
password: this.business_credentials.password,
password_confirmation: this.business_credentials.password_confirmation
};
this.$http.post('/register/business_user', credentials).then(function(response){
this.registration_success = true;
this.registration_success_msg = response.data.successSignUp;
this.business_credentials = { company_name:'', email:'', password:''};
$('#registerModal').modal('hide');
setTimeout(function (){
$('#loginModal').modal('show');
}, 1000);
}, function(response) {
this.business_errors = response.data
}
)
},
forgotPass: function() {
var fp_credentials = {
forgotpass_email: this.forgotpass_credentials.forgotpass_email
};
this.status_fp = true;
this.$http.post('/session/forgotpass', fp_credentials).then(function(response)
{
this.status_fp = false;
this.fp_invalid_credentials = '';
this.fp_success = response.data.fp_success;
this.forgotpass_credentials = { forgotpass_email:''};
$('#LoginModal').modal('hide');
}, function(response) {
this.status_fp = false;
this.fp_invalid_credentials = response.data.forgotpass_email;
this.errors = response.data;
});
}
}
});
});
</script>
<script id="jsbin-source-javascript" type="text/javascript">$(document).ready(function(){
//Vue.http.headers.common['X-CSRF-TOKEN'] = document.querySelector('#signup_token').getAttribute('value');
Vue.component('post',{
template: "#post-template",
props:['post'],
data:function(){
return {
upvoted:false,
downvoted:false
};
},
methods:{
upvote:function(){
this.upvoted = !this.upvoted;
this.downvoted = false;
},
downvote:function(){
this.downvoted = !this.downvoted;
this.upvoted = false;
}
},
computed:{
votes:function(){
if(this.upvoted){
return this.post.votes + 1;
}
else if(this.downvoted){
return this.post.votes - 1;
}
else{
return this.post.votes;
}
}
}
});
new Vue({
el: '#home',
data: {
comments:[{
title: "Hello Minna San",
votes: 0
},{
title: "Hello World",
votes: 2
}],
comment: "",
// Credentials
personal_credentials: {
username: '',
email: '',
password: '',
password_confirmation: ''
},
business_credentials: {
company_name: '',
email: '',
password: '',
password_confirmation: ''
},
login_credentials: {
login_email: '',
login_password: '',
property_id: '',
user_id: '',
},
forgotpass_credentials: {
forgotpass_email: ''
},
// Errors
personal_errors : {
username: '',
email: '',
password: ''
},
business_errors: {
company_name: '',
email: '',
password: ''
},
login_errors: {
login_email: '',
login_password: ''
},
// Statuses
registration_success: false,
fp_success: false,
status_login: false,
status_fp: false,
// Response messages
registration_success_msg: '',
invalid_credentials: '',
fp_invalid_credentials: ''
},
methods: {
postComment:function(){
this.comments.push({
title: this.comment,
votes: 0
})
this.comment = "";
},
sendPropertyId: function(property_id){
return this.login_credentials.property_id = property_id;
},
sendUserId: function(user_id){
return this.login_credentials.user_id = user_id;
},
logIn: function() {
var login_credentials = {
login_email: this.login_credentials.login_email,
login_password: this.login_credentials.login_password,
property_id : this.login_credentials.property_id,
user_id : this.login_credentials.user_id,
};
this.$http.post('/sessions', login_credentials).then(function(response) {
this.status_login = true;
// Empty
this.login_credentials = { login_email:'', login_password:''};
setTimeout(function (){
$('#loginModal').modal('hide');
}, 1000);
role = response.data.userRole.slug;
setTimeout(function (){
if(role == 'admins') {
window.location.href = "/admin";
} else if(role == 'users') {
var property_id = response.data.property_id;
var user_id = response.data.user_id;
if(user_id){
window.location.href = "/profile#6";
}
else if(property_id){
window.location.href = "/profile#7";
}
else if(user_id){
window.location.href = "/profile#6";
}
else{
window.location.href = "/profile";
}
} else {
window.location.href = "/";
}
}, 1000);
}, function(response) {
// Request errors
this.login_errors = response.data;
// Invalid credentials provided
var errorLogIn = response.data.errorLogIn;
this.invalid_credentials = errorLogIn;
this.login_credentials = { login_password: '' }
});
},
signUpPersonalUser: function() {
var credentials = {
username: this.personal_credentials.username,
email: this.personal_credentials.email,
password: this.personal_credentials.password,
password_confirmation: this.personal_credentials.password_confirmation
};
this.$http.post('/register/personal_user', credentials).then(function(response){
this.registration_success = true;
this.registration_success_msg = response.data.successSignUp;
this.personal_credentials = { username:'', email:'', password:''};
$('#registerModal').modal('hide');
setTimeout(function (){
$('#loginModal').modal('show');
}, 1000);
}, function(response) {
this.have_personal_errors = true;
this.personal_errors = response.data
}
)
},
signUpBusinessUser: function() {
var credentials = {
company_name: this.business_credentials.company_name,
email: this.business_credentials.email,
password: this.business_credentials.password,
password_confirmation: this.business_credentials.password_confirmation
};
this.$http.post('/register/business_user', credentials).then(function(response){
this.registration_success = true;
this.registration_success_msg = response.data.successSignUp;
this.business_credentials = { company_name:'', email:'', password:''};
$('#registerModal').modal('hide');
setTimeout(function (){
$('#loginModal').modal('show');
}, 1000);
}, function(response) {
this.business_errors = response.data
}
)
},
forgotPass: function() {
var fp_credentials = {
forgotpass_email: this.forgotpass_credentials.forgotpass_email
};
this.status_fp = true;
this.$http.post('/session/forgotpass', fp_credentials).then(function(response)
{
this.status_fp = false;
this.fp_invalid_credentials = '';
this.fp_success = response.data.fp_success;
this.forgotpass_credentials = { forgotpass_email:''};
$('#LoginModal').modal('hide');
}, function(response) {
this.status_fp = false;
this.fp_invalid_credentials = response.data.forgotpass_email;
this.errors = response.data;
});
}
}
});
});
</script></body>
</html>
Raw
jsbin.natiwusedo.js
$(document).ready(function(){
//Vue.http.headers.common['X-CSRF-TOKEN'] = document.querySelector('#signup_token').getAttribute('value');
Vue.component('post',{
template: "#post-template",
props:['post'],
data:function(){
return {
upvoted:false,
downvoted:false
};
},
methods:{
upvote:function(){
this.upvoted = !this.upvoted;
this.downvoted = false;
},
downvote:function(){
this.downvoted = !this.downvoted;
this.upvoted = false;
}
},
computed:{
votes:function(){
if(this.upvoted){
return this.post.votes + 1;
}
else if(this.downvoted){
return this.post.votes - 1;
}
else{
return this.post.votes;
}
}
}
});
new Vue({
el: '#home',
data: {
comments:[{
title: "Hello Minna San",
votes: 0
},{
title: "Hello World",
votes: 2
}],
comment: "",
// Credentials
personal_credentials: {
username: '',
email: '',
password: '',
password_confirmation: ''
},
business_credentials: {
company_name: '',
email: '',
password: '',
password_confirmation: ''
},
login_credentials: {
login_email: '',
login_password: '',
property_id: '',
user_id: '',
},
forgotpass_credentials: {
forgotpass_email: ''
},
// Errors
personal_errors : {
username: '',
email: '',
password: ''
},
business_errors: {
company_name: '',
email: '',
password: ''
},
login_errors: {
login_email: '',
login_password: ''
},
// Statuses
registration_success: false,
fp_success: false,
status_login: false,
status_fp: false,
// Response messages
registration_success_msg: '',
invalid_credentials: '',
fp_invalid_credentials: ''
},
methods: {
postComment:function(){
this.comments.push({
title: this.comment,
votes: 0
})
this.comment = "";
},
sendPropertyId: function(property_id){
return this.login_credentials.property_id = property_id;
},
sendUserId: function(user_id){
return this.login_credentials.user_id = user_id;
},
logIn: function() {
var login_credentials = {
login_email: this.login_credentials.login_email,
login_password: this.login_credentials.login_password,
property_id : this.login_credentials.property_id,
user_id : this.login_credentials.user_id,
};
this.$http.post('/sessions', login_credentials).then(function(response) {
this.status_login = true;
// Empty
this.login_credentials = { login_email:'', login_password:''};
setTimeout(function (){
$('#loginModal').modal('hide');
}, 1000);
role = response.data.userRole.slug;
setTimeout(function (){
if(role == 'admins') {
window.location.href = "/admin";
} else if(role == 'users') {
var property_id = response.data.property_id;
var user_id = response.data.user_id;
if(user_id){
window.location.href = "/profile#6";
}
else if(property_id){
window.location.href = "/profile#7";
}
else if(user_id){
window.location.href = "/profile#6";
}
else{
window.location.href = "/profile";
}
} else {
window.location.href = "/";
}
}, 1000);
}, function(response) {
// Request errors
this.login_errors = response.data;
// Invalid credentials provided
var errorLogIn = response.data.errorLogIn;
this.invalid_credentials = errorLogIn;
this.login_credentials = { login_password: '' }
});
},
signUpPersonalUser: function() {
var credentials = {
username: this.personal_credentials.username,
email: this.personal_credentials.email,
password: this.personal_credentials.password,
password_confirmation: this.personal_credentials.password_confirmation
};
this.$http.post('/register/personal_user', credentials).then(function(response){
this.registration_success = true;
this.registration_success_msg = response.data.successSignUp;
this.personal_credentials = { username:'', email:'', password:''};
$('#registerModal').modal('hide');
setTimeout(function (){
$('#loginModal').modal('show');
}, 1000);
}, function(response) {
this.have_personal_errors = true;
this.personal_errors = response.data
}
)
},
signUpBusinessUser: function() {
var credentials = {
company_name: this.business_credentials.company_name,
email: this.business_credentials.email,
password: this.business_credentials.password,
password_confirmation: this.business_credentials.password_confirmation
};
this.$http.post('/register/business_user', credentials).then(function(response){
this.registration_success = true;
this.registration_success_msg = response.data.successSignUp;
this.business_credentials = { company_name:'', email:'', password:''};
$('#registerModal').modal('hide');
setTimeout(function (){
$('#loginModal').modal('show');
}, 1000);
}, function(response) {
this.business_errors = response.data
}
)
},
forgotPass: function() {
var fp_credentials = {
forgotpass_email: this.forgotpass_credentials.forgotpass_email
};
this.status_fp = true;
this.$http.post('/session/forgotpass', fp_credentials).then(function(response)
{
this.status_fp = false;
this.fp_invalid_credentials = '';
this.fp_success = response.data.fp_success;
this.forgotpass_credentials = { forgotpass_email:''};
$('#LoginModal').modal('hide');
}, function(response) {
this.status_fp = false;
this.fp_invalid_credentials = response.data.forgotpass_email;
this.errors = response.data;
});
}
}
});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment