Skip to content

Commit 04da1d3

Browse files
Sahil2004coodos
andauthored
feat: added disclaimer (#277)
* feat: added disclaimer to pictique's login screen. * feat: added w3ds logo. * feat: added disclaimer modal to pictique. * feat: added disclaimer to login screen. * feat: added disclaimer box and the w3ds logo on login page in blabsy. * chore: re-init lock * chore: fix conflict in pnpm lock --------- Co-authored-by: Merul Dhiman <[email protected]>
1 parent 4f2d9c7 commit 04da1d3

File tree

12 files changed

+272
-51
lines changed

12 files changed

+272
-51
lines changed
Lines changed: 5 additions & 0 deletions
Loading

platforms/blabsy/src/components/layout/common-layout.tsx

Lines changed: 64 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,19 +2,79 @@ import { useRequireAuth } from '@lib/hooks/useRequireAuth';
22
import { Aside } from '@components/aside/aside';
33
import { Suggestions } from '@components/aside/suggestions';
44
import { Placeholder } from '@components/common/placeholder';
5-
import type { ReactNode } from 'react';
5+
import { type ReactNode, useState } from 'react';
6+
import { Modal } from '@components/modal/modal';
7+
import { Button } from '@components/ui/button';
8+
import { useAuth } from '@lib/context/auth-context';
69

710
export type LayoutProps = {
811
children: ReactNode;
912
};
1013

1114
export function ProtectedLayout({ children }: LayoutProps): JSX.Element {
12-
// const user = useRequireAuth();
13-
const user = true; // TODO: Change back to useRequireAuth; Doing for development purposes
15+
const user = useRequireAuth();
16+
const { signOut } = useAuth();
1417

18+
const [disclaimerAccepted, setDisclaimerAccepted] = useState(false);
1519
if (!user) return <Placeholder />;
1620

17-
return <>{children}</>;
21+
return (
22+
<>
23+
{children}
24+
{!disclaimerAccepted ? (
25+
<Modal
26+
open={!disclaimerAccepted}
27+
closeModal={() => signOut()}
28+
className='max-w-lg mx-auto mt-24'
29+
modalClassName='bg-black backdrop-blur-md p-6 rounded-lg flex flex-col gap-2'
30+
>
31+
<h1 className='text-xl text-center font-bold'>
32+
Disclaimer from MetaState Foundation
33+
</h1>
34+
<p className='font-bold'>⚠️ Please note:</p>
35+
<p>
36+
Blabsy is a <b>functional prototype</b>, intended to
37+
showcase <b>interoperability</b> and core concepts of
38+
the W3DS ecosystem.
39+
</p>
40+
<p>
41+
<b>It is not a production-grade platform</b> and may
42+
lack full reliability, performance, and security
43+
guarantees.
44+
</p>
45+
<p>
46+
We <b>strongly recommend</b> that you avoid sharing{' '}
47+
<b>sensitive or private content</b>, and kindly ask for
48+
your understanding regarding any bugs, incomplete
49+
features, or unexpected behaviours.
50+
</p>
51+
<p>
52+
The app is still in development, so we kindly ask for
53+
your understanding regarding any potential issues. If
54+
you experience issues or have feedback, feel free to
55+
contact us at:
56+
</p>
57+
<a
58+
href='mailto:[email protected]'
59+
className='outline-none'
60+
>
61+
62+
</a>
63+
<Button
64+
type='button'
65+
className='mt-4 bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600'
66+
onClick={() => {
67+
setDisclaimerAccepted(true);
68+
}}
69+
>
70+
I Understand
71+
</Button>
72+
</Modal>
73+
) : (
74+
<></>
75+
)}
76+
</>
77+
);
1878
}
1979

2080
export function HomeLayout({ children }: LayoutProps): JSX.Element {

platforms/blabsy/src/components/login/login-main.tsx

Lines changed: 17 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import axios from 'axios';
33
import { useEffect, useState } from 'react';
44
import { useAuth } from '@lib/context/auth-context';
55
import { NextImage } from '@components/ui/next-image';
6+
import Image from 'next/image';
67

78
export function LoginMain(): JSX.Element {
89
const { signInWithCustomToken } = useAuth();
@@ -76,9 +77,23 @@ export function LoginMain(): JSX.Element {
7677
{qr && <QRCode value={qr} />}
7778
</div>
7879
</div>
80+
<div className='absolute right-0 rotate-90 top-1/2'>
81+
<Image
82+
src='/assets/w3dslogo.svg'
83+
alt='W3DS logo'
84+
width={100}
85+
height={20}
86+
/>
87+
</div>
7988
</div>
80-
<div className='flex max-w-xs flex-col gap-6 [&_button]:py-2'>
81-
<div className='grid gap-3 font-bold' />
89+
<div className='flex max-w-lg flex-col gap-6 [&_button]:py-2 bg-white/20 p-4 rounded-lg'>
90+
<div className='grid gap-3 font-bold text-white/80'>
91+
You are entering Blabsy - a social network built on the
92+
Web 3.0 Data Space (W3DS) architecture. This system is
93+
designed around the principle of data-platform
94+
separation, where all your personal content is stored in
95+
your own sovereign eVault, not on centralised servers.
96+
</div>
8297
</div>
8398
</div>
8499
</main>

platforms/blabsy/src/lib/context/auth-context.tsx

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -169,7 +169,6 @@ export function AuthContextProvider({
169169

170170
export function useAuth(): AuthContext {
171171
const context = useContext(AuthContext);
172-
173172
if (!context)
174173
throw new Error('useAuth must be used within an AuthContextProvider');
175174

platforms/pictique/package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -56,6 +56,7 @@
5656
"axios": "^1.6.7",
5757
"moment": "^2.30.1",
5858
"svelte-qrcode": "^1.0.1",
59+
"svelte-qrcode-action": "^1.0.2",
5960
"tailwind-merge": "^3.0.2"
6061
}
6162
}
Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,7 @@
1-
declare module 'svelte-qrcode' {
2-
import { SvelteComponentTyped } from 'svelte';
3-
export default class QRCode extends SvelteComponentTyped<{ value: string; size?: number }> {}
1+
declare module "svelte-qrcode" {
2+
import { SvelteComponentTyped } from "svelte";
3+
export default class QRCode extends SvelteComponentTyped<{
4+
value: string;
5+
size?: number;
6+
}> {}
47
}
Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<svg width="63" height="26" viewBox="0 0 63 26" fill="none" xmlns="http://www.w3.org/2000/svg">
2+
<g clip-path="url(#clip0_3450_2389)">
3+
<path
4+
d="M56.4669 0H6.53305C2.92485 0 0 2.95179 0 6.59323V19.4045C0 23.046 2.92485 25.9978 6.53305 25.9978H56.4647C60.0729 25.9978 62.9978 23.046 62.9978 19.4045V6.59323C62.9978 2.95179 60.0729 0 56.4647 0H56.4669ZM16.2736 18.479H14.0611L12.0155 11.3916H11.9309L9.89195 18.479H7.6794L4.60541 7.64006H7.08508L8.86358 15.1723H8.95262L10.9136 7.64006H13.0372L14.9937 15.188H15.0872L16.8657 7.64006H19.3454L16.2714 18.479H16.2736ZM28.071 17.0817C27.7171 17.5625 27.2274 17.9399 26.6063 18.2139C25.9831 18.4902 25.2708 18.6273 24.4672 18.6273C23.6637 18.6273 22.987 18.4902 22.3771 18.2162C21.7672 17.9421 21.2864 17.5647 20.9347 17.084C20.583 16.6033 20.4027 16.0461 20.3916 15.4149H22.6776C22.691 15.68 22.7778 15.9114 22.938 16.1113C23.0961 16.3112 23.3098 16.464 23.5746 16.574C23.8395 16.6841 24.14 16.738 24.4717 16.738C24.8033 16.738 25.1239 16.6774 25.3888 16.5538C25.6536 16.4303 25.8629 16.2595 26.012 16.0394C26.1634 15.8215 26.2368 15.5677 26.2368 15.2824C26.2368 14.9971 26.1567 14.7365 25.9987 14.5118C25.8406 14.2872 25.6113 14.112 25.3175 13.9862C25.0215 13.8581 24.672 13.7952 24.2669 13.7952H23.2652V12.1127H24.2669C24.6097 12.1127 24.9124 12.052 25.1773 11.933C25.4422 11.8139 25.647 11.6454 25.7939 11.432C25.9408 11.2186 26.0142 10.9692 26.0142 10.6839C26.0142 10.3987 25.9497 10.174 25.8228 9.96734C25.6959 9.76067 25.5179 9.59893 25.2886 9.48211C25.0593 9.3653 24.7922 9.3069 24.4895 9.3069C24.1868 9.3069 23.8996 9.36306 23.6459 9.47313C23.3899 9.5832 23.1851 9.7427 23.0315 9.94712C22.8779 10.1515 22.7956 10.3919 22.7844 10.666H20.6075C20.6186 10.0415 20.7945 9.4911 21.1373 9.01486C21.4801 8.53862 21.943 8.16572 22.524 7.89615C23.1072 7.62658 23.7638 7.49179 24.4984 7.49179C25.2329 7.49179 25.8874 7.62658 26.4438 7.89839C27.0003 8.17021 27.4321 8.53638 27.7415 8.99689C28.0509 9.4574 28.2045 9.97408 28.2001 10.5447C28.2045 11.1512 28.0176 11.6589 27.6414 12.0632C27.2652 12.4698 26.7777 12.7259 26.1767 12.836V12.9214C26.9669 13.0247 27.5702 13.2988 27.9842 13.7503C28.3982 14.1996 28.603 14.7612 28.6007 15.4351C28.6052 16.0529 28.4294 16.601 28.0732 17.0817H28.071ZM61.6734 18.3577C61.6734 21.9205 58.8108 24.8116 55.2783 24.8116H39.4654C35.9329 24.8116 33.0704 21.9228 33.0704 18.3577V7.6423C33.0704 4.07949 35.9329 1.18835 39.4654 1.18835H55.2783C58.8108 1.18835 61.6734 4.07724 61.6734 7.6423V18.3577Z"
5+
fill="#A5A5A5"
6+
/>
7+
<path
8+
d="M44.7762 8.43754C43.9972 8.00623 43.0667 7.78833 41.9872 7.78833H38.1475V18.6273H41.9538C43.0445 18.6273 43.9816 18.4094 44.7673 17.9758C45.5531 17.5423 46.1563 16.92 46.577 16.1068C46.9977 15.2958 47.2091 14.3254 47.2091 13.1954C47.2091 12.0655 46.9977 11.104 46.577 10.2953C46.1563 9.48662 45.5553 8.86661 44.7762 8.4353V8.43754ZM44.5959 15.1745C44.3644 15.6845 44.0172 16.0596 43.5564 16.3022C43.0957 16.5449 42.5303 16.6639 41.8603 16.6639H40.4179V9.7517H41.8647C42.537 9.7517 43.1001 9.87076 43.5587 10.1111C44.0172 10.3515 44.3622 10.7244 44.5937 11.2321C44.8252 11.7398 44.9432 12.3957 44.9432 13.1954C44.9432 13.9952 44.8274 14.6624 44.5937 15.1723L44.5959 15.1745Z"
9+
fill="#A5A5A5"
10+
/>
11+
<path
12+
d="M56.1265 13.4201C55.8394 13.1618 55.5011 12.9461 55.1093 12.7686C54.7175 12.5912 54.2879 12.4519 53.8183 12.3441L52.8544 12.1104C52.6207 12.0565 52.4004 11.9936 52.1934 11.9172C51.9863 11.8409 51.806 11.751 51.648 11.6477C51.49 11.5443 51.3675 11.4185 51.2785 11.2748C51.1895 11.131 51.1472 10.9603 51.1561 10.7671C51.1561 10.5334 51.2229 10.3268 51.3586 10.1426C51.4922 9.95836 51.6881 9.81459 51.944 9.71126C52.2 9.60792 52.5117 9.55401 52.8834 9.55401C53.4287 9.55401 53.8606 9.67307 54.1789 9.90894C54.4972 10.1448 54.6775 10.4773 54.7198 10.9041H56.8967C56.8856 10.2594 56.7142 9.69104 56.3825 9.19908C56.0509 8.70936 55.5856 8.32522 54.9891 8.05116C54.3926 7.7771 53.6958 7.63782 52.899 7.63782C52.1021 7.63782 51.4165 7.77485 50.8022 8.05116C50.1878 8.32747 49.7026 8.70936 49.3531 9.19908C49.0014 9.68879 48.8278 10.2639 48.8322 10.9198C48.8278 11.7218 49.0882 12.3575 49.6135 12.8315C50.1388 13.3033 50.8534 13.6515 51.7593 13.8739L52.9279 14.1704C53.3197 14.2647 53.6513 14.3726 53.9207 14.4871C54.1922 14.6039 54.397 14.7455 54.5395 14.9095C54.6819 15.0757 54.7531 15.2801 54.7531 15.5227C54.7531 15.7833 54.6752 16.0147 54.5172 16.2169C54.3592 16.4191 54.1388 16.5741 53.8539 16.6886C53.569 16.8009 53.2351 16.8571 52.85 16.8571C52.4649 16.8571 52.1088 16.7965 51.7994 16.6751C51.49 16.5538 51.2429 16.3719 51.0604 16.1293C50.8778 15.8867 50.7732 15.5856 50.7487 15.2217H48.5518C48.5696 16.0012 48.7565 16.6549 49.1149 17.1828C49.4733 17.7107 49.9741 18.1084 50.6152 18.3757C51.2562 18.643 52.0108 18.7778 52.8789 18.7778C53.747 18.7778 54.4994 18.6452 55.1204 18.3779C55.7415 18.1106 56.2156 17.7355 56.5472 17.2502C56.8789 16.765 57.0436 16.1899 57.0481 15.5272C57.0436 15.0757 56.9635 14.6758 56.8032 14.3254C56.6452 13.9772 56.4204 13.6717 56.1354 13.4156L56.1265 13.4201Z"
13+
fill="#A5A5A5"
14+
/>
15+
</g>
16+
<defs>
17+
<clipPath id="clip0_3450_2389">
18+
<rect width="63" height="26" fill="white" />
19+
</clipPath>
20+
</defs>
21+
</svg>
Lines changed: 13 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,13 @@
1-
export { default as Icons } from './Icons.svelte';
2-
export { default as Like } from './Like.svelte';
3-
export { default as Refresh } from './Refresh.svelte';
4-
export { default as CommentIcon } from './CommentIcon.svelte';
5-
export { default as VerticalDots } from './VerticalDots.svelte';
6-
export { default as Home } from './Home.svelte';
7-
export { default as Flash } from './Flash.svelte';
8-
export { default as CommentsTwo } from './CommentsTwo.svelte';
9-
export { default as Search } from './Search.svelte';
10-
export { default as Camera } from './Camera.svelte';
11-
export { default as Settings } from './Settings.svelte';
12-
export { default as Cross } from './Cross.svelte';
1+
export { default as Icons } from "./Icons.svelte";
2+
export { default as Like } from "./Like.svelte";
3+
export { default as Refresh } from "./Refresh.svelte";
4+
export { default as CommentIcon } from "./CommentIcon.svelte";
5+
export { default as VerticalDots } from "./VerticalDots.svelte";
6+
export { default as Home } from "./Home.svelte";
7+
export { default as Flash } from "./Flash.svelte";
8+
export { default as CommentsTwo } from "./CommentsTwo.svelte";
9+
export { default as Search } from "./Search.svelte";
10+
export { default as Camera } from "./Camera.svelte";
11+
export { default as Settings } from "./Settings.svelte";
12+
export { default as Cross } from "./Cross.svelte";
13+
export { default as W3dslogo } from "./W3dslogo.svelte";
Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import { writable } from "svelte/store";
2+
3+
export const isDisclaimerModalOpen = writable(true);
4+
5+
export const closeDisclaimerModal = () => isDisclaimerModalOpen.set(false);

platforms/pictique/src/routes/(auth)/auth/+page.svelte

Lines changed: 45 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
11
<script lang="ts">
22
import { goto } from '$app/navigation';
33
import { PUBLIC_PICTIQUE_BASE_URL } from '$env/static/public';
4+
import { W3dslogo } from '$lib/icons';
45
import { Qr } from '$lib/ui';
56
import { apiClient, setAuthId, setAuthToken } from '$lib/utils';
67
import { onMount } from 'svelte';
8+
import { qrcode } from 'svelte-qrcode-action';
79
810
let qrData: string;
911
@@ -37,14 +39,50 @@
3739
class="align-center flex h-full w-full flex-col content-center items-center
3840
justify-center"
3941
>
42+
<div class="mb-5 flex flex-col items-center gap-2">
43+
<img src="/images/Logo.svg" alt="logo" class="w-30" />
44+
<p>Connect Socially in the Metastate</p>
45+
</div>
4046
<div
41-
class="h-max-[600px] bg-grey flex w-[300px] flex-col items-center gap-5
42-
rounded-md p-5"
47+
class="h-max-[600px] w-max-[400px] mb-5 flex flex-col items-center gap-5 rounded-xl bg-[#F476481A] p-5"
4348
>
44-
<img src="/images/Logo.svg" alt="logo" />
45-
46-
<Qr data={qrData}></Qr>
47-
48-
<h1>Scan the QR to Login</h1>
49+
<h2>Scan the QR code using your <b><u>eID App</u></b> to login</h2>
50+
<article
51+
class="overflow-hidden rounded-2xl"
52+
use:qrcode={{
53+
data: qrData,
54+
width: 250,
55+
height: 250,
56+
margin: 12,
57+
type: 'canvas',
58+
dotsOptions: {
59+
type: 'rounded',
60+
color: '#fff'
61+
},
62+
backgroundOptions: {
63+
gradient: {
64+
type: 'linear',
65+
rotation: 50,
66+
colorStops: [
67+
{ offset: 0, color: '#4D44EF' },
68+
{ offset: 0.65, color: '#F35B5B' },
69+
{ offset: 1, color: '#F7A428' }
70+
]
71+
}
72+
}
73+
}}
74+
></article>
75+
<p>
76+
<span class="mb-1 block font-bold text-gray-600">The code is valid for 60 seconds</span>
77+
<span class="block font-light text-gray-600">Please refresh the page if it expires</span
78+
>
79+
</p>
80+
<p class="w-[350px] bg-white/60 p-4 leading-4 text-black/60">
81+
You are entering Pictique - a social network built on the Web 3.0 Data Space (W3DS)
82+
architecture. This system is designed around the principle of data-platform separation,
83+
where all your personal content is stored in your own sovereign eVault, not on
84+
centralised servers.
85+
</p>
4986
</div>
87+
<W3dslogo />
5088
</div>

0 commit comments

Comments
 (0)