308 teams page teams page front end implementtion by kbventures · Pull Request #331 · torontojs/communityhub

kbventures · 2026-06-06T12:14:30Z

Summary

Teams Page, Team Page, Profile Page(not current user), Sign Out Button and Gravatar Input/Edit

…o 308-teams-page-teams-page-front-end-implementtion

…tion # Conflicts: # src/components/Social/Social.css

…ity v2

- Create src/types/index.ts with shared AccessLevel, ProfileStatus, MemberProfile, TeamMemberProfile - Extract gravatar helpers into src/utils/gravatar.ts shared util - Simplify safeAvatarUrl to only allow https/http (no local path exception) - Add Gravatar URL validation to GeneralInfoFormModal on avatar save - Restore package.json and package-lock.json to match dev branch Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Follows the profiles/profile pattern — teams list moves to src/pages/teams/ and src/pages/team/ becomes detail-only (shows "Team not found." without ?id=). Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

… 298-dependency-update-only-update-minor-changes-in-dependencies-and-dev-dependencies-group-no-breaking-changes

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

…name array - add authenticated profile/member list routes (with email) for protected pages - restore secureHeaders at app level (was removed, test still asserted them) - return member teamNames as JSON array instead of ||-delimited string Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

The /authenticated profile and team-member routes expose emails, so they must require organizer access (not just any logged-in user) to match who actually uses them. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

…y dropping Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Add vitest unit tests for safeAvatarUrl (URL sanitization) and getInitials, and Hurl tests for the new organizer-only GET /profiles/authenticated and GET /teams/{id}/members/authenticated endpoints (auth gating + private email field + pagination). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

safeAvatarUrl returned encodeURI(parsed.href), but URL.href is already percent-encoded, so e.g. a space became %2520 instead of %20. Return parsed.href directly. Add vitest coverage for buildPaginationMeta and PaginationQuerySchema/ IdParamSchema (both exercised by the new authenticated list endpoints), and for the team, team-members, and auth validation schemas. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

The committed versions failed dprint check (extra blank lines in AddTeamFormModal/TeamDetail, missing trailing newline in teams/style.css), which would fail the CI format:check step. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

Saif-XI-Coderz · 2026-06-16T21:58:34Z

 export type IdParam = z.infer<typeof IdParamSchema>;
