JSFiddle - React, Tailwind, and code Playground

by hakanson

HTML

<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<script src="https://demowebapp.s3-us-west-2.amazonaws.com/amazon-cognito-identity.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.21.1/axios.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/aws-sdk/2.850.0/aws-sdk.min.js"></script>
<div class="w3-bar w3-black">
  <button class="w3-bar-item w3-button" onclick="openTab('signup')">Sign-up</button>
  <button class="w3-bar-item w3-button" onclick="openTab('signin')">Sign-in</button>
  <button class="w3-bar-item w3-button" onclick="openTab('managemfa')">Manage MFA</button>
  <button class="w3-bar-item w3-button" onclick="openTab('callapis')">Call APIs</button>
  <button class="w3-bar-item w3-button" onclick="openTab('accesss3')">Access S3</button>
</div>

<div id="signup" class="w3-container w3-padding-large w3-grey tab">
    <div class="w3-section">
      <label>Name</label>
      <input class="w3-input w3-border" type="text" id="signup_name" required>
    </div>
    <div class="w3-section">
      <label>Username</label>
      <input class="w3-input w3-border" type="text" id="signup_username" required>
    </div>
    <div class="w3-section">
      <label>Email</label>
      <input class="w3-input w3-border" type="text" id="signup_email" required>
    </div>
    <div class="w3-section">
      <label>Phone</label>
      <input class="w3-input w3-border" type="text" id="signup_phone" required>
    </div>
    <div class="w3-section">
      <label>Password</label>
      <input class="w3-input w3-border" type="password" id="signup_password" required>
    </div>
    <button type="submit" class="w3-button w3-black w3-margin-bottom" onclick="signUp()">Sign Up</button>
</div>
<div id="signin" class="w3-container w3-padding-large w3-grey tab"...

JavaScript

/**
 * Configure user pool and client
 */
var poolData = {
  UserPoolId: "us-east-1_jkzeCtbcp",
  ClientId: "127kkkq4hvqmbb6akdvkudigih"
};

var userPool = new AmazonCognitoIdentity.CognitoUserPool(poolData);
var cognitoUser;

/**
 * Helpers
 */
function openTab(tabName) {
  var i;
  var x = document.getElementsByClassName("tab");
  for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";
  }
  document.getElementById(tabName).style.display = "block";
}

function parseJwt (token) {
  var base64Url = token.split('.')[1];
  var base64 = base64Url.replace('-', '+').replace('_', '/');
  return JSON.parse(window.atob(base64));
};

/**
 * Add Sign Up
 */
function signUp(){

    var email = $("#signup_email").val();
    var username = $("#signup_username").val();
    var password = $("#signup_password").val();
    var name = $("#signup_name").val();
    var phone = $("#signup_phone").val();

    var attributeList = [];

    var dataEmail = { Name: 'email', Value: email };
    var dataPhone = {Name: 'phone_number', Value: phone };
    var dataName = {Name: 'name', Value: name};

    var attributeEmail = new AmazonCognitoIdentity.CognitoUserAttribute(dataEmail);
    var attributeName = new AmazonCognitoIdentity.CognitoUserAttribute(dataName);
    var attributePhone = new AmazonCognitoIdentity.CognitoUserAttribute(dataPhone);

    attributeList.push(attributeEmail);
    attributeList.push(attributeName);
    attributeList.push(attributePhone);

    userPool.signUp(username, password, attributeList, null, function(err, result ) {
      if (err) {
        console.log(err.message || JSON.stringify(err));
        return;
      }else{
      	console.log("Success:"+result);

        var cognitoUser = result.user;
        var confirmationCode = prompt("Please enter confirmation code:");

        cognitoUser.confirmRegistration(confirmationCode, true, function(err, result) {
          if (err) {
            alert(err.message || JSON.stringify(err));
            return;
  ...