Merge pull request #520 from COSC-499-W2023/293b-add-user-profile-ico…

…n-and-drop-down Add profile picture to header and move sign out there
COSC-499-W2023 · Mar 27, 2024 · 511dac9 · 511dac9
2 parents a4bd26f + 098f2be
commit 511dac9
Show file tree

Hide file tree

Showing 4 changed files with 111 additions and 10 deletions.
diff --git 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
@@ -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)
 
@@ -172,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/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
@@ -1,20 +1,77 @@
 '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'
 
 export default function HeaderSignOutButtons() {
+    const [anchorElement, setAnchorElement] = useState<null | HTMLElement>(null)
+    const menuOpen = useMemo(() => {
+        return !!anchorElement
+    }, [anchorElement])
+    const session = useSession()
+    const email = session.data?.user?.email
+
+    const handleClick = (event: React.MouseEvent<HTMLElement>) => {
+        setAnchorElement(event.currentTarget)
+    }
+
     return (
-        <Box sx={{ m: 2, display: 'flex', flexDirection: 'row', gap: '16px' }}>
-            <Button
-                variant='contained'
-                sx={{ textTransform: 'capitalize', fontSize: 20, borderRadius: 28 }}
-                data-cy='sign-out-button'
-                onClick={handleSignOut}
+        <Box
+            sx={{
+                mr: '0.5rem',
+            }}
+        >
+            <IconButton onClick={handleClick} data-cy='header-profile'>
+                <Avatar>{email?.toUpperCase().charAt(0)}</Avatar>
+            </IconButton>
+            <Menu
+                open={menuOpen}
+                anchorEl={anchorElement}
+                onClose={() => setAnchorElement(null)}
+                sx={{
+                    mt: 1.5,
+                    '& .MuiMenu-paper': {
+                        borderRadius: '0.75rem',
+                    },
+                }}
+                transformOrigin={{ horizontal: 'right', vertical: 'top' }}
+                anchorOrigin={{ horizontal: 'right', vertical: 'bottom' }}
             >
-                Sign Out
-            </Button>
+                <Box
+                    sx={{
+                        display: 'flex',
+                        flexDirection: 'row',
+                        alignItems: 'center',
+                        maxWidth: '16rem',
+                        gap: '0.5rem',
+                        px: '16px',
+                        py: '6px',
+                    }}
+                    data-cy='user-email'
+                >
+                    <Avatar
+                        sx={{
+                            height: '1.5rem',
+                            width: '1.5rem',
+                            mr: '4px',
+                        }}
+                    />
+                    <Typography noWrap>{email}</Typography>
+                </Box>
+                <Divider/>
+                <MenuItem
+                    onClick={handleSignOut}
+                    data-cy='sign-out-button'
+                >
+                    <ListItemIcon>
+                        <Logout fontSize='medium'/>
+                    </ListItemIcon>
+                    Sign Out
+                </MenuItem>
+            </Menu>
         </Box>
     )