Import pk from camera, QR visibility toggles, docs

- Add Import pk from camera: scan QR → restore pb → auto login → refresh
- Add scanner.js (jsQR) for camera QR decode
- QR visibility: pk shown by default, pb hidden by default (toggles)
- Update docs/frontend-development.md with scanner, Import pk, QR behavior

Made-with: Cursor

web/index.html

@@ -40,21 +40,38 @@
                 <v-textarea v-model="state.publicKey" class="mt-3" label="Public Key (pb)" rows="2"></v-textarea>
                 <v-textarea v-model="state.privateKey" label="Private Key (pk, local only)" rows="2"></v-textarea>
                 <v-btn size="small" variant="outlined" class="mt-2" @click="restorePublicKeyFromPrivate">Restore Public Key from Private Key</v-btn>
+                <v-btn size="small" variant="outlined" color="primary" class="mt-2" @click="importPkFromCamera">Import pk from camera</v-btn>
+                <v-dialog v-model="state.showCameraDialog" max-width="400" persistent @click:outside="closeCameraDialog">
+                  <v-card class="pa-4">
+                    <v-card-title>Scan private key (pk) QR</v-card-title>
+                    <v-card-text>
+                      <video id="camera-video" autoplay playsinline muted class="rounded" style="width:100%;max-height:300px;background:#000"></video>
+                      <v-alert v-if="state.cameraError" type="error" density="compact" class="mt-2">{{ state.cameraError }}</v-alert>
+                    </v-card-text>
+                    <v-card-actions>
+                      <v-spacer></v-spacer>
+                      <v-btn @click="closeCameraDialog">Cancel</v-btn>
+                    </v-card-actions>
+                  </v-card>
+                </v-dialog>
                 <v-divider class="my-3"></v-divider>
                 <v-row v-if="state.qrPk || state.qrPb" dense>
-                  <v-col v-if="state.qrPb" cols="auto">
-                    <div class="text-caption text-medium-emphasis mb-1">QR: Public Key (pb)</div>
-                    <img :src="state.qrPb" alt="Public key QR" width="140" height="140" class="rounded" />
-                  </v-col>
                   <v-col v-if="state.qrPk" cols="auto">
-                    <div v-if="state.showPrivateQR">
-                      <div class="text-caption text-error mb-1">QR: Private Key (pk, secret backup)</div>
-                      <img :src="state.qrPk" alt="Private key QR" width="140" height="140" class="rounded" />
-                    </div>
+                    <div class="text-caption text-error mb-1">QR: Private Key (pk, secret backup)</div>
+                    <img v-show="state.showPrivateQR" :src="state.qrPk" alt="Private key QR" width="140" height="140" class="rounded" />
                     <v-btn size="small" variant="outlined" color="warning" @click="togglePrivateQR" class="mt-1">
                       {{ state.showPrivateQR ? 'Hide' : 'Show' }} private key (pk) QR
                     </v-btn>
                   </v-col>
+                  <v-col v-if="state.qrPb" cols="auto">
+                    <div v-if="state.showPublicQR">
+                      <div class="text-caption text-medium-emphasis mb-1">QR: Public Key (pb)</div>
+                      <img :src="state.qrPb" alt="Public key QR" width="140" height="140" class="rounded" />
+                    </div>
+                    <v-btn size="small" variant="outlined" @click="togglePublicQR" class="mt-1">
+                      {{ state.showPublicQR ? 'Hide' : 'Show' }} public key (pb) QR
+                    </v-btn>
+                  </v-col>
                 </v-row>
                 <v-btn color="secondary" class="mt-2" @click="register">Register (sign service key)</v-btn>
                 <v-btn color="success" class="mt-2" @click="login">Login</v-btn>