+
+export const PaginationQuerySchema = z.object({
+	limit: z.coerce.number().int().positive().optional(),


I see the 'page' getting a default but 'limit' does not have one. Is it intentional or would we want a default for limit too?

+1: This should limit the maximum number of fetched rows.

Saif-XI-Coderz · 2026-06-23T08:37:12Z

+	.trim()
+	.min(1, 'Avatar must be at least one character long.')
+	.max(SHORT_TEXT_SIZE_IN_CHAR, `Avatar must be at most ${SHORT_TEXT_SIZE_IN_CHAR} characters long.`)
+	.refine((url) => isGravatarAvatarUrl(url) || isGravatarProfileUrl(url), { message: 'Avatar must be a Gravatar URL.' });


When we tested together, we noticed that the profile page is not saving updates and throwing some errors. This must be where that error is originating from based on matching error message. Could be worthwhile to dig here when fixing that issue.

Saif-XI-Coderz · 2026-06-23T08:56:05Z

+			FROM ${DBTables.ACCESS} AS access
 			WHERE
 				profile.id = ?
+				AND access.id = profile.id


I like this. Good catch.

Saif-XI-Coderz · 2026-06-23T20:11:09Z

+export function isGravatarAvatarUrl(url: string): boolean {
+	try {
+		const parsedUrl = new URL(url);
+		const [, avatarPath, hash] = parsedUrl.pathname.split('/');
+
+		const hostname = parsedUrl.hostname.toLowerCase();
+
+		return parsedUrl.protocol === 'https:' &&
+			(hostname === 'gravatar.com' || hostname.endsWith('.gravatar.com')) &&
+			avatarPath === 'avatar' &&
+			GRAVATAR_HASH_PATTERN.test(hash ?? '');
+	} catch {
+		return false;
+	}
+}
+
+export function isGravatarProfileUrl(url: string): boolean {
+	try {
+		const parsedUrl = new URL(url);
+		const [firstPath = '', secondPath = '', thirdPath = '', extraPath] = parsedUrl.pathname.split('/').filter(Boolean);
+		const hostname = parsedUrl.hostname.toLowerCase();
+
+		if (parsedUrl.protocol !== 'https:') { return false; }
+
+		return (
+			(hostname === 'gravatar.com' || hostname === 'www.gravatar.com') &&
+			firstPath !== 'avatar' &&
+			!secondPath
+		) || (
+			hostname === 'api.gravatar.com' &&
+			firstPath === 'v3' &&
+			secondPath === 'profiles' &&
+			thirdPath !== '' &&
+			!extraPath
+		);
+	} catch {
+		return false;
+	}
+}
+
+export async function resolveGravatarAvatarUrl(url: string): Promise<string | null> {
+	if (isGravatarAvatarUrl(url)) { return url; }
+	if (!isGravatarProfileUrl(url)) { return url; }
+
+	const parsedUrl = new URL(url);
+	const [firstPath = '', , thirdPath = ''] = parsedUrl.pathname.split('/').filter(Boolean);
+	const slug = parsedUrl.hostname === 'api.gravatar.com' ? thirdPath : firstPath;
+	try {
+		const response = await fetch(`https://api.gravatar.com/v3/profiles/${encodeURIComponent(slug.replace(/\.card$/iu, ''))}`);
+		if (!response.ok) { return null; }
+
+		const profile: { avatar_url?: string } = await response.json();
+		return profile.avatar_url && isGravatarAvatarUrl(profile.avatar_url) ? profile.avatar_url : null;
+	} catch {
+		return null;
+	}
+}


Suggestion: These suite of functions could benefit from a few ts docs. They are related and similar, and requires a little work to understand how they are different and what do they do.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

manvinderjit

@kbventures Great work and thank you for all your effort.

I have done a quick overall review of the changes and run the project locally. I have only pointed major blockers.

As the code uses AI, there is potential for refactoring to improve usability but considering we need to got to MVP ASAP, I am ignoring those for now.

manvinderjit · 2026-06-30T01:18:39Z

-			return context.json({ message: 'Invalid or missing token' } satisfies StatusResponse, StatusCodes.BAD_REQUEST);
-		}
-
 		const success = await context.env.PasswordResetToken.get(token);


bug: The reset password feature is broken because of the following key change from resetToken - email

to
email - resetToken

It was brought about by the following code on line 297

await context.env.PasswordResetToken.put(email, resetToken, { expirationTtl: TEN_MINUTES_IN_SECONDS });

The password reset token fetched from database will always be empty because get(token) still uses the token as the key, but the key is now email, so it will never find anything.

The fetch should use email as the key and not token.

manvinderjit · 2026-06-30T01:40:02Z

+	accessLevel: null,
+	avatar: DEFAULT_AVATAR,
+	isLoading: true,
+	profileStatus: null


suggestion: instead of using profileStatus: null, it might be better to have a dedicated isAuthenticated boolean value with status as true or false.

related to: https://github.com/torontojs/communityhub/pull/331/changes#r3495654530

manvinderjit · 2026-06-30T01:41:14Z

-			credentials: 'include'
-		});
+		if (isLoading) { return; }
+		if (profileStatus !== null) { window.location.href = '/pages/home'; }


question: the check if (profileStatus !== null) { window.location.href = '/pages/home'; } relies on the assumption that the api will always return a status.

What if the api doesn't return a status or returns a falsy status and the user is still authenticated?

Might be better to add an isAuthenticated boolean as indicated in the following comment

related to:
https://github.com/torontojs/communityhub/pull/331/changes#r3495651641

manvinderjit · 2026-06-30T01:54:01Z

 export type IdParam = z.infer<typeof IdParamSchema>;
