Merge pull request #2 from walnuts1018/add-login

add

front/package.json

@@ -9,19 +9,24 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@emotion/react": "^11.11.1",
+    "@emotion/styled": "^11.11.0",
+    "@mui/material": "^5.14.15",
+    "next": "14.0.1",
+    "next-auth": "^4.24.4",
     "react": "^18",
     "react-dom": "^18",
-    "next": "14.0.1"
+    "sharp": "^0.32.6"
   },
   "devDependencies": {
-    "typescript": "^5",
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",
     "autoprefixer": "^10.0.1",
+    "eslint": "^8",
+    "eslint-config-next": "14.0.1",
     "postcss": "^8",
     "tailwindcss": "^3.3.0",
-    "eslint": "^8",
-    "eslint-config-next": "14.0.1"
+    "typescript": "^5"
   }
 }

front/public/favicons/browserconfig.xml

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig>
+    <msapplication>
+        <tile>
+            <square70x70logo src="/favicons/mstile-70x70.png"/>
+            <square150x150logo src="/favicons/mstile-150x150.png"/>
+            <square310x310logo src="/favicons/mstile-310x310.png"/>
+            <TileColor>#f9842c</TileColor>
+        </tile>
+    </msapplication>
+</browserconfig>

front/public/favicons/site.webmanifest

@@ -0,0 +1,19 @@
+{
+  "name": "",
+  "short_name": "",
+  "icons": [
+    {
+      "src": "/favicons/android-chrome-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "/favicons/android-chrome-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    }
+  ],
+  "theme_color": "#ffffff",
+  "background_color": "#ffffff",
+  "display": "standalone"
+}

front/src/app/Header.tsx

@@ -0,0 +1,35 @@
+import Image from "next/image";
+import Link from "next/link";
+import { LoginButton, LogoutButton } from "./authbuttons";
+export function Header() {
+  return (
+    <>
+      <header className="fixed top-0 z-50 w-full ">
+        <div className="flex justify-center w-full h-20">
+          <div className="w-11/12 flex items-center justify-between   text-black font-bold font-Nunito text-2xl px-1 space-x-1">
+            <div className="flex items-center">
+              <Image
+                src="/logo.jpg"
+                alt="logo"
+                width={40}
+                height={40}
+                style={{ objectFit: "contain" }}
+                className="min-w-[40px] max-w-[40px] mx-1"
+              />
+              <Link className="logo" href="/">
+                OpenChokin
+              </Link>
+            </div>
+            <div className="flex items-center space-x-2 font-Noto font-semibold text-xl">
+              <LoginButton />
+              <LogoutButton />
+            </div>
+          </div>
+        </div>
+        <div className="flex justify-center w-full bg-white border-0 ">
+          <div className="w-11/12 h-[3px] bg-gray-200 px-20"></div>
+        </div>
+      </header>
+    </>
+  );
+}

front/src/app/api/auth/[...nextauth]/route.tsx

@@ -0,0 +1,57 @@
+import NextAuth from "next-auth";
+import { JWT } from "next-auth/jwt";
+import ZitadelProvider from "next-auth/providers/zitadel";
+import { custom } from "openid-client";
+
+custom.setHttpOptionsDefaults({
+  timeout: 10000,
+});
+
+const authOptions = {
+  providers: [
+    ZitadelProvider({
+      clientId: process.env.ZITADEL_CLIENT_ID as string,
+      clientSecret: process.env.ZITADEL_CLIENT_SECRET as string,
+      issuer: process.env.ZITADEL_URL,
+    }),
+  ],
+  callbacks: {
+    jwt: async ({
+      token,
+      user,
+      account,
+      profile,
+      isNewUser,
+    }: {
+      token: JWT;
+      user?: any;
+      account?: any;
+      profile?: any;
+      isNewUser?: boolean;
+    }) => {
+      if (user) {
+        token.user = user;
+        const u = user as any;
+        token.role = u.role;
+      }
+      if (account) {
+        token.accessToken = account.access_token;
+      }
+      return token;
+    },
+    session: ({ session, token }: { token: JWT; session?: any }) => {
+      token.accessToken;
+      return {
+        ...session,
+        user: {
+          ...session.user,
+          role: token.role,
+        },
+      };
+    },
+  },
+};
+
+const handler = NextAuth(authOptions);
+
+export { handler as GET, handler as POST };

front/src/app/authbuttons.tsx

