LoginLayout.vue (602e98aa32f82fd3b0c3d250c7cc1f8da971db24) LoginLayout.vue (932aff93a96fff5fb2d1e1dc264f944cc78b3f83)
1<template>
2 <main>
1<template>
2 <main>
3 <b-container class="login-container" fluid>
4 <b-row class="login-row" align-v="center">
5 <b-col class="login-branding mt-5 mb-5 text-center" md="6">
6 <div class="login-branding__container">
3 <div class="login-container">
4 <div class="login-main">
5 <div>
6 <div class="login-brand mb-5">
7 <img
7 <img
8 class="logo"
9 width="200px"
10 src="@/assets/images/logo-login.svg"
8 width="90px"
9 src="@/assets/images/login-company-logo.svg"
11 :alt="altLogo"
12 />
10 :alt="altLogo"
11 />
13 <h1>OpenBMC</h1>
14 </div>
12 </div>
15 </b-col>
16 <b-col md="6">
17 <router-view />
18 </b-col>
19 </b-row>
20 </b-container>
13 <h1 v-if="customizableGuiName" class="h3 mb-5">
14 {{ customizableGuiName }}
15 </h1>
16 <router-view class="login=form form-background" />
17 </div>
18 </div>
19 <div class="login-aside">
20 <div class="login-aside__logo-brand">
21 <!-- Add Secondary brand logo if needed -->
22 </div>
23 <div class="login-aside__logo-bmc">
24 <img
25 height="60px"
26 src="@/assets/images/built-on-openbmc-logo.svg"
27 alt="Built on OpenBMC"
28 />
29 </div>
30 </div>
31 </div>
21 </main>
22</template>
23
24<script>
25export default {
26 name: 'LoginLayout',
27 data() {
28 return {
32 </main>
33</template>
34
35<script>
36export default {
37 name: 'LoginLayout',
38 data() {
39 return {
29 altLogo: `${process.env.VUE_APP_COMPANY_NAME} logo`,
40 altLogo: process.env.VUE_APP_COMPANY_NAME || 'OpenBMC',
41 customizableGuiName: process.env.VUE_APP_GUI_NAME || '',
30 };
31 },
32};
33</script>
34
35<style lang="scss" scoped>
36.login-container {
42 };
43 },
44};
45</script>
46
47<style lang="scss" scoped>
48.login-container {
37 @include media-breakpoint-up(md) {
38 background: linear-gradient(
39 to right,
40 theme-color('light') 50%,
41 gray('200') 50%
42 );
49 background: gray('100');
50 display: flex;
51 flex-direction: column;
52 gap: $spacer * 2;
53 max-width: 1400px;
54 min-width: 320px;
55 min-height: 100vh;
56 justify-content: space-around;
57
58 @include media-breakpoint-up('md') {
59 background: $white;
60 flex-direction: row;
43 }
44}
45
61 }
62}
63
46.login-row {
47 @include media-breakpoint-up(md) {
64.login-main {
65 min-height: 50vh;
66 padding: $spacer * 3;
67
68 @include media-breakpoint-up('md') {
69 background: gray('100');
70 display: flex;
71 flex-direction: column;
72 flex: 1 1 75%;
48 min-height: 100vh;
73 min-height: 100vh;
74 justify-content: center;
75 align-items: center;
49 }
50}
51
76 }
77}
78
52.login-branding__container {
53 @include media-breakpoint-up(md) {
54 float: right;
55 margin-right: 4rem;
79.login-form {
80 @include media-breakpoint-up('md') {
81 max-width: 360px;
56 }
57}
82 }
83}
84
85.login-aside {
86 display: flex;
87 align-items: flex-end;
88 justify-content: flex-end;
89 gap: $spacer * 1.5;
90 margin-right: $spacer * 3;
91 margin-bottom: $spacer;
92
93 @include media-breakpoint-up('md') {
94 min-height: 100vh;
95 padding-bottom: $spacer;
96 flex: 1 1 25%;
97 margin-bottom: 0;
98 }
99}
100
101.login-aside__logo-brand:not(:empty) {
102 &::after {
103 content: '';
104 display: inline-block;
105 height: 2.5rem;
106 width: 2px;
107 background-color: gray('200');
108 margin-left: $spacer * 1.5;
109 vertical-align: middle;
110 }
111}
58</style>
112</style>