diff options
Diffstat (limited to 'pages')
| -rw-r--r-- | pages/login.tsx | 2 | ||||
| -rw-r--r-- | pages/register.tsx | 2 | ||||
| -rw-r--r-- | pages/search.tsx | 4 | ||||
| -rw-r--r-- | pages/user.tsx | 60 |
4 files changed, 52 insertions, 16 deletions
diff --git a/pages/login.tsx b/pages/login.tsx index 9df9490..1cbacb1 100644 --- a/pages/login.tsx +++ b/pages/login.tsx @@ -49,7 +49,7 @@ export default function LoginPage() { }}> <Vierkant> <form onSubmit={submitLogin}> - <Input autocomplete="username" id="email" label="email of gebruikersnaam" style={{ marginBottom: 12 }}></Input> + <Input autofocus autocomplete="username" id="email" label="email of gebruikersnaam" style={{ marginBottom: 12 }}></Input> <Input autocomplete="current-password" id="password" label="wachtwoord" type="password"></Input> <div style={{ marginTop: 24, diff --git a/pages/register.tsx b/pages/register.tsx index 3616bb8..5426cbc 100644 --- a/pages/register.tsx +++ b/pages/register.tsx @@ -81,7 +81,7 @@ export default function RegisterPage() { }}> <Vierkant> <form onSubmit={submitRegister}> - <Input autocomplete="username" id="username" label="gebruikersnaam" style={{ marginBottom: 12 }}></Input> + <Input autofocus autocomplete="username" id="username" label="gebruikersnaam" style={{ marginBottom: 12 }}></Input> <Input autocomplete="email" id="email" label="email" style={{ marginBottom: 12 }}></Input> <Input autocomplete="new-password" id="password" label="wachtwoord" type="password"></Input> <Button text="Registreren" style={{ marginTop: 24 }} onclick={submitRegister}></Button> diff --git a/pages/search.tsx b/pages/search.tsx index 963fcba..e2825e8 100644 --- a/pages/search.tsx +++ b/pages/search.tsx @@ -32,7 +32,7 @@ function SearchResults(props: { userList: Array<userInfo> }) { function SearchResult(props: { user: userInfo }) { return <Vierkant style={{ padding: 12 - }} fullwidth href={`/user?id=${props.user.id}`}> + }} fullwidth href={"/user?id=" + props.user.id}> <div style={{ position: "relative" }}> <AccountAvatar size={48} dummy/> <div style={{ @@ -55,7 +55,7 @@ function SearchBar(props: { marginBottom: 24 }}> <form onSubmit={props.searchFunction}> - <Input id="searchBar" label="Zoeken voor gebruikers..." autocomplete="off" dark style={{ + <Input id="searchBar" label="Zoeken voor gebruikers..." autocomplete="off" dark autofocus style={{ backgroundColor: "var(--background)", color: "var(--text)", padding: 14, diff --git a/pages/user.tsx b/pages/user.tsx index fe27f6d..618ae9e 100644 --- a/pages/user.tsx +++ b/pages/user.tsx @@ -1,7 +1,7 @@ import { ReactNode, Children, useState, useEffect } from 'react'; import Icon from '@mdi/react'; -import { useRouter } from 'next/router'; import axios from 'axios'; +import useSWR from 'swr'; import { NavBar } from '../components/navbar'; import { CenteredPage, PageTitle } from '../components/page'; @@ -15,6 +15,8 @@ import AssignmentIndOutlinedIcon from '@material-ui/icons/AssignmentIndOutlined' import ArrowDownwardOutlinedIcon from '@material-ui/icons/ArrowDownwardOutlined'; import ArrowUpwardOutlinedIcon from '@material-ui/icons/ArrowUpwardOutlined'; import PeopleOutlineOutlinedIcon from '@material-ui/icons/PeopleOutlineOutlined'; +import EditOutlinedIcon from '@material-ui/icons/EditOutlined'; +import SettingsOutlinedIcon from '@material-ui/icons/SettingsOutlined'; import { mdiAccountCancelOutline, mdiEqual, @@ -68,9 +70,10 @@ function InfoSection(props: { children: ReactNode }) { export default function AccountPage() { var [gotData, setGotData] = useState(false); var [user, setUser] = useState<userInfo>(); + var [ownPage, setOwnPage] = useState(false); typeof window !== "undefined" && console.log(new URLSearchParams(window.location.search).get("id")) - useEffect(() => { + useEffect(() => {(async() => { if (gotData) return; if (typeof window === "undefined") return; @@ -78,20 +81,33 @@ export default function AccountPage() { var loggedIn = document.cookie.includes("token"); if (id || loggedIn) { - axios.request<userInfo>({ - method: id ? "post" : "get", + var self_id = ""; + if (loggedIn) { + var selfReq = await axios.request<userInfo>({ + method: "get", + url: `/api/user/info`, + headers: {"content-type": "application/json"} + }); + + self_id = selfReq?.data.id; + } + + if (id == self_id || !id) setOwnPage(true); + + var userReq = await axios.request<userInfo>({ + method: "post", url: `/api/user/info`, headers: {"content-type": "application/json"}, - data: id ? { id } : undefined - }) - .then(request => setUser(request.data)) - .catch(() => {}); + data: { "id": id || self_id } + }); + + setUser(userReq.data); } else { window.history.go(-1); } setGotData(true); - }) + })()}) return <div> <NavBar/> @@ -114,13 +130,33 @@ export default function AccountPage() { height: "40px", bottom: 24, left: 24 + 12 + 128, right: 24 }}> - <IconLabelButton icon={<PersonAddOutlinedIcon/>} text="Vriendschapsverzoek"/> - <IconLabelButton icon={<Icon size={1} path={mdiAccountCancelOutline}/>} text="Blokkeren"/> + { + ownPage ? + <div> + <IconLabelButton icon={<SettingsOutlinedIcon/>} text="Instellingen"/> + <IconLabelButton icon={<EditOutlinedIcon/>} text="Status bewerken"/> + </div> : + <div> + <IconLabelButton icon={<Icon size={1} path={mdiAccountCancelOutline}/>} text="Blokkeren"/> + <IconLabelButton icon={<PersonAddOutlinedIcon/>} text="Vriendschapsverzoek"/> + </div> + } </div> </Vierkant> <InfoSection> <InfoModule icon={<Icon size={1} path={mdiCheckboxBlankCircle} color="var(--disk-b-text)"/>} label="Online"/> - <InfoModule icon={<AssignmentIndOutlinedIcon/>} label="Lid sinds 14 december 2020"/> + <InfoModule icon={<AssignmentIndOutlinedIcon/>} label={ (() => { + var memberSince = "Lid sinds"; + + var registered = new Date(user?.registered); + memberSince += " " + registered.toLocaleString("nl-nl", { month: "long", day: "numeric" }); + + var currentYear = new Date().getFullYear(); + var memberYear = registered.getFullYear(); + if (currentYear != memberYear) memberSince += " " + memberYear; + + return memberSince; + })() }/> <InfoModule icon={<PeopleOutlineOutlinedIcon/>} label="2 vrienden"/> <InfoModule icon={<Icon size={1} path={mdiEarth}/>} label="Nederland"/> </InfoSection> |