feat(SPA): profile page, display name and the new account menu

web/src/stores/__tests__/session.spec.ts

@@ -18,3 +18,31 @@ describe('session store clear action', () => {
 		expect(session.status).toBe('ready')
 	})
 })
+
+describe('session store setDisplayName action', () => {
+	it('replaces the session display name with the given value', () => {
+		const session = useSessionStore()
+		session.session = { verified: true, username: 'marta', displayName: '' }
+
+		session.setDisplayName('Marta Alves')
+
+		expect(session.session?.displayName).toBe('Marta Alves')
+	})
+
+	it.each([[null], [undefined]])('reads %s as an empty display name', (value) => {
+		const session = useSessionStore()
+		session.session = { verified: true, username: 'marta', displayName: 'Marta Alves' }
+
+		session.setDisplayName(value)
+
+		expect(session.session?.displayName).toBe('')
+	})
+
+	it('does nothing without a session', () => {
+		const session = useSessionStore()
+
+		session.setDisplayName('Marta Alves')
+
+		expect(session.session).toBeNull()
+	})
+})

web/src/stores/session.ts

@@ -8,6 +8,8 @@ export interface Session {
 	id?: number
 	verified: boolean
 	username?: string
+	email?: string
+	displayName: string
 }
 
 export const useSessionStore = defineStore('session', () => {
@@ -53,5 +55,11 @@ export const useSessionStore = defineStore('session', () => {
 		status.value = 'ready'
 	}
 
-	return { status, session, check, retry, clear }
+	function setDisplayName(displayName: string | null | undefined) {
+		if (session.value) {
+			session.value = { ...session.value, displayName: displayName ?? '' }
+		}
+	}
+
+	return { status, session, check, retry, clear, setDisplayName }
 })