fix: make request for sign out

Also mock sign out on localhost.

For #400.

scripts/js/make-public-config-file.mjs

@@ -17,7 +17,8 @@ const PUBLIC_CONFIG_VALUES = [
   'WEBSITE_USER_DATA_URL',
   'ENVIRONMENT',
   'LOCAL_USER_ID',
-  'VALID_METADATA_DURATION'
+  'VALID_METADATA_DURATION',
+  'SIGN_OUT_URL'
 ];
 
 // These are constants used in the client-side code. We want them in the public config.

src/client/components/SignOutLink.jsx

@@ -1,19 +1,46 @@
 // Copyright 2022, University of Colorado Boulder
 
+/* eslint-disable */
+
 /**
  * Create a component with a sign-out link.
  *
  * @author <liammulh@gmail.com>
  */
 
+import { useCallback, useEffect, useRef, useState } from 'react';
+import signOut from '../js/signOut.js';
+
 /**
- * Return a re-usable sign-out link. (Easier to have the component than typing out the whole URL every time
- * you need it.)
- *
- * @returns {JSX.Element}
+ * Return a re-usable sign-out button.
  */
 const SignOutLink = () => {
-  return <a href={`${window.location.origin}/en/sign-out`}>Sign Out</a>;
+  const [ isSending, setIsSending ] = useState( false );
+  const isMounted = useRef( true );
+
+  // Set isMounted to false when we unmount the component.
+  useEffect( () => {
+    return () => {
+      isMounted.current = false;
+    };
+  } );
+
+  const sendRequest = useCallback( async () => {
+    if ( isSending ) {
+      return;
+    }
+    else {
+      setIsSending( true );
+      await signOut();
+      if ( isMounted.current ) {
+        setIsSending( false );
+      }
+    }
+  }, [ isSending ] );
+
+  return (
+    <button disabled={isSending} onClick={ sendRequest }>Sign Out</button>
+  );
 };
 
 export default SignOutLink;

src/client/js/signOut.js

@@ -0,0 +1,36 @@
+// Copyright 2023, University of Colorado Boulder
+
+/**
+ * Sign the user out.
+ *
+ * @author Liam Mulhall <liammulh@gmail.com>
+ */
+
+import axios from 'axios';
+import publicConfig from '../../common/publicConfig.js';
+import alertErrorMessage from './alertErrorMessage.js';
+
+/**
+ * Send request to PhET server to sign the user out.
+ *
+ * @returns {Promise<void>}
+ */
+const signOut = async () => {
+  try {
+    const signOutRes = await axios( {
+      url: publicConfig.SIGN_OUT_URL,
+      method: 'get',
+      withCredentials: true
+    } );
+
+    // If the sign-out request was successful, redirect the user to the home page.
+    if ( signOutRes.status >= 200 && signOutRes.status < 300 ) {
+      window.location.href = window.location.origin;
+    }
+  }
+  catch( e ) {
+    alertErrorMessage( e );
+  }
+};
+
+export default signOut;

src/server/app.js

@@ -14,6 +14,7 @@
 import privateConfig from '../common/privateConfig.js';
 import publicConfig from '../common/publicConfig.js';
 import express from 'express';
+import mockSignOut from './translationApi/api/mockSignOut.js';
 import getCurrentRosettaSha from './translationApi/getCurrentRosettaSha.js';
 import logger from './translationApi/logger.js';
 import mockWebsiteUserData from './translationApi/api/mockWebsiteUserData.js';
@@ -63,6 +64,7 @@ app.use( '/translate', builtReactAppServer );
 // Mock website user data for local development.
 if ( publicConfig.ENVIRONMENT === 'development' ) {
   app.get( '/services/check-login', mockWebsiteUserData );
+  app.get( '/services/logout', mockSignOut );
 }
 
 app.listen( privateConfig.ROSETTA_PORT, () => {

src/server/translationApi/api/mockSignOut.js

@@ -0,0 +1,16 @@
+// Copyright 2023, University of Colorado Boulder
+
+/**
+ * Mock sign out function for local testing.
+ *
+ * @author Liam Mulhall <liammulh@gmail.com>
+ */
+
+import logger from '../logger.js';
+
+const mockSignOut = ( req, res ) => {
+  logger.info( 'mocking sign out' );
+  res.status( 200 ).send();
+};
+
+export default mockSignOut;