settel/knowyt
1
0
Fork 0
Code Issues Pull Requests Packages Releases Activity

feat: show create admin account dialog (WIP)

Browse Source
This commit is contained in:
Settel 2023-06-03 21:09:16 +02:00
parent 0367fa6987
commit 78b4947730
2 changed files with 43 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
client/src/components/DialogBox.vue
View File

@ -37,8 +37,13 @@ const emit = defineEmits(['close'])
border-radius: 8px;
color: $dialog-box-text-color;
z-index: 12;
@media (max-width: $phone-max-width) {
min-width: unset;
}
}
&__header {
display: flex;
}

51
client/src/pages/setup.vue
View File

@ -7,12 +7,17 @@
<p>{{ $t('description-2') }}</p>
</div>
<div class="page-setup__button">
<Button @click="createAdminAccount">{{ $t('create admin user') }}</Button>
<Button @click="openModal">{{ $t('create admin user') }}</Button>
<ModalDialog v-if="showAdminAccountCreatedDialog" :no-close-button="true" @close="showAdminAccountCreatedDialog = false">
<div class="create-team-dialog__auth-message">{{ $t('pin') }}</div>
<div class="create-team-dialog__pin">{{ authcode }}</div>
<div class="create-team-dialog__auth-message">{{ $t('remember-and-log-in') }}</div>
<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">{{ $t('complete-setup') }}</Button>
</div>
</template>
</ModalDialog>
</div>
</div>
@ -27,27 +32,28 @@ import useI18n from '@/composables/useI18n'
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.'
},
'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 authcode = ref('000000')
const createAdminAccount = () => {
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
}
const createAdminAccount = () => {
}
</script>
<style lang="scss">
@ -62,6 +68,7 @@ const createAdminAccount = () => {
@media (max-width: $phone-max-width) {
margin: 32px 0 0 0;
width: 100%;
}
}
@ -71,9 +78,27 @@ const createAdminAccount = () => {
text-align: center;
}
&__auth-message {
font-family: $font-secondary;
font-size: 24px;
text-align: center;
margin: 32px;
}
&__pin {
font-family: $font-secondary;
font-size: 32px;
font-weight: 800;
text-align: center;
}
&__button {
display: flex;
margin: 32px auto;
}
&__cta {
margin: 0 auto;
}
}
</style>