Update Google Drive Login Buttons UI + Use session for login persistence

Author: sumomomomomo

src/commons/application/ApplicationTypes.ts

@@ -513,6 +513,7 @@ export const defaultSession: SessionState = {
   assessmentOverviews: undefined,
   agreedToResearch: undefined,
   sessionId: Date.now(),
+  googleAccessToken: undefined,
   githubOctokitObject: { octokit: undefined },
   gradingOverviews: undefined,
   students: undefined,

src/commons/application/actions/SessionActions.ts

@@ -51,6 +51,7 @@ import {
   LOGIN,
   LOGIN_GITHUB,
   LOGOUT_GITHUB,
+  LOGIN_GOOGLE,
   LOGOUT_GOOGLE,
   NotificationConfiguration,
   NotificationPreference,
@@ -64,6 +65,7 @@ import {
   SET_COURSE_REGISTRATION,
   SET_GITHUB_ACCESS_TOKEN,
   SET_GITHUB_OCTOKIT_OBJECT,
+  SET_GOOGLE_ACCESS_TOKEN,
   SET_GOOGLE_USER,
   SET_NOTIFICATION_CONFIGS,
   SET_TOKENS,
@@ -159,6 +161,8 @@ export const fetchStudents = createAction(FETCH_STUDENTS, () => ({ payload: {} }
 
 export const login = createAction(LOGIN, (providerId: string) => ({ payload: providerId }));
 
+export const loginGoogle = createAction(LOGIN_GOOGLE, () => ({ payload: {} }));
+
 export const logoutGoogle = createAction(LOGOUT_GOOGLE, () => ({ payload: {} }));
 
 export const loginGitHub = createAction(LOGIN_GITHUB, () => ({ payload: {} }));
@@ -203,6 +207,9 @@ export const setAdminPanelCourseRegistrations = createAction(
 
 export const setGoogleUser = createAction(SET_GOOGLE_USER, (user?: string) => ({ payload: user }));
 
+export const setGoogleAccessToken = 
+  createAction(SET_GOOGLE_ACCESS_TOKEN, (accessToken?: string) => ({ payload: accessToken}));
+
 export const setGitHubOctokitObject = createAction(
   SET_GITHUB_OCTOKIT_OBJECT,
   (authToken?: string) => ({ payload: generateOctokitInstance(authToken || '') })

src/commons/application/reducers/SessionsReducer.ts

@@ -18,6 +18,7 @@ import {
   SET_GITHUB_ACCESS_TOKEN,
   SET_GITHUB_OCTOKIT_OBJECT,
   SET_GOOGLE_USER,
+  SET_GOOGLE_ACCESS_TOKEN,
   SET_NOTIFICATION_CONFIGS,
   SET_TOKENS,
   SET_USER,
@@ -54,6 +55,11 @@ export const SessionsReducer: Reducer<SessionState, SourceActionType> = (
         ...state,
         googleUser: action.payload
       };
+    case SET_GOOGLE_ACCESS_TOKEN:
+      return {
+        ...state,
+        googleAccessToken: action.payload
+      }
     case SET_TOKENS:
       return {
         ...state,

src/commons/application/types/SessionTypes.ts

@@ -31,6 +31,7 @@ export const FETCH_STUDENTS = 'FETCH_STUDENTS';
 export const FETCH_TEAM_FORMATION_OVERVIEW = 'FETCH_TEAM_FORMATION_OVERVIEW';
 export const FETCH_TEAM_FORMATION_OVERVIEWS = 'FETCH_TEAM_FORMATION_OVERVIEWS';
 export const LOGIN = 'LOGIN';
+export const LOGIN_GOOGLE = 'LOGIN_GOOGLE';
 export const LOGOUT_GOOGLE = 'LOGOUT_GOOGLE';
 export const LOGIN_GITHUB = 'LOGIN_GITHUB';
 export const LOGOUT_GITHUB = 'LOGOUT_GITHUB';
@@ -41,6 +42,7 @@ export const SET_COURSE_REGISTRATION = 'SET_COURSE_REGISTRATION';
 export const SET_ASSESSMENT_CONFIGURATIONS = 'SET_ASSESSMENT_CONFIGURATIONS';
 export const SET_ADMIN_PANEL_COURSE_REGISTRATIONS = 'SET_ADMIN_PANEL_COURSE_REGISTRATIONS';
 export const SET_GOOGLE_USER = 'SET_GOOGLE_USER';
+export const SET_GOOGLE_ACCESS_TOKEN = 'SET_GOOGLE_ACCESS_TOKEN';
 export const SET_GITHUB_OCTOKIT_OBJECT = 'SET_GITHUB_OCTOKIT_OBJECT';
 export const SET_GITHUB_ACCESS_TOKEN = 'SET_GITHUB_ACCESS_TOKEN';
 export const SUBMIT_ANSWER = 'SUBMIT_ANSWER';
@@ -132,6 +134,7 @@ export type SessionState = {
   readonly gradings: Map<number, GradingQuery>;
   readonly notifications: Notification[];
   readonly googleUser?: string;
+  readonly googleAccessToken?: string;
   readonly githubOctokitObject: { octokit: Octokit | undefined };
   readonly githubAccessToken?: string;
   readonly remoteExecutionDevices?: Device[];

src/commons/controlBar/ControlBarGoogleDriveButtons.tsx

@@ -22,6 +22,7 @@ type Props = {
   onClickSave?: () => any;
   onClickSaveAs?: () => any;
   onClickLogOut?: () => any;
+  onClickLogIn?: () => any;
   onPopoverOpening?: () => any;
 };
 
@@ -41,7 +42,12 @@ export const ControlBarGoogleDriveButtons: React.FC<Props> = props => {
     />
   );
   const openButton = (
-    <ControlButton label="Open" icon={IconNames.DOCUMENT_OPEN} onClick={props.onClickOpen} />
+    <ControlButton 
+      label="Open" 
+      icon={IconNames.DOCUMENT_OPEN} 
+      onClick={props.onClickOpen} 
+      isDisabled={props.loggedInAs ? false : true}
+    />
   );
   const saveButton = (
     <ControlButton
@@ -53,13 +59,22 @@ export const ControlBarGoogleDriveButtons: React.FC<Props> = props => {
     />
   );
   const saveAsButton = (
-    <ControlButton label="Save as" icon={IconNames.SEND_TO} onClick={props.onClickSaveAs} />
+    <ControlButton 
+      label="Save as" 
+      icon={IconNames.SEND_TO}
+      onClick={props.onClickSaveAs}
+      isDisabled={props.loggedInAs ? false : true}
+    />
   );
-  const logoutButton = props.loggedInAs && (
+
+  const loginButton = props.loggedInAs ? (
     <Tooltip2 content={`Logged in as ${props.loggedInAs}`}>
-      <ControlButton label="Log out" icon={IconNames.LOG_OUT} onClick={props.onClickLogOut} />
+      <ControlButton label="Log Out" icon={IconNames.LOG_OUT} onClick={props.onClickLogOut} />
     </Tooltip2>
+  ) : (
+    <ControlButton label="Log In" icon={IconNames.LOG_IN} onClick={props.onClickLogIn} />
   );
+
   const tooltipContent = props.isFolderModeEnabled
     ? 'Currently unsupported in Folder mode'
     : undefined;
@@ -74,7 +89,7 @@ export const ControlBarGoogleDriveButtons: React.FC<Props> = props => {
               {openButton}
               {saveButton}
               {saveAsButton}
-              {logoutButton}
+              {loginButton}
             </ButtonGroup>
           </div>
         }

src/commons/sagas/PersistenceSaga.tsx

@@ -13,7 +13,7 @@ import {
 import { store } from '../../pages/createStore';
 import { OverallState } from '../application/ApplicationTypes';
 import { ExternalLibraryName } from '../application/types/ExternalTypes';
-import { LOGOUT_GOOGLE } from '../application/types/SessionTypes';
+import { LOGIN_GOOGLE, LOGOUT_GOOGLE } from '../application/types/SessionTypes';
 import { actions } from '../utils/ActionsHelper';
 import Constants from '../utils/Constants';
 import { showSimpleConfirmDialog, showSimplePromptDialog } from '../utils/DialogHelper';
@@ -43,9 +43,13 @@ export function* persistenceSaga(): SagaIterator {
   yield takeLatest(LOGOUT_GOOGLE, function* () {
     yield put(actions.playgroundUpdatePersistenceFile(undefined));
     yield call(ensureInitialised);
-    yield gapi.client.setToken(null);
-    yield handleUserChanged(null);
-    yield localStorage.removeItem("gsi-access-token");
+    yield call([gapi.client, "setToken"], null);
+    yield call(handleUserChanged, null);
+  });
+
+  yield takeLatest(LOGIN_GOOGLE, function* () {
+    yield call(ensureInitialised);
+    yield call(getToken);
   });
 
   yield takeLatest(PERSISTENCE_OPEN_PICKER, function* (): any {
@@ -311,31 +315,35 @@ const initialisationPromise: Promise<void> = new Promise(res => {
   startInitialisation = res;
 }).then(initialise);
 
-async function getUserProfileData(accessToken: string) {
+/**
+ * Calls Google useinfo API to get user's profile data, specifically email, using accessToken.
+ * If email field does not exist in the JSON response (invalid access token), will return undefined.
+ * Used with handleUserChanged to handle login/logout.
+ * @param accessToken GIS access token
+ * @returns string if email field exists in JSON response, undefined if not
+ */
+async function getUserProfileDataEmail(accessToken: string): Promise<string | undefined> {
   const headers = new Headers();
   headers.append('Authorization', `Bearer ${accessToken}`);
   const response = await fetch('https://www.googleapis.com/oauth2/v3/userinfo', {
     headers
   });
   const data = await response.json();
-  return data;
+  return data.email;
 }
 
-async function isOAuthTokenValid(accessToken: string) {
-  const userProfileData = await getUserProfileData(accessToken);
-  return userProfileData.error ? false : true;
-}
-
-// updates store and localStorage
+// only function that updates store
 async function handleUserChanged(accessToken: string | null) {
   // logs out if null
-  if (accessToken === null) {
+  if (accessToken === null) { // clear store
     store.dispatch(actions.setGoogleUser(undefined));
+    store.dispatch(actions.setGoogleAccessToken(undefined));
   } else {
-    const userProfileData = await getUserProfileData(accessToken)
-    const email = userProfileData.email;
+    const email = await getUserProfileDataEmail(accessToken);
+    // if access token is invalid, const email will be undefined
+    // so stores will also be cleared here if it is invalid
     store.dispatch(actions.setGoogleUser(email));
-    localStorage.setItem("gsi-access-token", accessToken);
+    store.dispatch(actions.setGoogleAccessToken(accessToken));
   }
 }
 
@@ -377,24 +385,24 @@ async function initialise() { // only called once
   }); 
 
   // check for stored token
-  // if it exists and is valid, load manually
-  // leave checking whether it is valid or not to ensureInitialisedAndAuthorised
-  if (localStorage.getItem("gsi-access-token")) {
-    await loadToken(localStorage.getItem("gsi-access-token")!);
+  const accessToken = store.getState().session.googleAccessToken; 
+  if (accessToken) {
+    gapi.client.setToken({access_token: accessToken});
+    handleUserChanged(accessToken); // this also logs out user if stored token is invalid
   }
 }
 
 // adapted from https://developers.google.com/identity/oauth2/web/guides/migration-to-gis
-async function getToken() {
-  await new Promise((resolve, reject) => {
+function* getToken() {
+  yield new Promise((resolve, reject) => {
     try {
       // Settle this promise in the response callback for requestAccessToken()
-      // as any used here cos of limitations of the type declaration library
       (tokenClient as any).callback = (resp: google.accounts.oauth2.TokenResponse) => {
         if (resp.error !== undefined) {
           reject(resp);
         }
-        // GIS has automatically updated gapi.client with the newly issued access token.
+        // GIS has already automatically updated gapi.client 
+        // with the newly issued access token by this point
         handleUserChanged(gapi.client.getToken().access_token); 
         resolve(resp);
       };
@@ -405,27 +413,21 @@ async function getToken() {
   });
 }
 
-// manually load token, when token is not gotten from getToken()
-// but instead from localStorage
-async function loadToken(accessToken: string) {
-  gapi.client.setToken({access_token: accessToken});
-  return handleUserChanged(accessToken);
-}
-
 function* ensureInitialised() {
   startInitialisation();
   yield initialisationPromise;
 }
 
 function* ensureInitialisedAndAuthorised() { // called multiple times
   yield call(ensureInitialised);
-  const currToken = gapi.client.getToken();
+  const currToken: GoogleApiOAuth2TokenObject = yield call(gapi.client.getToken);
 
   if (currToken === null) {
     yield call(getToken);
   } else {
     // check if loaded token is still valid
-    const isValid: boolean = yield call(isOAuthTokenValid, currToken.access_token);
+    const email: string | undefined = yield call(getUserProfileDataEmail, currToken.access_token);
+    const isValid = email ? true : false;
     if (!isValid) {
       yield call(getToken);
     }

src/pages/createStore.ts

@@ -53,7 +53,10 @@ function loadStore(loadedStore: SavedState | undefined) {
         octokit: loadedStore.session.githubAccessToken
           ? generateOctokitInstance(loadedStore.session.githubAccessToken)
           : undefined
-      }
+      },
+      googleUser: loadedStore.session.googleAccessToken 
+        ? 'placeholder'
+        : undefined
     },
     workspaces: {
       ...defaultState.workspaces,

src/pages/localStorage.ts

@@ -74,7 +74,8 @@ export const saveState = (state: OverallState) => {
         assessmentConfigurations: state.session.assessmentConfigurations,
         notificationConfigs: state.session.notificationConfigs,
         configurableNotificationConfigs: state.session.configurableNotificationConfigs,
-        githubAccessToken: state.session.githubAccessToken
+        githubAccessToken: state.session.githubAccessToken,
+        googleAccessToken: state.session.googleAccessToken
       },
       achievements: state.achievement.achievements,
       playgroundIsFolderModeEnabled: state.workspaces.playground.isFolderModeEnabled,

src/pages/playground/Playground.tsx

@@ -20,6 +20,7 @@ import {
 import {
   loginGitHub,
   logoutGitHub,
+  loginGoogle,
   logoutGoogle
 } from 'src/commons/application/actions/SessionActions';
 import {
@@ -271,7 +272,7 @@ const Playground: React.FC<PlaygroundProps> = props => {
     googleUser: persistenceUser,
     githubOctokitObject
   } = useTypedSelector(state => state.session);
-
+  
   const dispatch = useDispatch();
   const {
     handleChangeExecTime,
@@ -596,6 +597,7 @@ const Playground: React.FC<PlaygroundProps> = props => {
         onClickSave={
           persistenceFile ? () => dispatch(persistenceSaveFile(persistenceFile)) : undefined
         }
+        onClickLogIn={() => dispatch(loginGoogle())}
         onClickLogOut={() => dispatch(logoutGoogle())}
         onPopoverOpening={() => dispatch(persistenceInitialise())}
       />