Porning/app
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Settings ui trial

Browse Source
This commit is contained in:
AINDUSTRIES
2026-07-28 20:22:05 +02:00
parent c50d203de4
commit e45036dec3
3 changed files with 78 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
app/components/settings.tsx Normal file
View File

@@ -0,0 +1,55 @@
import { Modal, Button, InputGroup, Input, TextField } from "@heroui/react";
import type { Dispatch, SetStateAction } from "react";
import { useAuth } from "~/hooks/auth";
export function Settings({
show,
setShow,
}: {
show: boolean;
setShow: Dispatch<SetStateAction<boolean>>;
}) {
const {user, loading, login, logout} = useAuth();
return (
<div>
<Modal isOpen={show}>
<Modal.Backdrop
shouldCloseOnInteractOutside={(_element) => {
setShow(false);
return true;
}}
>
<Modal.Container>
<Modal.Dialog>
<Modal.CloseTrigger
onPress={() => {
setShow(false);
}}
/>
<Modal.Header>
<Modal.Heading>Account settings</Modal.Heading>
</Modal.Header>
<Modal.Body>
<InputGroup>
<InputGroup.Prefix>Username</InputGroup.Prefix>
<InputGroup.Input defaultValue={user?.name}></InputGroup.Input>
</InputGroup>
</Modal.Body>
<Modal.Footer>
<Button
variant="secondary"
onPress={() => {
setShow(false);
}}
>
Cancel
</Button>
<Button>Save</Button>
</Modal.Footer>
</Modal.Dialog>
</Modal.Container>
</Modal.Backdrop>
</Modal>
</div>
);
}

15
app/components/user.tsx
View File

@@ -7,11 +7,15 @@ import {
Separator,
Spinner,
} from "@heroui/react";
import type { PropsWithChildren } from "react";
import { useState, type PropsWithChildren } from "react";
import { useAuth } from "~/hooks/auth";
import { Settings } from "./settings";
export default function User({ children }: PropsWithChildren) {
const { user, loading, login, logout } = useAuth();
const [showSettings, setShowSettings] = useState(false);
const toggleSettings = () => {setShowSettings(true)}
if (loading) {
return (
@@ -30,6 +34,8 @@ export default function User({ children }: PropsWithChildren) {
}
return (
<>
<Settings show={showSettings} setShow={setShowSettings}/>
<Dropdown>
<Button className="pr-0">
{children}
@@ -40,7 +46,7 @@ export default function User({ children }: PropsWithChildren) {
</Button>
<Dropdown.Popover>
<Dropdown.Menu
onAction={(key) => handleAction(String(key), logout)}
onAction={(key) => handleAction(String(key), logout, toggleSettings)}
>
<Dropdown.Item id="settings" textValue="Settings">
<Label>Settings</Label>
@@ -56,12 +62,13 @@ export default function User({ children }: PropsWithChildren) {
</Dropdown.Menu>
</Dropdown.Popover>
</Dropdown>
</>
);
}
function handleAction(key: string, logout: () => Promise<void>) {
function handleAction(key: string, logout: () => Promise<void>, toggleSettings: () => void) {
if (key === "settings") {
console.log("settings");
toggleSettings();
} else {
logout();
}

35
app/hooks/auth.tsx
View File

@@ -68,18 +68,6 @@ export function AuthProvider({ children }: PropsWithChildren) {
10000,
);
});
if (response === "nok") {
notify(
{
type: "danger",
loading: false,
title: "An error occured.",
message:
"An error occured during the information exchange between Steam and Porning.",
},
10000,
);
}
}
let data = await fetch(`${import.meta.env.VITE_BASE_API_URL}/me`, {
@@ -98,18 +86,7 @@ export function AuthProvider({ children }: PropsWithChildren) {
);
});
if (data === null) {
notify(
{
type: "danger",
loading: false,
title: "An error occured.",
message:
"An error occured while trying to fetch your user profile. Please contact an administrator.",
},
10000,
);
} else if (data !== undefined) {
if (data !== undefined) {
setUser(data);
notify(
{
@@ -140,7 +117,15 @@ export function AuthProvider({ children }: PropsWithChildren) {
})
.then(() => {
setUser(null);
notify({type: "success", loading: false, title: "Logout successful!", message: ""}, 2000)
notify(
{
type: "success",
loading: false,
title: "Logout successful!",
message: "",
},
2000,
);
})
.catch((e) => {
notify(