Improve alerts and profile editor (#17)

* hide avatar based on screen

* update packages

* fix error message

* setup app store with alerts

* improve alerts

* setup password change

* make update password functional

* start moving things to a context

* use hook instead

* remove email button

* create form component

* add test

* fix avatar

package.json

@@ -19,22 +19,22 @@
   },
   "dependencies": {
     "@next-auth/prisma-adapter": "^1.0.7",
-    "@prisma/client": "^5.4.2",
+    "@prisma/client": "^5.5.2",
     "@reduxjs/toolkit": "^1.9.7",
-    "@supabase/supabase-js": "^2.38.1",
+    "@supabase/supabase-js": "^2.38.4",
     "@tailwindcss/typography": "^0.5.10",
-    "@types/bcrypt": "^5.0.0",
-    "@types/jest": "^29.5.5",
-    "@types/react": "^18.2.28",
-    "@types/react-dom": "^18.2.13",
-    "@types/validator": "^13.11.3",
+    "@types/bcrypt": "^5.0.2",
+    "@types/jest": "^29.5.8",
+    "@types/react": "^18.2.37",
+    "@types/react-dom": "^18.2.15",
+    "@types/validator": "^13.11.6",
     "@typescript-eslint/eslint-plugin": "^5.13.0",
     "@typescript-eslint/parser": "^5.13.0",
     "autoprefixer": "^10.4.16",
     "bcrypt": "^5.1.1",
     "cypress": "^13.4.0",
     "daisyui": "^3.9.4",
-    "eslint": "^8.52.0",
+    "eslint": "^8.53.0",
     "eslint-config-airbnb-base": "^15.0.0",
     "eslint-config-airbnb-typescript": "^17.1.0",
     "eslint-config-next": "^14.0.1",
@@ -46,7 +46,7 @@
     "prisma": "^5.5.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-hook-form": "^7.47.0",
+    "react-hook-form": "^7.48.2",
     "react-redux": "^8.1.3",
     "tailwindcss": "^3.3.5",
     "ts-jest": "^29.1.1",

src/app/alert-box.tsx

@@ -0,0 +1,18 @@
+'use client'
+
+import React from 'react'
+import Alert from '@/components/Alert'
+import { useAlert } from '@/hooks/app'
+
+const AlertBox: React.FC = () => {
+  const { isVisible, message, type, duration } = useAlert()
+
+  if (!isVisible || !message || !type || !duration) return null
+  return (
+    <div style={{ zIndex: 9999 }} className={'fixed bottom-8 left-8 w-96 transition-opacity duration-300 ease-in-out'}>
+      <Alert message={message} type={type} duration={duration} />
+    </div>
+  )
+}
+
+export default AlertBox

src/app/api/users/[id]/route.ts

@@ -1,6 +1,7 @@
 import { NextRequest, NextResponse } from 'next/server'
 import prisma from '@/lib/prisma'
 import { ApiError, routeWrapper, checkUserMatchesSession } from '@/utils/api'
+import { generateHash, validatePassword } from '@/utils/hash'
 import { checkUserBody, sanitizeUserSelect } from '../route'
 
 export const GET = routeWrapper(
@@ -19,6 +20,27 @@ export const PUT = routeWrapper(
     const { id } = params
     if (!id) throw new ApiError('User id required', 400)
 
+    // change password logic
+    if (req.consumedBody?.currentPassword) {
+      const user = await prisma.user.findUnique({ where: { id } })
+      const { currentPassword, password, confirmPassword } = req.consumedBody
+      const valid = (
+        password === confirmPassword &&
+        await validatePassword(currentPassword, String(user?.password))
+      )
+
+      if (!valid) throw new ApiError('Invalid credentials', 401)
+      if (password === currentPassword) throw new ApiError('New password is the same as existing', 409)
+
+      const hash = await generateHash(password)
+      const updatedUser = await prisma.user.update({
+        where: { id },
+        data: { password: hash },
+        select: sanitizeUserSelect()
+      })
+      return NextResponse.json(updatedUser)
+    }
+
     await checkUserBody(req.consumedBody, id)
     await checkUserMatchesSession(id)
 

src/app/layout.tsx

@@ -3,6 +3,7 @@ import { Inter } from 'next/font/google'
 import Providers from './providers'
 import Navbar from './navbar'
 import Footer from './footer'
+import AlertBox from './alert-box'
 
 const inter = Inter({ subsets: ['latin'] })
 
@@ -17,6 +18,7 @@ const RootLayout = ({ children }: { children: React.ReactNode }) => (
               {children}
             </main>
           </div>
+          <AlertBox />
           <Footer />
         </div>
       </Providers>