+ create user with public/private key

+ sign and verify votes and prevent unverified updates

app/app.vue

@@ -25,7 +25,8 @@ input {
   font-size: 1rem;
 }
 
-button {
+button,
+.button {
   background: #3b82f6;
   color: white;
   border: none;
@@ -36,7 +37,8 @@ button {
   transition: background 0.2s;
 }
 
-button:hover { background: #2563eb; }
+button:hover,
+.button:hover { background: #2563eb; }
 
 .status {
   font-size: 0.85rem;
@@ -61,6 +63,12 @@ button:hover { background: #2563eb; }
   font-size: 0.7rem; 
   background: #64748b; 
 }
+
+/* Hide the actual file input */
+input[type="file"] {
+  display: none;
+}
+
 </style>
 <template>
     <div class="poll-container">
@@ -72,23 +80,96 @@ button:hover { background: #2563eb; }
                     ● {{ isConnected ? 'Synced' : 'Waiting for other Peers...' }}
                 </span>
                 <span> | Peers online: {{ connectedPeers }}</span>
+                <h2 v-if="connectionAttempFailed" class="connectionFailed">⚠ Connection to Signaling Server Failed!</h2>
+                <div v-if="user===null" style="margin-top: 10px;">
+                    <button @click="createUser">Create New User</button>
+                    Or
+                    <label title="Select Key File">
+                        <span class="button">Login</span>
+                        <input 
+                            type="file"
+                            accept=".pem"
+                            @change="loadUser"
+                        />
+                    </label>
+                </div>
             </div>
-            <h2 v-if="connectionAttempFailed" class="connectionFailed">⚠ Connection to Signaling Server Failed!</h2>
         </header>
 
         <main>
-            <PollList v-if="!activePollId" @select-poll="selectPoll" />
-            <Poll v-else :activePollId="activePollId" :pollData="pollData" :addOption="addOption" :vote="vote"/>
+            <PollList v-if="!activePollId" :userid="user?.userid" @select-poll="selectPoll" />
+            <Poll v-else :activePollId="activePollId" :userid="user?.userid" :poll-data="pollData" :addOption="addOption" :vote="vote"/>
         </main>
     </div>
 </template>
 
 <script setup lang="ts">
+    import { v4 as uuidv4 } from 'uuid';
     const activePollId = ref<string | null>(null);
+    const user = shallowRef<UserData | null>(null);
 
-    const { pollData, isConnected, connectionAttempFailed, connectedPeers, addOption, vote } = usePoll(activePollId);
+    const { pollData, isConnected, connectionAttempFailed, connectedPeers, addOption, vote } = usePoll(activePollId,user);
 
     const selectPoll = (id: string) => {
         activePollId.value = id;
     };
+
+
+    const createUser = async () => {
+        try {
+            const keypair : CryptoKeyPair = await generateUserKeyPair();
+            console.log('keypair:', keypair);
+            const uuid = uuidv4();
+            user.value = {
+                userid: uuid,
+                private_key: keypair.privateKey,
+                public_key: keypair.publicKey,
+            };
+            const prvKeyString = await exportPrivateKey(keypair.privateKey);
+            await savePrivateKeyToFile(prvKeyString,uuid+".pem")
+
+            
+            const pubKeyString = await exportPublicKey(keypair.publicKey);
+            await $fetch(`/api/users/${uuid}`, {
+                method: 'POST',
+                body: { public_key: pubKeyString }
+            });
+        } catch (err) {
+            user.value = null
+            console.error("Failed to create new User!", err);
+        }
+    };
+    const loadUser = async (event: Event) => {
+        const target = event.target as HTMLInputElement;
+        const file = target.files?.[0];
+
+        if (file) {
+            try {
+                const content = await file.text();
+                console.log("File loaded: ");
+                if (file.name && content) {
+                    try {
+                        const uuid = file.name.replace(".pem", "");
+                        // Standardize the string for the importer
+                        const pkBase64 = content.replace(/-----BEGIN PRIVATE KEY-----|-----END PRIVATE KEY-----/g, "").replace(/\s+/g, "");
+
+                        const key = await stringToCryptoKey(pkBase64, "private");
+                        
+                        user.value = {
+                            userid: uuid,
+                            private_key: key,
+                            public_key: undefined, // Note: You might need to import a pub key too!
+                        };
+                        
+                        console.log("Login successful for:", uuid);
+                    } catch (err) {
+                        console.error("Crypto Import Error:", err);
+                        alert("The file content is not a valid Private Key.");
+                    }
+                }
+            } catch (e) {
+                console.error("Failed to read file", e);
+            }
+        }
+    };
 </script>