a simple web player for subsonic
tinysub.devins.page
subsonic
navidrome
javascript
1<script lang="ts">
2 import { auth, login, t } from "./app.svelte.js";
3 import Modal from "./Modal.svelte";
4
5 let server = $state(""),
6 user = $state(""),
7 password = $state("");
8</script>
9
10<Modal open={!auth.ok} title={t("login")} closable={false}>
11 <form
12 onsubmit={(e) => {
13 e.preventDefault();
14 login(server, user, password);
15 }}
16 >
17 <input
18 bind:value={server}
19 placeholder={t("server_placeholder")}
20 required
21 autocomplete="url"
22 />
23 <input
24 bind:value={user}
25 placeholder={t("username_placeholder")}
26 required
27 autocomplete="username"
28 />
29 <input
30 bind:value={password}
31 type="password"
32 placeholder={t("password_placeholder")}
33 autocomplete="current-password"
34 />
35 <button type="submit" disabled={auth.busy}
36 >{auth.busy ? t("busy") : t("login")}</button
37 >
38 <p class="err">
39 <a
40 target="_blank"
41 href="https://tangled.org/devins.page/tinysub#i-cant-log-in"
42 class="auth-notice">help, i can't log in!</a
43 >
44 </p>
45 {#if auth.err}<p class="err">{auth.err}</p>{/if}
46 </form>
47</Modal>
48
49<style>
50 form {
51 display: flex;
52 flex-direction: column;
53 gap: 0.5rem;
54 }
55 .err {
56 color: red;
57 margin: 0;
58 }
59 :global(body.is-tauri) .auth-notice {
60 display: none;
61 }
62</style>