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
> Changed add-friend-page header to use the optimized one I made > Added a new 'undo' svg to use as a 'go back' button > Added a new 'user-multiple' svg to use instead of the emoji on home-page > Changed emoji on home-page to be the new svg > Changed svgs on signup page to new ones(old ones deleted in a previous commit)
kishka.cc
+30
app/src/add-friend-page/add-friend.css
+30
app/src/add-friend-page/add-friend.css
···
6
6
justify-content: center;
7
7
}
8
8
9
+
.container {
10
+
display: flex;
11
+
}
12
+
13
+
.container div {
14
+
flex: 1;
15
+
text-align: center;
16
+
margin: auto;
17
+
}
18
+
19
+
.contentHeader {
20
+
text-align: center;
21
+
border-bottom: 1px solid #e5e7eb;
22
+
padding-bottom: 10px;
23
+
}
24
+
25
+
.icon-btn {
26
+
border: none;
27
+
background: none;
28
+
cursor: pointer;
29
+
padding: 0.4rem;
30
+
font-size: 1rem;
31
+
}
32
+
33
+
.svg-icon {
34
+
width: 25px;
35
+
height: 25px;
36
+
margin: auto;
37
+
}
38
+
9
39
.app {
10
40
width: 100%;
11
41
background: #f9fafb;
+39
-8
app/src/add-friend-page/add-friend.html
+39
-8
app/src/add-friend-page/add-friend.html
···
8
8
9
9
<body>
10
10
<div class="app" x-data="addFriendPageState">
11
-
<header>
12
-
<button class="icon-btn" @click="goBack()">←</button>
13
-
<h1>Add Friend</h1>
14
-
<span style="width: 32px"></span>
11
+
<header class="container">
12
+
<div style="text-align: left">
13
+
<button class="icon-btn" @click="goto('home')">
14
+
<img
15
+
class="svg-icon"
16
+
src="/src/assets/undo.svg"
17
+
alt="Go Back Icon"
18
+
/>
19
+
</button>
20
+
</div>
21
+
<div style="text-align: center">
22
+
<strong>Add friend</strong>
23
+
</div>
24
+
<div style="text-align: right"></div>
15
25
</header>
16
26
17
27
<div class="content">
···
28
38
29
39
<div class="card">
30
40
<label for="friendUserId">Friend user id</label>
31
-
<input id="friendUserId" type="text" x-model="friend_id" placeholder="Enter their user id" />
41
+
<input
42
+
id="friendUserId"
43
+
type="text"
44
+
x-model="friend_id"
45
+
placeholder="Enter their user id"
46
+
/>
32
47
33
48
<label for="friendKey">Friend key</label>
34
-
<input id="friendKey" type="text" x-model="friend_rand_key" placeholder="Enter their key" />
49
+
<input
50
+
id="friendKey"
51
+
type="text"
52
+
x-model="friend_rand_key"
53
+
placeholder="Enter their key"
54
+
/>
35
55
36
56
<label for="friendName">Friend Name</label>
37
-
<input id="friendName" type="text" x-model="friend_name" placeholder="Enter their name" />
57
+
<input
58
+
id="friendName"
59
+
type="text"
60
+
x-model="friend_name"
61
+
placeholder="Enter their name"
62
+
/>
38
63
39
-
<button class="primary" x-bind:disabled="is_doing_stuff" @click="sendFriendRequest()">Send friend request</button>
64
+
<button
65
+
class="primary"
66
+
x-bind:disabled="is_doing_stuff"
67
+
@click="sendFriendRequest()"
68
+
>
69
+
Send friend request
70
+
</button>
40
71
</div>
41
72
</div>
42
73
</div>
+4
app/src/assets/user-multiple.svg
+4
app/src/assets/user-multiple.svg
···
1
+
<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
2
+
<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
3
+
<path d="M17.5 18H18.7687C19.2035 18 19.4209 18 19.5817 17.9473C20.1489 17.7612 20.5308 17.1231 20.498 16.4163C20.4887 16.216 20.42 15.9676 20.2825 15.4708C20.168 15.0574 20.1108 14.8507 20.0324 14.6767C19.761 14.0746 19.2766 13.6542 18.7165 13.5346C18.5546 13.5 18.3737 13.5 18.0118 13.5L15.5 13.5346M14.6899 11.6996C15.0858 11.892 15.5303 12 16 12C17.6569 12 19 10.6569 19 9C19 7.34315 17.6569 6 16 6C15.7295 6 15.4674 6.0358 15.2181 6.10291M13.5 8C13.5 10.2091 11.7091 12 9.5 12C7.29086 12 5.5 10.2091 5.5 8C5.5 5.79086 7.29086 4 9.5 4C11.7091 4 13.5 5.79086 13.5 8ZM6.81765 14H12.1824C12.6649 14 12.9061 14 13.1219 14.0461C13.8688 14.2056 14.5147 14.7661 14.8765 15.569C14.9811 15.8009 15.0574 16.0765 15.21 16.6278C15.3933 17.2901 15.485 17.6213 15.4974 17.8884C15.5411 18.8308 15.0318 19.6817 14.2756 19.9297C14.0613 20 13.7714 20 13.1916 20H5.80844C5.22864 20 4.93875 20 4.72441 19.9297C3.96818 19.6817 3.45888 18.8308 3.50261 17.8884C3.51501 17.6213 3.60668 17.2901 3.79003 16.6278C3.94262 16.0765 4.01891 15.8009 4.12346 15.569C4.4853 14.7661 5.13116 14.2056 5.87806 14.0461C6.09387 14 6.33513 14 6.81765 14Z" stroke="#464455" stroke-linecap="round" stroke-linejoin="round"/>
4
+
</svg>
+50
-10
app/src/home-page/home.html
+50
-10
app/src/home-page/home.html
···
15
15
<!-- <@azom.dev> somehow the "+" emoji does not display in the code for me, but it's temporary anyways -->
16
16
<!-- <@kishka.cc> we will need to replace these with svgs, as it's the font that messes up the emoji -->
17
17
<button class="icon-btn" @click="updateServer()">
18
-
<img class="svg-icon" src="/src/assets/paperplane.svg" alt="Paperplane Flying Icon" />
18
+
<img
19
+
class="svg-icon"
20
+
src="/src/assets/paperplane.svg"
21
+
alt="Paperplane Flying Icon"
22
+
/>
19
23
</button>
20
24
<button class="icon-btn" @click="addFriend()">
21
-
<img class="svg-icon" src="/src/assets/user+.svg" alt="Friend Add Icon" />
25
+
<img
26
+
class="svg-icon"
27
+
src="/src/assets/user+.svg"
28
+
alt="Friend Add Icon"
29
+
/>
22
30
</button>
23
31
<button class="icon-btn" @click="openSettings()">
24
-
<img class="svg-icon" src="/src/assets/setting.svg" alt="Settings Icon" />
32
+
<img
33
+
class="svg-icon"
34
+
src="/src/assets/setting.svg"
35
+
alt="Settings Icon"
36
+
/>
25
37
</button>
26
38
</div>
27
39
</header>
···
37
49
<div class="content">
38
50
<div class="friends-header">
39
51
<h2 style="font-size: 1rem; margin: 0">Friends</h2>
40
-
<span style="color: #6b7280; font-size: 0.9rem">(<span x-text="friends.length"></span>)</span>
52
+
<span style="color: #6b7280; font-size: 0.9rem"
53
+
>(<span x-text="friends.length"></span>)</span
54
+
>
41
55
</div>
42
56
<!--TODO idk why but sometimes when i launch the app I see the stuff when you have no friends for a split second before I see them appear, even tho we get them in init -->
43
57
<template x-if="friends.length > 0">
···
46
60
<div class="friend-card">
47
61
<strong x-text="friend.name"></strong>
48
62
<div class="friend-actions">
49
-
<button class="view-btn" @click="viewLocation(friend.id)"><img class="svg-icon" src="/src/assets/pin-location.svg" alt="Pin Icon" />View</button>
63
+
<button
64
+
class="view-btn"
65
+
@click="viewLocation(friend.id)"
66
+
>
67
+
<img
68
+
class="svg-icon"
69
+
src="/src/assets/pin-location.svg"
70
+
alt="Pin Icon"
71
+
/>View
72
+
</button>
50
73
51
-
<button class="menu-icon" style="margin-bottom: auto" @click="friendOptions(friend.id)">
52
-
<img class="svg-icon" src="/src/assets/ellipsis-vertical.svg" alt="Options menu" />
74
+
<button
75
+
class="menu-icon"
76
+
style="margin-bottom: auto"
77
+
@click="friendOptions(friend.id)"
78
+
>
79
+
<img
80
+
class="svg-icon"
81
+
src="/src/assets/ellipsis-vertical.svg"
82
+
alt="Multiple Users Icon"
83
+
/>
53
84
</button>
54
85
</div>
55
86
</div>
···
59
90
60
91
<template x-if="friends.length === 0">
61
92
<div class="empty-state">
62
-
<div style="font-size: 2rem">👥</div>
93
+
<img
94
+
class="svg-icon"
95
+
src="/src/assets/user-multiple.svg"
96
+
alt="Go Back Icon"
97
+
/>
63
98
<h3>No friends yet</h3>
64
99
<p>Add friends to start sharing locations</p>
65
100
<button @click="addFriend()">Add Friend</button>
···
72
107
<div class="content" style="text-align: center">
73
108
<h4>Admin Controls:</h4>
74
109
<div style="display: flex; justify-content: center">
75
-
<button @click="generateSignupKey()">Generate signup key</button>
110
+
<button @click="generateSignupKey()">
111
+
Generate signup key
112
+
</button>
76
113
</div>
77
-
<div style="display: flex; justify-content: center" x-show="newSignupKey != ''">
114
+
<div
115
+
style="display: flex; justify-content: center"
116
+
x-show="newSignupKey != ''"
117
+
>
78
118
<p>New signup key: <a x-text="newSignupKey"></a></p>
79
119
</div>
80
120
</div>
+4
-4
app/src/signup-page/signup.css
+4
-4
app/src/signup-page/signup.css
+2
-2
app/src/signup-page/signup.html
+2
-2
app/src/signup-page/signup.html
···
10
10
<div class="card">
11
11
<div class="header">
12
12
<div class="icon-circle">
13
-
<img src="/src/assets/pin.svg" alt="Pin Icon" />
13
+
<img src="/src/assets/pin-location.svg" alt="Pin Icon" />
14
14
</div>
15
15
<h1>PrivacyPin</h1>
16
16
<p>Connect with a server to start sharing</p>
···
53
53
class="btn-qr"
54
54
@click="await scanQR()"
55
55
>
56
-
<img src="/src/assets/qr.svg" alt="QR Icon" />
56
+
<img src="/src/assets/scan-qr.svg" alt="QR Icon" />
57
57
Scan QR Code
58
58
</button>
59
59