xref: /openbmc/webui-vue/src/views/SecurityAndAccess/Policies/Policies.vue (revision d36ac8a8be8636ddd0e64ce005d507b21bcdeb00) 
1<template>
2  <b-container fluid="xl">
3    <page-title />
4    <b-row>
5      <b-col md="8">
6        <b-row v-if="!modifySSHPolicyDisabled" class="setting-section">
7          <b-col class="d-flex align-items-center justify-content-between">
8            <dl class="me-3 w-75">
9              <dt>{{ $t('pagePolicies.ssh') }}</dt>
10              <dd>
11                {{ $t('pagePolicies.sshDescription') }}
12              </dd>
13            </dl>
14            <b-form-checkbox
15              id="sshSwitch"
16              v-model="sshProtocolState"
17              data-test-id="policies-toggle-bmcShell"
18              switch
19              @change="changeSshProtocolState"
20            >
21              <span class="visually-hidden-focusable">
22                {{ $t('pagePolicies.ssh') }}
23              </span>
24              <span v-if="sshProtocolState">
25                {{ $t('global.status.enabled') }}
26              </span>
27              <span v-else>{{ $t('global.status.disabled') }}</span>
28            </b-form-checkbox>
29          </b-col>
30        </b-row>
31        <b-row class="setting-section">
32          <b-col class="d-flex align-items-center justify-content-between">
33            <dl class="mt-3 me-3 w-75">
34              <dt>{{ $t('pagePolicies.ipmi') }}</dt>
35              <dd>
36                {{ $t('pagePolicies.ipmiDescription') }}
37              </dd>
38            </dl>
39            <b-form-checkbox
40              id="ipmiSwitch"
41              v-model="ipmiProtocolState"
42              data-test-id="polices-toggle-networkIpmi"
43              switch
44              @change="changeIpmiProtocolState"
45            >
46              <span class="visually-hidden-focusable">
47                {{ $t('pagePolicies.ipmi') }}
48              </span>
49              <span v-if="ipmiProtocolState">
50                {{ $t('global.status.enabled') }}
51              </span>
52              <span v-else>{{ $t('global.status.disabled') }}</span>
53            </b-form-checkbox>
54          </b-col>
55        </b-row>
56        <b-row class="setting-section">
57          <b-col class="d-flex align-items-center justify-content-between">
58            <dl class="mt-3 me-3 w-75">
59              <dt>{{ $t('pagePolicies.vtpm') }}</dt>
60              <dd>
61                {{ $t('pagePolicies.vtpmDescription') }}
62              </dd>
63            </dl>
64            <b-form-checkbox
65              id="vtpmSwitch"
66              v-model="vtpmState"
67              data-test-id="policies-toggle-vtpm"
68              switch
69              @change="changeVtpmState"
70            >
71              <span class="visually-hidden-focusable">
72                {{ $t('pagePolicies.vtpm') }}
73              </span>
74              <span v-if="vtpmState">
75                {{ $t('global.status.enabled') }}
76              </span>
77              <span v-else>{{ $t('global.status.disabled') }}</span>
78            </b-form-checkbox>
79          </b-col>
80        </b-row>
81        <b-row class="setting-section">
82          <b-col class="d-flex align-items-center justify-content-between">
83            <dl class="mt-3 me-3 w-75">
84              <dt>{{ $t('pagePolicies.rtad') }}</dt>
85              <dd>
86                {{ $t('pagePolicies.rtadDescription') }}
87              </dd>
88            </dl>
89            <b-form-checkbox
90              id="rtadSwitch"
91              v-model="rtadState"
92              data-test-id="policies-toggle-rtad"
93              switch
94              @change="changeRtadState"
95            >
96              <span class="visually-hidden-focusable">
97                {{ $t('pagePolicies.rtad') }}
98              </span>
99              <span v-if="rtadState">
100                {{ $t('global.status.enabled') }}
101              </span>
102              <span v-else>{{ $t('global.status.disabled') }}</span>
103            </b-form-checkbox>
104          </b-col>
105        </b-row>
106        <b-row class="setting-section">
107          <b-col class="d-flex align-items-center justify-content-between">
108            <dl class="mt-3 me-3 w-75">
109              <dt>{{ $t('pagePolicies.webSessionTimeOut') }}</dt>
110              <dd>
111                {{ $t('pagePolicies.webSessionTimeOutDescription') }}
112              </dd>
113            </dl>
114          </b-col>
115          <b-col lg="3" class="session-timeout">
116            <b-form-select
117              id="session-timeout-options"
118              v-model="sessionTimeoutState"
119              :options="sessionTimeOutOptions"
120              @update:model-value="saveSessionTimeoutValue"
121            >
122              <template #first>
123                <b-form-select-option :value="null" disabled>
124                  {{ $t('global.form.selectAnOption') }}
125                </b-form-select-option>
126              </template>
127            </b-form-select>
128          </b-col>
129        </b-row>
130      </b-col>
131    </b-row>
132  </b-container>
133</template>
134
135<script>
136import PageTitle from '@/components/Global/PageTitle';
137
138import LoadingBarMixin from '@/components/Mixins/LoadingBarMixin';
139import BVToastMixin from '@/components/Mixins/BVToastMixin';
140import { useI18n } from 'vue-i18n';
141import i18n from '@/i18n';
142
143export default {
144  name: 'Policies',
145  components: { PageTitle },
146  mixins: [LoadingBarMixin, BVToastMixin],
147  beforeRouteLeave(to, from, next) {
148    this.hideLoader();
149    next();
150  },
151  data() {
152    return {
153      $t: useI18n().t,
154      modifySSHPolicyDisabled:
155        process.env.VUE_APP_MODIFY_SSH_POLICY_DISABLED === 'true',
156      sessionTimeOutOptions: [
157        {
158          value: 1800,
159          text: i18n.global.t('pagePolicies.options.30minutes'),
160        },
161        {
162          value: 3600,
163          text: i18n.global.t('pagePolicies.options.1hour'),
164        },
165        {
166          value: 7200,
167          text: i18n.global.t('pagePolicies.options.2hours'),
168        },
169        {
170          value: 14400,
171          text: i18n.global.t('pagePolicies.options.4hours'),
172        },
173        {
174          value: 28800,
175          text: i18n.global.t('pagePolicies.options.8hours'),
176        },
177        {
178          value: 86400,
179          text: i18n.global.t('pagePolicies.options.1day'),
180        },
181      ],
182    };
183  },
184  computed: {
185    sshProtocolState: {
186      get() {
187        return this.$store.getters['policies/sshProtocolEnabled'];
188      },
189      set(newValue) {
190        return newValue;
191      },
192    },
193    ipmiProtocolState: {
194      get() {
195        return this.$store.getters['policies/ipmiProtocolEnabled'];
196      },
197      set(newValue) {
198        return newValue;
199      },
200    },
201    rtadState: {
202      get() {
203        if (this.$store.getters['policies/rtadEnabled'] === 'Enabled') {
204          return true;
205        } else {
206          return false;
207        }
208      },
209      set(newValue) {
210        return newValue;
211      },
212    },
213    vtpmState: {
214      get() {
215        if (this.$store.getters['policies/vtpmEnabled'] === 'Enabled') {
216          return true;
217        } else {
218          return false;
219        }
220      },
221      set(newValue) {
222        return newValue;
223      },
224    },
225    sessionTimeoutState: {
226      get() {
227        return this.$store.getters['policies/getSessionTimeoutValue'];
228      },
229      set(newValue) {
230        return newValue;
231      },
232    },
233  },
234  created() {
235    this.startLoader();
236    Promise.all([
237      this.$store.dispatch('policies/getBiosStatus'),
238      this.$store.dispatch('policies/getNetworkProtocolStatus'),
239      this.$store.dispatch('policies/getSessionTimeout'),
240    ]).finally(() => this.endLoader());
241  },
242  methods: {
243    changeIpmiProtocolState(state) {
244      this.$store
245        .dispatch('policies/saveIpmiProtocolState', state)
246        .then((message) => this.successToast(message))
247        .catch(({ message }) => this.errorToast(message));
248    },
249    changeSshProtocolState(state) {
250      this.$store
251        .dispatch('policies/saveSshProtocolState', state)
252        .then((message) => this.successToast(message))
253        .catch(({ message }) => this.errorToast(message));
254    },
255    changeRtadState(state) {
256      this.$store
257        .dispatch('policies/saveRtadState', state ? 'Enabled' : 'Disabled')
258        .then((message) => this.successToast(message))
259        .catch(({ message }) => this.errorToast(message));
260    },
261    changeVtpmState(state) {
262      this.$store
263        .dispatch('policies/saveVtpmState', state ? 'Enabled' : 'Disabled')
264        .then((message) => this.successToast(message))
265        .catch(({ message }) => this.errorToast(message));
266    },
267    saveSessionTimeoutValue(value) {
268      this.$store
269        .dispatch('policies/saveSessionTimeoutValue', value)
270        .then((message) => this.successToast(message))
271        .catch(({ message }) => this.errorToast(message));
272    },
273  },
274};
275</script>
276
277<style lang="scss" scoped>
278.setting-section {
279  border-bottom: 1px solid $gray-300;
280}
281.session-timeout {
282  align-self: center;
283}
284</style>
285