@@ -0,0 +1,25 @@
+"use client";
+import { signIn, signOut } from "next-auth/react";
+
+export const LoginButton = () => {
+  return (
+    <button
+      className="bg-[#f9842c] hover:bg-[#FA6C28] rounded-full  text-white px-4 py-1 border-[#f9842c] border-2 hover:border-[#FA6C28] font-Noto font-semibold text-xl"
+      style={{ marginRight: 10 }}
+      onClick={() => signIn()}
+    >
+      ログイン
+    </button>
+  );
+};
+
+export const LogoutButton = () => {
+  return (
+    <button
+      className="bg-white hover:bg-gray-100 rounded-full  text-[#f9842c] px-4 py-1 border-[#f9842c] border-2 font-Noto font-semibold text-xl"
+      onClick={() => signOut()}
+    >
+      ログアウト
+    </button>
+  );
+};

front/src/app/globals.css

@@ -4,24 +4,17 @@
 
 :root {
   --foreground-rgb: 0, 0, 0;
-  --background-start-rgb: 214, 219, 220;
-  --background-end-rgb: 255, 255, 255;
+  --background-rgb: 255, 255, 255;
 }
 
 @media (prefers-color-scheme: dark) {
   :root {
-    --foreground-rgb: 255, 255, 255;
-    --background-start-rgb: 0, 0, 0;
-    --background-end-rgb: 0, 0, 0;
+    --foreground-rgb: 0, 0, 0;
+    --background-rgb: 255, 255, 255;
   }
 }
 
 body {
   color: rgb(var(--foreground-rgb));
-  background: linear-gradient(
-      to bottom,
-      transparent,
-      rgb(var(--background-end-rgb))
-    )
-    rgb(var(--background-start-rgb));
+  background: rgb(var(--background-rgb));
 }

front/src/app/layout.tsx

@@ -1,12 +1,56 @@
 import type { Metadata } from "next";
-import { Inter } from "next/font/google";
+import { Nunito, Noto_Sans_JP } from "next/font/google";
 import "./globals.css";
+import AppleTouchIcon from "../../public/favicons/apple-touch-icon.png";
+import Favicon16 from "../../public/favicons/favicon-16x16.png";
+import Favicon32 from "../../public/favicons/favicon-32x32.png";
+import Favicon from "../../public/favicons/favicon.ico";
+import { Header } from "./Header";
+import { SessionProvider } from "next-auth/react";
 
-const inter = Inter({ subsets: ["latin"] });
+const title = "OpenChokin";
+const description = "OpenChokinは家計簿を公開できるサービスです。";
+const url = "https://openchokin.walnuts.dev";
+
+const NunitoFont = Nunito({
+  subsets: ["latin"],
+  variable: "--font-Nunito",
+});
+const NotoFont = Noto_Sans_JP({
+  weight: ["400", "500"],
+  subsets: ["latin"],
+  variable: "--font-Noto",
+});
 
 export const metadata: Metadata = {
-  title: "Openchokin",
-  description: "Generated by create next app",
+  metadataBase: new URL(url),
+  title: {
+    default: title,
+    template: `%s - ${title}`,
+  },
+  description: description,
+  icons: [
+    { rel: "icon", url: Favicon.src },
+    { rel: "apple-touch-icon", sizes: "180x180", url: AppleTouchIcon.src },
+    { rel: "icon", type: "image/png", sizes: "32x32", url: Favicon32.src },
+    { rel: "icon", type: "image/png", sizes: "16x16", url: Favicon16.src },
+  ],
+  openGraph: {
+    title: title,
+    description,
+    url,
+    siteName: title,
+    locale: "ja_JP",
+    type: "website",
+  },
+  twitter: {
+    card: "summary_large_image",
+    title: title,
+    description,
+    site: "@walnuts1018",
+    creator: "@walnuts1018",
+  },
+  manifest: "/favicons/site.webmanifest",
 };
 
 export default function RootLayout({
@@ -15,8 +59,17 @@ export default function RootLayout({
   children: React.ReactNode;
 }) {
   return (
-    <html lang="en">
-      <body className={inter.className}>{children}</body>
+    <html lang="ja">
+      <head>
+        <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#f9842c" />
+        <meta name="msapplication-TileColor" content="#f9842c" />
+        <meta name="msapplication-TileImage" content="/mstile-144x144.png" />
+        <meta name="theme-color" content="#ffffff" />
+      </head>
+      <body className={`${NunitoFont.variable} ${NotoFont.variable}`}>
+        <Header />
+        {children}
+      </body>
     </html>
   );
 }