Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add PreLoadImage class to substitute IdentityBackground #2434

Merged
merged 3 commits into from
Apr 17, 2024
Merged

Add PreLoadImage class to substitute IdentityBackground #2434

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
38f7175
Add PreLoadImage class to substitute IdentityBackground
lmuntaner Apr 16, 2024
20465bc
Remove backgrounds helper
lmuntaner Apr 16, 2024
07c7905
Change PreLoadImage interface
lmuntaner Apr 16, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
0 src/frontend/src/components/identityCard.png → ...end/src/assets/identityCardBackground.png
View file
Open in desktop
File renamed without changes
30 changes: 3 additions & 27 deletions src/frontend/src/components/identityCard.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,15 @@
import { PreLoadImage } from "$src/utils/preLoadImage";
import { html, TemplateResult } from "lit-html";
import identityCardImage from "./identityCard.png";

export const identityCard = ({
userNumber,
identityBackground,
}: {
userNumber: bigint;
identityBackground: IdentityBackground;
identityBackground: PreLoadImage;
}): TemplateResult => {
return html` <div class="c-input--id__wrap">
<img src=${identityBackground.img.src} class="c-input--id__art" />
<img src=${identityBackground.getSrc()} class="c-input--id__art" />
<h2 class="c-input--id__caption">Internet Identity:</h2>
<output
class="c-input--id__value"
Expand All @@ -21,27 +21,3 @@ export const identityCard = ({
>
</div>`;
};

// A wrapper around HTMLImageElement, to ensure this exact image is loaded
// (and no other image is passed as an argument to this page by mistake)
export class IdentityBackground {
// The image element created in order for the browser to load the image. Only the src attribute is used.
public img: HTMLImageElement;

// Only the src attribute is used so the same Element can be shared across Templates
public static singleton?: IdentityBackground;
public static getSingleton(image?: string): IdentityBackground {
IdentityBackground.singleton ??= new IdentityBackground(image);
return IdentityBackground.singleton;
}

constructor(image?: string) {
const img = new Image();
img.src = image ?? identityCardImage; // Setting the src kicks off the fetching
this.img = img;
}
}

