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 <title>Position Share – Signup</title>
6 <script type="module" src="/src/main.ts"></script>
7 <link rel="stylesheet" href="/src/styles.css" />
8 </head>
9
10 <body>
11 <div class="card">
12 <div class="header">
13 <div class="icon-circle">
14 <img src="./src/assets/pin.svg" alt="Pin Icon" />
15 </div>
16 <h1>Position Share</h1>
17 <p>Connect with your server to start sharing</p>
18 </div>
19
20 <!-- x-data connects this element to the signupState Alpine component, enabling its data (serverAddress and signupKey) and functions (signup and scanQR) to work within it :) -->
21 <div class="actions" x-data="signupState">
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" class="btn-qr" @click="scanQR">
34 <img src="./src/assets/qr.svg" alt="QR Icon" />
35 Scan QR Code
36 </button>
37
38 <button class="btn-primary" @click="signup">Connect</button>
39 </div>
40 </div>
41
42 <script>
43 function signupState() {
44 return {
45 serverAddress: "",
46 signupKey: "",
47 // we have the functions within a bigger function because this is how we can access the variables we define (by using this.variableWeWant)
48 signup() {
49 alert(this.serverAddress);
50 },
51 scanQR() {
52 alert(this.signupKey);
53 },
54 };
55 }
56 </script>
57 </body>
58</html>