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