Skip to content

Commit

Permalink
fix: adjust dialog to latest template (#224)
Browse files Browse the repository at this point in the history
  • Loading branch information
@lukicenturi
lukicenturi authored Jun 26, 2024
1 parent 058de96 commit 1308ccc
Show file tree
Hide file tree
Showing 7 changed files with 198 additions and 319 deletions.
147 changes: 75 additions & 72 deletions components/account/home/CancelSubscription.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,84 +36,87 @@ const { t } = useI18n();
<template>
<RuiDialog
:model-value="modelValue"
max-width="900"
@update:model-value="emit('update:model-value', $event)"
>
<template #title>
{{ t('account.subscriptions.cancellation.title') }}
</template>
<RuiCard>
<template #header>
{{ t('account.subscriptions.cancellation.title') }}
</template>

<div class="whitespace-break-spaces mb-4">
<i18n-t
keypath="account.subscriptions.cancellation.description"
scope="global"
>
<template #benefits>
<ul class="list-disc ml-5">
<li>{{ t('account.subscriptions.cancellation.benefits.1') }}</li>
<li>
<i18n-t
keypath="account.subscriptions.cancellation.benefits.2"
scope="global"
>
<template #bug_tracker>
<ButtonLink
class="underline"
color="primary"
external
inline
to="https://github.com/rotki/rotki/issues"
>
{{ t('account.subscriptions.cancellation.bug_tracker') }}
</ButtonLink>
</template>
</i18n-t>
</li>
<li>{{ t('account.subscriptions.cancellation.benefits.3') }}</li>
</ul>
</template>
<div class="whitespace-break-spaces mb-4">
<i18n-t
keypath="account.subscriptions.cancellation.description"
scope="global"
>
<template #benefits>
<ul class="list-disc ml-5">
<li>{{ t('account.subscriptions.cancellation.benefits.1') }}</li>
<li>
<i18n-t
keypath="account.subscriptions.cancellation.benefits.2"
scope="global"
>
<template #bug_tracker>
<ButtonLink
class="underline"
color="primary"
external
inline
to="https://github.com/rotki/rotki/issues"
>
{{ t('account.subscriptions.cancellation.bug_tracker') }}
</ButtonLink>
</template>
</i18n-t>
</li>
<li>{{ t('account.subscriptions.cancellation.benefits.3') }}</li>
</ul>
</template>

<template #subscription_status>
<span v-if="!isPending">
{{
t(
'account.subscriptions.cancellation.subscription_status.normal',
{
start_date: subscription?.createdDate ?? '',
end_date: subscription?.nextActionDate ?? '',
},
)
}}
</span>
<span v-else>
{{
t(
'account.subscriptions.cancellation.subscription_status.pending',
{
start_date: subscription?.createdDate ?? '',
},
)
}}
</span>
</template>
</i18n-t>
</div>
<template #subscription_status>
<span v-if="!isPending">
{{
t(
'account.subscriptions.cancellation.subscription_status.normal',
{
start_date: subscription?.createdDate ?? '',
end_date: subscription?.nextActionDate ?? '',
},
)
}}
</span>
<span v-else>
{{
t(
'account.subscriptions.cancellation.subscription_status.pending',
{
start_date: subscription?.createdDate ?? '',
},
)
}}
</span>
</template>
</i18n-t>
</div>

<template #actions>
<RuiButton
color="primary"
variant="text"
@click="emit('update:model-value', false)"
>
{{ t('account.subscriptions.cancellation.actions.no') }}
</RuiButton>
<div class="flex justify-end gap-4 pt-4">
<RuiButton
color="primary"
variant="text"
@click="emit('update:model-value', false)"
>
{{ t('account.subscriptions.cancellation.actions.no') }}
</RuiButton>

<RuiButton
color="error"
@click="cancelSubscription()"
>
{{ t('account.subscriptions.cancellation.actions.yes') }}
</RuiButton>
</template>
<RuiButton
color="error"
@click="cancelSubscription()"
>
{{ t('account.subscriptions.cancellation.actions.yes') }}
</RuiButton>
</div>
</RuiCard>
</RuiDialog>

<FloatingNotification
Expand Down
76 changes: 41 additions & 35 deletions components/account/home/DangerZone.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -81,44 +81,50 @@ const { t } = useI18n();
</RuiButton>
</div>
</RuiCard>
<RuiDialog v-model="confirm">
<template #title>
{{ t('account.delete_account.title') }}
</template>

<div class="whitespace-break-spaces mb-4">
<i18n-t
keypath="account.delete_account.confirmation.description"
scope="global"
>
<template #username>
<strong>{{ username }}</strong>
</template>
</i18n-t>
</div>
<RuiDialog
v-model="confirm"
max-width="900"
>
<RuiCard>
<template #header>
{{ t('account.delete_account.title') }}
</template>

<RuiTextField
v-model="usernameConfirmation"
color="primary"
variant="outlined"
:label="t('auth.common.username')"
/>
<div class="whitespace-break-spaces mb-4">
<i18n-t
keypath="account.delete_account.confirmation.description"
scope="global"
>
<template #username>
<strong>{{ username }}</strong>
</template>
</i18n-t>
</div>

<template #actions>
<RuiButton
variant="text"
<RuiTextField
v-model="usernameConfirmation"
color="primary"
@click="confirm = false"
>
{{ t('actions.cancel') }}
</RuiButton>
<RuiButton
color="error"
@click="deleteAccount()"
>
{{ t('actions.confirm') }}
</RuiButton>
</template>
variant="outlined"
:label="t('auth.common.username')"
/>

<div class="flex justify-end gap-4 pt-4">
<RuiButton
variant="text"
color="primary"
@click="confirm = false"
>
{{ t('actions.cancel') }}
</RuiButton>
<RuiButton
:disabled="usernameConfirmation !== username"
color="error"
@click="deleteAccount()"
>
{{ t('actions.confirm') }}
</RuiButton>
</div>
</RuiCard>
</RuiDialog>

<FloatingNotification
Expand Down
25 changes: 8 additions & 17 deletions components/account/login/LoginModal.vue
View file
Original file line number Diff line number Diff line change
@@ -1,26 +1,17 @@
<script setup lang="ts">
defineProps<{ modelValue: boolean }>();
const emit = defineEmits<{
(e: 'update:modelValue', dismiss: boolean): void;
}>();
function dismiss() {
emit('update:modelValue', false);
}
const modelValue = defineModel<boolean>({ required: true });
</script>

<template>
<ModalDialog
:model-value="modelValue"
boxless
@update:model-value="dismiss()"
<RuiDialog
v-model="modelValue"
max-width="430"
>
<div class="bg-white p-8 shadow-5 rounded">
<RuiCard class="p-4">
<LoginForm
modal
@complete="dismiss()"
@complete="modelValue = false"
/>
</div>
</ModalDialog>
</RuiCard>
</RuiDialog>
</template>
77 changes: 39 additions & 38 deletions components/checkout/pay/ChangeCryptoPayment.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,48 +21,49 @@ function change() {
<template>
<RuiDialog
:model-value="modelValue"
size="sm"
max-width="500"
@update:model-value="emit('update:model-value', $event)"
>
<template #title>
{{ t('home.plans.tiers.step_3.change_payment.title') }}
</template>
<div class="text-rui-text-secondary">
{{ t('home.plans.tiers.step_3.change_payment.warning') }}
</div>
<RuiCard>
<template #header>
{{ t('home.plans.tiers.step_3.change_payment.title') }}
</template>
<template #subheader>
{{ t('home.plans.tiers.step_3.change_payment.warning') }}
</template>

<div>
<RuiCheckbox
v-model="confirmed"
class="mt-3"
color="primary"
>
<i18n-t
keypath="home.plans.tiers.step_3.change_payment.switch_agree"
scope="global"
<div>
<RuiCheckbox
v-model="confirmed"
color="primary"
>
<template #separator>
<br />
</template>
</i18n-t>
</RuiCheckbox>
</div>
<i18n-t
keypath="home.plans.tiers.step_3.change_payment.switch_agree"
scope="global"
>
<template #separator>
<br />
</template>
</i18n-t>
</RuiCheckbox>
</div>

<template #actions>
<RuiButton
color="primary"
variant="text"
@click="emit('update:model-value', false)"
>
{{ t('actions.cancel') }}
</RuiButton>
<RuiButton
color="error"
:disabled="!confirmed"
@click="change()"
>
{{ t('home.plans.tiers.step_3.change_payment.title') }}
</RuiButton>
</template>
<div class="flex justify-end gap-4 pt-4">
<RuiButton
color="primary"
variant="text"
@click="emit('update:model-value', false)"
>
{{ t('actions.cancel') }}
</RuiButton>
<RuiButton
color="error"
:disabled="!confirmed"
@click="change()"
>
{{ t('home.plans.tiers.step_3.change_payment.title') }}
</RuiButton>
</div>
</RuiCard>
</RuiDialog>
</template>
Loading

0 comments on commit 1308ccc

Please sign in to comment.