From b7e79cacf18b0547623ec9724100a3660c93d034 Mon Sep 17 00:00:00 2001 From: Zach Russell Date: Thu, 20 Mar 2025 20:39:46 -0600 Subject: [PATCH 1/3] display pound sign if fallback is phone --- web/src/api/media.ts | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/web/src/api/media.ts b/web/src/api/media.ts index d6f12d3..ff20468 100644 --- a/web/src/api/media.ts +++ b/web/src/api/media.ts @@ -74,8 +74,15 @@ function getFallbackCharacter(from: unknown, idx: number): string { if (!from || typeof from !== "string" || from.length <= idx) { return "" } + // Array.from appears to be the only way to handle Unicode correctly - return Array.from(from.slice(0, (idx + 1) * 2))[idx]?.toUpperCase().toWellFormed() ?? "" + const fallbackCharacter = Array.from(from.slice(0, (idx + 1) * 2))[idx]?.toUpperCase().toWellFormed() ?? ""; + + // if it's a phone number, return "#" + // * - Any digit (`\d`) - phone numbers + // * - `(` - US Area Codes can start with parens + // * - `+` - international phone numbers + return fallbackCharacter.match(/[\d(+]/) ? "#" : fallbackCharacter } export const getAvatarURL = ( From 993bccc439909ae31543233d9cb865c9cdb100d3 Mon Sep 17 00:00:00 2001 From: Zach Russell Date: Sat, 22 Mar 2025 14:31:26 -0600 Subject: [PATCH 2/3] added phone number regex --- web/src/api/media.ts | 14 ++++++-------- web/src/util/validation.ts | 2 ++ 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/web/src/api/media.ts b/web/src/api/media.ts index ff20468..887aed5 100644 --- a/web/src/api/media.ts +++ b/web/src/api/media.ts @@ -13,7 +13,7 @@ // // You should have received a copy of the GNU Affero General Public License // along with this program. If not, see . -import { parseMXC } from "@/util/validation.ts" +import { isPhoneNumber, parseMXC } from "@/util/validation.ts" import { ContentURI, RoomID, UserID, UserProfile } from "./types" export const getMediaURL = (mxc?: string, encrypted: boolean = false): string | undefined => { @@ -74,15 +74,13 @@ function getFallbackCharacter(from: unknown, idx: number): string { if (!from || typeof from !== "string" || from.length <= idx) { return "" } + + if (isPhoneNumber(from)) { + return "#" + } // Array.from appears to be the only way to handle Unicode correctly - const fallbackCharacter = Array.from(from.slice(0, (idx + 1) * 2))[idx]?.toUpperCase().toWellFormed() ?? ""; - - // if it's a phone number, return "#" - // * - Any digit (`\d`) - phone numbers - // * - `(` - US Area Codes can start with parens - // * - `+` - international phone numbers - return fallbackCharacter.match(/[\d(+]/) ? "#" : fallbackCharacter + return Array.from(from.slice(0, (idx + 1) * 2))[idx]?.toUpperCase().toWellFormed() ?? ""; } export const getAvatarURL = ( diff --git a/web/src/util/validation.ts b/web/src/util/validation.ts index db5933a..aee2138 100644 --- a/web/src/util/validation.ts +++ b/web/src/util/validation.ts @@ -17,6 +17,7 @@ import { ContentURI, EventID, RoomAlias, RoomID, UserID, UserProfile } from "@/a const simpleHomeserverRegex = /^[a-zA-Z0-9.:-]+$/ const mediaRegex = /^mxc:\/\/([a-zA-Z0-9.:-]+)\/([a-zA-Z0-9_-]+)$/ +const phoneNumberRegex = /^(?:(?:\+\d{1,4}[-.\s]?)?(?:\(?\d{1,4}\)?[-.\s]?\d{1,4}[-.\s]?\d{1,4}|\d{5,10})|\d{4,6})$/; function isIdentifier(identifier: unknown, sigil: string, requiresServer: boolean): identifier is T { if (typeof identifier !== "string" || !identifier.startsWith(sigil)) { @@ -38,6 +39,7 @@ export const isUserID = (userID: unknown) => isIdentifier(userID, "@", t export const isRoomID = (roomID: unknown) => isIdentifier(roomID, "!", true) export const isRoomAlias = (roomAlias: unknown) => isIdentifier(roomAlias, "#", true) export const isMXC = (mxc: unknown): mxc is ContentURI => typeof mxc === "string" && mediaRegex.test(mxc) +export const isPhoneNumber = (phone: unknown): boolean => typeof phone === "string" && phoneNumberRegex.test(phone) export interface ParsedMatrixURI { identifier: UserID | RoomID | RoomAlias From 845fc0e110783a9dd17b44395fe0b7e6f598f9a0 Mon Sep 17 00:00:00 2001 From: Zach Russell Date: Sat, 22 Mar 2025 14:33:17 -0600 Subject: [PATCH 3/3] linter --- web/src/api/media.ts | 2 +- web/src/util/validation.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/web/src/api/media.ts b/web/src/api/media.ts index 887aed5..8fae262 100644 --- a/web/src/api/media.ts +++ b/web/src/api/media.ts @@ -80,7 +80,7 @@ function getFallbackCharacter(from: unknown, idx: number): string { } // Array.from appears to be the only way to handle Unicode correctly - return Array.from(from.slice(0, (idx + 1) * 2))[idx]?.toUpperCase().toWellFormed() ?? ""; + return Array.from(from.slice(0, (idx + 1) * 2))[idx]?.toUpperCase().toWellFormed() ?? "" } export const getAvatarURL = ( diff --git a/web/src/util/validation.ts b/web/src/util/validation.ts index aee2138..b942c7d 100644 --- a/web/src/util/validation.ts +++ b/web/src/util/validation.ts @@ -17,7 +17,7 @@ import { ContentURI, EventID, RoomAlias, RoomID, UserID, UserProfile } from "@/a const simpleHomeserverRegex = /^[a-zA-Z0-9.:-]+$/ const mediaRegex = /^mxc:\/\/([a-zA-Z0-9.:-]+)\/([a-zA-Z0-9_-]+)$/ -const phoneNumberRegex = /^(?:(?:\+\d{1,4}[-.\s]?)?(?:\(?\d{1,4}\)?[-.\s]?\d{1,4}[-.\s]?\d{1,4}|\d{5,10})|\d{4,6})$/; +const phoneNumberRegex = /^(?:(?:\+\d{1,4}[-.\s]?)?(?:\(?\d{1,4}\)?[-.\s]?\d{1,4}[-.\s]?\d{1,4}|\d{5,10})|\d{4,6})$/ function isIdentifier(identifier: unknown, sigil: string, requiresServer: boolean): identifier is T { if (typeof identifier !== "string" || !identifier.startsWith(sigil)) {