fix: show username on cert if name is private (#40897)

Co-authored-by: Shaun Hamilton <51722130+ShaunSHamilton@users.noreply.github.com>

api-server/server/boot/certificate.js

@@ -423,7 +423,7 @@ function createShowCert(app) {
           ]
         });
       }
-      const { isLocked, showCerts } = user.profileUI;
+      const { isLocked, showCerts, showName } = user.profileUI;
 
       if (!user.name) {
         return res.json({
@@ -512,6 +512,16 @@ function createShowCert(app) {
         }
 
         const { username, name } = user;
+
+        if (!showName) {
+          return res.json({
+            certTitle,
+            username,
+            date: completedDate,
+            completionTime
+          });
+        }
+
         return res.json({
           certTitle,
           username,

client/src/client-only-routes/ShowCertification.js

@@ -75,6 +75,9 @@ const propTypes = {
         )
       })
     ),
+    profileUI: PropTypes.shape({
+      showName: PropTypes.bool
+    }),
     username: PropTypes.string
   }),
   userFetchState: PropTypes.shape({
@@ -230,13 +233,16 @@ const ShowCertification = props => {
 
   const {
     date,
-    name: userFullName,
+    name: userFullName = null,
     username,
     certTitle,
     completionTime
   } = cert;
+
   const { user } = props;
 
+  const displayName = userFullName ?? username;
+
   const certDate = new Date(date);
   const certYear = certDate.getFullYear();
   const certMonth = certDate.getMonth();
@@ -328,7 +334,7 @@ const ShowCertification = props => {
             <div className='information-container'>
               <h3>This certifies that</h3>
               <h1>
-                <strong>{userFullName}</strong>
+                <strong>{displayName}</strong>
               </h1>
               <h3>has successfully completed the freeCodeCamp.org</h3>
               <h1>
@@ -362,7 +368,7 @@ const ShowCertification = props => {
       </Grid>
       {signedInUserName === username ? shareCertBtns : ''}
       <Spacer size={2} />
-      <ShowProjectLinks user={user} name={userFullName} certName={certTitle} />
+      <ShowProjectLinks user={user} name={displayName} certName={certTitle} />
     </div>
   );
 };