azom.dev
kishka.cc
app/src/add-friend-page/add-friend.css
app/src/add-friend-page/add-friend.css
This is a binary file and will not be displayed.
app/src/add-friend-page/add-friend.html
app/src/add-friend-page/add-friend.html
This is a binary file and will not be displayed.
-15
app/src/add-friend-page/add-friend.ts
-15
app/src/add-friend-page/add-friend.ts
···
1
-
// we need 2 paths for the users to take or we could add a bit of complexity code wise and make both the same...
2
-
//
3
-
// later it will be qr codes, but for now:
4
-
// for a given user:
5
-
// - show their own user id
6
-
// - show a cryptographically random number
7
-
// - have a text input to enter the friend's user id
8
-
// - have a text input to enter the friend's cryprgraphic number
9
-
//
10
-
// we thus need the random numbers to have a symmetric operation that gives something we can use to generate a base friend key
11
-
// xor works probably very well here actually
12
-
//
13
-
// to start, we'll have a static AES-GCM friend key that never rotates
14
-
15
-
// we first need to merge ui with auth tho
-4
app/src/assets/pin.svg
-4
app/src/assets/pin.svg
···
1
-
<?xml version="1.0" encoding="utf-8"?>
2
-
<svg width="800px" height="800px" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
3
-
<path fill-rule="evenodd" clip-rule="evenodd" d="M3.37892 10.2236L8 16L12.6211 10.2236C13.5137 9.10788 14 7.72154 14 6.29266V6C14 2.68629 11.3137 0 8 0C4.68629 0 2 2.68629 2 6V6.29266C2 7.72154 2.4863 9.10788 3.37892 10.2236ZM8 8C9.10457 8 10 7.10457 10 6C10 4.89543 9.10457 4 8 4C6.89543 4 6 4.89543 6 6C6 7.10457 6.89543 8 8 8Z" fill="#000000"/>
4
-
</svg>
-13
app/src/assets/qr.svg
-13
app/src/assets/qr.svg
···
1
-
<?xml version="1.0" encoding="utf-8"?>
2
-
3
-
<svg fill="#000000" width="800px" height="800px" viewBox="0 -0.09 122.88 122.88" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="enable-background:new 0 0 122.88 122.7" xml:space="preserve">
4
-
5
-
<style type="text/css">.st0{fill-rule:evenodd;clip-rule:evenodd;}</style>
6
-
7
-
<g>
8
-
9
-
<path class="st0" d="M0.18,0h44.63v44.45H0.18V0L0.18,0z M111.5,111.5h11.38v11.2H111.5V111.5L111.5,111.5z M89.63,111.48h11.38 v10.67H89.63h-0.01H78.25v-21.82h11.02V89.27h11.21V67.22h11.38v10.84h10.84v11.2h-10.84v11.2h-11.21h-0.17H89.63V111.48 L89.63,111.48z M55.84,89.09h11.02v-11.2H56.2v-11.2h10.66v-11.2H56.02v11.2H44.63v-11.2h11.2V22.23h11.38v33.25h11.02v11.2h10.84 v-11.2h11.38v11.2H89.63v11.2H78.25v22.05H67.22v22.23H55.84V89.09L55.84,89.09z M111.31,55.48h11.38v11.2h-11.38V55.48 L111.31,55.48z M22.41,55.48h11.38v11.2H22.41V55.48L22.41,55.48z M0.18,55.48h11.38v11.2H0.18V55.48L0.18,55.48z M55.84,0h11.38 v11.2H55.84V0L55.84,0z M0,78.06h44.63v44.45H0V78.06L0,78.06z M10.84,88.86h22.95v22.86H10.84V88.86L10.84,88.86z M78.06,0h44.63 v44.45H78.06V0L78.06,0z M88.91,10.8h22.95v22.86H88.91V10.8L88.91,10.8z M11.02,10.8h22.95v22.86H11.02V10.8L11.02,10.8z"/>
10
-
11
-
</g>
12
-
13
-
</svg>
+4
app/src/assets/scan-qr.svg
+4
app/src/assets/scan-qr.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="M7.55556 4H5C4.44771 4 4 4.44772 4 5V7.55556M16.4444 4H19C19.5523 4 20 4.44772 20 5V7.55556M20 16.4444V19C20 19.5523 19.5523 20 19 20H16.4444M7.55556 20H5C4.44771 20 4 19.5523 4 19V16.4444M5.77778 12.8889H6.66667M8.44444 12.8889H9.33333M5.77778 11H10.1111C10.6634 11 11.1111 10.5523 11.1111 10V5.77778M12.8889 5.77778V11.1111M16.4444 11H18.2222M14.6667 11H15.1111M13.7778 12.8889H15.1111M17 12.8889H18.2222M18.2222 15H15.5556M15.5556 16.8889V18.2222M13.7778 15V18.2222M12 18.2222V12.8889H11.1111M10.2222 14.6667V18.2222M18.2222 17.7778V17.7778C18.2222 17.5323 18.0232 17.3333 17.7778 17.3333V17.3333C17.5323 17.3333 17.3333 17.5323 17.3333 17.7778V17.7778C17.3333 18.0232 17.5323 18.2222 17.7778 18.2222V18.2222C18.0232 18.2222 18.2222 18.0232 18.2222 17.7778ZM18.2222 6.77778V8.33333C18.2222 8.88562 17.7745 9.33333 17.2222 9.33333H15.6667C15.1144 9.33333 14.6667 8.88562 14.6667 8.33333V6.77778C14.6667 6.22549 15.1144 5.77778 15.6667 5.77778H17.2222C17.7745 5.77778 18.2222 6.22549 18.2222 6.77778ZM6.77778 9.33333H8.33333C8.88562 9.33333 9.33333 8.88562 9.33333 8.33333V6.77778C9.33333 6.22549 8.88562 5.77778 8.33333 5.77778H6.77778C6.22549 5.77778 5.77778 6.22549 5.77778 6.77778V8.33333C5.77778 8.88562 6.22549 9.33333 6.77778 9.33333ZM7.44444 18.2222H6.77778C6.22549 18.2222 5.77778 17.7745 5.77778 17.2222V15.6667C5.77778 15.1144 6.22549 14.6667 6.77778 14.6667H7.44444C7.99673 14.6667 8.44444 15.1144 8.44444 15.6667V17.2222C8.44444 17.7745 7.99673 18.2222 7.44444 18.2222Z" stroke="#464455" stroke-linecap="round" stroke-linejoin="round"/>
4
+
</svg>
+116
app/src/settings-page copy/settings.css
+116
app/src/settings-page copy/settings.css
···
1
+
body {
2
+
font-family: system-ui, sans-serif;
3
+
background: #f9fafb;
4
+
display: flex;
5
+
align-items: center;
6
+
justify-content: center;
7
+
height: 100vh;
8
+
margin: 0;
9
+
}
10
+
11
+
.card {
12
+
max-width: 90%;
13
+
background: white;
14
+
border: 1px solid #d1d5db;
15
+
border-radius: 8px;
16
+
padding: 1.5rem;
17
+
box-sizing: border-box;
18
+
}
19
+
20
+
.header {
21
+
text-align: center;
22
+
margin-bottom: 1.5rem;
23
+
}
24
+
25
+
.icon-circle {
26
+
width: 64px;
27
+
height: 64px;
28
+
background: #dbeafe;
29
+
border-radius: 50%;
30
+
display: flex;
31
+
align-items: center;
32
+
justify-content: center;
33
+
margin: 0 auto 1rem;
34
+
}
35
+
36
+
.icon-circle img {
37
+
width: 32px;
38
+
height: 32px;
39
+
}
40
+
41
+
h1 {
42
+
font-size: 1.5rem;
43
+
}
44
+
45
+
p {
46
+
font-size: 0.9rem;
47
+
color: #6b7280;
48
+
}
49
+
50
+
.actions {
51
+
display: flex;
52
+
flex-direction: column;
53
+
gap: 1rem;
54
+
}
55
+
56
+
label {
57
+
display: block;
58
+
font-size: 0.85rem;
59
+
font-weight: 600;
60
+
margin-bottom: 0.25rem;
61
+
}
62
+
63
+
input {
64
+
width: 100%;
65
+
padding: 0.5rem 0.75rem;
66
+
border: 1px solid #d1d5db;
67
+
border-radius: 4px;
68
+
font-size: 0.95rem;
69
+
box-sizing: border-box;
70
+
}
71
+
72
+
input:focus {
73
+
outline: none;
74
+
border-color: #2563eb;
75
+
}
76
+
77
+
button {
78
+
width: 100%;
79
+
padding: 0.6rem;
80
+
font-size: 0.95rem;
81
+
border-radius: 4px;
82
+
cursor: pointer;
83
+
/*transition: background 0.2s ease;*/
84
+
display: flex;
85
+
align-items: center;
86
+
justify-content: center;
87
+
}
88
+
89
+
.btn-primary {
90
+
background: #2563eb;
91
+
color: white;
92
+
border: none;
93
+
}
94
+
95
+
.btn-primary:hover {
96
+
background: #1d4ed8;
97
+
}
98
+
99
+
.btn-secondary {
100
+
background: white;
101
+
gap: 0.5rem;
102
+
border: 1px solid #d1d5db;
103
+
}
104
+
105
+
.btn-secondary:hover {
106
+
background: #f3f4f6;
107
+
}
108
+
109
+
.btn-secondary img {
110
+
width: 16px;
111
+
height: 16px;
112
+
}
113
+
114
+
.hint {
115
+
font-size: 0.75rem;
116
+
}
+24
app/src/settings-page copy/settings.html
+24
app/src/settings-page copy/settings.html
···
1
+
<!doctype html>
2
+
<html lang="en">
3
+
<head>
4
+
<meta charset="UTF-8" />
5
+
<script type="module" src="./settings.ts"></script>
6
+
<link rel="stylesheet" href="./settings.css" />
7
+
</head>
8
+
9
+
<body>
10
+
<div class="card">
11
+
<div class="actions" x-data="settingsPageState">
12
+
<h3>Settings</h3>
13
+
14
+
<button class="btn-primary" @click="goto('home')">
15
+
Back to Home
16
+
</button>
17
+
18
+
<button class="btn-secondary" @click="await debugLogout()">
19
+
Signout
20
+
</button>
21
+
</div>
22
+
</div>
23
+
</body>
24
+
</html>
+15
app/src/settings-page copy/settings.ts
+15
app/src/settings-page copy/settings.ts
···
1
+
import Alpine from "alpinejs";
2
+
import { Store } from "../utils/store.ts";
3
+
import { goto } from "../utils/tools.ts";
4
+
5
+
Alpine.data("settingsPageState", () => ({
6
+
async debugLogout() {
7
+
await Store.reset();
8
+
goto("signup");
9
+
},
10
+
goto(newLocation: string) {
11
+
goto(newLocation);
12
+
},
13
+
}));
14
+
15
+
Alpine.start();
+3
-3
app/src/signup-page/signup.css
+3
-3
app/src/signup-page/signup.css
+34
-7
app/src/signup-page/signup.html
+34
-7
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>
···
21
21
<div class="actions" x-data="signupPageState">
22
22
<div>
23
23
<label for="server">Server Address</label>
24
-
<input id="server" type="url" placeholder="https://your-server.com" x-model="serverAddress" required />
24
+
<input
25
+
id="server"
26
+
type="url"
27
+
placeholder="https://your-server.com"
28
+
x-model="serverAddress"
29
+
required
30
+
/>
25
31
</div>
26
32
27
33
<div>
28
34
<label for="key">Signup Key</label>
29
-
<input id="key" type="password" placeholder="Enter your signup key" x-model="signupKey" required />
35
+
<input
36
+
id="key"
37
+
type="password"
38
+
placeholder="Enter your signup key"
39
+
x-model="signupKey"
40
+
required
41
+
/>
30
42
</div>
31
43
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" />
44
+
<p class="hint">
45
+
Scan a QR code to automatically fill both server address and
46
+
signup key
47
+
</p>
48
+
<button
49
+
type="button"
50
+
x-bind:disabled="isDoingStuff"
51
+
class="btn-qr"
52
+
@click="await scanQR()"
53
+
>
54
+
<img src="/src/assets/scan-qr.svg" alt="QR Icon" />
35
55
Scan QR Code
36
56
</button>
37
57
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>
58
+
<button
59
+
class="btn-primary"
60
+
x-bind:disabled="isDoingStuff"
61
+
@click="await signup()"
62
+
>
63
+
<span x-show="isDoingStuff">Connecting...</span>
64
+
<span x-show="!isDoingStuff">Connect</span>
65
+
</button>
39
66
</div>
40
67
</div>
41
68
</body>