Feat/emover fixes (#765)

* fix: return evault id on core whois endpoint

* fix: not found case

* fix: styling

Author: sosweetham

docs/docs/Infrastructure/eVault-Key-Delegation.md

@@ -141,12 +141,15 @@ X-ENAME: @user.w3id
 ```json
 {
   "w3id": "@user.w3id",
+  "evaultId": "evault-identifier",
   "keyBindingCertificates": [
     "eyJhbGciOiJFUzI1NiIsImtpZCI6ImVudHJvcHkta2V5LTEifQ.eyJlbmFtZSI6IkB1c2VyLnczaWQiLCJwdWJsaWNLZXkiOiJ6MzA1OTMwMTMwNjA3MmE4NjQ4Y2UzZDAyMDEwNjA4MmE4NjQ4Y2UzZDAzMDEwNzAzNDIwMDA0Li4uIn0..."
   ]
 }
 ```
 
+`evaultId` is the eVault instance identifier (when configured); it matches the `evault` value registered with the Registry.
+
 ## Code Examples
 
 ### Setting Public Key During eVault Creation

docs/docs/Infrastructure/eVault.md

@@ -275,20 +275,26 @@ X-ENAME: @user-a.w3id
 **Response**:
 ```json
 {
+    "w3id": "@user-a.w3id",
+    "evaultId": "@evault-identifier",
     "keyBindingCertificates": [
         "eyJhbGciOiJFUzI1NiIsInR5cCI6IkpXVCJ9...",
         "eyJhbGciOiJFUzI1NiIsInR5cCI6IkpXVCJ9..."
     ]
 }
 ```
 
+- `w3id`: The W3ID (eName) from the request.
+- `evaultId`: The eVault instance identifier (when configured via `EVAULT_ID`). Matches the `evault` value registered with the Registry.
+- `keyBindingCertificates`: JWTs binding the eName to public keys.
+
 **Example**:
 ```bash
 curl -X GET http://localhost:4000/whois \
   -H "X-ENAME: @user-a.w3id"
 ```
 
-**Use Case**: Platforms use this endpoint to retrieve public keys for signature verification.
+**Use Case**: Platforms use this endpoint to retrieve public keys for signature verification and the eVault instance id for routing or auditing.
 
 ### /logs
 

infrastructure/evault-core/src/core/http/server.ts

@@ -73,6 +73,7 @@ export async function registerHttpRoutes(
                         type: "object",
                         properties: {
                             w3id: { type: "string" },
+                            evaultId: { type: ["string", "null"] },
                             keyBindingCertificates: {
                                 type: "array",
                                 items: { type: "string" },
@@ -114,15 +115,19 @@ export async function registerHttpRoutes(
 
             // Generate key binding certificates for each public key
             const keyBindingCertificates: string[] = [];
-            const registryUrl = process.env.PUBLIC_REGISTRY_URL || process.env.REGISTRY_URL;
+            const registryUrl =
+                process.env.PUBLIC_REGISTRY_URL || process.env.REGISTRY_URL;
             const sharedSecret = process.env.REGISTRY_SHARED_SECRET;
 
             if (registryUrl && sharedSecret && publicKeys.length > 0) {
                 try {
                     for (const publicKey of publicKeys) {
                         try {
                             const response = await axios.post(
-                                new URL("/key-binding-certificate", registryUrl).toString(),
+                                new URL(
+                                    "/key-binding-certificate",
+                                    registryUrl,
+                                ).toString(),
                                 {
                                     ename: eName,
                                     publicKey: publicKey,
@@ -132,10 +137,12 @@ export async function registerHttpRoutes(
                                         Authorization: `Bearer ${sharedSecret}`,
                                     },
                                     timeout: 10000,
-                                }
+                                },
                             );
                             if (response.data?.token) {
-                                keyBindingCertificates.push(response.data.token);
+                                keyBindingCertificates.push(
+                                    response.data.token,
+                                );
                             }
                         } catch (error) {
                             console.error(
@@ -154,8 +161,44 @@ export async function registerHttpRoutes(
                 }
             }
 
+            // Resolve eName via Registry (same logic as /resolve) to get evault id
+            let evaultId: string | null = null;
+            const registryUrlForResolve =
+                process.env.PUBLIC_REGISTRY_URL || process.env.REGISTRY_URL;
+            if (registryUrlForResolve) {
+                try {
+                    const resolveResponse = await axios.get<{
+                        ename: string;
+                        uri: string;
+                        evault: string;
+                        originalUri?: string;
+                        resolved?: boolean;
+                    }>(
+                        new URL(
+                            `/resolve?w3id=${encodeURIComponent(eName)}`,
+                            registryUrlForResolve,
+                        ).toString(),
+                        { timeout: 10000 },
+                    );
+                    if (resolveResponse.data?.evault) {
+                        evaultId = resolveResponse.data.evault;
+                    }
+                } catch (error) {
+                    // 404 or network error: evault not registered for this eName, or registry unavailable
+                    if (
+                        axios.isAxiosError(error) &&
+                        error.response?.status !== 404
+                    ) {
+                        console.error(
+                            "Error resolving eName via Registry for whois evaultId:",
+                            error.message,
+                        );
+                    }
+                }
+            }
             const result = {
                 w3id: eName,
+                evaultId,
                 keyBindingCertificates: keyBindingCertificates,
             };
             return result;
@@ -182,8 +225,14 @@ export async function registerHttpRoutes(
                 querystring: {
                     type: "object",
                     properties: {
-                        limit: { type: "string", description: "Page size (default 20, max 100)" },
-                        cursor: { type: "string", description: "Opaque cursor for next page" },
+                        limit: {
+                            type: "string",
+                            description: "Page size (default 20, max 100)",
+                        },
+                        cursor: {
+                            type: "string",
+                            description: "Opaque cursor for next page",
+                        },
                     },
                 },
                 response: {
@@ -243,14 +292,17 @@ export async function registerHttpRoutes(
 
             try {
                 const limit = Math.min(
-                    Math.max(1, parseInt(request.query.limit || "20", 10) || 20),
+                    Math.max(
+                        1,
+                        Number.parseInt(request.query.limit || "20", 10) || 20,
+                    ),
                     100,
                 );
                 const cursor = request.query.cursor ?? null;
-                const result = await dbService.getEnvelopeOperationLogs(
-                    eName,
-                    { limit, cursor },
-                );
+                const result = await dbService.getEnvelopeOperationLogs(eName, {
+                    limit,
+                    cursor,
+                });
                 return {
                     logs: result.logs,
                     nextCursor: result.nextCursor,

infrastructure/evault-core/src/index.ts

@@ -133,6 +133,7 @@ const initializeEVault = async (provisioningServiceInstance?: ProvisioningServic
     const evaultInstance = {
         publicKey,
         w3id,
+        evaultId: process.env.EVAULT_ID || undefined,
     };
 
     graphqlServer = new GraphQLServer(dbService, publicKey, w3id, evaultInstance);

platforms/emover/src/app/(app)/layout.tsx

@@ -2,15 +2,21 @@
 import { useAuth } from "@/lib/auth-context";
 import { useRouter } from "next/navigation";
 import { useEffect } from "react";
+import { ArrowRightLeft } from "lucide-react";
 
 export default function AppLayout({
     children,
 }: {
     children: React.ReactNode;
 }) {
-    const { isAuthenticated, isLoading } = useAuth();
+    const { isAuthenticated, isLoading, logout } = useAuth();
     const router = useRouter();
 
+    function handleLogout() {
+        logout();
+        router.push("/login");
+    }
+
     useEffect(() => {
         if (!isLoading && !isAuthenticated) {
             router.push("/login");
@@ -19,8 +25,11 @@ export default function AppLayout({
 
     if (isLoading) {
         return (
-            <div className="flex items-center justify-center min-h-screen">
-                <div>Loading...</div>
+            <div className="flex items-center justify-center min-h-screen bg-gray-50">
+                <div className="text-center">
+                    <div className="inline-block animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600 mb-4" />
+                    <p className="text-gray-600">Loading...</p>
+                </div>
             </div>
         );
     }
@@ -29,6 +38,31 @@ export default function AppLayout({
         return null;
     }
 
-    return <>{children}</>;
+    return (
+        <div className="min-h-screen bg-gray-50">
+            <header className="sticky top-0 z-10 bg-white shadow-sm border-b border-gray-200">
+                <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
+                    <div className="flex items-center justify-between">
+                        <div className="flex items-center gap-3">
+                            <div className="w-10 h-10 bg-blue-600 rounded-xl flex items-center justify-center shadow-md transform rotate-12">
+                                <ArrowRightLeft className="w-6 h-6 text-white transform -rotate-12" />
+                            </div>
+                            <h1 className="text-2xl font-bold text-gray-900">
+                                Emover
+                            </h1>
+                        </div>
+                        <button
+                            type="button"
+                            onClick={handleLogout}
+                            className="px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors text-sm font-medium text-gray-700"
+                        >
+                            Logout
+                        </button>
+                    </div>
+                </div>
+            </header>
+            {children}
+        </div>
+    );
 }
 

platforms/emover/src/app/(app)/migrate/page.tsx

@@ -127,7 +127,7 @@ function MigrateContent() {
         const interval = setInterval(pollStatus, 2000);
 
         return () => clearInterval(interval);
-    }, [migrationId, router]);
+    }, [migrationId]);
 
     // Listen for signing confirmation via SSE
     useEffect(() => {
@@ -160,8 +160,8 @@ function MigrateContent() {
 
     if (error && migrationStatus !== "failed") {
         return (
-            <div className="container mx-auto px-4 py-8">
-                <div className="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded">
+            <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+                <div className="rounded-lg border border-red-400 bg-red-100 p-4 text-red-700">
                     {error}
                 </div>
             </div>
@@ -176,17 +176,19 @@ function MigrateContent() {
     };
 
     return (
-        <div className="container mx-auto px-4 py-8 max-w-4xl">
-            <h1 className="text-3xl font-bold mb-8">Migration in Progress</h1>
+        <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+            <h1 className="text-2xl sm:text-3xl font-bold text-gray-900 mb-8">
+                Migration in Progress
+            </h1>
 
             {qrData && !isSigned && (
-                <div className="bg-white p-6 rounded-lg shadow mb-6">
-                    <h2 className="text-xl font-semibold mb-4">
+                <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-4 sm:p-6 mb-6">
+                    <h2 className="text-xl font-semibold text-gray-900 mb-4">
                         Scan QR Code to Confirm Migration
                     </h2>
                     <p className="text-sm text-gray-600 mb-4">
-                        Please scan this QR code with your eID Wallet app to confirm
-                        the migration.
+                        Please scan this QR code with your eID Wallet app to
+                        confirm the migration.
                     </p>
                     <div className="flex justify-center">
                         <QRCodeSVG value={qrData} size={256} />
@@ -196,7 +198,7 @@ function MigrateContent() {
 
             {(migrationStatus || isActivated) && (
                 <div
-                    className={`p-6 rounded-lg shadow mb-6 ${getStatusColor(
+                    className={`p-4 sm:p-6 rounded-lg shadow-sm border border-gray-200 mb-6 ${getStatusColor(
                         isActivated ? "completed" : migrationStatus,
                     )}`}
                 >
@@ -213,6 +215,7 @@ function MigrateContent() {
                                 activated!
                             </p>
                             <button
+                                type="button"
                                 onClick={() => router.push("/")}
                                 className="bg-blue-600 hover:bg-blue-700 text-white font-semibold py-2 px-6 rounded-lg transition-colors"
                             >
@@ -233,11 +236,16 @@ function MigrateContent() {
             )}
 
             {logs.length > 0 && (
-                <div className="bg-white p-6 rounded-lg shadow">
-                    <h2 className="text-xl font-semibold mb-4">Migration Logs</h2>
-                    <div className="space-y-1 font-mono text-sm max-h-96 overflow-y-auto bg-gray-50 p-4 rounded">
+                <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-4 sm:p-6">
+                    <h2 className="text-xl font-semibold text-gray-900 mb-4">
+                        Migration Logs
+                    </h2>
+                    <div className="space-y-1 font-mono text-sm max-h-96 overflow-y-auto bg-gray-50 p-4 rounded-lg">
                         {logs.map((log, index) => (
-                            <div key={index} className="text-gray-700">
+                            <div
+                                key={`${log.slice(0, 50)}-${index}`}
+                                className="text-gray-700"
+                            >
                                 {log}
                             </div>
                         ))}
@@ -250,7 +258,16 @@ function MigrateContent() {
 
 export default function MigratePage() {
     return (
-        <Suspense fallback={<div>Loading...</div>}>
+        <Suspense
+            fallback={
+                <div className="flex items-center justify-center min-h-[50vh] bg-gray-50">
+                    <div className="text-center">
+                        <div className="inline-block animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600 mb-4" />
+                        <p className="text-gray-600">Loading...</p>
+                    </div>
+                </div>
+            }
+        >
             <MigrateContent />
         </Suspense>
     );