chore: fixes based on comments

rotki · Sep 27, 2023 · fd9c8dd · fd9c8dd
1 parent 1fc9f2a
commit fd9c8dd
Show file tree

Hide file tree

Showing 14 changed files with 80 additions and 44 deletions.
diff --git a/components/account/home/AccountAddress.vue b/components/account/home/AccountAddress.vue
@@ -100,7 +100,7 @@ const { t } = useI18n();
 </script>
 
 <template>
- <div>
+ <div class="pt-2">
  <div class="space-y-5">
  <RuiTextField
  id="address-1"
@@ -185,6 +185,7 @@ const { t } = useI18n();
  type="success"
  closeable
  :visible="done"
+ :timeout="3000"
  @dismiss="done = false"
  >
  {{ t('notifications.changes_saved') }}

diff --git a/components/account/home/AccountDetails.vue b/components/account/home/AccountDetails.vue
@@ -132,6 +132,7 @@ const { t } = useI18n();
  type="success"
  closeable
  :visible="done"
+ :timeout="3000"
  @dismiss="done = false"
  >
  {{ t('notifications.changes_saved') }}

diff --git a/components/account/home/AccountInformation.vue b/components/account/home/AccountInformation.vue
@@ -97,7 +97,7 @@ const { t } = useI18n();
 </script>
 
 <template>
- <div>
+ <div class="pt-2">
  <div class="space-y-5">
  <RuiTextField
  id="first-name"
@@ -173,6 +173,7 @@ const { t } = useI18n();
  type="success"
  closeable
  :visible="done"
+ :timeout="3000"
  @dismiss="done = false"
  >
  {{ t('notifications.changes_saved') }}

diff --git a/components/account/home/ApiKeys.vue b/components/account/home/ApiKeys.vue
@@ -1,15 +1,22 @@
 <script setup lang="ts">
 import { storeToRefs } from 'pinia';
+import { set } from '@vueuse/core';
 import { useMainStore } from '~/store';
 
 const store = useMainStore();
 const { account } = storeToRefs(store);
 
+const loading = ref(false);
+
 const apiKey = computed(() => account.value?.apiKey ?? '');
 const apiSecret = computed(() => account.value?.apiSecret ?? '');
 const hasApiKeys = computed(() => apiKey.value && apiSecret.value);
 
-const regenerateKeys = async () => await store.updateKeys();
+const regenerateKeys = async () => {
+ set(loading, true);
+ await store.updateKeys();
+ set(loading, false);
+};
 
 const { t } = useI18n();
 </script>
@@ -19,7 +26,7 @@ const { t } = useI18n();
  <div class="mb-6 flex justify-between items-center">
  <div class="text-h6">{{ t('account.api_keys.title') }}</div>
  <div>
- <RuiButton color="primary" @click="regenerateKeys()">
+ <RuiButton color="primary" :loading="loading" @click="regenerateKeys()">
  <template #prepend>
  <RuiIcon name="refresh-line" />
  </template>
@@ -29,8 +36,9 @@ const { t } = useI18n();
  </div>
  <div class="grid md:grid-cols-2 gap-4">
  <RuiRevealableTextField
- id="username"
+ id="api-key"
  :model-value="apiKey"
+ :disabled="loading"
  variant="outlined"
  :label="t('account.api_keys.api_key')"
  readonly
@@ -44,8 +52,9 @@ const { t } = useI18n();
  </RuiRevealableTextField>
 
  <RuiRevealableTextField
- id="username"
+ id="api-secret"
  :model-value="apiSecret"
+ :disabled="loading"
  variant="outlined"
  :label="t('account.api_keys.api_secret')"
  readonly

diff --git a/components/account/home/CancelSubscription.vue b/components/account/home/CancelSubscription.vue
@@ -109,6 +109,7 @@ const { t } = useI18n();
  <FloatingNotification
  closeable
  :visible="!!cancellationError"
+ :timeout="3000"
  @close="cancellationError = ''"
  >
  <template #title>

diff --git a/components/account/home/ChangePassword.vue b/components/account/home/ChangePassword.vue
@@ -156,6 +156,7 @@ const { t } = useI18n();
  type="success"
  closeable
  :visible="success"
+ :timeout="3000"
  @dismiss="success = false"
  >
  {{ t('account.change_password.message.success') }}

diff --git a/components/account/home/DangerZone.vue b/components/account/home/DangerZone.vue
@@ -111,6 +111,7 @@ const { t } = useI18n();
  <FloatingNotification
  closeable
  :visible="!!error"
+ :timeout="3000"
  @dismiss="dismissNotification()"
  >
  <template #title>

diff --git a/components/account/home/FloatingNotification.vue b/components/account/home/FloatingNotification.vue
@@ -1,15 +1,18 @@
-<script setup lang="ts">
+<script lang="ts" setup>
+import { get } from '@vueuse/core';
 import { type ContextColorsType } from '@rotki/ui-library/dist/consts/colors';
 
