nhcarrigan/library
9
0
Fork 0
generated from nhcarrigan/template
Code Issues Pull Requests 54 Actions Releases 3 Activity

feat: add social links with validation and Font Awesome icons

Browse Source 
Added comprehensive social links functionality to user profiles:

**New Social Platforms:**
- Website (full URL validation)
- GitHub (username format)
- Bluesky (handle format)
- LinkedIn (username format)
- Twitch (username format)
- YouTube (handle or channel ID format)
- Discord Server (invite code format)

**Features:**
- Database schema updated with 7 new optional social link fields
- Backend services and API routes updated to handle all social links
- Settings form with input fields and helpful validation hints
- Profile display with Font Awesome icons for each platform
- Regex validation patterns for all fields with visual feedback
- Green border for valid input, red border for invalid input
- All form inputs use consistent type="text" for uniform styling
- Discord accepts just invite code (constructs full URL automatically)

**Technical Changes:**
- Installed @fortawesome/angular-fontawesome with pinned versions
- Replaced emoji icons with proper Font Awesome components
- Added FontAwesomeModule to profile component
- Updated all User type interfaces across frontend and backend
- Updated UserService mappings in all methods
- Added comprehensive regex patterns matching platform requirements

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
Naomi Carrigan
2026-02-19 17:59:10 -08:00
parent 34c7ca8ba2
commit 5eec4c7640
10 changed files with 425 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
api/src/app/routes/users/index.ts
+21
View File
@@ -15,6 +15,13 @@ interface UpdateUserSettingsBody {
displayName?: string;
bio?: string;
profilePublic?: boolean;
website?: string;
discordServer?: string;
bluesky?: string;
github?: string;
linkedin?: string;
twitch?: string;
youtube?: string;
}
interface UserProfileResponse {
@@ -24,6 +31,13 @@ interface UserProfileResponse {
avatar?: string;
bio?: string;
slug?: string;
website?: string;
discordServer?: string;
bluesky?: string;
github?: string;
linkedin?: string;
twitch?: string;
youtube?: string;
badges: {
isStaff: boolean;
isMod: boolean;
@@ -130,6 +144,13 @@ const usersRoutes: FastifyPluginAsync = async (app) => {
avatar: profile.avatar,
bio: profile.bio,
slug: profile.slug,
website: profile.website,
discordServer: profile.discordServer,
bluesky: profile.bluesky,
github: profile.github,
linkedin: profile.linkedin,
twitch: profile.twitch,
youtube: profile.youtube,
badges: {
isStaff: profile.isStaff,
isMod: profile.isMod,
api/src/app/services/auth.service.ts
+15
View File
@@ -75,6 +75,11 @@ export class AuthService {
displayName: dbUser.displayName || undefined,
bio: dbUser.bio || undefined,
profilePublic: dbUser.profilePublic,
website: dbUser.website || undefined,
discordServer: dbUser.discordServer || undefined,
bluesky: dbUser.bluesky || undefined,
github: dbUser.github || undefined,
linkedin: dbUser.linkedin || undefined,
isAdmin: dbUser.isAdmin,
isBanned: dbUser.isBanned,
inDiscord: dbUser.inDiscord,
@@ -175,6 +180,11 @@ export class AuthService {
displayName: dbUser.displayName || undefined,
bio: dbUser.bio || undefined,
profilePublic: dbUser.profilePublic,
website: dbUser.website || undefined,
discordServer: dbUser.discordServer || undefined,
bluesky: dbUser.bluesky || undefined,
github: dbUser.github || undefined,
linkedin: dbUser.linkedin || undefined,
isAdmin: dbUser.isAdmin,
isBanned: dbUser.isBanned,
inDiscord: dbUser.inDiscord,
@@ -229,6 +239,11 @@ export class AuthService {
displayName: dbUser.displayName || undefined,
bio: dbUser.bio || undefined,
profilePublic: dbUser.profilePublic,
website: dbUser.website || undefined,
discordServer: dbUser.discordServer || undefined,
bluesky: dbUser.bluesky || undefined,
github: dbUser.github || undefined,
linkedin: dbUser.linkedin || undefined,
isAdmin: dbUser.isAdmin,
isBanned: dbUser.isBanned,
inDiscord: dbUser.inDiscord,
api/src/app/services/user.service.ts
+63
View File
@@ -26,6 +26,13 @@ export class UserService {
displayName: user.displayName || undefined,
bio: user.bio || undefined,
profilePublic: user.profilePublic,
website: user.website || undefined,
discordServer: user.discordServer || undefined,
bluesky: user.bluesky || undefined,
github: user.github || undefined,
linkedin: user.linkedin || undefined,
twitch: user.twitch || undefined,
youtube: user.youtube || undefined,
isAdmin: user.isAdmin,
isBanned: user.isBanned,
inDiscord: user.inDiscord,
@@ -54,6 +61,13 @@ export class UserService {
displayName: user.displayName || undefined,
bio: user.bio || undefined,
profilePublic: user.profilePublic,
website: user.website || undefined,
discordServer: user.discordServer || undefined,
bluesky: user.bluesky || undefined,
github: user.github || undefined,
linkedin: user.linkedin || undefined,
twitch: user.twitch || undefined,
youtube: user.youtube || undefined,
isAdmin: user.isAdmin,
isBanned: user.isBanned,
inDiscord: user.inDiscord,
@@ -79,6 +93,13 @@ export class UserService {
displayName: user.displayName || undefined,
bio: user.bio || undefined,
profilePublic: user.profilePublic,
website: user.website || undefined,
discordServer: user.discordServer || undefined,
bluesky: user.bluesky || undefined,
github: user.github || undefined,
linkedin: user.linkedin || undefined,
twitch: user.twitch || undefined,
youtube: user.youtube || undefined,
isAdmin: user.isAdmin,
isBanned: user.isBanned,
inDiscord: user.inDiscord,
@@ -104,6 +125,13 @@ export class UserService {
displayName: user.displayName || undefined,
bio: user.bio || undefined,
profilePublic: user.profilePublic,
website: user.website || undefined,
discordServer: user.discordServer || undefined,
bluesky: user.bluesky || undefined,
github: user.github || undefined,
linkedin: user.linkedin || undefined,
twitch: user.twitch || undefined,
youtube: user.youtube || undefined,
isAdmin: user.isAdmin,
isBanned: user.isBanned,
inDiscord: user.inDiscord,
@@ -141,6 +169,13 @@ export class UserService {
displayName: user.displayName || undefined,
bio: user.bio || undefined,
profilePublic: user.profilePublic,
website: user.website || undefined,
discordServer: user.discordServer || undefined,
bluesky: user.bluesky || undefined,
github: user.github || undefined,
linkedin: user.linkedin || undefined,
twitch: user.twitch || undefined,
youtube: user.youtube || undefined,
isAdmin: user.isAdmin,
isBanned: user.isBanned,
inDiscord: user.inDiscord,
@@ -157,6 +192,13 @@ export class UserService {
displayName?: string;
bio?: string;
profilePublic?: boolean;
website?: string;
discordServer?: string;
bluesky?: string;
github?: string;
linkedin?: string;
twitch?: string;
youtube?: string;
}
): Promise<User | null> {
const user = await this.prisma.user.update({
@@ -174,6 +216,13 @@ export class UserService {
displayName: user.displayName || undefined,
bio: user.bio || undefined,
profilePublic: user.profilePublic,
website: user.website || undefined,
discordServer: user.discordServer || undefined,
bluesky: user.bluesky || undefined,
github: user.github || undefined,
linkedin: user.linkedin || undefined,
twitch: user.twitch || undefined,
youtube: user.youtube || undefined,
isAdmin: user.isAdmin,
isBanned: user.isBanned,
inDiscord: user.inDiscord,
@@ -190,6 +239,13 @@ export class UserService {
avatar?: string | null;
bio?: string | null;
slug?: string | null;
website?: string | null;
discordServer?: string | null;
bluesky?: string | null;
github?: string | null;
linkedin?: string | null;
twitch?: string | null;
youtube?: string | null;
isStaff: boolean;
isMod: boolean;
isVip: boolean;
@@ -238,6 +294,13 @@ export class UserService {
avatar: user.avatar,
bio: user.bio,
slug: user.slug,
website: user.website,
discordServer: user.discordServer,
bluesky: user.bluesky,
github: user.github,
linkedin: user.linkedin,
twitch: user.twitch,
youtube: user.youtube,
isStaff: user.isStaff,
isMod: user.isMod,
isVip: user.isVip,