Refactor account page structure and update UI
- Move user settings form to dedicated /account/settings route - Update PageHeader icon from Settings to AccountCircle for clarity - Update debug log labels in auth config for better readability 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
33
app/[locale]/account/settings/page.tsx
Normal file
33
app/[locale]/account/settings/page.tsx
Normal file
@@ -0,0 +1,33 @@
|
|||||||
|
import { FC, Suspense } from 'react';
|
||||||
|
import { Main } from '@/app/ui/Main';
|
||||||
|
import { UserSettingsForm as UserSettingsForm, UserSettingsFormSkeleton } from '@/app/ui/UserSettingsForm';
|
||||||
|
import { getUserSettings } from '@/app/lib/actions/userSettingsActions';
|
||||||
|
|
||||||
|
const UserSettingsPage: FC = async () => {
|
||||||
|
const userSettings = await getUserSettings();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Main>
|
||||||
|
<div className="flex flex-col items-center">
|
||||||
|
<UserSettingsForm userSettings={userSettings} />
|
||||||
|
</div>
|
||||||
|
</Main>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const Page: FC = () => {
|
||||||
|
return (
|
||||||
|
<Suspense fallback={
|
||||||
|
<Main>
|
||||||
|
<div className="flex flex-col items-center">
|
||||||
|
<div className="h-8 w-48 skeleton mb-4"></div>
|
||||||
|
<UserSettingsFormSkeleton />
|
||||||
|
</div>
|
||||||
|
</Main>
|
||||||
|
}>
|
||||||
|
<UserSettingsPage />
|
||||||
|
</Suspense>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Page;
|
||||||
@@ -35,8 +35,8 @@ export const authConfig: NextAuthConfig = {
|
|||||||
// see: https://stackoverflow.com/questions/70409219/get-user-id-from-session-in-next-auth-client
|
// see: https://stackoverflow.com/questions/70409219/get-user-id-from-session-in-next-auth-client
|
||||||
jwt({ token, account, user }) {
|
jwt({ token, account, user }) {
|
||||||
if (account) {
|
if (account) {
|
||||||
// console.log("(jwt) account:", account);
|
// console.log("(JWT) account:", account);
|
||||||
// console.log("(jwt) user:", user);
|
// console.log("(JWT) user:", user);
|
||||||
token.accessToken = account.access_token;
|
token.accessToken = account.access_token;
|
||||||
// attach Google account ID to the token
|
// attach Google account ID to the token
|
||||||
token.piggyback_providerAccountId = account.providerAccountId;
|
token.piggyback_providerAccountId = account.providerAccountId;
|
||||||
@@ -51,7 +51,7 @@ export const authConfig: NextAuthConfig = {
|
|||||||
if(session.user && token) {
|
if(session.user && token) {
|
||||||
// assign Google account ID from the token to the Session user ID
|
// assign Google account ID from the token to the Session user ID
|
||||||
session.user.id = token.piggyback_providerAccountId;
|
session.user.id = token.piggyback_providerAccountId;
|
||||||
// console.log("(jwt) token:", token);
|
// console.log("(SESSION) token:", token);
|
||||||
}
|
}
|
||||||
return session;
|
return session;
|
||||||
},
|
},
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
import Image from "next/image";
|
import Image from "next/image";
|
||||||
import Link from "next/link";
|
import Link from "next/link";
|
||||||
import { SelectLanguage } from "./SelectLanguage";
|
import { SelectLanguage } from "./SelectLanguage";
|
||||||
import Settings from "@mui/icons-material/Settings";
|
import AccountCircle from "@mui/icons-material/AccountCircle";
|
||||||
|
|
||||||
export const PageHeader = () =>
|
export const PageHeader = () =>
|
||||||
<div className="navbar bg-base-100 mb-6">
|
<div className="navbar bg-base-100 mb-6">
|
||||||
@@ -9,6 +9,6 @@ export const PageHeader = () =>
|
|||||||
<span className="grow"> </span>
|
<span className="grow"> </span>
|
||||||
<SelectLanguage />
|
<SelectLanguage />
|
||||||
<Link href="/account/" className="btn btn-ghost btn-circle">
|
<Link href="/account/" className="btn btn-ghost btn-circle">
|
||||||
<Settings className="w-6 h-6" />
|
<AccountCircle />
|
||||||
</Link>
|
</Link>
|
||||||
</div>
|
</div>
|
||||||
Reference in New Issue
Block a user