Login intro

clbcabral · Jun 6, 2018 · 60fd79d · 60fd79d
1 parent 118ce06
commit 60fd79d
Show file tree

Hide file tree

Showing 5 changed files with 162 additions and 8 deletions.
diff --git a/index.html b/index.html
@@ -3,7 +3,7 @@
  <head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
- <title>z</title>
+ <title>VueJS App</title>
  </head>
  <body>
  <div id="app"></div>

diff --git a/src/App.vue b/src/App.vue
@@ -1,22 +1,46 @@
 <template>
- <div id="app" class="container">
- <router-view/>
+ <div id="app">
+ <navbar @loginSuccess="loginSuccess" />
+ <div id="stage" class="container">
+ <transition name="slide-fade">
+ <router-view/>
+ </transition>
+ </div>
  </div>
 </template>
-
 <script>
+import Navbar from '@/components/Navbar'
+
 export default {
- name: 'App'
+ name: 'App',
+ components: {
+ Navbar
+ },
+ methods: {
+ loginSuccess (user) {
+ console.log('yah!', user)
+ }
+ }
 }
 </script>
-
 <style>
 #app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
- text-align: center;
  color: #2c3e50;
- margin-top: 60px;
+}
+
+#stage {
+ padding-top: 25px;
+}
+
+.slide-fade-enter-active {
+ transition: all .3s ease;
+}
+
+.slide-fade-enter, .slide-fade-leave-to {
+ transform: translateY(20px);
+ opacity: 0;
 }
 </style>
diff --git a/src/components/Navbar.vue b/src/components/Navbar.vue
@@ -0,0 +1,47 @@
+<template>
+ <header class="navbar navbar-expand-md navbar-dark bg-dark">
+ <div class="container">
+ <router-link to="/" class="navbar-brand">VueJS</router-link>
+ <div class="collapse navbar-collapse" id="navbarsExampleDefault">
+ <ul class="navbar-nav mr-auto">
+ </ul>
+ <ul class="navbar-nav justify-content-end" v-if="loggedUser">
+ <li class="nav-item active">
+ <a class="nav-link" href="#">Hello, {{ loggedUser.get('username') }}</a>
+ </li>
+ <li class="nav-item">
+ <a class="nav-link" href="#" @click="logout">Logout</a>
+ </li>
+ </ul>
+ <ul class="navbar-nav justify-content-end" v-else>
+ <li class="nav-item active">
+ <router-link to="signin" class="nav-link">Sign-in</router-link>
+ </li>
+ </ul>
+ </div>
+ </div>
+ </header>
+</template>
+
+<script>
+import Parse from 'parse'
+export default {
+ name: 'Navbar',
+ data () {
+ return {
+ loggedUser: Parse.User.current()
+ }
+ },
+ methods: {
+ logout () {
+ Parse.User.logOut()
+ this.loggedUser = null
+ this.$router.push('/')
+ }
+ }
+}
+</script>
+
+<style>
+
+</style>
diff --git a/src/components/Signin.vue b/src/components/Signin.vue
@@ -0,0 +1,77 @@
+<template>
+ <div>
+ <form class="form-signin">
+ <p class="alert alert-warning" v-if="error">{{ error.message }}</p>
+ <h1 class="h3 mb-3 font-weight-normal">Please sign in</h1>
+ <label for="inputEmail" class="sr-only">Email address</label>
+ <input type="email" id="inputEmail" class="form-control"
+ v-model="user.email"
+ placeholder="Email address" required autofocus>
+ <label for="inputPassword" class="sr-only">Password</label>
+ <input type="password" id="inputPassword" class="form-control"
+ v-model="user.password"
+ placeholder="Password" required>
+ <button class="btn btn-lg btn-primary btn-block" @click="login">Sign-in</button>
+ <p class="mt-5 mb-3 text-muted">&copy; 2017-2018</p>
+ </form>
+ </div>
+</template>
+
+<script>
+import Parse from 'parse'
+export default {
+ name: 'Signin',
+ data () {
+ return {
+ user: {
+ email: null,
+ password: null
+ },
+ error: null
+ }
+ },
+ methods: {
+ login () {
+ let self = this
+ self.error = null
+ Parse.User.logIn(self.user.email, self.user.password).then(res => {
+ self.$emit('loginSuccess', res)
+ }).fail(error => {
+ this.error = error
+ })
+ }
+ }
+}
+</script>
+
+<style scoped>
+.form-signin {
+ width: 100%;
+ max-width: 330px;
+ padding: 15px;
+ margin: 0 auto;
+}
+.form-signin .checkbox {
+ font-weight: 400;
+}
+.form-signin .form-control {
+ position: relative;
+ box-sizing: border-box;
+ height: auto;
+ padding: 10px;
+ font-size: 16px;
+}
+.form-signin .form-control:focus {
+ z-index: 2;
+}
+.form-signin input[type="email"] {
+ margin-bottom: -1px;
+ border-bottom-right-radius: 0;
+ border-bottom-left-radius: 0;
+}
+.form-signin input[type="password"] {
+ margin-bottom: 10px;
+ border-top-left-radius: 0;
+ border-top-right-radius: 0;
+}
+</style>
diff --git a/src/router/index.js b/src/router/index.js
@@ -1,6 +1,7 @@
 import Vue from 'vue'
 import Router from 'vue-router'
 import HelloWorld from '@/components/HelloWorld'
+import Signin from '@/components/Signin'
 
 Vue.use(Router)
 
@@ -10,6 +11,11 @@ export default new Router({
  path: '/',
  name: 'HelloWorld',
  component: HelloWorld
+ },
+ {
+ path: '/signin',
+ name: 'Signin',
+ component: Signin
  }
  ]
 })