initial
This commit is contained in:
Nadar
62
apps/client/pages/settings/index.vue
Normal file
62
apps/client/pages/settings/index.vue
Normal file
@@ -0,0 +1,62 @@
|
||||
<template>
|
||||
<!-- <UiSelect id="locale" label="" :model-value="currentLocale" :options="localesOption" /> -->
|
||||
<!-- <UiSelect id="timezone" v-model="currentTimeZone" label="" class="w-50" searchable :options="['(GMT+03.00) Москва, Россия']" /> -->
|
||||
<PageBlock title="Time and language">
|
||||
<SettingsProperty icon="language" title="Language">
|
||||
<UiDropdown placement="bottom">
|
||||
<UiButton
|
||||
right-icon="chevron-down"
|
||||
type="outlined"
|
||||
size="large"
|
||||
color="secondary"
|
||||
style="text-transform: capitalize"
|
||||
>
|
||||
{{ currentLocale }}
|
||||
</UiButton>
|
||||
|
||||
<template #dropdown>
|
||||
<UiDropdownItem
|
||||
v-for="locale in locales"
|
||||
:key="locale.code"
|
||||
:active="currentLocale === locale.code"
|
||||
@click="setLocale(locale.code)"
|
||||
>
|
||||
{{ locale.name }}
|
||||
</UiDropdownItem>
|
||||
</template>
|
||||
</UiDropdown>
|
||||
</SettingsProperty>
|
||||
<SettingsProperty icon="clock" title="Time zone" text="It is used to process transactions, track balances, and create reports.">
|
||||
<UiDropdown placement="bottom">
|
||||
<UiButton
|
||||
right-icon="chevron-down"
|
||||
type="outlined"
|
||||
size="large"
|
||||
color="secondary"
|
||||
style="text-transform: capitalize"
|
||||
>
|
||||
{{ currentTimeZone }}
|
||||
</UiButton>
|
||||
|
||||
<template #dropdown>
|
||||
<UiDropdownItem
|
||||
v-for="timezone in ['(GMT+03.00) Москва, Россия']"
|
||||
:key="timezone"
|
||||
:active="currentLocale === timezone"
|
||||
>
|
||||
{{ timezone }}
|
||||
</UiDropdownItem>
|
||||
</template>
|
||||
</UiDropdown>
|
||||
</SettingsProperty>
|
||||
</PageBlock>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const { locale: currentLocale, locales, setLocale } = useI18n()
|
||||
|
||||
const currentTimeZone = '(GMT+03.00) Москва, Россия'
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
</style>
|
||||
130
apps/client/pages/settings/limits.vue
Normal file
130
apps/client/pages/settings/limits.vue
Normal file
@@ -0,0 +1,130 @@
|
||||
<template>
|
||||
<PageBlock
|
||||
class="settings-limits"
|
||||
title="Current tariff"
|
||||
>
|
||||
<template #badge>
|
||||
<UiBadge type="marketing">
|
||||
BASIC
|
||||
</UiBadge>
|
||||
</template>
|
||||
|
||||
<template #actions>
|
||||
<UiButton>Increase the limit</UiButton>
|
||||
</template>
|
||||
|
||||
<SettingsTariffCard title="Withdrawal of funds">
|
||||
<template #icon>
|
||||
<UiIconArrowSend class="text-clr-cyan-600" />
|
||||
</template>
|
||||
|
||||
<template #subtitle>
|
||||
<div class="settings-limits__subtitle">
|
||||
<span>Minimum withdrawal amount <strong>5 usdt</strong></span>
|
||||
|
||||
<div class="settings-limits-separator" />
|
||||
|
||||
<span>Withdrawal fee <strong>2.5 usdt + 1%</strong></span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template #content>
|
||||
<div class="settings-limits-content">
|
||||
<div class="settings-limits-content__header">
|
||||
<strong>The limit</strong> <span class="text-clr-grey-500"> for today</span>
|
||||
<UiBadge type="marketing" class="ml-8">
|
||||
It will be updated at 16:00
|
||||
</UiBadge>
|
||||
</div>
|
||||
|
||||
<SettingsLimitProgress currency="USDT" :max-amount="880" :amount="120" />
|
||||
</div>
|
||||
|
||||
<div class="settings-limits-separator" />
|
||||
|
||||
<div class="settings-limits-content">
|
||||
<div class="settings-limits-content__header">
|
||||
<span class="text-clr-grey-500"> Monthly</span> <strong>limit</strong>
|
||||
<UiBadge type="marketing" class="ml-8">
|
||||
Updated on 03.01.2023
|
||||
</UiBadge>
|
||||
</div>
|
||||
|
||||
<SettingsLimitProgress currency="USDT" :max-amount="10000" :amount="120" />
|
||||
</div>
|
||||
</template>
|
||||
</SettingsTariffCard>
|
||||
|
||||
<SettingsTariffCard title="Creating invoices">
|
||||
<template #icon>
|
||||
<UiIconArrowReceive class="text-clr-green-500" />
|
||||
</template>
|
||||
|
||||
<template #subtitle>
|
||||
<div class="settings-limits__subtitle">
|
||||
<span>The minimum amount in the invoice is <strong>5 usdt</strong></span>
|
||||
|
||||
<div class="settings-limits-separator" />
|
||||
|
||||
<span>The commission for creating an invoice is <strong> 0.5 usdt</strong></span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template #content>
|
||||
<div class="settings-limits-content">
|
||||
<div class="settings-limits-content__header">
|
||||
<strong>The limit</strong> <span class="text-clr-grey-500"> for today</span>
|
||||
<UiBadge type="marketing" class="ml-8">
|
||||
It will be updated at 16:00
|
||||
</UiBadge>
|
||||
</div>
|
||||
|
||||
<SettingsLimitProgress currency="invoices" :max-amount="200" :amount="200" />
|
||||
</div>
|
||||
|
||||
<div class="settings-limits-separator" />
|
||||
|
||||
<div class="settings-limits-content">
|
||||
<div class="settings-limits-content__header">
|
||||
<span class="text-clr-grey-500"> Monthly</span> <strong>limit</strong>
|
||||
<UiBadge type="marketing" class="ml-8">
|
||||
Updated on 03.01.2023
|
||||
</UiBadge>
|
||||
</div>
|
||||
|
||||
<SettingsLimitProgress currency="invoices" :max-amount="1000" :amount="751" />
|
||||
</div>
|
||||
</template>
|
||||
</SettingsTariffCard>
|
||||
</PageBlock>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.settings-limits{
|
||||
--page-block-gap: 24px;
|
||||
--page-block-padding: 24px;
|
||||
|
||||
&__subtitle{
|
||||
display: flex;
|
||||
@include txt-r;
|
||||
color: $clr-grey-600;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.settings-limits-separator{
|
||||
width: 1px;
|
||||
margin-inline: 16px;
|
||||
background-color: $clr-grey-300;
|
||||
}
|
||||
.settings-limits-content {
|
||||
width: 544px;
|
||||
&__header{
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
22
apps/client/pages/settings/notifications.vue
Normal file
22
apps/client/pages/settings/notifications.vue
Normal file
@@ -0,0 +1,22 @@
|
||||
<template>
|
||||
<PageBlock
|
||||
class="settings-notifications"
|
||||
title="Notification settings"
|
||||
sub-title="Set how you want to receive notifications"
|
||||
>
|
||||
<SettingsServiceNotificationTable />
|
||||
|
||||
<SettingsFinanceNotificationTable />
|
||||
</PageBlock>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.settings-notifications{
|
||||
--page-block-gap: 24px;
|
||||
--page-block-padding: 24px;
|
||||
}
|
||||
</style>
|
||||
27
apps/client/pages/settings/safety.vue
Normal file
27
apps/client/pages/settings/safety.vue
Normal file
@@ -0,0 +1,27 @@
|
||||
<template>
|
||||
<PageBlock title="Account details" class="mb-24">
|
||||
<SettingsProperty icon="mail" title="Mail" :text="hideEmail(user.email)" />
|
||||
|
||||
<SettingsProperty icon="key" title="Password" text="You will log out automatically after changing your password">
|
||||
<UiButton size="large" type="ghost" color="primary" href="/reset-password/new-authorized">
|
||||
Change
|
||||
</UiButton>
|
||||
</SettingsProperty>
|
||||
</PageBlock>
|
||||
|
||||
<PageBlock title="Two-factor Authentication (2FA)">
|
||||
<SettingsProperty icon="protection" title="2FA authentication" text="Two-factor authentication (2FA) provides more reliable account protection.">
|
||||
<UiButton size="large" type="ghost" color="primary" href="/2fa">
|
||||
Plug
|
||||
</UiButton>
|
||||
</SettingsProperty>
|
||||
</PageBlock>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const { user } = useAuth()
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
|
||||
</style>
|
||||
Reference in New Issue
Block a user