xref: /openbmc/webui-vue/src/views/Login/Login.vue (revision 6ce1a07c) 
1<template>
2  <b-container class="login-container" fluid>
3    <b-row class="login-row" align-v="center">
4      <b-col class="login-branding mt-5 mb-5" md="6">
5        <div class="login-branding__container">
6          <img
7            class="logo"
8            width="200px"
9            src="@/assets/images/openbmc-logo.svg"
10            alt=""
11          />
12          <h1>OpenBMC</h1>
13        </div>
14      </b-col>
15
16      <b-col class="login-form" md="6">
17        <b-form @submit.prevent="login">
18          <b-form-group
19            id="username-group"
20            label="Username"
21            label-for="username"
22          >
23            <b-form-input id="username" v-model="username" type="text" required>
24            </b-form-input>
25          </b-form-group>
26
27          <b-form-group
28            id="password-group"
29            label="Password"
30            label-for="password"
31          >
32            <b-form-input
33              id="password"
34              v-model="password"
35              type="password"
36              required
37            >
38            </b-form-input>
39          </b-form-group>
40
41          <b-button type="submit" variant="primary">Login</b-button>
42        </b-form>
43      </b-col>
44    </b-row>
45  </b-container>
46</template>
47
48<script>
49export default {
50  name: "Login",
51  data() {
52    return {
53      username: "",
54      password: ""
55    };
56  },
57  methods: {
58    login: function() {
59      const username = this.username;
60      const password = this.password;
61      this.$store
62        .dispatch("authentication/login", [username, password])
63        .then(() => this.$router.push("/"))
64        .catch(error => console.log(error));
65    }
66  }
67};
68</script>
69
70<style lang="scss" scoped>
71@import "~bootstrap/scss/functions";
72@import "~bootstrap/scss/variables";
73@import "~bootstrap/scss/mixins";
74
75.login-container {
76  @include media-breakpoint-up(md) {
77    background: linear-gradient(
78      to right,
79      var(--light) 50%,
80      var(--secondary-light) 50%
81    );
82  }
83}
84
85.login-row {
86  @include media-breakpoint-up(md) {
87    min-height: 100vh;
88  }
89}
90
91.login-branding__container {
92  @include media-breakpoint-up(md) {
93    float: right;
94    margin-right: 4rem;
95  }
96}
97
98.login-form form {
99  max-width: 360px;
100  margin-right: auto;
101  margin-left: auto;
102
103  @include media-breakpoint-up(md) {
104    margin-left: 4rem;
105  }
106}
107
108.login-branding {
109  text-align: center;
110}
111</style>
112