Skip to content

Commit

Permalink
Merge branch 'development' of github.com:chingu-voyage6/Bears-Team-07…
Browse files Browse the repository at this point in the history 
… into development

* 'development' of github.com:chingu-voyage6/Bears-Team-07:
  Feature/login with vuex (#31)
  • Loading branch information
@nandub
nandub committed Jul 9, 2018
2 parents 8aaa7c8 + 75211b8 commit 008aeec
Show file tree
Hide file tree
Showing 7 changed files with 7,746 additions and 28 deletions.
9 changes: 2 additions & 7 deletions client/package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions client/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@
"test:e2e": "vue-cli-service test:e2e"
},
"dependencies": {
"axios": "^0.18.0",
"install": "^0.11.0",
"vue": "^2.5.16",
"vue-router": "^3.0.1",
Expand Down
3 changes: 3 additions & 0 deletions client/src/App.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,11 +21,14 @@ export default {

<style>
#app {
height: 100%;
font-family: "Alegreya", Lato, Arial, serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: #fff;
}
/* Google font import */
@import url("https://fonts.googleapis.com/css?family=Alegreya|Macondo+Swash+Caps");
/* To include jquery
Expand Down
7 changes: 7 additions & 0 deletions client/src/services/LoginService.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
import Api from "./Api.js";

export default {
login(userDetails) {
return Api().post("/api/v1/auth/login", userDetails);
}
};
221 changes: 204 additions & 17 deletions client/src/views/Login.vue
View file
Original file line number Diff line number Diff line change
@@ -1,25 +1,212 @@
<template>
<div class="login text-center">
<WelcomeHeader/>
<body>
<p>Welcome to Login page</p>
</body>
</div>
<div class="text-center">
<WelcomeHeader/>
<div class="container-fluid background-container">
<div class="row">
<div class="col-12">
<div class="modal-dialog">
<div class="col-sm-9 main-section text-center">
<div class="modal-content">
<h3>Login</h3>
<div class="col-12 form-input">
<form @submit.prevent="login({name: 'home'})">

<div class="form-group input-group">
<div class="input-group-prepend">
<div class="input-group-text">
<i class="fa fa-envelope" aria-hidden="true"></i>
</div>
</div>
<input type="email" class="form-control" v-model="email" placeholder="Email"
required="true">
</div>
<div class="form-group input-group">
<div class="input-group-prepend">
<div class="input-group-text">
<i class="fa fa-key" aria-hidden="true"></i>
</div>
</div>
<input type="password" class="form-control" v-model="password"
placeholder="Password" required="true">
</div>
<div v-if="show">
<p class="error">
<i class="fa fa-exclamation-circle" aria-hidden="true"></i>
{{ error }}</p>
</div>
<div class="form-group">
<button type="submit" class="form-control btn btn-custom">
Login
<i class="fa fa-user" aria-hidden="true"></i>
</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>

<script>
import WelcomeHeader from "@/components/WelcomeHeader.vue";
export default {
name: "logout",
components: {
WelcomeHeader
}
};
import WelcomeHeader from "@/components/WelcomeHeader.vue";
import LoginService from "@/services/LoginService.js";
export default {
name: "Login",
data() {
return {
email: "",
password: "",
error: null,
show: false
};
},
components: {
WelcomeHeader
},
methods: {
async login(route) {
try {
const response = await LoginService.login({
email: this.email,
password: this.password,
});
this.$store.dispatch("setToken", response.data.token);
this.$store.dispatch("setUser", response.data.user);
this.$router.push(route);
} catch (error) {
console.log(error);
(this.show = true), (this.error = error.response.data.error);
}
}
}
};
</script>

<style scoped>
.login {
padding: 100px 20px 20px 20px;
}
.background-container {
position: relative;
width: 100%;
min-height: 100vh;
background-color: transparent;
background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.6)),
url("../assets/landing.jpg") no-repeat center top;
-webkit-background-size: cover;
-moz-background-size: cover;
-ms-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-attachment: fixed;
overflow: hidden;
padding-bottom: 40px;
}
.register {
padding-bottom: 100px;
}
.main-section {
margin: 0 auto;
margin-top: 130px;
padding: 0;
}
.modal-content {
background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6));
padding: 0 18px;
border-radius: 10px;
border: 1px solid #420906;
}
h3 {
padding-top: 25px;
}
.error {
font-size: 14px;
letter-spacing: 1px;
padding-bottom: 5px;
}
form {
padding-top: 25px;
}
.form-group {
margin-bottom: 25px;
font-size: 18px;
}
.form-group .fa {
color: #fbe9e7;
}
.form-control:focus {
border-color: #fff;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(255, 0, 0, 0.6);
}
.input-group-text {
background-color: transparent;
}
.form-group input {
color: #fff;
background-color: transparent;
height: 42px;
border-radius: 5px;
border: 1px solid #fbe9e7;
letter-spacing: 2px;
}
/* Chrome/Opera/Safari */
::-webkit-input-placeholder {
color: #fbe9e7;
}
/* Firefox 19+ */
::-moz-placeholder {
color: #fbe9e7;
}
/* IE 10+ */
:-ms-input-placeholder {
color: #fbe9e7;
}
/* Firefox 18- */
:-moz-placeholder {
color: #fbe9e7;
}
/* Most modern browsers support this now. */
::placeholder {
color: #fbe9e7;
}
.btn.btn-custom {
background-color: #420906;
letter-spacing: 1px;
color: #fff;
font-size: 20px;
border: 1px solid #fbe9e7;
border-radius: 5px;
overflow: hidden;
}
.btn.btn-custom:hover {
background-color: transparent;
}
.btn.btn-custom > i {
padding-right: 2px;
}
</style>
Loading

0 comments on commit 008aeec

Please sign in to comment.