Merge 18c89dc into 5a2b43e

.gitignore

@@ -23,3 +23,4 @@ npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 *~
+package-lock.json

api/routes/refresh.js

@@ -61,6 +61,8 @@ module.exports = (app) => {
 
       Storage.set('metadataUrls', metadataUrls);
 
+      credentialResponseObj.accounts = metadataUrls;
+
       // Fetch the metadata profile name for this URL
       const profile = metadataUrls.find((metadata) => metadata.url === metadataUrl);
 

src/apis/index.js

@@ -34,7 +34,7 @@ export const postConfigure = async (payload) => {
  * @returns {Promise<*>}
  */
 export const getRefresh = async () => {
-  const {data} = await axios.get('refresh');
+  const {data} = await axiosClient.get('refresh');
 
   return data;
 };

src/containers/configure/Configure.js

@@ -78,7 +78,7 @@ class Configure extends Component {
           <RoundedCenteredDivColumnWrapper>
             <Logo />
             <RoundedCenteredDivColumnContent>
-              <ConfigureMetadata 
+              <ConfigureMetadata
                 defaultMetadataName={this.props.defaultMetadataName}
                 defaultMetadataUrl={this.props.defaultMetadataUrl}
               />

src/containers/refresh/AccountSwitch.js

@@ -0,0 +1,73 @@
+import React, {Component} from 'react';
+import PropTypes from 'prop-types';
+import {
+  ButtonDropdown,
+  DropdownToggle,
+  DropdownMenu,
+  DropdownItem,
+} from 'reactstrap';
+
+class AccountSwitch extends Component {
+  static propTypes = {
+    accounts: PropTypes.array,
+    profileName: PropTypes.string,
+    submitConfigure: PropTypes.func,
+  }
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      dropdownOpen: false,
+    };
+
+    this.toggle = this.toggle.bind(this);
+  }
+
+  handleConfigureClickEvent = (account) => (event) => {
+    event.preventDefault();
+
+    const payload = {
+      metadataUrl: account.url,
+      profileName: account.name,
+      profileUuid: account.profileUuid,
+    };
+
+    this.props.submitConfigure(payload);
+  };
+
+  toggle() {
+    this.setState({
+      dropdownOpen: !this.state.dropdownOpen,
+    });
+  }
+
+  render() {
+    const accounts = this.props.accounts;
+    const profileName = this.props.profileName;
+
+    return (
+      <ButtonDropdown
+        isOpen={this.state.dropdownOpen}
+        toggle={this.toggle}
+      >
+        <DropdownToggle caret>
+          {profileName}
+        </DropdownToggle>
+        <DropdownMenu>
+          {
+            accounts.map((account) => (
+              <DropdownItem
+                key={account.id}
+                onClick={this.handleConfigureClickEvent(account)}
+                role="button"
+              >{account.name}
+              </DropdownItem>
+            ))
+          }
+        </DropdownMenu>
+      </ButtonDropdown>
+    );
+  }
+}
+
+export default AccountSwitch;

src/containers/refresh/Refresh.js

@@ -12,11 +12,13 @@ import {
 } from 'react-router-dom';
 import styled from 'styled-components';
 import {fetchRefresh} from '../../actions/refresh';
+import {submitConfigure} from '../../actions/configure';
 import {ComponentWithError} from '../components/ComponentWithError';
 import {Logo} from '../components/Logo';
 import {Credentials} from './Credentials';
 import {Logout} from './Logout';
 import {RenderIfLoaded} from '../components/RenderIfLoaded';
+import AccountSwitch from './AccountSwitch';
 import {InputGroupWithCopyButton} from '../components/InputGroupWithCopyButton';
 import {
   RoundedContent,
@@ -71,6 +73,7 @@ class Refresh extends Component {
   static propTypes = {
     accessKey: PropTypes.string,
     accountId: PropTypes.string,
+    accounts: PropTypes.array,
     errorMessage: PropTypes.string,
     fetchRefresh: PropTypes.func,
     platform: PropTypes.string,
@@ -81,9 +84,9 @@ class Refresh extends Component {
     sessionToken: PropTypes.string,
     showRole: PropTypes.bool,
     status: PropTypes.number,
+    submitConfigure: PropTypes.func,
   };
 
-
   state = {
     loaded: false,
   };
@@ -120,6 +123,7 @@ class Refresh extends Component {
 
   render() {
     const {
+      accounts,
       errorMessage,
       status,
       accountId,
@@ -128,6 +132,7 @@ class Refresh extends Component {
       accessKey,
       secretKey,
       sessionToken,
+      submitConfigure,
       platform,
       profileName,
     } = this.props;
@@ -145,6 +150,11 @@ class Refresh extends Component {
                 <Logo />
                 <RoundedContent>
                   {errorMessage}
+                  <AccountSwitch
+                    accounts={accounts}
+                    profileName={profileName}
+                    submitConfigure={submitConfigure}
+                  />
                   <details open>
                     <summary>Account</summary>
                     <div className="card card-body bg-light mb-3">
@@ -199,13 +209,16 @@ class Refresh extends Component {
   }
 }
 
-const mapStateToProps = ({refresh}) => ({
+const mapStateToProps = ({refresh, configure}) => ({
   ...refresh.fetchFailure,
   ...refresh.fetchSuccess,
+  ...configure.submitFailure,
+  ...configure.submitSuccess,
 });
 
 const mapDispatchToProps = (dispatch) => ({
   fetchRefresh: bindActionCreators(fetchRefresh, dispatch),
+  submitConfigure: bindActionCreators(submitConfigure, dispatch),
 });
 
 export default connect(mapStateToProps, mapDispatchToProps)(ComponentWithError(Refresh));