fix(login): fix progress indicator and add polling indicator

Author: dvcol

src/components/views/login/LoginCard.vue

@@ -1,17 +1,17 @@
 <script setup lang="ts">
 import { NButton, NCard, NFlex, NH4 } from 'naive-ui';
 
-import type { ButtonProps } from 'naive-ui';
+import { computed, onMounted, type PropType, ref, toRefs, watch } from 'vue';
 
-import type { PropType } from 'vue';
+import type { ButtonProps } from 'naive-ui';
 
 import Logo from '~/assets/logo.svg';
 
 import { useI18n } from '~/utils/i18n.utils';
 
 const i18n = useI18n('login');
 
-defineProps({
+const props = defineProps({
   logo: {
     type: String,
     required: false,
@@ -27,6 +27,7 @@ defineProps({
   message: {
     type: String,
     required: false,
+    default: '',
   },
   buttonDisabled: {
     type: Boolean,
@@ -40,11 +41,59 @@ defineProps({
     type: Object as PropType<ButtonProps & Pick<HTMLAnchorElement, 'href'>>,
     required: false,
   },
+  minWidth: {
+    type: String,
+    required: false,
+  },
+  progress: {
+    type: Number,
+    required: false,
+  },
+  interval: {
+    type: Number,
+    required: false,
+    default: 0,
+  },
 });
 
 const emits = defineEmits<{
   (name: 'onSignIn', e: MouseEvent): void;
 }>();
+
+const { message, interval, progress } = toRefs(props);
+
+const debounceMessage = ref<string>(message.value);
+const _message = computed(() => debounceMessage.value || i18n('sub_title'));
+
+const changed = ref(false);
+const timeout = ref<ReturnType<typeof setTimeout>>();
+
+const reverse = ref(false);
+const _interval = ref<ReturnType<typeof setInterval>>();
+
+const _progress = computed(() => {
+  if (interval.value) return reverse.value ? 0 : 100;
+  return progress?.value;
+});
+
+onMounted(() => {
+  watch(message, (_new, _old) => {
+    changed.value = _old !== _new;
+    if (!changed.value) return;
+    if (timeout.value) clearTimeout(timeout.value);
+    timeout.value = setTimeout(() => {
+      changed.value = false;
+      debounceMessage.value = _new;
+    }, 250);
+  });
+  watch(interval, _new => {
+    if (_interval.value) clearInterval(_interval.value);
+    if (!_new) return;
+    _interval.value = setInterval(() => {
+      reverse.value = !reverse.value;
+    }, _new);
+  });
+});
 </script>
 
 <template>
@@ -56,7 +105,20 @@ const emits = defineEmits<{
 
     <NFlex class="content" vertical justify="space-evenly">
       <slot name="message">
-        <NH4 class="title" prefix="bar">{{ message ?? i18n('sub_title') }}</NH4>
+        <NH4
+          class="title"
+          :class="{ progress, interval }"
+          prefix="bar"
+          :style="{
+            minWidth: minWidth ?? `${ _message?.length }ch`,
+            '--progress': `${ _progress }%`,
+            '--interval': `${interval}ms`,
+          }"
+        >
+          <span class="title-content" :class="{ changed }">
+            {{ _message }}
+          </span>
+        </NH4>
       </slot>
 
       <slot name="main" />
@@ -108,12 +170,44 @@ const emits = defineEmits<{
     height: 100%;
 
     .title {
+      --progress-color: rgb(99 226 184 / 10%);
+      --color: rgb(99 226 184 / 5%);
+
+      min-width: 0;
       margin: 0;
       padding: 1rem;
       white-space: pre-line;
-      background: rgb(99 226 184 / 5%);
-      transition: background 0.5s;
-      will-change: background;
+      background: var(--color);
+      transition:
+        min-width 0.5s var(--n-bezier),
+        background 0.5s var(--n-bezier),
+        --progress 0.5s var(--n-bezier);
+
+      &.progress {
+        @include mixin.progress-background($rail: var(--color));
+      }
+
+      &.interval {
+        @include mixin.progress-background(
+          $rail: var(--color),
+          $color: var(--progress-color)
+        );
+
+        transition:
+          min-width 0.5s var(--n-bezier),
+          background var(--interval) linear,
+          --progress var(--interval) linear;
+      }
+
+      &-content {
+        display: flex;
+        opacity: 1;
+        transition: opacity 0.25s var(--n-bezier);
+
+        &.changed {
+          opacity: 0.25;
+        }
+      }
     }
 
     .button {
@@ -125,8 +219,9 @@ const emits = defineEmits<{
   }
 
   &:hover {
-    .title {
-      background: rgb(99 226 184 / 9%);
+    .title:not(&.progress) {
+      --color: rgb(99 226 184 / 9%);
+      --progress-color: rgb(99 226 184 / 14%);
     }
   }
 }

src/components/views/login/LoginComponent.vue

@@ -93,7 +93,15 @@ const getCodes = async () => {
 const poll = ref<CancellablePolling>();
 const progressInterval = ref<ReturnType<typeof setInterval>>();
 const progress = ref(0);
-const progressRounded = computed(() => Math.round(progress.value * 10) / 20 || 0.1);
+const progressRounded = computed(() => {
+  if (!auth.value?.expires_in) return 0;
+  return Math.round((progress.value / auth.value.expires_in) * 100) || 1;
+});
+
+const interval = computed(() => {
+  if (!useCode.value) return 0;
+  return (auth.value?.interval ?? 0) * 1000;
+});
 
 const onCancel = () => {
   if (poll.value) poll.value.cancel();
@@ -106,12 +114,9 @@ const polling = async () => {
   if (poll.value) onCancel();
   try {
     poll.value = TraktService.device.poll(auth.value);
-    progressInterval.value = setInterval(
-      () => {
-        progress.value += 0.1;
-      },
-      (auth.value.expires_in / 100) * 100,
-    );
+    progressInterval.value = setInterval(() => {
+      progress.value += 1;
+    }, 1000);
     const traktAuth = await poll.value;
     await TraktService.device.login(traktAuth);
   } catch (error) {
@@ -154,7 +159,12 @@ onDeactivated(() => onCancel());
 
     <Transition name="scale" mode="in-out">
       <div v-if="show">
-        <LoginCard @on-sign-in="onClick">
+        <LoginCard
+          :message="useCode ? i18n('polling_title') : undefined"
+          :interval="interval"
+          min-width="16.25rem"
+          @on-sign-in="onClick"
+        >
           <NFlex class="checkboxes" vertical>
             <NCheckbox v-model:checked="signUp" :disabled="useCode">
               {{ i18n('checkbox__sign_up_for') }}

src/i18n/en/login/login.json

@@ -3,6 +3,10 @@
     "message": "Trakt",
     "description": "Login title"
   },
+  "login__polling_title": {
+    "message": "Polling for user activation code ...",
+    "description": "Login polling title"
+  },
   "login__sub_title": {
     "message": "Please sign in to access your data.",
     "description": "Login sub title"