diff --git a/firestore.rules b/firestore.rules index e766f15f..385e2f44 100644 --- a/firestore.rules +++ b/firestore.rules @@ -14,7 +14,7 @@ service cloud.firestore { match /users/{userId} { allow read; allow update: if resource.data.id == request.auth.uid - || request.resource.data.diff(resource.data).affectedKeys() + && request.resource.data.diff(resource.data).affectedKeys() .hasOnly(['bio', 'bannerUrl', 'website', 'twitterHandle', 'discordHandle']); } diff --git a/web/components/profile-menu.tsx b/web/components/profile-menu.tsx index def6f1f0..04b37406 100644 --- a/web/components/profile-menu.tsx +++ b/web/components/profile-menu.tsx @@ -35,7 +35,7 @@ function getNavigationOptions( href: user ? '/home' : '/', }, { - name: `@${user?.username}`, + name: `Your profile`, href: `/${user?.username}`, }, ...(mobile diff --git a/web/components/user-page.tsx b/web/components/user-page.tsx index b1a4d821..3a6c3cc3 100644 --- a/web/components/user-page.tsx +++ b/web/components/user-page.tsx @@ -132,6 +132,7 @@ export function UserPage(props: { user: User; currentUser?: User }) { } // Assign each user to a random default banner based on the hash of userId +// TODO: Consider handling banner uploads using our own storage bucket, like user avatars. export function defaultBannerUrl(userId: string) { const defaultBanner = [ 'https://images.unsplash.com/photo-1501523460185-2aa5d2a0f981?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2131&q=80', diff --git a/web/pages/profile.tsx b/web/pages/profile.tsx index 21ed216e..2b3445e5 100644 --- a/web/pages/profile.tsx +++ b/web/pages/profile.tsx @@ -20,31 +20,41 @@ import { User } from '../../common/user' import { updateUser } from '../lib/firebase/users' import { defaultBannerUrl } from '../components/user-page' import { SiteLink } from '../components/site-link' +import Textarea from 'react-expanding-textarea' function EditUserField(props: { user: User field: 'bio' | 'bannerUrl' | 'twitterHandle' | 'discordHandle' label: string - isEditing: boolean }) { - const { user, field, label, isEditing } = props + const { user, field, label } = props const [value, setValue] = useState(user[field] ?? '') async function updateField() { - await updateUser(user.id, { [field]: value }) + // Note: We trim whitespace before uploading to Firestore + await updateUser(user.id, { [field]: value.trim() }) } return (