Skip to content

Commit b76e15f

Browse files
soup-bowlsoup-bowl
committed
Login aspect of settings split.
1 parent 3f689a5 commit b76e15f

File tree

4 files changed

+100
-45
lines changed

4 files changed

+100
-45
lines changed

‎frontend/src/App.tsx

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ import {
1717
} from "@ionic/react"
1818
import { IonReactRouter } from "@ionic/react-router"
1919
import { discOutline, searchOutline, settingsOutline, cogOutline } from "ionicons/icons"
20-
import { CollectionPage, SearchPage, SettingsPage } from "@/pages"
20+
import { CollectionPage, SettingsLoginPage, SearchPage, SettingsHomePage } from "@/pages"
2121
import { createIDBPersister } from "@/persister"
2222
import { DeviceMode } from "@/types"
2323
import { useAuth } from "@/hooks"
@@ -120,8 +120,11 @@ const App: React.FC = () => {
120120
{username ? <CollectionPage /> : <NotLoggedIn />}
121121
</Route>
122122
<Route path="/search">{username ? <SearchPage /> : <NotLoggedIn />}</Route>
123-
<Route path="/settings">
124-
<SettingsPage hasUpdate={needRefresh} onUpdate={() => updateServiceWorker(true)} />
123+
<Route exact path="/settings/login">
124+
<SettingsLoginPage />
125+
</Route>
126+
<Route exact path="/settings">
127+
<SettingsHomePage hasUpdate={needRefresh} onUpdate={() => updateServiceWorker(true)} />
125128
</Route>
126129
<Route exact path="/">
127130
<Redirect to="/collection" />

‎frontend/src/pages/Settings.tsx renamed to ‎frontend/src/pages/Settings/Home.tsx

Lines changed: 5 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -8,16 +8,13 @@ import {
88
IonButton,
99
IonCol,
1010
IonGrid,
11-
IonInput,
12-
IonInputPasswordToggle,
1311
IonItem,
1412
IonLabel,
1513
IonList,
1614
IonNote,
1715
IonPopover,
1816
IonRow,
1917
IonToggle,
20-
IonButtons,
2118
IonSelectOption,
2219
IonSelect,
2320
getConfig,
@@ -31,12 +28,10 @@ import { formatBytes } from "@/utils"
3128
import { DonateButton, InfoBanners } from "@/components"
3229
import { DeviceMode } from "@/types"
3330

34-
const SettingsPage: React.FC<{ hasUpdate: boolean; onUpdate: () => void }> = ({ hasUpdate, onUpdate }) => {
31+
const SettingsHomePage: React.FC<{ hasUpdate: boolean; onUpdate: () => void }> = ({ hasUpdate, onUpdate }) => {
3532
const queryClient = useQueryClient()
3633
const history = useHistory()
37-
const [{ username, token }, saveAuth, clearAuth] = useAuth()
38-
const [newUsername, setNewUsername] = useState<string>(username ?? "")
39-
const [newPassword, setNewPassword] = useState<string>(token ?? "")
34+
const [{ username }, _, clearAuth] = useAuth()
4035
const [storageInfo, setStorageInfo] = useState<{ usage: string; quota: string } | undefined>()
4136
const [imageQuality, setImageQuality, clearImagequality] = useSettings<boolean>("ImagesAreHQ", false)
4237
const [deviceTheme, setDeviceTheme] = useSettings<DeviceMode>("DeviceTheme", "ios")
@@ -55,13 +50,6 @@ const SettingsPage: React.FC<{ hasUpdate: boolean; onUpdate: () => void }> = ({
5550
}
5651
}, [])
5752

58-
const handleSave = () => {
59-
saveAuth(newUsername, newPassword)
60-
queryClient.clear()
61-
history.push("/")
62-
window.location.reload()
63-
}
64-
6553
const deleteData = () => {
6654
queryClient.clear()
6755
clearAuth()
@@ -90,39 +78,15 @@ const SettingsPage: React.FC<{ hasUpdate: boolean; onUpdate: () => void }> = ({
9078
<IonHeader>
9179
<IonToolbar>
9280
<IonTitle>Settings</IonTitle>
93-
<IonButtons slot="end">
94-
<IonButton strong={true} onClick={handleSave}>
95-
Save
96-
</IonButton>
97-
</IonButtons>
9881
</IonToolbar>
9982
<InfoBanners />
10083
</IonHeader>
10184
<IonContent className="ion-padding">
10285
<IonList inset={true}>
103-
<IonItem color={lightMode}>
104-
<IonInput
105-
label="Username"
106-
value={newUsername}
107-
onIonChange={(e) => setNewUsername(`${e.target.value}`)}
108-
/>
109-
</IonItem>
110-
<IonItem color={lightMode}>
111-
<IonInput
112-
type="password"
113-
label="Token"
114-
value={newPassword}
115-
onIonChange={(e) => setNewPassword(`${e.target.value}`)}
116-
>
117-
<IonInputPasswordToggle slot="end" />
118-
</IonInput>
86+
<IonItem color={lightMode} button={true} routerLink="/settings/login">
87+
<IonLabel>Discogs {username ? `account (${username})` : "login"}</IonLabel>
11988
</IonItem>
12089
</IonList>
121-
<IonNote color="medium" class="ion-margin-horizontal" style={{ display: "block" }}>
122-
Until OAuth is implemented, we currently use Access Token for authentication. To get your token,{" "}
123-
<a href="https://www.discogs.com/settings/developers">visit the Developer page</a> and copy your
124-
token, or click Generate if you do not have one.
125-
</IonNote>
12690
<IonList inset={true}>
12791
<IonItem color={lightMode}>
12892
<IonToggle checked={imageQuality} onIonChange={(e) => setImageQuality(e.detail.checked)}>
@@ -245,4 +209,4 @@ const SettingsPage: React.FC<{ hasUpdate: boolean; onUpdate: () => void }> = ({
245209
)
246210
}
247211

248-
export default SettingsPage
212+
export default SettingsHomePage

‎frontend/src/pages/Settings/Login.tsx

Lines changed: 87 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
1+
import {
2+
IonPage,
3+
IonHeader,
4+
IonToolbar,
5+
IonTitle,
6+
IonContent,
7+
IonButton,
8+
IonInput,
9+
IonInputPasswordToggle,
10+
IonItem,
11+
IonList,
12+
IonNote,
13+
IonButtons,
14+
getConfig,
15+
IonBackButton,
16+
} from "@ionic/react"
17+
import { useHistory } from "react-router"
18+
import { useQueryClient } from "@tanstack/react-query"
19+
import { useState } from "react"
20+
import { useAuth } from "@/hooks"
21+
import { InfoBanners } from "@/components"
22+
23+
const SettingsLoginPage: React.FC = () => {
24+
const queryClient = useQueryClient()
25+
const history = useHistory()
26+
const [{ username, token }, saveAuth] = useAuth()
27+
const [newUsername, setNewUsername] = useState<string>(username ?? "")
28+
const [newPassword, setNewPassword] = useState<string>(token ?? "")
29+
const ionConfig = getConfig()
30+
const currentMode = ionConfig?.get("mode") || "ios"
31+
32+
const handleSave = () => {
33+
saveAuth(newUsername, newPassword)
34+
queryClient.clear()
35+
history.push("/")
36+
window.location.reload()
37+
}
38+
39+
const lightMode = currentMode === "ios" ? "light" : undefined
40+
41+
return (
42+
<IonPage>
43+
<IonHeader>
44+
<IonToolbar>
45+
<IonButtons slot="start" collapse={true}>
46+
<IonBackButton />
47+
</IonButtons>
48+
<IonTitle>Login</IonTitle>
49+
<IonButtons slot="end">
50+
<IonButton strong={true} onClick={handleSave}>
51+
Save
52+
</IonButton>
53+
</IonButtons>
54+
</IonToolbar>
55+
<InfoBanners />
56+
</IonHeader>
57+
<IonContent className="ion-padding">
58+
<IonList inset={true}>
59+
<IonItem color={lightMode}>
60+
<IonInput
61+
label="Username"
62+
value={newUsername}
63+
onIonChange={(e) => setNewUsername(`${e.target.value}`)}
64+
/>
65+
</IonItem>
66+
<IonItem color={lightMode}>
67+
<IonInput
68+
type="password"
69+
label="Token"
70+
value={newPassword}
71+
onIonChange={(e) => setNewPassword(`${e.target.value}`)}
72+
>
73+
<IonInputPasswordToggle slot="end" />
74+
</IonInput>
75+
</IonItem>
76+
</IonList>
77+
<IonNote color="medium" class="ion-margin-horizontal" style={{ display: "block" }}>
78+
Until OAuth is implemented, we currently use Access Token for authentication. To get your token,{" "}
79+
<a href="https://www.discogs.com/settings/developers">visit the Developer page</a> and copy your
80+
token, or click Generate if you do not have one.
81+
</IonNote>
82+
</IonContent>
83+
</IonPage>
84+
)
85+
}
86+
87+
export default SettingsLoginPage

‎frontend/src/pages/index.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
11
export { default as CollectionPage } from "./Collection"
22
export { default as SearchPage } from "./Search"
3-
export { default as SettingsPage } from "./Settings"
3+
export { default as SettingsHomePage } from "./Settings/Home"
4+
export { default as SettingsLoginPage } from "./Settings/Login"

0 commit comments

Comments
 (0)