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

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

@ -7,12 +7,17 @@
<p>{{ $t('description-2') }}</p> <p>{{ $t('description-2') }}</p>
</div> </div>
<div class="page-setup__button"> <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"> <ModalDialog v-if="showAdminAccountCreatedDialog" :no-close-button="true" @close="showAdminAccountCreatedDialog = false">
<div class="create-team-dialog__auth-message">{{ $t('pin') }}</div> <div class="page-setup__auth-message">{{ $t('pin') }}</div>
<div class="create-team-dialog__pin">{{ authcode }}</div> <div class="page-setup__pin">{{ authcode }}</div>
<div class="create-team-dialog__auth-message">{{ $t('remember-and-log-in') }}</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> </ModalDialog>
</div> </div>
</div> </div>
@ -27,27 +32,28 @@ import useI18n from '@/composables/useI18n'
const { $t } = useI18n({ const { $t } = useI18n({
'create admin user': { en: 'create admin user', de: 'Admin-Benutzer anlegen' }, 'create admin user': { en: 'create admin user', de: 'Admin-Benutzer anlegen' },
'description-1': { 'description-1': { en: 'Congratulation!', de: 'Herzlichen Glückwunsch!' },
en: 'Congratulation!', 'description-2': { en: 'You\'ve successfully installed Know Your Teammates.', de: 'Know Your Teammates wurde erfolgreich installiert.' },
de: 'Herzlichen Glückwunsch! ' '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.' },
'description-2': { 'complete-setup': { en: 'Complete setup', de: 'Setup abschließen' },
en: 'You\'ve successfully installed Know Your Teammates.',
de: 'Know Your Teammates wurde erfolgreich installiert.'
},
}) })
await useAuth().authenticateAndLoadUserInfo(['setup']) await useAuth().authenticateAndLoadUserInfo(['setup'])
const showAdminAccountCreatedDialog = ref(false) const showAdminAccountCreatedDialog = ref(false)
const authcode = ref('000000') const authcode = ref('000000')
const createAdminAccount = () => { const openModal = () => {
authcode.value = '' authcode.value = ''
for (var i = 0; i < 6; i++) { for (var i = 0; i < 6; i++) {
authcode.value += '' + Math.floor(Math.floor(Math.random() * 10000) / 100) % 10 authcode.value += '' + Math.floor(Math.floor(Math.random() * 10000) / 100) % 10
} }
showAdminAccountCreatedDialog.value = true showAdminAccountCreatedDialog.value = true
} }
const createAdminAccount = () => {
}
</script> </script>
<style lang="scss"> <style lang="scss">
@ -62,6 +68,7 @@ const createAdminAccount = () => {
@media (max-width: $phone-max-width) { @media (max-width: $phone-max-width) {
margin: 32px 0 0 0; margin: 32px 0 0 0;
width: 100%;
} }
} }
@ -71,9 +78,27 @@ const createAdminAccount = () => {
text-align: center; 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 { &__button {
display: flex; display: flex;
margin: 32px auto; margin: 32px auto;
} }
&__cta {
margin: 0 auto;
}
} }
</style> </style>