Update name and logo in clientid.jsonld during build (solidcouch#117)

Also update some remaining occurences of SolidCouch to actual community
name at runtime

Follow-up of solidcouch#112

Author: mrkvon

package.json

@@ -67,11 +67,12 @@
   "scripts": {
     "start": "react-scripts start",
     "prebuild": "yarn build:community-info",
-    "build": "dotenv -e .env.build -- react-scripts build && node scripts/build-clientid.js",
-    "postbuild": "yarn build:update-manifest",
+    "build": "dotenv -e .env.build -- react-scripts build",
+    "postbuild": " yarn build:update-clientid && yarn build:update-manifest",
     "build:cname": "node scripts/add-cname.js",
     "build:community-info": "dotenv -e .env -c -- node --loader ts-node/esm scripts/update-community-info.mts",
     "build:update-manifest": "dotenv -e .env.build -- node --loader ts-node/esm scripts/update-manifest.mts",
+    "build:update-clientid": "dotenv -e .env.build -- node scripts/build-clientid.js",
     "test": "react-scripts test",
     "eject": "react-scripts eject",
     "preanalyze": "yarn build",

scripts/build-clientid.js

@@ -21,6 +21,22 @@ content = content.replaceAll(
     'https://app.solidcouch.org', // or a default
 )
 
+// update name and logo if available
+const contentObject = JSON.parse(content, 'utf8')
+const communityName = process.env.REACT_APP_COMMUNITY_NAME_UNSAFE
+const communityLogo = process.env.REACT_APP_COMMUNITY_LOGO
+if (communityName) {
+  contentObject.client_name = communityName
+  // eslint-disable-next-line no-console
+  console.log('Updated name in ClientID:', communityName)
+}
+if (communityLogo) {
+  contentObject.logo_uri = communityLogo
+  // eslint-disable-next-line no-console
+  console.log('Updated logo in ClientID:', communityLogo)
+}
+content = JSON.stringify(contentObject, null, 2)
+
 // Write the content to the output file
 fs.writeFileSync(clientIdPath, content, 'utf8')
 

src/components/Join/Join.tsx

@@ -4,6 +4,7 @@ import { ExternalButtonLink } from 'components/Button/Button'
 import type { IssuerConfig } from 'config'
 import { useConfig } from 'config/hooks'
 import { actions } from 'features/login/loginSlice'
+import { useReadCommunity } from 'hooks/data/useCommunity'
 import { ChangeEvent, Fragment, ReactNode, useMemo, useState } from 'react'
 import Modal from 'react-modal'
 import styles from './Join.module.scss'
@@ -33,7 +34,10 @@ const RegistrationButton = ({
 }
 
 const useTabs = () => {
-  const { oidcIssuers } = useConfig()
+  const { oidcIssuers, communityId } = useConfig()
+
+  const community = useReadCommunity(communityId)
+  const communityName = community.name || 'SolidCouch'
 
   const tabs = useMemo(
     () => [
@@ -42,7 +46,7 @@ const useTabs = () => {
         label: 'Show me some providers!',
         content: (
           <>
-            Here are some Pod providers that work with SolidCouch:
+            Here are some Pod providers that work with {communityName}:
             <ul>
               {oidcIssuers
                 .filter(iss => iss.registration)
@@ -148,7 +152,7 @@ const useTabs = () => {
         ),
       },
     ],
-    [oidcIssuers],
+    [communityName, oidcIssuers],
   )
 
   return tabs
@@ -158,6 +162,10 @@ export const Join = () => {
   const [modalOpen, setModalOpen] = useState(false)
   const [selectedTab, setSelectedTab] = useState<string>()
 
+  const { communityId } = useConfig()
+  const community = useReadCommunity(communityId)
+  const communityName = community.name || 'SolidCouch'
+
   const handleTabChange = (event: ChangeEvent<HTMLInputElement>) => {
     setSelectedTab(event.target.value)
   }
@@ -177,7 +185,7 @@ export const Join = () => {
       >
         <div className={styles.container}>
           <div className={styles.content}>
-            To join SolidCouch, you need a{' '}
+            To join {communityName}, you need a{' '}
             <a
               href="https://solidproject.org/users/get-a-pod"
               target="_blank"

src/components/SignIn/SignIn.tsx

@@ -4,6 +4,7 @@ import { Button } from 'components'
 import { guessIssuer } from 'components/SignIn/oidcIssuer'
 import { useConfig } from 'config/hooks'
 import { actions, selectLastSelectedIssuer } from 'features/login/loginSlice'
+import { useReadCommunity } from 'hooks/data/useCommunity'
 import { useState } from 'react'
 import { useForm } from 'react-hook-form'
 import Modal from 'react-modal'
@@ -12,7 +13,7 @@ import styles from './SignIn.module.scss'
 Modal.setAppElement('#root')
 
 export const SignIn = () => {
-  const { oidcIssuers } = useConfig()
+  const { oidcIssuers, communityId } = useConfig()
   const [modalOpen, setModalOpen] = useState(false)
   const [longList, setLongList] = useState(false)
 
@@ -25,6 +26,8 @@ export const SignIn = () => {
 
   const dispatch = useAppDispatch()
 
+  const community = useReadCommunity(communityId)
+
   // sign in on selecting a provider
   const handleSelectIssuer = async (oidcIssuer: string) => {
     const prevIssuer = lastIssuer ?? ''
@@ -35,7 +38,7 @@ export const SignIn = () => {
       await login({
         oidcIssuer,
         redirectUrl: new URL('/', window.location.href).toString(),
-        clientName: 'SolidCouch',
+        clientName: community.name || 'SolidCouch',
         clientId:
           process.env.NODE_ENV === 'development' &&
           !process.env.REACT_APP_ENABLE_DEV_CLIENT_ID

src/pages/HospexSetup.tsx

@@ -61,6 +61,7 @@ export const HospexSetup = ({
   const [selectedHospexDocument, setSelectedHospexDocument] = useState('')
   const [addToExisting, setAddToExisting] = useState<boolean>()
   const newHospexDocument = `${storage}hospex/${communityContainer}/card`
+
   const handleClickSetup = async () => {
     setIsSaving(true)
     if (
@@ -124,7 +125,7 @@ export const HospexSetup = ({
 
   return (
     <div>
-      <header>Welcome to SolidCouch!</header>
+      <header>Welcome to {community.name || 'SolidCouch'}!</header>
       <div>We would like to set up your Pod:</div>
       <ul>
         <li>{!isMember && `join community ${communityId}`}</li>