From 48c0fe43fee7cb588a175d17796d0e3f0489b435 Mon Sep 17 00:00:00 2001 From: Soham Jaiswal Date: Tue, 12 Aug 2025 12:31:14 +0530 Subject: [PATCH 1/3] feat: pictique login mobile responsive --- .../src/routes/(auth)/auth/+page.svelte | 93 ++++++++++++------- 1 file changed, 59 insertions(+), 34 deletions(-) diff --git a/platforms/pictique/src/routes/(auth)/auth/+page.svelte b/platforms/pictique/src/routes/(auth)/auth/+page.svelte index 12d14bfe..141aba41 100644 --- a/platforms/pictique/src/routes/(auth)/auth/+page.svelte +++ b/platforms/pictique/src/routes/(auth)/auth/+page.svelte @@ -5,11 +5,20 @@ import { Qr } from '$lib/ui'; import { apiClient, setAuthId, setAuthToken } from '$lib/utils'; import { onMount } from 'svelte'; + import { onDestroy } from 'svelte'; import { qrcode } from 'svelte-qrcode-action'; let qrData: string; + let isMobile = false; + + function checkMobile() { + isMobile = window.innerWidth <= 640; // Tailwind's `sm` breakpoint + } onMount(async () => { + checkMobile(); + window.addEventListener('resize', checkMobile); + const { data } = await apiClient.get('/api/auth/offer'); qrData = data.uri; @@ -32,60 +41,76 @@ } watchEventStream(new URL(qrData).searchParams.get('session') as string); + + onDestroy(() => { + window.removeEventListener('resize', checkMobile); + }); }); -
-
+
+
logo

Connect Socially in the Metastate

+
-

Scan the QR code using your eID App to login

+

Scan the QR code using your eID App to login

+ {#if qrData} - + {/if} {/if} -

+ +

The code is valid for 60 seconds Please refresh the page if it expires

-

+ +

You are entering Pictique - a social network built on the Web 3.0 Data Space (W3DS) architecture. This system is designed around the principle of data-platform separation, where all your personal content is stored in your own sovereign eVault, not on centralised servers.

+
From 0e33c11af67847a0189c7b24a68fb69176fe6779 Mon Sep 17 00:00:00 2001 From: Soham Jaiswal Date: Tue, 12 Aug 2025 12:36:42 +0530 Subject: [PATCH 2/3] fix: pictique cta text --- platforms/pictique/src/routes/(auth)/auth/+page.svelte | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/platforms/pictique/src/routes/(auth)/auth/+page.svelte b/platforms/pictique/src/routes/(auth)/auth/+page.svelte index 141aba41..ad533b5c 100644 --- a/platforms/pictique/src/routes/(auth)/auth/+page.svelte +++ b/platforms/pictique/src/routes/(auth)/auth/+page.svelte @@ -57,11 +57,11 @@
-

Scan the QR code using your eID App to login

- {#if qrData} {#if isMobile} - +

+ Click the button below to login using your eID App +

{:else} - +

+ Scan the QR code using your eID App to login +

Date: Tue, 12 Aug 2025 13:33:11 +0530 Subject: [PATCH 3/3] fix: evoting login --- .../eVoting/src/app/(auth)/login/page.tsx | 86 +++++++++++-------- 1 file changed, 51 insertions(+), 35 deletions(-) diff --git a/platforms/eVoting/src/app/(auth)/login/page.tsx b/platforms/eVoting/src/app/(auth)/login/page.tsx index 8cf5e95f..8f4ec801 100644 --- a/platforms/eVoting/src/app/(auth)/login/page.tsx +++ b/platforms/eVoting/src/app/(auth)/login/page.tsx @@ -1,29 +1,30 @@ "use client"; import { useState, useEffect } from "react"; import { Card, CardHeader } from "@/components/ui/card"; -import { useRouter } from "next/navigation"; import QRCode from "qrcode.react"; import { useAuth } from "@/lib/auth-context"; import { setAuthToken, setAuthId } from "@/lib/authUtils"; import { isMobileDevice, getDeepLinkUrl } from "@/lib/utils/mobile-detection"; export default function LoginPage() { - const router = useRouter(); const { login } = useAuth(); const [qrData, setQrData] = useState(null); const [sessionId, setSessionId] = useState(null); const [error, setError] = useState(null); const [isLoading, setIsLoading] = useState(true); + const [isMobile, setIsMobile] = useState(false); + + useEffect(() => { + setIsMobile(isMobileDevice()); + }, []); useEffect(() => { const fetchQRCode = async () => { try { - const response = await fetch(`${process.env.NEXT_PUBLIC_EVOTING_BASE_URL}/api/auth/offer`, { - method: "GET", - headers: { - "Content-Type": "application/json", - }, - }); + const response = await fetch( + `${process.env.NEXT_PUBLIC_EVOTING_BASE_URL}/api/auth/offer`, + { method: "GET", headers: { "Content-Type": "application/json" } } + ); if (!response.ok) { throw new Error("Failed to fetch QR code"); @@ -33,7 +34,7 @@ export default function LoginPage() { setQrData(data.offer); setSessionId(data.sessionId); setIsLoading(false); - } catch (err) { + } catch { setError("Failed to load QR code"); setIsLoading(false); } @@ -54,8 +55,7 @@ export default function LoginPage() { if (data.token && data.user) { setAuthToken(data.token); setAuthId(data.user.id); - // Reload to trigger auth initialization - window.location.href = '/'; + window.location.href = "/"; } }; @@ -63,42 +63,53 @@ export default function LoginPage() { eventSource.close(); }; - return () => { - eventSource.close(); - }; + return () => eventSource.close(); }, [sessionId, login]); return ( -
+
+ {/* Logo + Tagline */}
eVoting Logo eVoting
-

Secure voting in the W3DS

+

Secure voting in the W3DS

- - + + {/* Main Card */} + + Welcome to eVoting -
-
- Scan the QR using your - eID App - to login + +
+ {/* Dynamic heading text */} +
+ {isMobile ? ( + <> + Click the button below using your + eID App + to login + + ) : ( + <> + Scan the QR using your + eID App + to login + + )}
- {error && ( -
- {error} -
- )} + + {error &&
{error}
} + {isLoading ? (
Loading QR Code...
) : qrData ? ( <> - {isMobileDevice() ? ( + {isMobile ? (
Login with eID Wallet -
+
Click the button to open your eID wallet app
@@ -126,21 +137,26 @@ export default function LoginPage() {
QR Code not available
)} - + + {/* Expiry Note */} +

The code is only valid for 60 seconds

Please refresh the page if it expires

- -
- You are entering eVoting - a voting platform built on - the Web 3.0 Data Space (WDS) architecture. This system +
+ + {/* Info Box */} +
+ You are entering eVoting — a voting platform built on + the Web 3.0 Data Space (W3DS) architecture. This system is designed around the principle of data-platform separation, where all your personal content is stored in your own sovereign eVault, not on centralised servers.
+ w3ds Logo
);