My Application

├── README.md ├── css └── signin.css ├── index.html ├── js └── app.js └── login.html /README.md: -------------------------------------------------------------------------------- 1 | # Parse-Vue starter 2 | You can checkout any commit which should correspond to the step in the [guide](https://docs.google.com/document/d/1UFegZrpPBYXXE44AnqevmHTIX-ZNmBojurGmrY-aFh0/edit) 3 | 4 | ### Note: 5 | Make sure to edit js/app.js, to add your Parse Keys! -------------------------------------------------------------------------------- /css/signin.css: -------------------------------------------------------------------------------- 1 | html, 2 | body, 3 | #app { 4 | height: 100%; 5 | } 6 | 7 | .signin-wrapper { 8 | height: 100%; 9 | display: -ms-flexbox; 10 | display: flex; 11 | -ms-flex-align: center; 12 | align-items: center; 13 | padding-top: 40px; 14 | padding-bottom: 40px; 15 | background-color: #f5f5f5; 16 | } 17 | 18 | .form-signin { 19 | width: 100%; 20 | max-width: 330px; 21 | padding: 15px; 22 | margin: auto; 23 | } 24 | .form-signin .checkbox { 25 | font-weight: 400; 26 | } 27 | .form-signin .form-control { 28 | position: relative; 29 | box-sizing: border-box; 30 | height: auto; 31 | padding: 10px; 32 | font-size: 16px; 33 | } 34 | .form-signin .form-control:focus { 35 | z-index: 2; 36 | } 37 | .form-signin input[type="email"] { 38 | margin-bottom: -1px; 39 | border-bottom-right-radius: 0; 40 | border-bottom-left-radius: 0; 41 | } 42 | .form-signin input[type="password"] { 43 | margin-bottom: 10px; 44 | border-top-left-radius: 0; 45 | border-top-right-radius: 0; 46 | } -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | My Application 8 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |

17 | 18 |

19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /js/app.js: -------------------------------------------------------------------------------- 1 | // Your corresponding keys 2 | Parse.initialize("YOUR_APP_ID", "YOUR_JAVASCRIPT_KEY"); 3 | 4 | // For back4app applications, this url is 5 | // 'https://parseapi.back4app.com' 6 | Parse.serverURL = 'YOUR_SERVER_URL' 7 | 8 | // ... Parse initialization ^ 9 | // Assign LoginComponent 10 | const LoginComponent = Vue.component('login-component', { 11 | template: '', 22 | data: function () { 23 | return { 24 | email: "", 25 | password: "" 26 | } 27 | }, 28 | methods: { 29 | login() { 30 | if (this.email.length === 0) { 31 | alert("Please enter an email"); 32 | return; 33 | } 34 | if (this.password.length === 0) { 35 | alert("Please enter a password"); 36 | return; 37 | } 38 | 39 | Parse.User.logIn(this.email, this.password) 40 | .then(() => { 41 | // Used an arrow function here because I 42 | // want to access 'this' which is overridden in 43 | // a conventional function 44 | this.$router.replace("/"); 45 | }) 46 | .catch(function (e) { 47 | alert("Error logging in! " + e.message); 48 | 49 | }); 50 | } 51 | } 52 | }) 53 | 54 | // Assign HomeComponent 55 | const HomeComponent = Vue.component("home-component", { 56 | template: "

\ 57 | \ 58 |

\ 59 | \ 60 |

\ 61 |

\ 62 | \ 65 |

\ 66 |

\ 67 |

\ 68 |

\ 69 |

", 70 | mounted: function () { 71 | if (!Parse.User.current()) { 72 | this.$router.replace("/login"); 73 | return; 74 | } 75 | 76 | this.fetchTodos(); 77 | }, 78 | data: function () { 79 | return { 80 | todos: [], 81 | newTodo: "" 82 | } 83 | }, 84 | methods: { 85 | logout () { 86 | Parse.User.logOut() 87 | .catch(function(e) {}) 88 | .then(() => { 89 | this.$router.replace("/login"); 90 | }) 91 | }, 92 | fetchTodos() { 93 | new Parse.Query("Todo").descending("createdAt").find() 94 | .then((todos) => { 95 | this.todos = todos; 96 | }) 97 | }, 98 | addTodo() { 99 | if (!this.newTodo || this.newTodo.length === 0) return; 100 | 101 | var todo_acl = new Parse.ACL(); 102 | todo_acl.setWriteAccess( Parse.User.current(), true); 103 | todo_acl.setPublicReadAccess( true); 104 | 105 | var todoParseObject = new Parse.Object("Todo", { 106 | "text": this.newTodo 107 | }); 108 | todoParseObject.setACL(todo_acl); 109 | todoParseObject.save() 110 | .then((newTodo) => { 111 | this.todos = [newTodo].concat(this.todos); 112 | this.newTodo = ""; 113 | }) 114 | .catch((function (e) { 115 | alert("Error saving todo! " + e.message); 116 | })) 117 | 118 | }, 119 | 120 | deleteTodo(todo) { 121 | todo.destroy() 122 | .then(() => { 123 | this.fetchTodos(); 124 | }) 125 | .catch(function(e) { 126 | alert("Error destroying todo! " + e.message); 127 | }) 128 | } 129 | } 130 | }) 131 | // Declare the route mapping 132 | const routes = [{ 133 | path: '/', 134 | component: HomeComponent 135 | }, 136 | { 137 | path: '/login', 138 | component: LoginComponent 139 | } 140 | ] 141 | // Initialize the router 142 | const router = new VueRouter({ 143 | routes // short for `routes: routes` 144 | }); 145 | // Attach the router to the vue instance 146 | const app = new Vue({ 147 | router 148 | }).$mount('#app') -------------------------------------------------------------------------------- /login.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | My Login 8 | 10 | 11 | 12 | 13 | 14 | 25 | 26 | 27 | 28 | --------------------------------------------------------------------------------

Please sign in

Please sign in