Skip to content

Commit

Permalink
Use landing page in flows
Browse files Browse the repository at this point in the history
  • Loading branch information
@lmuntaner
lmuntaner committed Jul 9, 2024
1 parent 3f74a48 commit a35512b
Show file tree
Hide file tree
Showing 4 changed files with 17 additions and 185 deletions.
21 changes: 0 additions & 21 deletions src/frontend/src/components/authenticateBox.json
View file

This file was deleted.

90 changes: 17 additions & 73 deletions src/frontend/src/components/authenticateBox.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,19 +39,10 @@ import { isNullish, nonNullish } from "@dfinity/utils";
import { TemplateResult, html, render } from "lit-html";
import { mkAnchorInput } from "./anchorInput";
import { mkAnchorPicker } from "./anchorPicker";
import {
controlIcon,
githubBigIcon,
participateIcon,
privacyIcon,
secureIcon,
signInIcon,
} from "./icons";
import { mainWindow } from "./mainWindow";
import { promptUserNumber } from "./promptUserNumber";

import { DerEncodedPublicKey } from "@dfinity/agent";
import copyJson from "./authenticateBox.json";
import { landingPage } from "./landingPage";

/** Template used for rendering specific authentication screens. See `authnScreens` below
Expand Down Expand Up @@ -413,43 +404,18 @@ export const handleLoginFlowResult = async <E>(
return undefined;
};

const learnMoreBlock = html`<p class="l-stack t-centered">
<a
href="https://internetcomputer.org/internet-identity"
target="_blank"
rel="noopener noreferrer"
>Learn more</a
>
about Internet Identity
</p>`;

/** The templates for the authentication pages */
export const authnTemplates = (i18n: I18n, props: AuthnTemplates) => {
const copy = i18n.i18n(copyJson);

const marketingBlocks = [
{
icon: secureIcon,
title: copy.secure_and_convenient,
body: copy.instead_of_passwords,
},
{
icon: privacyIcon,
title: copy.no_tracking,
body: copy.get_privacy,
},
{
icon: controlIcon,
title: copy.control_your_identity,
body: copy.securely_access,
},
{
icon: participateIcon,
title: copy.own_and_participate,
body: copy.share_and_vote,
},
{
icon: signInIcon,
title: copy.sign_in_to_web3,
body: copy.manages_keys,
},
{
icon: githubBigIcon,
title: copy.opensource_and_transparent,
body: copy.internet_identity_codebase,
},
];

return {
firstTime: (firstTimeProps: {
useExisting: () => void;
Expand All @@ -474,20 +440,7 @@ export const authnTemplates = (i18n: I18n, props: AuthnTemplates) => {
${props.firstTime.useExistingText}
</button>
</div>
<div class="c-marketing-section">
${marketingBlocks.map(
({ title, body, icon }) =>
html`
<article class="c-marketing-block">
${icon !== undefined
? html`<i class="c-icon c-icon--marketing">${icon}</i>`
: undefined}
<h2 class="t-title t-title--main">${title}</h2>
<p class="t-paragraph t-paragraph--weak">${body}</p>
</article>
`
)}
</div> `;
${learnMoreBlock}`;
},
useExisting: (useExistingProps: {
register: () => void;
Expand Down Expand Up @@ -560,6 +513,7 @@ export const authnTemplates = (i18n: I18n, props: AuthnTemplates) => {
pick: pickProps.onSubmit,
moreOptions: pickProps.moreOptions,
}).template}
${learnMoreBlock}
`;
},
};
Expand All @@ -569,22 +523,12 @@ export const authnPages = (i18n: I18n, props: AuthnTemplates) => {
const templates = authnTemplates(i18n, props);

return {
firstTime: (
opts: Parameters<typeof templates.firstTime>[0],
// TODO: remove this parameter once the landing page is ready.
landingPageTemplate: boolean = false
) =>
// TODO: Use the landing page template always when ready.
page(templates.firstTime(opts), landingPageTemplate),
firstTime: (opts: Parameters<typeof templates.firstTime>[0]) =>
page(templates.firstTime(opts), true),
useExisting: (opts: Parameters<typeof templates.useExisting>[0]) =>
page(templates.useExisting(opts)),
pick: (
opts: Parameters<typeof templates.pick>[0],
// TODO: remove this parameter once the landing page is ready.
landingPageTemplate: boolean = false
) =>
// TODO: Use the landing page template always when ready.
page(templates.pick(opts), landingPageTemplate),
page(templates.useExisting(opts), false),
pick: (opts: Parameters<typeof templates.pick>[0]) =>
page(templates.pick(opts), true),
};
};

Expand Down
87 changes: 0 additions & 87 deletions src/frontend/src/components/icons.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -418,93 +418,6 @@ export const externalLinkIcon = html`<svg
/>
</svg>`;

export const privacyIcon = html` <svg
viewBox="0 0 50 39"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M6.25073 1L43.2009 37.3871M1.5 19.1935L8.20184 10.4939C11.2957 6.47785 16.1197 4.11889 21.2386 4.11889H28.213C33.332 4.11889 38.156 6.47785 41.2498 10.4939L47.9516 19.1935L41.2498 27.8932C38.156 31.9092 33.332 34.2682 28.213 34.2682H21.2386C16.1197 34.2682 11.2957 31.9092 8.20184 27.8932L1.5 19.1935ZM30.6979 25.0746C32.2817 23.5148 33.1716 21.3994 33.1716 19.1935C33.1716 16.9877 32.2817 14.8723 30.6979 13.3125C29.114 11.7528 26.9658 10.8765 24.7258 10.8765C22.4859 10.8765 20.3376 11.7528 18.7538 13.3125L30.6979 25.0746Z"
stroke="currentColor"
fill="none"
stroke-width="2"
/>
</svg>`;

export const controlIcon = html`
<svg
width="30"
height="42"
viewBox="0 0 30 42"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M8.9997 13H14.9997M14.9997 13H21M14.9997 13V7M14.9997 13V19M9 27H21M2.638 1.32698C2.9014 1.19279 3.2491 1.10062 3.8542 1.05118C4.4711 1.00078 5.2634 1 6.4 1H23.6C24.7366 1 25.5289 1.00078 26.1458 1.05118C26.7509 1.10062 27.0986 1.19279 27.362 1.32698C27.9265 1.6146 28.3854 2.07354 28.673 2.63803C28.8072 2.90138 28.8994 3.24907 28.9488 3.85424C28.9992 4.47108 29 5.26339 29 6.4V27C29 34.732 22.732 41 15 41C7.268 41 1 34.732 1 27V6.4C1 5.2634 1.0008 4.47108 1.0512 3.85424C1.1006 3.24907 1.1928 2.90138 1.327 2.63803C1.6146 2.07354 2.0735 1.6146 2.638 1.32698Z"
stroke="currentColor"
stroke-width="2"
/>
</svg>
`;

export const participateIcon = html`
<svg viewBox="0 0 49 48" xmlns="http://www.w3.org/2000/svg">
<g stroke="currentColor" stroke-width="1.5" fill="none">
<path
d="M24.1315 27.491C24.1331 27.4934 24.2196 27.3889 24.2196 27.3889C23.2997 28.4581 22.074 29.7911 20.6599 31.0367C17.6741 33.6661 14.8476 34.9999 12.2593 34.9999C6.051 34.9999 1 30.0653 1 23.9999C1 23.1215 1.10784 22.2666 1.30824 21.4456M21.1629 24.101C20.3034 25.1274 19.0616 26.5283 17.6338 27.7852C14.9796 30.1235 13.246 30.6136 12.2593 30.6136C8.53626 30.6136 5.50775 27.6461 5.50775 23.9991C5.50775 20.3723 8.53787 17.4072 12.2641 17.3845C12.434 17.3845 12.6092 17.4537 12.878 17.5135"
/>
<path
d="M24.1357 20.611C25.0556 19.5418 26.2814 18.2088 27.6954 16.9632C30.6813 14.3338 33.5078 13 36.096 13C42.3044 13 47.3554 17.9346 47.3562 24.0016C47.3562 24.88 47.2491 25.7341 47.0471 26.5543M27.1924 23.8989C28.052 22.8725 29.2938 21.4716 30.7215 20.2147C33.3758 17.8764 35.1093 17.3863 36.096 17.3863C39.8191 17.3863 42.8476 20.3538 42.8476 24.0008C42.8476 27.6276 39.8175 30.3552 36.0912 30.3778C35.9214 30.3778 35.2069 30.3418 35.2069 30.3418"
/>
<path
d="M38.7875 31.2349C35.2939 31.1484 31.6626 28.3798 30.9213 27.6915C29.0075 25.9129 24.5899 21.0963 24.2438 20.7186C21.006 17.0765 16.619 13 12.2593 13H12.2537H12.2481C6.9484 13.0267 2.49376 16.6332 1.30908 21.4474C1.40003 21.1303 3.14083 16.5701 9.55196 16.7287C13.0456 16.8152 16.6947 19.621 17.4351 20.3093C19.3489 22.0879 23.7673 26.9053 24.1126 27.2822C27.3512 30.9243 31.7382 35 36.0979 35H36.1035H36.1091C41.4088 34.9733 45.8626 31.3668 47.0473 26.5526C46.9572 26.8697 45.1987 31.3935 38.7875 31.2349Z"
/>
</g>
</svg>
`;

export const secureIcon = html`
<svg
width="38"
height="48"
viewBox="0 -2 38 52"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M19 0.49292L19.2119 0.53886L37.2119 4.44143L38 4.6123V5.41872V26.9454C38 31.9951 35.4485 36.7028 31.2176 39.4593L19.5459 47.0637L19 47.4193L18.4541 47.0637L6.7824 39.4593C2.55153 36.7028 0 31.9951 0 26.9454V5.41872V4.6123L0.78811 4.44143L18.7881 0.53886L19 0.49292ZM20 21.8293C21.1652 21.4175 22 20.3062 22 19C22 17.3431 20.6569 16 19 16C17.3431 16 16 17.3431 16 19C16 20.3062 16.8348 21.4175 18 21.8293V27.5484H20V21.8293Z"
fill="none"
stroke="currentColor"
stroke-width="2"
/>
</svg>
`;

export const signInIcon = html`
<svg viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
<g stroke="currentColor" stroke-width="1.5" fill="none">
<path
d="M11.8525 19.2387C11.1894 20.4682 10.8761 21.856 10.9467 23.2511C11.0174 24.6462 11.4692 25.9952 12.253 27.1515C13.0369 28.3077 14.1228 29.2268 15.3927 29.8089C16.6625 30.391 18.0677 30.6138 19.4553 30.4529L21.1434 33.8L23.5049 35.0538L23.9997 38.47L25.9561 39.9273L26.4561 43.3418L31.344 45.7656L31.3279 40.8853L23.7108 26.2587"
/>
<path
d="M24.391 12.4107C23.2409 11.6178 21.8954 11.1555 20.5009 11.074C19.1063 10.9925 17.7161 11.2949 16.4815 11.9484C15.2469 12.602 14.2151 13.5815 13.4984 14.7806C12.7816 15.9796 12.4075 17.3522 12.4165 18.7491C12.4255 20.146 12.8174 21.5137 13.5496 22.7034C14.2817 23.8931 15.3261 24.8592 16.569 25.4967C17.812 26.1342 19.206 26.4187 20.5994 26.3192C21.9928 26.2196 23.3322 25.7399 24.4719 24.9322L27.56 27.0569L30.2309 27.0255L32.3094 29.7802L34.726 30.1182L36.8045 32.8729L42.2562 32.65L39.8972 28.3778L27.5977 19.9154C27.8275 18.4893 27.6481 17.0273 27.0805 15.699C26.513 14.3706 25.5804 13.2305 24.391 12.4107ZM20.9602 19.3225C20.7155 19.6781 20.3709 19.9532 19.9698 20.1129C19.5688 20.2727 19.1294 20.3099 18.7073 20.2199C18.2851 20.13 17.8991 19.9169 17.598 19.6075C17.297 19.2982 17.0944 18.9065 17.0159 18.482C16.9375 18.0575 16.9867 17.6193 17.1573 17.2228C17.3279 16.8263 17.6122 16.4893 17.9744 16.2543C18.3365 16.0194 18.7602 15.8972 19.1918 15.903C19.6234 15.9089 20.0436 16.0426 20.3992 16.2873C20.8761 16.6154 21.2031 17.1195 21.3083 17.6887C21.4135 18.2579 21.2883 18.8456 20.9602 19.3225Z"
/>
<path
d="M5.32384 18.8004C4.34183 17.6471 3.67678 16.2582 3.39405 14.7701C3.11132 13.282 3.22064 11.7459 3.71127 10.3128C4.2019 8.87977 5.05696 7.59903 6.1924 6.59646C7.32785 5.59389 8.70462 4.90399 10.1874 4.59458C11.6702 4.28517 13.208 4.36689 14.6496 4.8317C16.0913 5.29651 17.3872 6.12842 18.41 7.24568C19.4328 8.36293 20.1473 9.72709 20.4833 11.2041C20.8193 12.6811 20.7652 14.2201 20.3263 15.6698"
/>
</g>
</svg>
`;

export const githubBigIcon = html`
<svg viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M45 25.0196C45 34.3012 38.9886 42.1741 30.6497 44.9613C29.5828 45.167 29.2064 44.5122 29.2064 43.9497C29.2064 43.2605 29.2325 40.9921 29.2325 38.1831C29.2325 36.2203 28.5589 34.9384 27.8061 34.2928C32.4829 33.769 37.3962 31.9943 37.3962 23.9207C37.3962 21.6263 36.5828 19.7458 35.2347 18.2767C35.4536 17.7444 36.1711 15.6112 35.025 12.7149C35.025 12.7149 33.266 12.1525 29.2586 14.87C27.5829 14.4032 25.7852 14.1715 24 14.1631C22.2148 14.1715 20.4171 14.4032 18.7414 14.87C14.734 12.1525 12.9666 12.7149 12.9666 12.7149C11.8247 15.6112 12.5464 17.7444 12.7653 18.2767C11.4172 19.7458 10.5995 21.6263 10.5995 23.9207C10.5995 31.9724 15.5037 33.7782 20.1678 34.3054C19.5683 34.8335 19.026 35.7586 18.8332 37.1144C17.6341 37.6559 14.5934 38.5844 12.7215 35.3699C12.7215 35.3699 11.61 33.3551 9.50571 33.2065C9.50571 33.2065 7.45363 33.1805 9.36088 34.4842C9.36088 34.4842 10.7393 35.1298 11.6934 37.5552C11.6934 37.5552 12.9228 41.6469 18.7675 40.3734C18.7759 42.1305 18.7936 43.4527 18.7936 43.9497C18.7936 44.508 18.413 45.1536 17.3629 44.9613C9.01564 42.1834 3 34.3054 3 25.0196C3 13.4084 12.4015 4 24 4C35.5985 4 45 13.4084 45 25.0196Z"
stroke="currentColor"
stroke-width="1.5"
/>
</svg>
`;

export const questionIcon = html` <svg
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
Expand Down
4 changes: 0 additions & 4 deletions src/frontend/src/styles/main.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1378,10 +1378,6 @@ by all browsers (FF is missing) */
box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.4);
}

.c-marketing-section {
margin-top: calc(2 * var(--rs-marketing-block-stack));
}

.c-marketing-block {
margin-top: var(--rs-marketing-block-stack);
}
Expand Down

0 comments on commit a35512b

Please sign in to comment.