[env/github] map SAML SSO data from Okta into user's profile data

src/api/profile.ts

@@ -1,7 +1,7 @@
 import Bugsnag from "@bugsnag/js";
 import firebase from "firebase/app";
-import { TalkShowStudioExperience, UserStatus, ProfileLink } from "types/User";
 
+import { TalkShowStudioExperience, UserStatus, ProfileLink } from "types/User";
 import { VenueEvent } from "types/venues";
 
 import { WithVenueId } from "utils/id";

src/components/molecules/ProfilePictureInput/ProfilePictureInput.tsx

@@ -1,4 +1,10 @@
-import React, { useCallback, useMemo, useRef, useState } from "react";
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
 import { useFirebase } from "react-redux-firebase";
 import { useAsync } from "react-use";
 import { UserInfo } from "firebase/app";
@@ -11,6 +17,7 @@ import {
 } from "settings";
 
 import { resizeFile } from "utils/image";
+import { isDefined } from "utils/types";
 
 import { useSovereignVenueId } from "hooks/useSovereignVenueId";
 
@@ -27,6 +34,7 @@ export interface ProfilePictureInputProps {
   pictureUrl: string;
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   register: any;
+  githubHandle?: string;
 }
 
 export const ProfilePictureInput: React.FunctionComponent<ProfilePictureInputProps> = ({
@@ -36,6 +44,7 @@ export const ProfilePictureInput: React.FunctionComponent<ProfilePictureInputPro
   errors,
   pictureUrl,
   register,
+  githubHandle,
 }) => {
   const [isPictureUploading, setIsPictureUploading] = useState(false);
   const [error, setError] = useState("");
@@ -92,6 +101,16 @@ export const ProfilePictureInput: React.FunctionComponent<ProfilePictureInputPro
     setValue("pictureUrl", pictureUrlRef, true);
   };
 
