n8n/packages/editor-ui/src/views/ErrorView.vue
2023-12-28 09:49:58 +01:00

75 lines
1.3 KiB
Vue

<template>
<div :class="$style.container">
<font-awesome-icon icon="exclamation-triangle" :class="$style.icon" />
<div :class="$style.message">
<div>
<n8n-heading size="2xlarge">
{{ $locale.baseText(messageKey) }}
</n8n-heading>
</div>
<div>
<n8n-text v-if="errorCode" size="large">
{{ errorCode }} {{ $locale.baseText('error') }}
</n8n-text>
</div>
</div>
<n8n-button :label="$locale.baseText(redirectTextKey)" @click="onButtonClick" />
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({
name: 'ErrorView',
props: {
messageKey: {
type: String,
required: true,
},
errorCode: {
type: Number,
},
redirectTextKey: {
type: String,
},
redirectPage: {
type: String,
},
},
methods: {
onButtonClick() {
void this.$router.push({ name: this.redirectPage });
},
},
});
</script>
<style lang="scss" module>
.container {
height: 100%;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.icon {
min-height: 96px;
min-width: 108px;
margin-bottom: var(--spacing-2xl);
color: var(--color-foreground-base);
}
.message {
margin-bottom: var(--spacing-l);
* {
margin-bottom: var(--spacing-2xs);
display: flex;
justify-content: center;
}
}
</style>