WIP PWA for Grain
feat: add settings page with sign out
+98
+98
src/components/pages/grain-settings.js
+98
src/components/pages/grain-settings.js
···
1
+
import { LitElement, html, css } from 'lit';
2
+
import { router } from '../../router.js';
3
+
import { auth } from '../../services/auth.js';
4
+
import '../atoms/grain-icon.js';
5
+
6
+
export class GrainSettings extends LitElement {
7
+
static styles = css`
8
+
:host {
9
+
display: block;
10
+
min-height: 100vh;
11
+
min-height: 100dvh;
12
+
padding-bottom: 80px;
13
+
}
14
+
.header {
15
+
display: flex;
16
+
align-items: center;
17
+
gap: var(--space-sm);
18
+
padding: var(--space-md) var(--space-sm);
19
+
}
20
+
@media (min-width: 600px) {
21
+
.header {
22
+
padding-left: 0;
23
+
padding-right: 0;
24
+
}
25
+
}
26
+
.back-button {
27
+
background: none;
28
+
border: none;
29
+
padding: 8px;
30
+
cursor: pointer;
31
+
color: var(--color-text-primary);
32
+
margin-left: -8px;
33
+
}
34
+
h1 {
35
+
font-size: var(--font-size-md);
36
+
font-weight: var(--font-weight-semibold);
37
+
color: var(--color-text-primary);
38
+
margin: 0;
39
+
}
40
+
.settings-list {
41
+
border-top: 1px solid var(--color-border);
42
+
}
43
+
.settings-row {
44
+
display: flex;
45
+
align-items: center;
46
+
gap: var(--space-sm);
47
+
padding: var(--space-md) var(--space-sm);
48
+
background: none;
49
+
border: none;
50
+
border-bottom: 1px solid var(--color-border);
51
+
width: 100%;
52
+
cursor: pointer;
53
+
color: var(--color-text-primary);
54
+
font-size: var(--font-size-sm);
55
+
text-align: left;
56
+
}
57
+
@media (min-width: 600px) {
58
+
.settings-row {
59
+
padding-left: 0;
60
+
padding-right: 0;
61
+
}
62
+
}
63
+
.settings-row:active {
64
+
background: var(--color-bg-elevated);
65
+
}
66
+
.settings-row.danger {
67
+
color: #ff4444;
68
+
}
69
+
`;
70
+
71
+
#goBack() {
72
+
history.back();
73
+
}
74
+
75
+
#signOut() {
76
+
auth.logout();
77
+
router.push('/');
78
+
}
79
+
80
+
render() {
81
+
return html`
82
+
<div class="header">
83
+
<button class="back-button" @click=${this.#goBack}>
84
+
<grain-icon name="back" size="20"></grain-icon>
85
+
</button>
86
+
<h1>Settings</h1>
87
+
</div>
88
+
<div class="settings-list">
89
+
<button class="settings-row danger" @click=${this.#signOut}>
90
+
<grain-icon name="logout" size="18"></grain-icon>
91
+
Sign Out
92
+
</button>
93
+
</div>
94
+
`;
95
+
}
96
+
}
97
+
98
+
customElements.define('grain-settings', GrainSettings);