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              width="90px"
9              src="@/assets/images/login-company-logo.svg"
10              :alt="altLogo"
11            />
12          </div>
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>
32  </main>
33</template>
34
35<script>
36export default {
37  name: 'LoginLayout',
38  data() {
39    return {
40      altLogo: process.env.VUE_APP_COMPANY_NAME || 'OpenBMC',
41      customizableGuiName: process.env.VUE_APP_GUI_NAME || '',
42    };
43  },
44};
45</script>
46
47<style lang="scss" scoped>
48.login-container {
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;
61  }
62}
63
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%;
73    min-height: 100vh;
74    justify-content: center;
75    align-items: center;
76  }
77}
78
79.login-form {
80  @include media-breakpoint-up('md') {
81    max-width: 360px;
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}
112</style>
113