+  const githubImageSrc =
+    githubHandle && `https://github.com/${githubHandle}.png?size=120`;
+
+  // Set GitHub image as a default picture
+  useEffect(() => {
+    if (!githubImageSrc || pictureUrl) return;
+
+    setValue("pictureUrl", githubImageSrc, true);
+  }, [githubImageSrc, setValue, pictureUrl]);
+
   const uploadDefaultAvatar = useCallback(
     async (avatar: string) => {
       setValue("pictureUrl", avatar, true);
@@ -107,21 +126,25 @@ export const ProfilePictureInput: React.FunctionComponent<ProfilePictureInputPro
     ? customAvatars
     : DEFAULT_AVATARS;
 
-  const avatarImages = useMemo(() => {
-    return defaultAvatars.map((avatar, index) => (
-      <div
-        key={`${avatar}-${index}`}
-        className="profile-picture-preview-container"
-        onClick={() => uploadDefaultAvatar(avatar)}
-      >
-        <img
-          src={avatar}
-          className="profile-icon profile-picture-preview"
-          alt={`default avatar ${index}`}
-        />
-      </div>
-    ));
-  }, [defaultAvatars, uploadDefaultAvatar]);
+  const avatarImages = useMemo(
+    () =>
+      [githubImageSrc, ...defaultAvatars]
+        .filter(isDefined)
+        .map((avatarSrc, index) => (
+          <div
+            key={`${avatarSrc}-${index}`}
+            className="profile-picture-preview-container"
+            onClick={() => uploadDefaultAvatar(avatarSrc)}
+          >
+            <img
+              src={avatarSrc}
+              className="profile-icon profile-picture-preview"
+              alt={`default avatar ${index}`}
+            />
+          </div>
+        )),
+    [defaultAvatars, githubImageSrc, uploadDefaultAvatar]
+  );
 
   return (
     <div className="profile-picture-upload-form">

src/components/organisms/ProfileModal/EditProfileForm/EditProfileForm.scss

@@ -9,6 +9,14 @@ $button-height: 30px;
     line-height: $spacing--xl;
     color: opaque-white(0.5);
     text-align: start;
+    margin-bottom: $spacing--md;
+  }
+
+  &__edit-input-title {
+    font-size: $font-size--md;
+    margin-bottom: $spacing--lg;
+    opacity: 0.8;
+    width: 100%;
   }
 
   &__question {
@@ -29,7 +37,7 @@ $button-height: 30px;
 
   &__input-container-name {
     height: $submit-button-diameter;
-    margin-bottom: $spacing--xl;
+    margin-top: $spacing--sm;
   }
 
   &__input-name {

src/components/organisms/ProfileModal/EditProfileForm/EditProfileForm.tsx

@@ -56,6 +56,9 @@ export const EditProfileForm: React.FunctionComponent<EditProfileFormProps> = ({
   const defaultValues = {
     partyName: profile?.partyName,
     pictureUrl: profile?.pictureUrl || DEFAULT_PROFILE_IMAGE,
+    realName: profile?.realName,
+    companyTitle: profile?.companyTitle,
+    companyDepartment: profile?.companyDepartment,
   };
 
   profileQuestions &&
@@ -90,14 +93,50 @@ export const EditProfileForm: React.FunctionComponent<EditProfileFormProps> = ({
     <div className="EditProfileForm">
       <h1 className="EditProfileForm__title">Edit profile</h1>
       <form onSubmit={handleSubmit(onSubmit)} className="form">
-        <InputField
-          containerClassName="EditProfileForm__input-container-name"
-          inputClassName="EditProfileForm__input-name"
-          name="partyName"
-          placeholder="Your display name"
-          error={errors.partyName}
-          ref={register()}
-        />
+        <label className="EditProfileForm__edit-input-title">
+          Display name
+          <InputField
+            containerClassName="EditProfileForm__input-container-name"
+            inputClassName="EditProfileForm__input-name"
+            name="partyName"
+            placeholder="Your display name"
+            error={errors.partyName}
+            ref={register()}
+          />
+        </label>
+
+        <label className="EditProfileForm__edit-input-title">
+          Real name
+          <InputField
+            containerClassName="EditProfileForm__input-container-name"
+            inputClassName="EditProfileForm__input-name"
+            name="realName"
+            placeholder="Your real name"
+            ref={register()}
+          />
+        </label>
+
+        <label className="EditProfileForm__edit-input-title">
+          Department
+          <InputField
+            containerClassName="EditProfileForm__input-container-name"
+            inputClassName="EditProfileForm__input-name"
+            name="companyDepartment"
+            placeholder="Your department"
+            ref={register()}
+          />
+        </label>
+
+        <label className="EditProfileForm__edit-input-title">
+          Title
+          <InputField
+            containerClassName="EditProfileForm__input-container-name"
+            inputClassName="EditProfileForm__input-name"
+            name="companyTitle"
+            placeholder="Your title"
+            ref={register()}
+          />
+        </label>
 
         {user && venueId && (
           <ProfilePictureInput

src/components/organisms/UserProfileModal/UserProfileModal.scss

@@ -26,10 +26,9 @@ $profile-link--padding: 6px 18px;
       background: $secondary--light;
     }
   }
-}
-
-.question {
-  margin-bottom: 0;
+  .no-margin {
+    margin-bottom: 0;
+  }
 }
 
 .light {

src/components/organisms/UserProfileModal/UserProfileModal.tsx

@@ -44,7 +44,15 @@ export const UserProfileModal: React.FC<UserProfileModalProps> = ({
     closeUserProfileModal,
   } = useProfileModalControls();
 
-  const chosenUserId = selectedUserProfile?.id;
+  const {
+    id: chosenUserId,
+    profileLinks,
+    pictureUrl,
+    partyName,
+    realName,
+    companyDepartment,
+    companyTitle,
+  } = selectedUserProfile ?? {};
 
   const profileQuestions = venue?.profile_questions;
 
@@ -67,8 +75,8 @@ export const UserProfileModal: React.FC<UserProfileModalProps> = ({
 
             return (
               <React.Fragment key={question.text}>
-                <p className="light question">{question.text}</p>
-                <h6>{questionAnswer}</h6>
+                <p className="light no-margin">{question.text}</p>
+                <p className="h6">{questionAnswer}</p>
               </React.Fragment>
             );
           })
@@ -78,7 +86,7 @@ export const UserProfileModal: React.FC<UserProfileModalProps> = ({
 
   const renderedProfileLinks = useMemo(
     () =>
-      selectedUserProfile?.profileLinks?.map((link) => (
+      profileLinks?.map((link) => (
         <a
           key={link.title}
           className="UserProfileModal__profile-link"
@@ -89,7 +97,7 @@ export const UserProfileModal: React.FC<UserProfileModalProps> = ({
           {link.title}
         </a>
       )),
-    [selectedUserProfile?.profileLinks]
+    [profileLinks]
   );
 
   if (!selectedUserProfile || !chosenUserId || !user) {
@@ -109,7 +117,7 @@ export const UserProfileModal: React.FC<UserProfileModalProps> = ({
               <div className="profile-pic">
                 {/* @debt Refactor this to use our useImage hook? Or just UserAvatar / UserProfilePicture directly? */}
                 <img
-                  src={selectedUserProfile.pictureUrl || DEFAULT_PROFILE_PIC}
+                  src={pictureUrl ?? DEFAULT_PROFILE_PIC}
                   alt="profile"
                   onError={(e) => {
                     (e.target as HTMLImageElement).onerror = null;
@@ -124,24 +132,40 @@ export const UserProfileModal: React.FC<UserProfileModalProps> = ({
                 />
               </div>
               <div className="profile-text">
-                <h2 className="italic">
-                  {selectedUserProfile.partyName || DEFAULT_PARTY_NAME}
-                </h2>
+                <h2 className="italic">{partyName ?? DEFAULT_PARTY_NAME}</h2>
               </div>
             </div>
             <div className="profile-extras">
               {renderedProfileQuestionAnswers}
             </div>
             <div>{renderedProfileLinks}</div>
+            {realName && (
+              <>
+                <p className="light no-margin">Full Name</p>
+                <p className="h6">{realName}</p>
+              </>
+            )}
+            {companyDepartment && (
+              <>
+                <p className="light no-margin">Department</p>
+                <p className="h6">{companyDepartment}</p>
+              </>
+            )}
+            {companyTitle && (
+              <>
+                <p className="light no-margin">Title</p>
+                <p className="h6">{companyTitle}</p>
+              </>
+            )}
             {ENABLE_SUSPECTED_LOCATION && (
               <div className="profile-location">
                 <p className="question">Suspected Location:</p>
-                <h6 className="location">
+                <p className="h6 location">
                   <SuspectedLocation
                     user={selectedUserProfile}
                     currentVenue={venue}
                   />
-                </h6>
+                </p>
               </div>
             )}
           </div>

src/hooks/useSAMLSignIn.ts

@@ -1,18 +1,34 @@
-import { useCallback } from "react";
 import Bugsnag from "@bugsnag/js";
+import { useAsyncFn } from "react-use";
+
 import firebase from "firebase/app";
 
-export const useSAMLSignIn = (samlAuthProviderId?: string) => {
+import { ReactHook } from "types/utility";
+
+export interface UseSAMLSignInProps {
+  samlAuthProviderId?: string;
+}
+
+export interface UseSAMLSignInReturn {
+  hasSamlAuthProviderId: boolean;
+  signInWithSAML: () => void;
+  isSigningIn: boolean;
+}
+
+export const useSAMLSignIn: ReactHook<
+  UseSAMLSignInProps,
+  UseSAMLSignInReturn
+> = ({ samlAuthProviderId }) => {
   const hasSamlAuthProviderId = samlAuthProviderId !== undefined;
 
-  const signInWithSAML = useCallback(() => {
+  const [{ loading }, signInWithSAML] = useAsyncFn(async () => {
     if (!samlAuthProviderId) return;
 
     const SAMLAuthProvider = new firebase.auth.SAMLAuthProvider(
       samlAuthProviderId
     );
 
-    firebase
+    return firebase
       .auth()
       .signInWithPopup(SAMLAuthProvider)
       .catch((err) => {
@@ -27,5 +43,5 @@ export const useSAMLSignIn = (samlAuthProviderId?: string) => {
       });
   }, [samlAuthProviderId]);
 
-  return { signInWithSAML, hasSamlAuthProviderId };
+  return { signInWithSAML, hasSamlAuthProviderId, isSigningIn: loading };
 };