diff options
author | Derick Montague <derick.montague@ibm.com> | 2019-12-05 01:30:08 +0300 |
---|---|---|
committer | Derick Montague <derick.montague@ibm.com> | 2020-01-23 02:44:50 +0300 |
commit | e080a1a7593e83a49d623ffdd452fd0e1c617889 (patch) | |
tree | bb94dee85cae80a3f54f4fbcf1d816f304129e67 /src/views | |
parent | 186ce2e407812f417aba7a2ee2ab6cae5d5f3b0e (diff) | |
download | webui-vue-e080a1a7593e83a49d623ffdd452fd0e1c617889.tar.xz |
Add login and logout functionality
- Add AuthenticationStore
- Add ability to login and logout
- Add route navigation guard
- Add login styles
- Add temporary authentication for api call
- Add Login directory
- Add index.js
In order to login a .env.development.local file that contains
BASE_URL="https://<ip address> or <FQDN>"
Signed-off-by: Derick Montague <derick.montague@ibm.com>
Change-Id: I88b93e287e66f4bae82a1ec2934cdef12d78264e
Diffstat (limited to 'src/views')
-rw-r--r-- | src/views/Login/Login.vue | 111 | ||||
-rw-r--r-- | src/views/Login/index.js | 2 |
2 files changed, 113 insertions, 0 deletions
diff --git a/src/views/Login/Login.vue b/src/views/Login/Login.vue new file mode 100644 index 00000000..f122d289 --- /dev/null +++ b/src/views/Login/Login.vue @@ -0,0 +1,111 @@ +<template> + <b-container class="login-container" fluid> + <b-row class="login-row" align-v="center"> + <b-col class="login-branding mt-5 mb-5" md="6"> + <div class="login-branding__container"> + <img + class="logo" + width="200px" + src="@/assets/images/openbmc-logo.svg" + alt="" + /> + <h1>OpenBMC</h1> + </div> + </b-col> + + <b-col class="login-form" md="6"> + <b-form @submit.prevent="login"> + <b-form-group + id="username-group" + label="Username" + label-for="username" + > + <b-form-input id="username" v-model="username" type="text" required> + </b-form-input> + </b-form-group> + + <b-form-group + id="password-group" + label="Password" + label-for="password" + > + <b-form-input + id="password" + v-model="password" + type="password" + required + > + </b-form-input> + </b-form-group> + + <b-button type="submit" variant="primary">Login</b-button> + </b-form> + </b-col> + </b-row> + </b-container> +</template> + +<script> +export default { + name: "Login", + data() { + return { + username: "", + password: "" + }; + }, + methods: { + login: function() { + const username = this.username; + const password = this.password; + this.$store + .dispatch("authentication/login", { username, password }) + .then(() => this.$router.push("/")) + .catch(error => console.log(error)); + } + } +}; +</script> + +<style lang="scss" scoped> +@import "~bootstrap/scss/functions"; +@import "~bootstrap/scss/variables"; +@import "~bootstrap/scss/mixins"; + +.login-container { + @include media-breakpoint-up(md) { + background: linear-gradient( + to right, + var(--light) 50%, + var(--secondary-light) 50% + ); + } +} + +.login-row { + @include media-breakpoint-up(md) { + min-height: 100vh; + } +} + +.login-branding__container { + @include media-breakpoint-up(md) { + float: right; + margin-right: 4rem; + } +} + +.login-form form { + max-width: 360px; + margin-right: auto; + margin-left: auto; + + @include media-breakpoint-up(md) { + margin-left: 4rem; + } +} + +.login-branding { + text-align: center; +} +</style> diff --git a/src/views/Login/index.js b/src/views/Login/index.js new file mode 100644 index 00000000..7fc2b5ca --- /dev/null +++ b/src/views/Login/index.js @@ -0,0 +1,2 @@ +import Login from "./Login.vue"; +export default Login; |