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

feat: create button to generate auth code

Browse Source
This commit is contained in:
Settel 2022-09-07 14:50:01 +02:00
parent f9342b94ce
commit 446bc99309
2 changed files with 16 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
client/src/components/Button.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<button :type="type" class="button__button" <button :type="type" class="button__button"
:class="{ 'button__button__disabled': disabled, 'button__button__border': border, 'button__button__caution': cssClass==='caution' }"> :class="{ 'button__button__disabled': disabled, 'button__button__border': border, 'button__button__caution': cssClass === 'caution', 'button__button__mini': cssClass === 'mini' }">
<slot /> <slot />
</button> </button>
</template> </template>
@ -64,7 +64,6 @@ defineProps({
&__disabled:hover { &__disabled:hover {
cursor: default; cursor: default;
background-color: $button-disabled-background-color; background-color: $button-disabled-background-color;
// border: $button-disabled-border;
margin: 4px; margin: 4px;
color: $button-disabled-text-color; color: $button-disabled-text-color;
@ -85,6 +84,10 @@ defineProps({
color: $button-caution-hover-text-color; color: $button-caution-hover-text-color;
} }
} }
&__mini {
font-size: 16px;
}
} }
} }
</style> </style>

12
client/src/components/admin/PlayerDialog.vue
View File

@ -5,7 +5,10 @@
<label class="player-dialog__label">Score</label> <label class="player-dialog__label">Score</label>
<input class="player-dialog__input" v-model="player.score" size="40" maxlength="4" /> <input class="player-dialog__input" v-model="player.score" size="40" maxlength="4" />
<label class="player-dialog__label">Authcode</label> <label class="player-dialog__label">Authcode</label>
<input class="player-dialog__input" v-model="player.authcode" size="40" maxlength="6" /> <div class="player-dialog__input-box">
<input class="player-dialog__input" v-model="player.authcode" size="10" maxlength="6" />
<Button :border="false" css-class="mini" @click="generate">generate</Button>
</div>
<div class="player-dialog__id-container" @click="showId = true"> <div class="player-dialog__id-container" @click="showId = true">
<span class="player-dialog__id" :class="{ 'player-dialog__id__show': showId }">{{ player.id }}</span> <span class="player-dialog__id" :class="{ 'player-dialog__id__show': showId }">{{ player.id }}</span>
</div> </div>
@ -33,6 +36,13 @@ const props = defineProps<{
const emit = defineEmits(['close', 'submit']) const emit = defineEmits(['close', 'submit'])
const showId = ref(false) const showId = ref(false)
watch([props], () => { showId.value = false }) // reset visibility each time the dialog is shown watch([props], () => { showId.value = false }) // reset visibility each time the dialog is shown
const generate = () => {
props.player.authcode = ''
for (var i = 0; i < 6; i++) {
props.player.authcode += '' + Math.floor(Math.floor(Math.random() * 10000) / 100) % 10
}
}
</script> </script>
<style lang="scss"> <style lang="scss">