azom.dev
Self-hosted, federated location sharing app and server that prioritizes user privacy and security
end-to-end-encryption
location-sharing
privacy
self-hosted
federated
make the button a checkbox input
kishka.cc
+4
-3
app/src/settings-page/settings.html
+4
-3
app/src/settings-page/settings.html
+6
-2
app/src/settings-page/settings.ts
+6
-2
app/src/settings-page/settings.ts
···
3
import { goto } from "../utils/tools.ts";
4
5
Alpine.data("settingsPageState", () => ({
6
-
location_on: Store.get("is_sharing"),
7
8
async debugLogout() {
9
await Store.reset();
···
18
// once i finish this here, i'll move it over to api maybe? i'll have to check with azom
19
20
await Store.set("is_sharing", !(await Store.get("is_sharing")));
21
-
this.location_on = Store.get("is_sharing");
22
},
23
}));
24
···
3
import { goto } from "../utils/tools.ts";
4
5
Alpine.data("settingsPageState", () => ({
6
+
async init() {
7
+
this.location_on = await Store.get("is_sharing");
8
+
},
9
+
10
+
location_on: true,
11
12
async debugLogout() {
13
await Store.reset();
···
22
// once i finish this here, i'll move it over to api maybe? i'll have to check with azom
23
24
await Store.set("is_sharing", !(await Store.get("is_sharing")));
25
+
this.location_on = await Store.get("is_sharing");
26
},
27
}));
28
+31
-5
app/src/signup-page/signup.html
+31
-5
app/src/signup-page/signup.html
···
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()">
39
<span x-show="isDoingStuff">Connecting...</span>
40
<span x-show="!isDoingStuff">Connect</span>
41
</button>
···
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
+
22
+
<!-- <input type="text" @keyup.shift.enter="alert('Submitted!')"> use something like this to submit? -->
23
<div class="actions" x-data="signupPageState">
24
<div>
25
<label for="server">Server Address</label>
26
+
<input
27
+
id="server"
28
+
type="url"
29
+
placeholder="https://your-server.com"
30
+
x-model="serverAddress"
31
+
required
32
+
/>
33
</div>
34
35
<div>
36
<label for="key">Signup Key</label>
37
+
<input
38
+
id="key"
39
+
type="password"
40
+
placeholder="Enter your signup key"
41
+
x-model="signupKey"
42
+
required
43
+
/>
44
</div>
45
46
+
<p class="hint">
47
+
Scan a QR code to automatically fill both server address and
48
+
signup key
49
+
</p>
50
+
<button
51
+
type="button"
52
+
x-bind:disabled="isDoingStuff"
53
+
class="btn-qr"
54
+
@click="await scanQR()"
55
+
>
56
<img src="/src/assets/qr.svg" alt="QR Icon" />
57
Scan QR Code
58
</button>
59
60
+
<button
61
+
class="btn-primary"
62
+
x-bind:disabled="isDoingStuff"
63
+
@click="await signup()"
64
+
>
65
<span x-show="isDoingStuff">Connecting...</span>
66
<span x-show="!isDoingStuff">Connect</span>
67
</button>