// Start loading the card background; should ideally be called a couple seconds
// before rendering the template
export const loadIdentityBackground = IdentityBackground.getSingleton;
20 changes: 9 additions & 11 deletions src/frontend/src/flows/manage/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,16 +2,13 @@ import {
DeviceData,
IdentityAnchorInfo,
} from "$generated/internet_identity_types";
import identityCardBackground from "$src/assets/identityCardBackground.png";
import {
AuthnTemplates,
authenticateBox,
} from "$src/components/authenticateBox";
import { displayError } from "$src/components/displayError";
import {
IdentityBackground,
identityCard,
loadIdentityBackground,
} from "$src/components/identityCard";
import { identityCard } from "$src/components/identityCard";
import { withLoader } from "$src/components/loader";
import { logoutSection } from "$src/components/logout";
import { mainWindow } from "$src/components/mainWindow";
Expand All @@ -31,6 +28,7 @@ import { setupKey, setupPhrase } from "$src/flows/recovery/setupRecovery";
import { I18n } from "$src/i18n";
import { AuthenticatedConnection, Connection } from "$src/utils/iiConnection";
import { TemplateElement, renderPage } from "$src/utils/lit-html";
import { PreLoadImage } from "$src/utils/preLoadImage";
import {
isProtected,
isRecoveryDevice,
Expand Down Expand Up @@ -104,7 +102,7 @@ export const authFlowManage = async (connection: Connection) => {
const i18n = new I18n();
const dapps = shuffleArray(getDapps());

const identityBackground = loadIdentityBackground();
const identityBackground = new PreLoadImage(identityCardBackground);
// Go through the login flow, potentially creating an anchor.
const {
userNumber,
Expand Down Expand Up @@ -164,7 +162,7 @@ const displayManageTemplate = ({
addRecoveryKey: () => void;
dapps: KnownDapp[];
exploreDapps: () => void;
identityBackground: IdentityBackground;
identityBackground: PreLoadImage;
tempKeysWarning?: TempKeyWarningAction;
}): TemplateResult => {
// Nudge the user to add a passkey if there is none
Expand Down Expand Up @@ -211,7 +209,7 @@ const anchorSection = ({
identityBackground,
}: {
userNumber: bigint;
identityBackground: IdentityBackground;
identityBackground: PreLoadImage;
}): TemplateResult => html`
<aside class="l-stack">
<div
Expand All @@ -229,7 +227,7 @@ export const renderManageWarmup = (): OmitParams<
typeof renderManage,
"identityBackground"
> => {
const identityBackground = loadIdentityBackground();
const identityBackground = new PreLoadImage(identityCardBackground);
return async (opts) => {
return await renderManage({ ...opts, identityBackground });
};
Expand All @@ -243,7 +241,7 @@ export const renderManage = async ({
}: {
userNumber: bigint;
connection: AuthenticatedConnection;
identityBackground: IdentityBackground;
identityBackground: PreLoadImage;
}): Promise<never> => {
let connection = origConnection;

Expand Down Expand Up @@ -298,7 +296,7 @@ export const displayManage = (
userNumber: bigint,
connection: AuthenticatedConnection,
devices_: DeviceData[],
identityBackground: IdentityBackground
identityBackground: PreLoadImage
): Promise<void | AuthenticatedConnection> => {
// Fetch the dapps used in the teaser & explorer
// (dapps are suffled to encourage discovery of new dapps)
Expand Down
14 changes: 6 additions & 8 deletions src/frontend/src/flows/register/finish.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,6 @@
import identityCardBackground from "$src/assets/identityCardBackground.png";
import { checkmarkIcon, copyIcon } from "$src/components/icons";
import {
IdentityBackground,
identityCard,
loadIdentityBackground,
} from "$src/components/identityCard";
import { identityCard } from "$src/components/identityCard";
import { mainWindow } from "$src/components/mainWindow";
import { toast } from "$src/components/toast";
import {
Expand All @@ -12,6 +9,7 @@ import {
renderPage,
withRef,
} from "$src/utils/lit-html";
import { PreLoadImage } from "$src/utils/preLoadImage";
import { OmitParams } from "$src/utils/utils";
import { TemplateResult, html } from "lit-html";
import { Ref, createRef, ref } from "lit-html/directives/ref.js";
Expand All @@ -26,7 +24,7 @@ export const displayUserNumberTemplate = ({
}: {
onContinue: () => void;
userNumber: bigint;
identityBackground: IdentityBackground;
identityBackground: PreLoadImage;
stepper: TemplateResult;
marketingIntroSlot?: TemplateResult;
/* put the page into view */
Expand Down Expand Up @@ -119,7 +117,7 @@ export const displayUserNumberWarmup = (): OmitParams<
typeof displayUserNumber,
"identityBackground"
> => {
const identityBackground = loadIdentityBackground();
const identityBackground = new PreLoadImage(identityCardBackground);
return async (opts) => {
await displayUserNumber({ ...opts, identityBackground });
};
Expand All @@ -132,7 +130,7 @@ export const displayUserNumber = ({
marketingIntroSlot,
}: {
userNumber: bigint;
identityBackground: IdentityBackground;
identityBackground: PreLoadImage;
stepper: TemplateResult;
marketingIntroSlot?: TemplateResult;
}): Promise<void> => {
Expand Down
17 changes: 17 additions & 0 deletions src/frontend/src/utils/preLoadImage.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
// A wrapper around HTMLImageElement, to trigger loading an image before before it's in the DOM.
export class PreLoadImage {
// The image element created in order for the browser to load the image.
private img: HTMLImageElement;

constructor(imageSrc: string) {
const img = new Image();
img.src = imageSrc; // Setting the src kicks off the fetching
this.img = img;
}

// Return the same source as the one passed to the constructor.
// By now, the image has been loaded by the browser.
getSrc(): string {
return this.img.src;
}
}
8 changes: 0 additions & 8 deletions src/showcase/src/backgrounds.ts
View file
Open in desktop

This file was deleted.

5 changes: 4 additions & 1 deletion src/showcase/src/pages/displayManage.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,10 +6,13 @@ import Screen from "../layouts/Screen.astro";
<script>
import { toast } from "$src/components/toast";
import { userNumber } from "../constants";
import { identityBackground } from "../backgrounds";
import { dapps } from "../constants";
import { displayManagePage } from "$src/flows/manage";
import { html } from "lit-html";
import identityCardBackground from "$src/assets/identityCardBackground.png";
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Importing it here we ensure that it doesn't get mixed with the application code and we don't need to cast types.

Ideally, we will move the showcase to its own library with its own package.json and then we will be able to separate import statements better.

import { PreLoadImage } from "$src/utils/preLoadImage";

const identityBackground = new PreLoadImage(identityCardBackground.src);

displayManagePage({
identityBackground,
Expand Down
5 changes: 4 additions & 1 deletion src/showcase/src/pages/displayManageSingle.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,9 +6,12 @@ import Screen from "../layouts/Screen.astro";
<script>
import { toast } from "$src/components/toast";
import { userNumber } from "../constants";
import { identityBackground } from "../backgrounds";
import { dapps } from "../constants";
import { displayManagePage } from "$src/flows/manage";
import identityCardBackground from "$src/assets/identityCardBackground.png";
import { PreLoadImage } from "$src/utils/preLoadImage";

const identityBackground = new PreLoadImage(identityCardBackground.src);

displayManagePage({
identityBackground,
Expand Down
5 changes: 4 additions & 1 deletion src/showcase/src/pages/displayManageTempKey.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,10 +5,13 @@ import Screen from "../layouts/Screen.astro";
<Screen title="Display Manage Temp Key" pageName="displayManageTempKey">
<script>
import { toast } from "$src/components/toast";
import { identityBackground } from "../backgrounds";
import { userNumber } from "../constants";
import { dapps } from "../constants";
import { displayManagePage } from "$src/flows/manage";
import identityCardBackground from "$src/assets/identityCardBackground.png";
import { PreLoadImage } from "$src/utils/preLoadImage";

const identityBackground = new PreLoadImage(identityCardBackground.src);

displayManagePage({
identityBackground,
Expand Down
5 changes: 4 additions & 1 deletion src/showcase/src/pages/displayUserNumber.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,10 +5,13 @@ import Screen from "../layouts/Screen.astro";
<Screen title="Display User Number" pageName="displayUserNumber">
<script>
import { toast } from "$src/components/toast";
import { identityBackground } from "../backgrounds";
import { userNumber } from "../constants";
import { displayUserNumberPage } from "$src/flows/register/finish";
import { registerStepper } from "$src/flows/register/stepper";
import identityCardBackground from "$src/assets/identityCardBackground.png";
import { PreLoadImage } from "$src/utils/preLoadImage";

const identityBackground = new PreLoadImage(identityCardBackground.src);

displayUserNumberPage({
identityBackground,
Expand Down
5 changes: 4 additions & 1 deletion src/showcase/src/pages/displayUserNumberTempKey.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,12 +5,15 @@ import Screen from "../layouts/Screen.astro";
<Screen title="Display User Number Temp Key" pageName="displayUserNumberTempKey">
<script>
import { toast } from "$src/components/toast";
import { identityBackground } from "../backgrounds";
import { userNumber } from "../constants";
import { i18n } from "../i18n";
import { displayUserNumberPage } from "$src/flows/register/finish";
import { registerStepper } from "$src/flows/register/stepper";
import { tempKeyWarningBox } from "$src/flows/manage/tempKeys";
import identityCardBackground from "$src/assets/identityCardBackground.png";
import { PreLoadImage } from "$src/utils/preLoadImage";

const identityBackground = new PreLoadImage(identityCardBackground.src);

displayUserNumberPage({
identityBackground,
Expand Down
Loading