web: use view transition API
Signed-off-by: Jens Langhammer <jens@goauthentik.io>
This commit is contained in:
parent
b7532740ef
commit
695ff384f6
|
@ -71,6 +71,7 @@
|
|||
"@trivago/prettier-plugin-sort-imports": "^4.3.0",
|
||||
"@types/chart.js": "^2.9.41",
|
||||
"@types/codemirror": "5.60.15",
|
||||
"@types/dom-view-transitions": "^1.0.4",
|
||||
"@types/grecaptcha": "^3.0.7",
|
||||
"@typescript-eslint/eslint-plugin": "^6.15.0",
|
||||
"@typescript-eslint/parser": "^6.15.0",
|
||||
|
@ -7287,6 +7288,12 @@
|
|||
"integrity": "sha512-w5jZ0ee+HaPOaX25X2/2oGR/7rgAQSYII7X7pp0m9KgBfMP7uKfMfTvcpl5Dj+eDBbpxKGiqE+flqDr6XTd2RA==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/@types/dom-view-transitions": {
|
||||
"version": "1.0.4",
|
||||
"resolved": "https://registry.npmjs.org/@types/dom-view-transitions/-/dom-view-transitions-1.0.4.tgz",
|
||||
"integrity": "sha512-oDuagM6G+xPLrLU4KeCKlr1oalMF5mJqV5pDPMDVIEaa8AkUW00i6u+5P02XCjdEEUQJC9dpnxqSLsZeAciSLQ==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/@types/ejs": {
|
||||
"version": "3.1.5",
|
||||
"resolved": "https://registry.npmjs.org/@types/ejs/-/ejs-3.1.5.tgz",
|
||||
|
|
|
@ -96,6 +96,7 @@
|
|||
"@trivago/prettier-plugin-sort-imports": "^4.3.0",
|
||||
"@types/chart.js": "^2.9.41",
|
||||
"@types/codemirror": "5.60.15",
|
||||
"@types/dom-view-transitions": "^1.0.4",
|
||||
"@types/grecaptcha": "^3.0.7",
|
||||
"@typescript-eslint/eslint-plugin": "^6.15.0",
|
||||
"@typescript-eslint/parser": "^6.15.0",
|
||||
|
|
|
@ -148,3 +148,15 @@ html > form > input {
|
|||
margin-top: 13rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* View transition */
|
||||
::view-transition-image-pair(ak-flow-container) {
|
||||
isolation: auto;
|
||||
}
|
||||
|
||||
::view-transition-old(ak-flow-container),
|
||||
::view-transition-new(ak-flow-container) {
|
||||
animation: none;
|
||||
mix-blend-mode: normal;
|
||||
display: block;
|
||||
}
|
||||
|
|
|
@ -58,6 +58,7 @@ export class RouterOutlet extends AKElement {
|
|||
css`
|
||||
:host {
|
||||
background-color: transparent !important;
|
||||
view-transition-name: ak-router-outlet;
|
||||
}
|
||||
*:first-child {
|
||||
flex-direction: column;
|
||||
|
@ -111,7 +112,9 @@ export class RouterOutlet extends AKElement {
|
|||
matchedRoute.arguments = route.url.exec(activeUrl)?.groups || {};
|
||||
matchedRoute.fullUrl = activeUrl;
|
||||
}
|
||||
this.current = matchedRoute;
|
||||
document.startViewTransition(() => {
|
||||
this.current = matchedRoute!;
|
||||
});
|
||||
}
|
||||
|
||||
render(): TemplateResult | undefined {
|
||||
|
|
|
@ -105,12 +105,13 @@ export class FlowExecutor extends Interface implements StageHost {
|
|||
--pf-c-background-image--BackgroundImage--sm-2x: var(--ak-flow-background);
|
||||
--pf-c-background-image--BackgroundImage--lg: var(--ak-flow-background);
|
||||
}
|
||||
.ak-hidden {
|
||||
display: none;
|
||||
}
|
||||
:host {
|
||||
position: relative;
|
||||
}
|
||||
.pf-c-login__main {
|
||||
view-transition-name: ak-flow-container;
|
||||
}
|
||||
|
||||
.pf-c-drawer__content {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
@ -189,6 +190,15 @@ export class FlowExecutor extends Interface implements StageHost {
|
|||
return globalAK()?.tenant.uiTheme || UiThemeEnum.Automatic;
|
||||
}
|
||||
|
||||
transitionChallenge(data: ChallengeTypes): void {
|
||||
document.startViewTransition(() => {
|
||||
this.challenge = data;
|
||||
if (this.challenge.flowInfo) {
|
||||
this.flowInfo = this.challenge.flowInfo;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
async submit(payload?: FlowChallengeResponseRequest): Promise<boolean> {
|
||||
if (!payload) return Promise.reject();
|
||||
if (!this.challenge) return Promise.reject();
|
||||
|
@ -209,7 +219,7 @@ export class FlowExecutor extends Interface implements StageHost {
|
|||
}),
|
||||
);
|
||||
}
|
||||
this.challenge = challenge;
|
||||
this.transitionChallenge(challenge);
|
||||
if (this.challenge.flowInfo) {
|
||||
this.flowInfo = this.challenge.flowInfo;
|
||||
}
|
||||
|
@ -241,10 +251,7 @@ export class FlowExecutor extends Interface implements StageHost {
|
|||
}),
|
||||
);
|
||||
}
|
||||
this.challenge = challenge;
|
||||
if (this.challenge.flowInfo) {
|
||||
this.flowInfo = this.challenge.flowInfo;
|
||||
}
|
||||
this.transitionChallenge(challenge);
|
||||
} catch (exc: unknown) {
|
||||
// Catch JSON or Update errors
|
||||
this.errorMessage(exc as Error | ResponseError);
|
||||
|
|
|
@ -5,3 +5,10 @@ import "core-js/actual";
|
|||
|
||||
import "@formatjs/intl-listformat/polyfill";
|
||||
import "@formatjs/intl-listformat/locale-data/en";
|
||||
|
||||
if (!("startViewTransition" in document)) {
|
||||
// @ts-ignore
|
||||
document.startViewTransition = (cb) => {
|
||||
cb();
|
||||
};
|
||||
}
|
||||
|
|
Reference in New Issue