fix: Add Safari compatibility for requestIdleCallback (#9435)
This commit is contained in:
@@ -1,21 +1,21 @@
|
|||||||
<template>
|
<template>
|
||||||
<main
|
<main
|
||||||
class="flex flex-col bg-woot-25 min-h-screen w-full py-20 sm:px-6 lg:px-8 dark:bg-slate-900"
|
class="flex flex-col w-full min-h-screen py-20 bg-woot-25 sm:px-6 lg:px-8 dark:bg-slate-900"
|
||||||
>
|
>
|
||||||
<section class="max-w-5xl mx-auto">
|
<section class="max-w-5xl mx-auto">
|
||||||
<img
|
<img
|
||||||
:src="globalConfig.logo"
|
:src="globalConfig.logo"
|
||||||
:alt="globalConfig.installationName"
|
:alt="globalConfig.installationName"
|
||||||
class="mx-auto h-8 w-auto block dark:hidden"
|
class="block w-auto h-8 mx-auto dark:hidden"
|
||||||
/>
|
/>
|
||||||
<img
|
<img
|
||||||
v-if="globalConfig.logoDark"
|
v-if="globalConfig.logoDark"
|
||||||
:src="globalConfig.logoDark"
|
:src="globalConfig.logoDark"
|
||||||
:alt="globalConfig.installationName"
|
:alt="globalConfig.installationName"
|
||||||
class="mx-auto h-8 w-auto hidden dark:block"
|
class="hidden w-auto h-8 mx-auto dark:block"
|
||||||
/>
|
/>
|
||||||
<h2
|
<h2
|
||||||
class="mt-6 text-center text-3xl font-medium text-slate-900 dark:text-woot-50"
|
class="mt-6 text-3xl font-medium text-center text-slate-900 dark:text-woot-50"
|
||||||
>
|
>
|
||||||
{{
|
{{
|
||||||
useInstallationName($t('LOGIN.TITLE'), globalConfig.installationName)
|
useInstallationName($t('LOGIN.TITLE'), globalConfig.installationName)
|
||||||
@@ -23,10 +23,10 @@
|
|||||||
</h2>
|
</h2>
|
||||||
<p
|
<p
|
||||||
v-if="showSignupLink"
|
v-if="showSignupLink"
|
||||||
class="mt-3 text-center text-sm text-slate-600 dark:text-slate-400"
|
class="mt-3 text-sm text-center text-slate-600 dark:text-slate-400"
|
||||||
>
|
>
|
||||||
{{ $t('COMMON.OR') }}
|
{{ $t('COMMON.OR') }}
|
||||||
<router-link to="auth/signup" class="text-link lowercase">
|
<router-link to="auth/signup" class="lowercase text-link">
|
||||||
{{ $t('LOGIN.CREATE_NEW_ACCOUNT') }}
|
{{ $t('LOGIN.CREATE_NEW_ACCOUNT') }}
|
||||||
</router-link>
|
</router-link>
|
||||||
</p>
|
</p>
|
||||||
@@ -68,7 +68,7 @@
|
|||||||
<p v-if="!globalConfig.disableUserProfileUpdate">
|
<p v-if="!globalConfig.disableUserProfileUpdate">
|
||||||
<router-link
|
<router-link
|
||||||
to="auth/reset/password"
|
to="auth/reset/password"
|
||||||
class="text-link text-sm"
|
class="text-sm text-link"
|
||||||
tabindex="4"
|
tabindex="4"
|
||||||
>
|
>
|
||||||
{{ $t('LOGIN.FORGOT_PASSWORD') }}
|
{{ $t('LOGIN.FORGOT_PASSWORD') }}
|
||||||
@@ -165,7 +165,7 @@ export default {
|
|||||||
const message = ERROR_MESSAGES[this.authError] ?? 'LOGIN.API.UNAUTH';
|
const message = ERROR_MESSAGES[this.authError] ?? 'LOGIN.API.UNAUTH';
|
||||||
this.showAlert(this.$t(message));
|
this.showAlert(this.$t(message));
|
||||||
// wait for idle state
|
// wait for idle state
|
||||||
window.requestIdleCallback(() => {
|
this.requestIdleCallbackPolyfill(() => {
|
||||||
// Remove the error query param from the url
|
// Remove the error query param from the url
|
||||||
const { query } = this.$route;
|
const { query } = this.$route;
|
||||||
this.$router.replace({ query: { ...query, error: undefined } });
|
this.$router.replace({ query: { ...query, error: undefined } });
|
||||||
@@ -173,6 +173,19 @@ export default {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
// TODO: Remove this when Safari gets wider support
|
||||||
|
// Ref: https://caniuse.com/requestidlecallback
|
||||||
|
//
|
||||||
|
requestIdleCallbackPolyfill(callback) {
|
||||||
|
if (window.requestIdleCallback) {
|
||||||
|
window.requestIdleCallback(callback);
|
||||||
|
} else {
|
||||||
|
// Fallback for safari
|
||||||
|
// Using a delay of 0 allows the callback to be executed asynchronously
|
||||||
|
// in the next available event loop iteration, similar to requestIdleCallback
|
||||||
|
setTimeout(callback, 0);
|
||||||
|
}
|
||||||
|
},
|
||||||
showAlert(message) {
|
showAlert(message) {
|
||||||
// Reset loading, current selected agent
|
// Reset loading, current selected agent
|
||||||
this.loginApi.showLoading = false;
|
this.loginApi.showLoading = false;
|
||||||
|
|||||||
Reference in New Issue
Block a user