feat: Add API key authentication (#1254)

Closes #945

client/src/components/users/EditUserEmailStep/EditUserEmailStep.jsx

@@ -42,14 +42,19 @@ const createMessage = (error) => {
   }
 };
 
-const EditUserEmailStep = React.memo(({ id, withPasswordConfirmation, onBack, onClose }) => {
+const EditUserEmailStep = React.memo(({ id, onBack, onClose }) => {
   const selectUserById = useMemo(() => selectors.makeSelectUserById(), []);
 
   const {
     email,
+    isSsoUser,
     emailUpdateForm: { data: defaultData, isSubmitting, error },
   } = useSelector((state) => selectUserById(state, id));
 
+  const withPasswordConfirmation = useSelector(
+    (state) => id === selectors.selectCurrentUserId(state) && !isSsoUser,
+  );
+
   const dispatch = useDispatch();
   const [t] = useTranslation();
   const wasSubmitting = usePrevious(isSubmitting);
@@ -199,13 +204,11 @@ const EditUserEmailStep = React.memo(({ id, withPasswordConfirmation, onBack, on
 
 EditUserEmailStep.propTypes = {
   id: PropTypes.string.isRequired,
-  withPasswordConfirmation: PropTypes.bool,
   onBack: PropTypes.func,
   onClose: PropTypes.func.isRequired,
 };
 
 EditUserEmailStep.defaultProps = {
-  withPasswordConfirmation: false,
   onBack: undefined,
 };
 

client/src/components/users/EditUserPasswordStep/EditUserPasswordStep.jsx

@@ -38,14 +38,17 @@ const createMessage = (error) => {
   }
 };
 
-const EditUserPasswordStep = React.memo(({ id, withPasswordConfirmation, onBack, onClose }) => {
+const EditUserPasswordStep = React.memo(({ id, onBack, onClose }) => {
   const selectUserById = useMemo(() => selectors.makeSelectUserById(), []);
 
   const {
-    data: defaultData,
-    isSubmitting,
-    error,
-  } = useSelector((state) => selectUserById(state, id).passwordUpdateForm);
+    isSsoUser,
+    passwordUpdateForm: { data: defaultData, isSubmitting, error },
+  } = useSelector((state) => selectUserById(state, id));
+
+  const withPasswordConfirmation = useSelector(
+    (state) => id === selectors.selectCurrentUserId(state) && !isSsoUser,
+  );
 
   const dispatch = useDispatch();
   const [t] = useTranslation();
@@ -168,13 +171,11 @@ const EditUserPasswordStep = React.memo(({ id, withPasswordConfirmation, onBack,
 
 EditUserPasswordStep.propTypes = {
   id: PropTypes.string.isRequired,
-  withPasswordConfirmation: PropTypes.bool,
   onBack: PropTypes.func,
   onClose: PropTypes.func.isRequired,
 };
 
 EditUserPasswordStep.defaultProps = {
-  withPasswordConfirmation: false,
   onBack: undefined,
 };
 

client/src/components/users/EditUserUsernameStep/EditUserUsernameStep.jsx

@@ -42,14 +42,19 @@ const createMessage = (error) => {
   }
 };
 
-const EditUserUsernameStep = React.memo(({ id, withPasswordConfirmation, onBack, onClose }) => {
+const EditUserUsernameStep = React.memo(({ id, onBack, onClose }) => {
   const selectUserById = useMemo(() => selectors.makeSelectUserById(), []);
 
   const {
     username,
+    isSsoUser,
     usernameUpdateForm: { data: defaultData, isSubmitting, error },
   } = useSelector((state) => selectUserById(state, id));
 
+  const withPasswordConfirmation = useSelector(
+    (state) => id === selectors.selectCurrentUserId(state) && !isSsoUser,
+  );
+
   const dispatch = useDispatch();
   const [t] = useTranslation();
   const wasSubmitting = usePrevious(isSubmitting);
@@ -199,13 +204,11 @@ const EditUserUsernameStep = React.memo(({ id, withPasswordConfirmation, onBack,
 
 EditUserUsernameStep.propTypes = {
   id: PropTypes.string.isRequired,
-  withPasswordConfirmation: PropTypes.bool,
   onBack: PropTypes.func,
   onClose: PropTypes.func.isRequired,
 };
 
 EditUserUsernameStep.defaultProps = {
-  withPasswordConfirmation: false,
   onBack: undefined,
 };
 

client/src/components/users/UserSettingsModal/AccountPane/AccountPane.jsx

@@ -80,7 +80,7 @@ const AccountPane = React.memo(() => {
           </Divider>
           {isUsernameEditable && (
             <div className={styles.action}>
-              <EditUserUsernamePopup id={user.id} withPasswordConfirmation={!user.isSsoUser}>
+              <EditUserUsernamePopup id={user.id}>
                 <Button className={styles.actionButton}>
                   {t('action.editUsername', {
                     context: 'title',
@@ -91,7 +91,7 @@ const AccountPane = React.memo(() => {
           )}
           {isEmailEditable && (
             <div className={styles.action}>
-              <EditUserEmailPopup id={user.id} withPasswordConfirmation={!user.isSsoUser}>
+              <EditUserEmailPopup id={user.id}>
                 <Button className={styles.actionButton}>
                   {t('action.editEmail', {
                     context: 'title',
@@ -102,7 +102,7 @@ const AccountPane = React.memo(() => {
           )}
           {isPasswordEditable && (
             <div className={styles.action}>
-              <EditUserPasswordPopup id={user.id} withPasswordConfirmation={!user.isSsoUser}>
+              <EditUserPasswordPopup id={user.id}>
                 <Button className={styles.actionButton}>
                   {t('action.editPassword', {
                     context: 'title',