From 2cf9590746da152d3289eba960d087f9b70806e0 Mon Sep 17 00:00:00 2001 From: justino599 Date: Mon, 25 Mar 2024 21:31:53 -0700 Subject: [PATCH 1/5] Add profile picture to header and move sign out there --- src/components/HeaderSignOutButtons/index.tsx | 79 ++++++++++++++++--- 1 file changed, 69 insertions(+), 10 deletions(-) diff --git a/src/components/HeaderSignOutButtons/index.tsx b/src/components/HeaderSignOutButtons/index.tsx index f42e8c77..ff07df03 100644 --- a/src/components/HeaderSignOutButtons/index.tsx +++ b/src/components/HeaderSignOutButtons/index.tsx @@ -1,20 +1,79 @@ 'use client' -import { Box, Button } from '@mui/material' -import { signOut } from 'next-auth/react' +import {Avatar, Box, Divider, IconButton, ListItemIcon, Menu, MenuItem, Typography} from '@mui/material' +import {signOut, useSession} from 'next-auth/react' import logger from '@/utils/logger' +import React, { useMemo, useState } from 'react' +import {Logout} from '@mui/icons-material' +import {theme} from '@/components/ThemeRegistry/theme' export default function HeaderSignOutButtons() { + const [anchorElement, setAnchorElement] = useState(null) + const menuOpen = useMemo(() => { + return !!anchorElement + }, [anchorElement]) + const session = useSession() + + const handleClick = (event: React.MouseEvent) => { + setAnchorElement(event.currentTarget) + } + return ( - - + + + {session.data?.user?.email} + + + + + + + Sign Out + + ) From 6c14757606d0c2d18426632b0bf1a39e8d99abff Mon Sep 17 00:00:00 2001 From: justino599 Date: Tue, 26 Mar 2024 10:33:30 -0700 Subject: [PATCH 2/5] Add first letter of email as profile picture --- src/components/HeaderSignOutButtons/index.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/components/HeaderSignOutButtons/index.tsx b/src/components/HeaderSignOutButtons/index.tsx index ff07df03..d5eb96d6 100644 --- a/src/components/HeaderSignOutButtons/index.tsx +++ b/src/components/HeaderSignOutButtons/index.tsx @@ -13,6 +13,7 @@ export default function HeaderSignOutButtons() { return !!anchorElement }, [anchorElement]) const session = useSession() + const email = session.data?.user?.email const handleClick = (event: React.MouseEvent) => { setAnchorElement(event.currentTarget) @@ -25,7 +26,7 @@ export default function HeaderSignOutButtons() { }} > - + {email?.toUpperCase().charAt(0)} - {session.data?.user?.email} + {email} Date: Tue, 26 Mar 2024 11:03:08 -0700 Subject: [PATCH 3/5] Fix failing tests --- cypress/e2e/app/api/video/delete.cy.ts | 2 ++ cypress/e2e/app/login.cy.ts | 2 ++ cypress/e2e/app/submission-box/detail/myBoxesDetails.cy.ts | 1 + src/components/HeaderSignOutButtons/index.tsx | 3 ++- 4 files changed, 7 insertions(+), 1 deletion(-) diff --git a/cypress/e2e/app/api/video/delete.cy.ts b/cypress/e2e/app/api/video/delete.cy.ts index 65da1342..dd461fc7 100644 --- a/cypress/e2e/app/api/video/delete.cy.ts +++ b/cypress/e2e/app/api/video/delete.cy.ts @@ -111,6 +111,7 @@ describe('Test video deletion API', () => { cy.task('createOneVideoAndRetrieveVideoId', { ownerId: userId, title: videoTitle }).then((videoId) => { // Log out runWithRetry(() => { + cy.get('[data-cy="header-profile"]').click({ force: true }) cy.get('[data-cy="sign-out-button"]').click({ force: true }) cy.wait(2000) }) @@ -134,6 +135,7 @@ describe('Test video deletion API', () => { // Log out runWithRetry(() => { + cy.get('[data-cy="header-profile"]').click({ force: true }) cy.get('[data-cy="sign-out-button"]').click({ force: true }) cy.wait(2000) }) diff --git a/cypress/e2e/app/login.cy.ts b/cypress/e2e/app/login.cy.ts index f5703095..75011223 100644 --- a/cypress/e2e/app/login.cy.ts +++ b/cypress/e2e/app/login.cy.ts @@ -64,6 +64,7 @@ describe('Login tests', () => { cy.url({ timeout: TIMEOUT.EXTRA_EXTRA_LONG }).should('include', '/dashboard') // We should be able to log out + cy.get('[data-cy="header-profile"]').click({ force: true }) cy.get('[data-cy="sign-out-button"]').click({ force: true }) cy.title().should('eq', 'Login - Harp Video') @@ -161,6 +162,7 @@ describe('Login tests', () => { cy.get('[data-cy="submit"]').click() // Log out + cy.get('[data-cy="header-profile"]').click({ force: true }) cy.get('[data-cy="sign-out-button"]').click({ force: true }) cy.wait(2000) diff --git a/cypress/e2e/app/submission-box/detail/myBoxesDetails.cy.ts b/cypress/e2e/app/submission-box/detail/myBoxesDetails.cy.ts index 5554c900..f4cc9ca2 100644 --- a/cypress/e2e/app/submission-box/detail/myBoxesDetails.cy.ts +++ b/cypress/e2e/app/submission-box/detail/myBoxesDetails.cy.ts @@ -172,6 +172,7 @@ describe('Receiving Dashboard Details Page Tests', () => { let slug: string | undefined = '' cy.url().then((url) => (slug = url.split('/').pop())) + cy.get('[data-cy="header-profile"]').click({ force: true }) cy.get('[data-cy="sign-out-button"]').click() cy.url().should('not.contain', 'submission-box') cy.reload() diff --git a/src/components/HeaderSignOutButtons/index.tsx b/src/components/HeaderSignOutButtons/index.tsx index d5eb96d6..c78062dc 100644 --- a/src/components/HeaderSignOutButtons/index.tsx +++ b/src/components/HeaderSignOutButtons/index.tsx @@ -25,7 +25,7 @@ export default function HeaderSignOutButtons() { mr: '0.5rem', }} > - + {email?.toUpperCase().charAt(0)} From 02b87a4553693cc5b0e387644c832d2593182078 Mon Sep 17 00:00:00 2001 From: justino599 Date: Tue, 26 Mar 2024 11:20:44 -0700 Subject: [PATCH 4/5] Add tests for new feature --- cypress/e2e/app/login.cy.ts | 39 +++++++++++++++++++ src/components/HeaderSignOutButtons/index.tsx | 1 + 2 files changed, 40 insertions(+) diff --git a/cypress/e2e/app/login.cy.ts b/cypress/e2e/app/login.cy.ts index 75011223..1655efeb 100644 --- a/cypress/e2e/app/login.cy.ts +++ b/cypress/e2e/app/login.cy.ts @@ -174,4 +174,43 @@ describe('Login tests', () => { cy.get('[data-cy="submit"]').click() cy.url().should('contain', 'verify-email') }) + + it('should show the first letter of user\'s email in the profile icon', () => { + // User data + const randomChar = String.fromCharCode(Math.floor(Math.random() * 26) + 97) + const email = `${ randomChar }@joe.ca` + const password = 'P@ssw0rd' + + // Sign up + cy.task('createUser', { email, password }) + + // Login + cy.visit('/login') + cy.get('[data-cy="email"]').type(email) + cy.get('[data-cy="password"]').type(password) + cy.get('[data-cy="submit"]').click() + + // Check the profile icon + cy.url().should('not.contain', 'login') + cy.get('[data-cy="header-profile"]').should('have.text', randomChar.toUpperCase()) + }) + + it('should show user email in profile dropdown', () => { + const email = 'test@joe.ca' + const password = 'P@ssw0rd' + + // Sign up + cy.task('createUser', { email, password }) + + // Login + cy.visit('/login') + cy.get('[data-cy="email"]').type(email) + cy.get('[data-cy="password"]').type(password) + cy.get('[data-cy="submit"]').click() + + // Check the profile dropdown + cy.url().should('not.contain', 'login') + cy.get('[data-cy="header-profile"]').click({ force: true }) + cy.get('[data-cy="user-email"]').should('have.text', email) + }) }) diff --git a/src/components/HeaderSignOutButtons/index.tsx b/src/components/HeaderSignOutButtons/index.tsx index c78062dc..1db365d2 100644 --- a/src/components/HeaderSignOutButtons/index.tsx +++ b/src/components/HeaderSignOutButtons/index.tsx @@ -52,6 +52,7 @@ export default function HeaderSignOutButtons() { px: '16px', py: '6px', }} + data-cy='user-email' > Date: Tue, 26 Mar 2024 18:52:06 -0700 Subject: [PATCH 5/5] Address change requests - Change some colors - Remove extra drop shadow --- src/components/HeaderSignOutButtons/index.tsx | 7 +------ 1 file changed, 1 insertion(+), 6 deletions(-) diff --git a/src/components/HeaderSignOutButtons/index.tsx b/src/components/HeaderSignOutButtons/index.tsx index 1db365d2..21967cac 100644 --- a/src/components/HeaderSignOutButtons/index.tsx +++ b/src/components/HeaderSignOutButtons/index.tsx @@ -5,7 +5,6 @@ import {signOut, useSession} from 'next-auth/react' import logger from '@/utils/logger' import React, { useMemo, useState } from 'react' import {Logout} from '@mui/icons-material' -import {theme} from '@/components/ThemeRegistry/theme' export default function HeaderSignOutButtons() { const [anchorElement, setAnchorElement] = useState(null) @@ -33,7 +32,6 @@ export default function HeaderSignOutButtons() { anchorEl={anchorElement} onClose={() => setAnchorElement(null)} sx={{ - filter: 'drop-shadow(0px 2px 8px rgba(0,0,0,0.32))', mt: 1.5, '& .MuiMenu-paper': { borderRadius: '0.75rem', @@ -66,13 +64,10 @@ export default function HeaderSignOutButtons() { - + Sign Out