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