function displayCredentials()

in tampermonkey.js [170:246]

• 53 lines of code
• 3 McCabe index (conditional complexity)

  function displayCredentials(accountNumber, roleName, accessKey, secretAccessKey, sessionToken, expiration) {
    const expireTime = new Date(expiration).toLocaleTimeString();

    // HTML that forms the popup UI.  Note that styles are added via GM_addStyle further down
    const popupHTML = `
      <div id="backdrop">
        <div id="credentials">
          <div class="title">AWS Credentials for ${roleName}</div>
          <div class="expiration">Credentials will expire at <b>${expireTime}</b></div>
          <div class="option">Option 1: Set AWS environment variables</div>
          <p>Paste the following commands in your command line to set the AWS environment variables.
            <a href="https://docs.aws.amazon.com/console/singlesignon/user-portal/aws-accounts/command-line/get-credentials/option1">Learn More</a>
          </p>
          <div id="tabs">
            <ul>
              <li><a href="#linux">MacOS or Linux</a></li>
              <li><a href="#windows">Windows CMD</a></li>
              <li><a href="#powershell">PowerShell</a></li>
            </ul>
            <div class="codepanel" id="linux">
              <textarea class="code-box" rows="3" spellcheck="false">export AWS_ACCESS_KEY_ID="${accessKey}"
export AWS_SECRET_ACCESS_KEY="${secretAccessKey}"
export AWS_SESSION_TOKEN="${sessionToken}"</textarea>
            </div>
            <div class="codepanel" id="windows">
              <textarea class="code-box" rows="3" spellcheck="false">set AWS_ACCESS_KEY_ID="${accessKey}"
set AWS_SECRET_ACCESS_KEY="${secretAccessKey}"
set AWS_SESSION_TOKEN="${sessionToken}"</textarea>
            </div>
            <div class="codepanel" id="powershell">
              <textarea class="code-box" rows="3" spellcheck="false">Set-AWSCredential -AccessKey "${accessKey}" \`
-SecretKey "${secretAccessKey}" \`
-SessionToken "${sessionToken}"</textarea>
            </div>
          </div>
          <div class="option">Option 2: Add a profile to your AWS credentials file</div>
          <p>Paste the following text into your AWS credentials file (typically found at ~/.aws/credentials).
            <a href="https://docs.aws.amazon.com/console/singlesignon/user-portal/aws-accounts/command-line/get-credentials/option2">Learn More</a>
          </p>
          <div class="codepanel">
            <textarea class="code-box" rows="4" spellcheck="false">[${accountNumber}-${roleName}]
aws_access_key_id = ${accessKey}
aws_secret_access_key = ${secretAccessKey}
aws_session_token = ${sessionToken}</textarea>
          </div>
          <div class="option">Option 3: Use individual values in your AWS service client</div>
          <div id="raw-values">
            <span>AWS Access Key Id</span>
            <input type="text" value="${accessKey}" readonly spellcheck="false">
            <span>AWS Secret Access Key</span>
            <input type="text" value="${secretAccessKey}" readonly spellcheck="false">
            <span>AWS Session Token</span>
            <input type="text" value="${sessionToken}" readonly spellcheck="false">
          </div>
        </div>
      </div>`;

    // Remember which platform option the user has selected
    const TAB_SELECTION_KEY = 'envvar/tab/selected';
    const storage = window.localStorage;

    let activeTab = 0;
    try {
      activeTab = storage.getItem(TAB_SELECTION_KEY);
    } catch(err) {} // Not a big deal if we can't recall the user's selection
    function onTabChange(event, ui) {
      var tabIndex = ui.newTab.parent().children().index(ui.newTab);
      storage.setItem(TAB_SELECTION_KEY, tabIndex);
    }

    const popup = $(popupHTML);
    $('body').append(popup);
    $('#tabs').tabs({active: activeTab, activate: onTabChange});
    $('#credentials').click((event)=> { event.stopPropagation(); });
    $('#backdrop').scroll((event)=> { event.stopPropagation(); });
    $('#backdrop').click(()=> { $('#backdrop').remove(); });
  }