112 lines
3.1 KiB
Vue
112 lines
3.1 KiB
Vue
<template>
|
|
<div>
|
|
<TitleBox />
|
|
<div class="page-setup__action-box">
|
|
<div class="page-setup__description">
|
|
<p>{{ $t('description-1') }}</p>
|
|
<p>{{ $t('description-2') }}</p>
|
|
</div>
|
|
<div class="page-setup__button">
|
|
<Button @click="openModal">{{ $t('create admin user') }}</Button>
|
|
|
|
<ModalDialog v-if="showAdminAccountCreatedDialog" :no-close-button="true" @close="showAdminAccountCreatedDialog = false">
|
|
<div class="page-setup__auth-message">{{ $t('pin') }}</div>
|
|
<div class="page-setup__pin">{{ authcode }}</div>
|
|
<div class="page-setup__auth-message">{{ $t('remember-and-log-in') }}</div>
|
|
<template v-slot:footer>
|
|
<div class="page-setup__cta">
|
|
<Button @click="createAdminAccount" :disabled="saveInProgress">{{ $t('complete-setup') }}</Button>
|
|
</div>
|
|
</template>
|
|
</ModalDialog>
|
|
</div>
|
|
</div>
|
|
<CopyrightNotice />
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref } from 'vue'
|
|
import useAuth from '@/composables/useAuth'
|
|
import useI18n from '@/composables/useI18n'
|
|
import useEngine from '@/composables/useEngine'
|
|
|
|
const { $t } = useI18n({
|
|
'create admin user': { en: 'create admin user', de: 'Admin-Benutzer anlegen' },
|
|
'description-1': { en: 'Congratulation!', de: 'Herzlichen Glückwunsch!' },
|
|
'description-2': { en: 'You\'ve successfully installed Know Your Teammates.', de: 'Know Your Teammates wurde erfolgreich installiert.' },
|
|
'pin': { en: 'Your pin code is:', de: 'Deine PIN lautet:' },
|
|
'remember-and-log-in': { en: 'Write it down now.', de: 'Schreibe sie Dir jetzt auf.' },
|
|
'complete-setup': { en: 'Complete setup', de: 'Setup abschließen' },
|
|
})
|
|
|
|
await useAuth().authenticateAndLoadUserInfo(['setup'])
|
|
|
|
const showAdminAccountCreatedDialog = ref(false)
|
|
const saveInProgress = ref(false)
|
|
const authcode = ref('000000')
|
|
const openModal = () => {
|
|
authcode.value = ''
|
|
for (var i = 0; i < 6; i++) {
|
|
authcode.value += '' + Math.floor(Math.floor(Math.random() * 10000) / 100) % 10
|
|
}
|
|
showAdminAccountCreatedDialog.value = true
|
|
saveInProgress.value = false
|
|
}
|
|
|
|
const createAdminAccount = async () => {
|
|
saveInProgress.value = true
|
|
await useEngine().setupApp(authcode.value)
|
|
saveInProgress.value = false
|
|
showAdminAccountCreatedDialog.value = false
|
|
document.location.pathname = "/"
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
@use '~/assets/css/media';
|
|
@use '~/assets/css/fonts';
|
|
|
|
.page-setup {
|
|
&__action-box {
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: 340px;
|
|
margin: 0 auto;
|
|
|
|
@media (max-width: media.$phone-max-width) {
|
|
margin: 32px 0 0 0;
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
&__description {
|
|
font-size: 24px;
|
|
color: #ffffff;
|
|
text-align: center;
|
|
}
|
|
|
|
&__auth-message {
|
|
font-family: fonts.$font-secondary;
|
|
font-size: 24px;
|
|
text-align: center;
|
|
margin: 32px;
|
|
}
|
|
|
|
&__pin {
|
|
font-family: fonts.$font-secondary;
|
|
font-size: 32px;
|
|
font-weight: 800;
|
|
text-align: center;
|
|
}
|
|
|
|
&__button {
|
|
display: flex;
|
|
margin: 32px auto;
|
|
}
|
|
|
|
&__cta {
|
|
margin: 0 auto;
|
|
}
|
|
}
|
|
</style> |