enhance(apps/frontend-pwa): add functionality to log out of created temporary live quiz account (#4734)

Author: sjschlapbach

apps/frontend-pwa/src/components/Layout.tsx

@@ -27,7 +27,7 @@ interface LayoutProps {
     data?: { cy?: string; test?: string }
   }[]
   setActiveMobilePage?: (value: string) => void
-  previewMode?: boolean
+  liveQuizId?: string
   className?: { header?: string; body?: string }
 }
 
@@ -37,7 +37,7 @@ function Layout({
   course,
   mobileMenuItems,
   setActiveMobilePage,
-  previewMode = false,
+  liveQuizId,
   className,
 }: LayoutProps) {
   const { data: dataParticipant } = useQuery(SelfDocument)
@@ -67,10 +67,15 @@ function Layout({
 
       <div className={twMerge('flex-none', className?.header)}>
         <Header
-          participant={dataParticipant?.self || undefined}
+          participant={
+            dataParticipant?.self &&
+            (dataParticipant.self.role === UserRole.Participant || liveQuizId)
+              ? dataParticipant.self
+              : undefined
+          }
           title={displayName}
           course={course}
-          previewMode={previewMode}
+          liveQuizId={liveQuizId}
         />
       </div>
 

apps/frontend-pwa/src/components/common/Header.tsx

@@ -12,11 +12,13 @@ import {
   Course,
   LocaleType,
   LogoutParticipantDocument,
+  LogoutTemporaryParticipantDocument,
   Participant,
+  SelfDocument,
   StudentCourse,
   UserRole,
 } from '@klicker-uzh/graphql/dist/ops'
-import { Button, Dropdown, H1, H2 } from '@uzh-bf/design-system'
+import { Button, Dropdown, H1, H2, toast } from '@uzh-bf/design-system'
 import { useTranslations } from 'next-intl'
 import Image from 'next/image'
 import Link from 'next/link'
@@ -31,14 +33,14 @@ interface HeaderProps {
   course?:
     | Partial<Course>
     | (Omit<StudentCourse, 'owner'> & { owner: { shortname: string } })
-  previewMode?: boolean
+  liveQuizId?: string
 }
 
 function Header({
   participant,
   title,
   course,
-  previewMode = false,
+  liveQuizId,
 }: HeaderProps): React.ReactElement {
   const router = useRouter()
   const { pathname, asPath, query } = router
@@ -50,6 +52,8 @@ function Header({
   const [logoutParticipant, { loading: loggingOut }] = useMutation(
     LogoutParticipantDocument
   )
+  const [logoutTemporaryParticipant, { loading: loggingOutTemporary }] =
+    useMutation(LogoutTemporaryParticipantDocument)
 
   const pageInFrame =
     global?.window &&
@@ -144,6 +148,28 @@ function Header({
             </div>
           }
           items={[
+            ...(participant
+              ? [
+                  {
+                    id: 'loggedInAs',
+                    type: 'label' as 'label',
+                    label: (
+                      <div className="">
+                        <div>{t('pwa.profile.loggedInAs')}</div>
+                        <div className="font-normal">
+                          {`${participant?.username}${participant.role === UserRole.TemporaryParticipant ? ` (${t('pwa.profile.temporaryPseudonym')})` : ''}`}
+                        </div>
+                      </div>
+                    ),
+                    className: { item: '!h-max py-0.5' },
+                  },
+                  {
+                    id: 'separator',
+                    type: 'separator' as 'separator',
+                    className: { item: '!h-1.5' },
+                  },
+                ]
+              : []),
             ...(showProfileSetup
               ? [
                   {
@@ -284,7 +310,60 @@ function Header({
                   },
                 ]
               : []),
-            // TODO: add functionality to log out of temporary account and delete corresponding temporary leaderboard entry
+            ...(participant?.role === UserRole.TemporaryParticipant &&
+            liveQuizId
+              ? [
+                  {
+                    id: 'logout',
+                    type: 'standard' as 'standard',
+                    disabled: loggingOutTemporary,
+                    label: (
+                      <div className="text-red-500">
+                        <FontAwesomeIcon
+                          icon={faRightFromBracket}
+                          className="mr-2 w-4"
+                        />
+                        <span>{t('shared.generic.logout')}</span>
+                      </div>
+                    ),
+                    onClick: async () => {
+                      try {
+                        // log out temporary participant for this live quiz
+                        const { data } = await logoutTemporaryParticipant({
+                          variables: { liveQuizId },
+                          refetchQueries: [{ query: SelfDocument }],
+                        })
+
+                        if (data?.logoutTemporaryParticipant) {
+                          // remove local storage entry for temporary participant
+                          localStorage.removeItem(`login-state-${liveQuizId}`)
+
+                          router.reload()
+                        } else {
+                          toast({
+                            type: 'error',
+                            message: t(
+                              'pwa.profile.errorLogoutTemporaryParticipant'
+                            ),
+                          })
+                        }
+                      } catch (e) {
+                        console.error(
+                          'Error logging out temporary participant:',
+                          e
+                        )
+                        toast({
+                          type: 'error',
+                          message: t(
+                            'pwa.profile.errorLogoutTemporaryParticipant'
+                          ),
+                        })
+                      }
+                    },
+                    data: { cy: 'logout' },
+                  },
+                ]
+              : []),
           ]}
           className={{ item: 'h-8 text-sm md:h-8 md:text-base' }}
           data={{ cy: 'header-avatar' }}

apps/frontend-pwa/src/components/common/LiveQuizLeaderboard.tsx

@@ -86,7 +86,7 @@ function LiveQuizLeaderboard({
 
   const leaderboard = data.liveQuizLeaderboard ?? []
   return (
-    <div className={twMerge('space-y-4', className)}>
+    <div className={twMerge('space-y-4 pt-4', className)}>
       <H2>{t('shared.leaderboard.lqLeaderboard')}</H2>
       <div>
         {leaderboard.length && leaderboard.length > 0 ? (

apps/frontend-pwa/src/components/liveQuiz/AccountSelector.tsx

@@ -301,7 +301,7 @@ function AccountSelector({
                   className="w-full overflow-visible"
                   setApi={setApi}
                 >
-                  <CarouselContent className="mt-4 overflow-visible px-10">
+                  <CarouselContent className="mt-4 overflow-visible px-10 pb-0.5">
                     {AVAILABLE_AVATARS.map((avatar, index) => (
                       <div
                         key={avatar}

apps/frontend-pwa/src/components/liveQuiz/FeedbackArea.tsx

@@ -226,7 +226,7 @@ function FeedbackArea({
   }
 
   return (
-    <div className="h-full w-full">
+    <div className="h-full w-full pt-4">
       <H2>{t('pwa.feedbacks.title')}</H2>
 
       <FeedbackAreaSubscriber

apps/frontend-pwa/src/components/liveQuiz/QuestionArea.tsx

@@ -202,7 +202,7 @@ function QuestionArea({
 
   return (
     <div className="min-h-content h-full w-full">
-      <H2 className={{ root: 'mb-0 hidden md:block' }}>
+      <H2 className={{ root: 'mb-0 hidden pt-4 md:block' }}>
         {t('shared.generic.question')}
       </H2>
 

apps/frontend-pwa/src/pages/course/[courseId]/microlearning/[id]/[ix].tsx

@@ -71,7 +71,6 @@ function MicrolearningInstance() {
     <Layout
       displayName={microLearning.displayName}
       course={microLearning.course ?? undefined}
-      previewMode={previewMode}
     >
       <MicroLearningSubscriber
         activityId={microLearning.id}

apps/frontend-pwa/src/pages/course/[courseId]/microlearning/[id]/evaluation.tsx

@@ -52,7 +52,6 @@ function MicrolearningEvaluation() {
     <Layout
       displayName={microlearning.displayName}
       course={microlearning.course ?? undefined}
-      previewMode={microlearning.isOwner ?? undefined}
     >
       <div className="flex flex-col gap-3 md:mx-auto md:mb-4 md:w-full md:max-w-6xl md:rounded md:border md:p-8 md:pt-6">
         {microlearning.isOwner ? (

apps/frontend-pwa/src/pages/course/[courseId]/microlearning/[id]/index.tsx

@@ -85,7 +85,6 @@ function MicrolearningIntroduction({
     <Layout
       displayName={microLearning.displayName}
       course={microLearning.course ?? undefined}
-      previewMode={microLearning.isOwner ?? undefined}
     >
       <MicroLearningSubscriber
         activityId={microLearning.id}

apps/frontend-pwa/src/pages/course/[courseId]/quiz/[id].tsx

@@ -93,7 +93,6 @@ function PracticeQuizPage({
     <Layout
       displayName={data.practiceQuiz.displayName}
       course={data.practiceQuiz.course ?? undefined}
-      previewMode={data.practiceQuiz.isOwner ?? undefined}
     >
       <PracticeQuiz
         showResetLocalStorage