+
+export const PaginationQuerySchema = z.object({
+	limit: z.coerce.number().int().positive().optional(),


+1: This should limit the maximum number of fetched rows.

manvinderjit · 2026-06-30T02:02:36Z

+.authenticated-layout .sidebar-left {
+	border-right: var(--border);
+	box-sizing: border-box;
+	height: 41.25rem;


css: The vertical side bar border doesn't extend to the full page length when the page is bigger than viewport.

Saif-XI-Coderz · 2026-06-23T21:29:16Z

+
+const VALID_UUID = '3c5123c0-8548-4a02-a83c-32e9ce67eae8';
+
+describe('PaginationQuerySchema', () => {


Comprehensive suite of test (Y).

Saif-XI-Coderz · 2026-06-23T22:05:03Z

+	return {
+		offset,
+		start: offset,
+		end: !limit || offset + limit > total ? total - 1 : offset + limit - 1,


Question: It seems like against an empty table (total=0), end will be -1. If ever this happens, will this break things?

…ate-minor-changes-in-dependencies-and-dev-dependencies-group-no-breaking-changes 298 fix: minor dependency updates to address security vulnerabilities

kbventures added 30 commits May 25, 2026 12:14

Merge branch '266-protected-profile-edit-unstyled-implementation' int…

bd55d7a

…o 308-teams-page-teams-page-front-end-implementtion

Team And Other Profile Draft

1948b57

Team And Other Profile Draft

2aa0a6f

Utilize existing auth HOC

a8040ba

Authenticated Layout And Missing Links

df9db26

Teams Pagination Fix

591e6d6

Pagination

c5334f6

Add pagination and seed teams

c31ad9c

Remove underline between abreated 2 letter name

21f773f

Remove underline between abreated 2 letter name

c7645dd

New pagination tests

93ef610

Update

b6880b1

Merge branch 'dev' into 308-teams-page-teams-page-front-end-implement…

a4e7736

…tion # Conflicts: # src/components/Social/Social.css

Hamburger menu all pages

b18d3ce

Updated esthetics on user icon for teams

99e2db9

Sign out

198ee7d

Icon changes on the left bar

fbe85ac

Polish add team modal responsive styles

b98bf47

Use Gravatar avatars and refine authenticated nav

f55131f

Allow volunteers to provide Gravatar avatar URLs

6967685

Fix mobile profile and team edit controls

a968d14

Update avatars and volunteer page

44f6cc3

Format security scan report

08743ca

Add security hardening API tests

af2ade0

Normalize complete profile pronoun options

b7f3254

Match edit profile pronoun options

6396eab

Use select for complete profile pronouns

091221f

Resolve Gravatar profile URLs

e5a26d4

Save resolved Gravatar avatar URL

d2f83f2

Show Gravatar URL type

a19ce27

bcha92 and others added 18 commits June 23, 2026 02:03

fix: cloudflare vitest pool workers update to fix wrangler vulnerabil…

06447a7

…ity v2

Apply dprint formatting

d45e770

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

refactor: split team page into separate list and detail pages

d6303f8

Follows the profiles/profile pattern — teams list moves to src/pages/teams/ and src/pages/team/ becomes detail-only (shows "Team not found." without ?id=). Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

remove misplaced secureHeaders middleware from API routes

ff8acb5

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Merge branch '308-teams-page-teams-page-front-end-implementtion' into…

e23c48f

… 298-dependency-update-only-update-minor-changes-in-dependencies-and-dev-dependencies-group-no-breaking-changes

fix: merge incoming commits from 308

29f7b0f

remove generateGravatarUrl email-derived avatar helper

204ec7d

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

restrict authenticated list routes to organizers

e586ad7

The /authenticated profile and team-member routes expose emails, so they must require organizer access (not just any logged-in user) to match who actually uses them. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

extract getInitials to shared util

81b43be

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

memoize AuthContext provider value

aa853f4

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

paginate profiles list routes to match teams/members pattern

12288a6

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

fix duplicate import in profile routes

13eec6c

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

return error when Gravatar avatar resolution fails instead of silentl…

9b52816

…y dropping Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Saif-XI-Coderz reviewed Jun 23, 2026

View reviewed changes

bcha92 and others added 6 commits June 25, 2026 21:14

fix: minor dependency update for typescript eslint vite

99ade1c

refactor: consolidate default avatar path into shared constant

953f85a

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

docs: add TSDoc to gravatar URL helpers clarifying passthrough logic

4af6a0a

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

docs: correct gravatar resolver TSDoc — input is gravatar-only by schema

4b2c240

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

refactor: simplify gravatar resolver to positive branches, tighten docs

1ab0624

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

refactor: extract getGravatarProfileSlug helper for clearer slug parsing

c5b1406

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

manvinderjit reviewed Jun 30, 2026

View reviewed changes

Saif-XI-Coderz reviewed Jun 30, 2026

View reviewed changes

kbventures and others added 3 commits July 4, 2026 07:37

Merge pull request #332 from torontojs/298-dependency-update-only-upd…

346ba25

…ate-minor-changes-in-dependencies-and-dev-dependencies-group-no-breaking-changes 298 fix: minor dependency updates to address security vulnerabilities

fix: restore team and profile page access

8a42b58

test: add Playwright auth protection checks

7ec7c65


		const VALID_UUID = '3c5123c0-8548-4a02-a83c-32e9ce67eae8';

		describe('PaginationQuerySchema', () => {

Uh oh!

Uh oh!

Conversation

kbventures commented Jun 6, 2026

Summary

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

manvinderjit left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

7 participants