Self-hosted, federated location sharing app and server that prioritizes user privacy and security
azom.dev
end-to-end-encryption
location-sharing
privacy
self-hosted
federated
1<!doctype html>
2<html lang="en">
3 <head>
4 <meta charset="UTF-8" />
5 <script type="module" src="./signup.ts"></script>
6 <link rel="stylesheet" href="./signup.css" />
7 </head>
8
9 <body>
10 <div class="card">
11 <div class="header">
12 <div class="icon-circle">
13 <img src="/src/assets/pin.svg" alt="Pin Icon" />
14 </div>
15 <h1>PrivacyPin</h1>
16 <p>Connect with a server to start sharing</p>
17 </div>
18
19 <!-- x-data connects this element to the signupPageState Alpine component, enabling its data (serverAddress and signupKey) and functions (signup and scanQR) to work within it :) -->
20 <!-- TODO: make this a form instead? -->
21 <div class="actions" x-data="signupPageState">
22 <div>
23 <label for="server">Server Address</label>
24 <input id="server" type="url" placeholder="https://your-server.com" x-model="serverAddress" required />
25 </div>
26
27 <div>
28 <label for="key">Signup Key</label>
29 <input id="key" type="password" placeholder="Enter your signup key" x-model="signupKey" required />
30 </div>
31
32 <p class="hint">Scan a QR code to automatically fill both server address and signup key</p>
33 <button type="button" x-bind:disabled="isDoingStuff" class="btn-qr" @click="await scanQR()">
34 <img src="/src/assets/qr.svg" alt="QR Icon" />
35 Scan QR Code
36 </button>
37
38 <button class="btn-primary" x-bind:disabled="isDoingStuff" @click="await signup()"><span x-show="isDoingStuff">Connecting...</span> <span x-show="!isDoingStuff">Connect</span></button>
39 </div>
40 </div>
41 </body>
42</html>