From adeb3fd3bf0e04b817fb7c0c2044b825b6c014e1 Mon Sep 17 00:00:00 2001 From: Jorge Vargas Date: Fri, 15 Nov 2024 12:58:43 -0600 Subject: [PATCH] Implement SignIn/SignOut --- astro.config.mjs | 6 +- auth.config.ts | 5 +- messages/en.json | 7 +- package.json | 13 + prisma/schema.prisma | 10 +- src/components/Button.astro | 12 - src/components/Button.tsx | 26 + src/components/Header.astro | 15 +- src/components/header/LoginNav.astro | 15 + src/components/header/NavButton.astro | 7 +- src/graphql/apolloClient.ts | 30 +- src/graphql/apolloClientSSR.ts | 24 + src/graphql/typeDefs/user.graphql | 5 +- src/pages/rss.xml.ts | 2 +- src/utils/graphQLErrors.ts | 13 + yarn.lock | 874 +++++++++++++++++++++++++- 16 files changed, 987 insertions(+), 77 deletions(-) delete mode 100644 src/components/Button.astro create mode 100644 src/components/Button.tsx create mode 100644 src/components/header/LoginNav.astro create mode 100644 src/graphql/apolloClientSSR.ts create mode 100644 src/utils/graphQLErrors.ts diff --git a/astro.config.mjs b/astro.config.mjs index b962d1f..0745c50 100644 --- a/astro.config.mjs +++ b/astro.config.mjs @@ -2,6 +2,7 @@ import { defineConfig } from 'astro/config' import tailwind from '@astrojs/tailwind' import node from '@astrojs/node' +import react from '@astrojs/react'; import paraglide from '@inlang/paraglide-astro' import auth from 'auth-astro' import icon from 'astro-icon' @@ -23,8 +24,9 @@ export default defineConfig({ tailwind(), auth(), paraglide({ project: './project.inlang', outdir: './src/paraglide' }), - icon({ iconDir: 'src/img/icons' }) + icon({ iconDir: 'src/img/icons' }), + react() ], output: 'server', adapter: node({ mode: 'standalone' }) -}) +}) \ No newline at end of file diff --git a/auth.config.ts b/auth.config.ts index be9d5ed..d80b703 100644 --- a/auth.config.ts +++ b/auth.config.ts @@ -18,7 +18,10 @@ export default defineConfig({ async authorize(credentials) { if (!credentials?.username || !credentials.password) throw new InvalidLoginError() - const user = await prismaClient.users.findUnique({ where: { username: credentials.username } }) + const user = await prismaClient.users.findUnique({ + select: { username: true, password: true }, + where: { username: credentials.username } + }) if (!user) throw new InvalidLoginError() const valid = await bcrypt.compare(credentials.password, user.password) diff --git a/messages/en.json b/messages/en.json index 2aa5c3c..8fde208 100644 --- a/messages/en.json +++ b/messages/en.json @@ -3,6 +3,10 @@ "register": "Register", "login": "Login", "logout": "Logout", + "username": "Username", + "password": "Password", + "email": "Email", + "recoverPassword": "Recover Password", "home": "Home", "lastaddednav": "Last Added", "albumlist": "Album List", @@ -21,5 +25,6 @@ "managealbums": "Manage Albums", "manageusers": "Manage Users", "managerequests": "Manage Requests", - "managesubmissions": "Manage Submissions" + "managesubmissions": "Manage Submissions", + "profilePic": "Profile picture" } \ No newline at end of file diff --git a/package.json b/package.json index c991335..902104b 100644 --- a/package.json +++ b/package.json @@ -11,7 +11,9 @@ }, "dependencies": { "@apollo/client": "^3.11.4", + "@apollo/server": "^4.11.2", "@astrojs/node": "^8.3.3", + "@astrojs/react": "^3.6.2", "@astrojs/rss": "^4.0.7", "@astrojs/tailwind": "^5.1.1", "@auth/core": "^0.35.0", @@ -22,13 +24,24 @@ "@graphql-tools/schema": "^10.0.4", "@inlang/paraglide-astro": "^0.2.2", "@prisma/client": "^5.22.0", + "@types/react": "^18.3.12", + "@types/react-dom": "^18.3.1", + "apollo-upload-client": "^18.0.1", "astro": "^4.15.7", "astro-icon": "^1.1.1", "auth-astro": "^4.1.2", "bcrypt": "^5.1.1", + "clsx": "^2.1.1", + "fs-extra": "^11.2.0", + "generate-password-ts": "^1.6.5", "graphql": "^16.9.0", "graphql-scalars": "^1.23.0", + "graphql-yoga": "^5.10.2", + "nodemailer": "^6.9.16", "react": "^18.3.1", + "react-dom": "^18.3.1", + "react-svg-spinners": "^0.3.1", + "sharp": "^0.33.5", "tailwindcss": "^3.4.12", "typescript": "^5.6.2" }, diff --git a/prisma/schema.prisma b/prisma/schema.prisma index f2eca75..260f1b4 100644 --- a/prisma/schema.prisma +++ b/prisma/schema.prisma @@ -317,10 +317,10 @@ model favorites { model forgors { id Int @id @default(autoincrement()) - expires DateTime? @db.DateTime(0) + expires DateTime? @default(dbgenerated("DATE_ADD(NOW(), INTERVAL 24 HOUR)")) @db.DateTime(0) key String? @db.VarChar(255) - createdAt DateTime @db.DateTime(0) - updatedAt DateTime @db.DateTime(0) + createdAt DateTime @default(now()) @db.DateTime(0) + updatedAt DateTime @default(now()) @db.DateTime(0) username String? @db.VarChar(255) users users? @relation(fields: [username], references: [username], map: "forgors_ibfk_1") @@ -515,8 +515,8 @@ model users { username String @id @db.VarChar(255) email String? @db.VarChar(255) password String? @db.VarChar(255) - createdAt DateTime @db.DateTime(0) - updatedAt DateTime @db.DateTime(0) + createdAt DateTime @default(now()) @db.DateTime(0) + updatedAt DateTime @default(now()) @db.DateTime(0) placeholder String? @db.Text imgId String? @db.VarChar(255) User_Role User_Role[] diff --git a/src/components/Button.astro b/src/components/Button.astro deleted file mode 100644 index e887967..0000000 --- a/src/components/Button.astro +++ /dev/null @@ -1,12 +0,0 @@ ---- -const { class: className } = Astro.props ---- - - diff --git a/src/components/Button.tsx b/src/components/Button.tsx new file mode 100644 index 0000000..9e53a7a --- /dev/null +++ b/src/components/Button.tsx @@ -0,0 +1,26 @@ +import type { PropsWithChildren } from 'react' +import clsx from 'clsx' +import { BarsRotateFade } from 'react-svg-spinners' + +export default function Button(props: PropsWithChildren<{ className?: string; loading?: boolean }>) { + const { children, className, loading = false, ...restProps } = props + return ( + + ) +} diff --git a/src/components/Header.astro b/src/components/Header.astro index ca738b0..f115851 100644 --- a/src/components/Header.astro +++ b/src/components/Header.astro @@ -1,6 +1,6 @@ --- import { gql } from '@/graphql/__generated__/client/index.js' -import { getApolloClient } from '@/graphql/apolloClient.js' +import { getApolloClient } from '@/graphql/apolloClientSSR.js' import { Image, Picture } from 'astro:assets' import { getSession } from 'auth-astro/server' import * as m from '../paraglide/messages.js' @@ -8,11 +8,11 @@ import * as m from '../paraglide/messages.js' import logo from 'img/logos/winter.png' // import logoEs from 'img/logos/default_es.png' -import Button from './Button.astro' import Dropdown from './header/Dropdown.astro' import DropdownItem from './header/DropdownItem.astro' import Toggler from './header/Toggler.astro' import NavButton from './header/NavButton.astro' +import LoginNav from './header/LoginNav.astro' const headerQuery = gql(` query HeaderInfo { @@ -48,16 +48,7 @@ const session = await getSession(Astro.request) logo -
- { - session === null ? ( - - ) : ( - - ) - } - -
+