-withDefaults(
+const props = withDefaults(
  defineProps<{
  visible: boolean;
  closeable?: boolean;
+ timeout?: number;
  type?: ContextColorsType;
  }>(),
  {
  closeable: false,
  type: 'error',
+ timeout: undefined,
  },
 );
 
@@ -18,6 +21,25 @@ const emit = defineEmits<{
 }>();
 
 const slots = useSlots();
+
+const { timeout, visible } = toRefs(props);
+
+const { stop, start, isPending } = useTimeoutFn(
+ () => emit('dismiss'),
+ () => get(timeout) ?? 0,
+);
+
+const dismiss = () => {
+ emit('dismiss');
+ get(isPending) && stop();
+};
+
+watch(visible, (show) => {
+ if (isDefined(get(timeout)) && show) {
+ get(isPending) && stop();
+ start();
+ }
+});
 </script>
 
 <template>
@@ -26,7 +48,7 @@ const slots = useSlots();
  v-if="visible"
  class="fixed top-0 md:top-28 z-20 w-full md:bottom-auto right-0 md:right-2 md:w-[520px]"
  >
- <RuiAlert :type="type" :closeable="closeable" @close="emit('dismiss')">
+ <RuiAlert :closeable="closeable" :type="type" @close="dismiss()">
  <template v-if="slots.title" #title>
  <slot name="title" />
  </template>

diff --git a/components/account/home/PaymentsTable.vue b/components/account/home/PaymentsTable.vue
@@ -70,7 +70,9 @@ const payments = computed(() => {
  row-attr="identifier"
  >
  <template #item.status>
- <RuiChip size="sm"> {{ t('account.payments.paid') }}</RuiChip>
+ <RuiChip size="sm" color="success">
+ {{ t('account.payments.paid') }}
+ </RuiChip>
  </template>
 
  <template #item.actions="{ row }">

diff --git a/components/account/home/PremiumPlaceholder.vue b/components/account/home/PremiumPlaceholder.vue
@@ -3,37 +3,32 @@ const { t } = useI18n();
 </script>
 
 <template>
- <div>
- <RuiCard>
- <div class="flex items-center space-x-4">
- <div
- class="rounded-full w-10 h-10 flex items-center justify-center bg-rui-primary/[0.04]"
- >
- <RuiLogo class="w-6 h-6" />
+ <RuiCard>
+ <div class="flex items-center space-x-4">
+ <div
+ class="rounded-full w-10 h-10 flex items-center justify-center bg-rui-primary/[0.04]"
+ >
+ <RuiLogo class="w-6 h-6" />
+ </div>
+ <div>
+ <div class="text-body-1">
+ {{ t('account.no_premium.title') }}
  </div>
- <div>
- <div class="text-body-1">
- {{ t('account.no_premium.title') }}
- </div>
- <div class="text-rui-text-secondary">
- <i18n-t
- keypath="account.no_premium.no_premium_found"
- scope="global"
- >
- <template #plan>
- <ButtonLink
- inline
- color="primary"
- to="/checkout/plan"
- class="underline"
- >
- {{ t('account.no_premium.plan') }}
- </ButtonLink>
- </template>
- </i18n-t>
- </div>
+ <div class="text-rui-text-secondary">
+ <i18n-t keypath="account.no_premium.no_premium_found" scope="global">
+ <template #plan>
+ <ButtonLink
+ inline
+ color="primary"
+ to="/checkout/plan"
+ class="underline"
+ >
+ {{ t('account.no_premium.plan') }}
+ </ButtonLink>
+ </template>
+ </i18n-t>
  </div>
  </div>
- </RuiCard>
- </div>
+ </div>
+ </RuiCard>
 </template>
diff --git a/components/account/home/SubscriptionTable.vue b/components/account/home/SubscriptionTable.vue
@@ -131,7 +131,7 @@ const displayActions = (sub: Subscription) =>
 const getChipStatusColor = (status: string): ContextColorsType | undefined => {
  const map: Record<string, ContextColorsType> = {
  Active: 'success',
- Canceled: 'error',
+ Cancelled: 'error',
  Pending: 'warning',
  'Past Due': 'warning',
  };

diff --git a/components/account/signup/SignupForm.vue b/components/account/signup/SignupForm.vue
@@ -109,7 +109,7 @@ const back = () => {
  set(step, Math.max(get(step) - 1, 1));
 };
 const next = () => {
- set(step, Math.min(get(step) + 1, 4));
+ set(step, Math.min(get(step) + 1, steps.length));
 };
 
 const haveIntersectionKeys = (obj1: object, obj2: object) => {

diff --git a/components/checkout/common/PaymentFrame.vue b/components/checkout/common/PaymentFrame.vue
@@ -84,7 +84,9 @@ const css = useCssModule();
  :title="text.title"
  >
  <div :class="css['action-wrapper']">
- <NuxtLink :class="css.action" to="/home"> Manage Premium </NuxtLink>
+ <NuxtLink :class="css.action" to="/home/subscription">
+ Manage Premium
+ </NuxtLink>
  </div>
  </SuccessDisplay>
  </div>

diff --git a/layouts/account.vue b/layouts/account.vue
@@ -99,7 +99,7 @@ const tabModelValue = ref();
  </RuiTabs>
  </div>
 
- <div class="flex-1 overflow-x-auto pt-2">
+ <div class="flex-1 overflow-x-auto">
  <slot />
  </div>
  </div>