79 lines
1.7 KiB
Vue
79 lines
1.7 KiB
Vue
<template>
|
|
<div class="action-container">
|
|
<template v-if="isEditing">
|
|
<button v-if="needsEmailVerification" type="button" class="primary-btn" :disabled="saving" @click="emit('verify')">
|
|
{{ t('Settings.buttons.verifyEmail') }}
|
|
</button>
|
|
<button v-else type="button" class="primary-btn" :disabled="saving" @click="emit('save')">
|
|
{{ saving ? t('Settings.buttons.saving') : t('Settings.buttons.saveChange') }}
|
|
</button>
|
|
<button type="button" class="secondary-btn" :disabled="saving" @click="emit('discard')">
|
|
{{ t('Settings.buttons.discard') }}
|
|
</button>
|
|
</template>
|
|
<template v-else>
|
|
<button type="button" class="primary-btn edit-btn" @click="emit('edit')">
|
|
{{ t('Settings.buttons.edit') }}
|
|
</button>
|
|
</template>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { useI18n } from 'vue-i18n'
|
|
|
|
defineProps<{
|
|
isEditing: boolean
|
|
saving: boolean
|
|
needsEmailVerification: boolean
|
|
}>()
|
|
|
|
const emit = defineEmits<{
|
|
(event: 'edit'): void
|
|
(event: 'save'): void
|
|
(event: 'verify'): void
|
|
(event: 'discard'): void
|
|
}>()
|
|
|
|
const { t } = useI18n()
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.action-container {
|
|
display: flex;
|
|
justify-content: center;
|
|
column-gap: 1.2rem;
|
|
margin-top: 2.8rem;
|
|
}
|
|
|
|
.primary-btn,
|
|
.secondary-btn {
|
|
height: 4.4rem;
|
|
border: 0.1rem solid #c4c4c4;
|
|
background: #f6f6f6;
|
|
font-family: 'KaiseiOpti-Bold';
|
|
font-size: 1.6rem;
|
|
line-height: 2.6rem;
|
|
color: #232323;
|
|
cursor: pointer;
|
|
|
|
&:disabled {
|
|
opacity: 0.6;
|
|
cursor: not-allowed;
|
|
}
|
|
}
|
|
|
|
.primary-btn {
|
|
width: 23.6rem;
|
|
padding: 0 2.4rem;
|
|
border-color: #232323;
|
|
background: #232323;
|
|
color: #ffffff;
|
|
}
|
|
|
|
.secondary-btn {
|
|
width: 12rem;
|
|
background: #ffffff;
|
|
}
|
|
</style>
|