CSS

AWS Serverless Web App

To make our website look more professional and also be help in maintaining its style, we will be using Google’s MDL. This will act as CSS to our website. Most basic websites have a navigation menu at the top and the content below. We will use this model. The navigation menu will contain:

  • home
  • sign up
  • sign in (and will auto move you to profile page)
  • sign out
  • profile

To use Google’s MDL, you add 2 CSS references in the head of your HTML code. MDL is based on components. Components can be things like a button, or a navigation menu system, or a form. I will add these components to the HTML to create a better looking website.

Tasks:

  • fix up some HTML code
  • add Google’s MDL CSS from its CDN, so we do not have to host it

HTML

Home
Products
Sign In
Sign Out
About
Profile
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="description" content="AWS Serverless Web App tutorial">
    <meta name="keywords" content="HTML,CSS,XML,JavaScript">
    <meta name="author" content="Mr. Coxall">
    <meta name="date" content="Jan 2020">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <!--Google's MDL-->
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.brown-indigo.min.css" /> 
    <script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
    
    <title>Chocolates</title>
  </head>
  
  <body>
    <!-- Always shows a header, even in smaller screens. -->
    <div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
      <header class="mdl-layout__header">
        <div class="mdl-layout__header-row">
          <!-- Title -->
          <span class="mdl-layout-title">Chocolates</span>
          <!-- Add spacer, to align navigation to the right -->
          <div class="mdl-layout-spacer"></div>
          <!-- Navigation. We hide it in small screens. -->
          <nav class="mdl-navigation mdl-layout--large-screen-only">
            <a class="mdl-navigation__link" href="./index.html">Home</a>
            <a class="mdl-navigation__link" href="./products.html">Product</a>
            <a class="mdl-navigation__link" href="./sign-in.html">Sign In</a>
            <a class="mdl-navigation__link" href="./sign-out.html">Sign Out</a>
            <a class="mdl-navigation__link" href="./about.html">About</a>
          </nav>
        </div>
      </header>
      <div class="mdl-layout__drawer">
        <span class="mdl-layout-title">Chocolates</span>
        <nav class="mdl-navigation">
          <a class="mdl-navigation__link" href="./index.html">Home</a>
          <a class="mdl-navigation__link" href="./products.html">Product</a>
          <a class="mdl-navigation__link" href="./sign-in.html">Sign In</a>
          <a class="mdl-navigation__link" href="./sign-out.html">Sign Out</a>
          <a class="mdl-navigation__link" href="./about.html">About</a>
        </nav>
      </div>
      <main class="mdl-layout__content">
        <div class="page-content"><!-- Your content goes here --></div>
      </main>
    </div>
    
    <!--Get below the nav menu at the top-->
    <br><br><br>
    
		<div class="container">
      <div>
        <h2>Welcome</h2>
        <div id='home'>
          <p></p>
        </div>
      </div>
		</div>
		
		<div class="container">
		  <ul class="demo-list-item mdl-list">
        <li class="mdl-list__item">
          <span class="mdl-list__item-primary-content">
            Welcome to the chocolates website.
          </span>
        </li>
        <li class="mdl-list__item">
          <span class="mdl-list__item-primary-content">
            Please see the chocolates you can eat and login to keep track of those you have already eaten!
          </span>
        </li>
      </ul>
    </div>
          
  </body>
  
</html>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="description" content="AWS Serverless Web App tutorial">
    <meta name="keywords" content="HTML,CSS,XML,JavaScript">
    <meta name="author" content="Mr. Coxall">
    <meta name="date" content="Jan 2020">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <!--Google's MDL-->
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.brown-indigo.min.css" /> 
    <script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
    
    <title>Chocolates</title>
  </head>
  
  <body>
    <!-- Always shows a header, even in smaller screens. -->
    <div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
      <header class="mdl-layout__header">
        <div class="mdl-layout__header-row">
          <!-- Title -->
          <span class="mdl-layout-title">Chocolates</span>
          <!-- Add spacer, to align navigation to the right -->
          <div class="mdl-layout-spacer"></div>
          <!-- Navigation. We hide it in small screens. -->
          <nav class="mdl-navigation mdl-layout--large-screen-only">
            <a class="mdl-navigation__link" href="./index.html">Home</a>
            <a class="mdl-navigation__link" href="./products.html">Product</a>
            <a class="mdl-navigation__link" href="./sign-in.html">Sign In</a>
            <a class="mdl-navigation__link" href="./sign-out.html">Sign Out</a>
            <a class="mdl-navigation__link" href="./about.html">About</a>
          </nav>
        </div>
      </header>
      <div class="mdl-layout__drawer">
        <span class="mdl-layout-title">Chocolates</span>
        <nav class="mdl-navigation">
          <a class="mdl-navigation__link" href="./index.html">Home</a>
          <a class="mdl-navigation__link" href="./products.html">Product</a>
          <a class="mdl-navigation__link" href="./sign-in.html">Sign In</a>
          <a class="mdl-navigation__link" href="./sign-out.html">Sign Out</a>
          <a class="mdl-navigation__link" href="./about.html">About</a>
        </nav>
      </div>
      <main class="mdl-layout__content">
        <div class="page-content"><!-- Your content goes here --></div>
      </main>
    </div>
    
    <!--Get below the nav menu at the top-->
    <br><br><br>
    
		<div class="container">
      <div>
        <h2>Products</h2>
        <div id='products'>
          <p>...</p>
        </div>
      </div>
		</div>
    
  </body>
  
</html>

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="description" content="AWS Serverless Web App tutorial">
    <meta name="keywords" content="HTML,CSS,XML,JavaScript">
    <meta name="author" content="Mr. Coxall">
    <meta name="date" content="Jan 2020">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <!--Google's MDL-->
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.brown-indigo.min.css" /> 
    <script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
    
    <!--Cognito & JavaScript-->
  	<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
  	<script src="js/amazon-cognito-auth.min.js"></script>
  	<script src="https://sdk.amazonaws.com/js/aws-sdk-2.596.0.min.js"></script> 
  	<script src="./js/amazon-cognito-identity.min.js"></script>   
  	<script src="./js/config.js"></script>
  	<script type="text/javascript" src="./js/sign-in.js"></script>
    
    <title>Chocolates</title>
  </head>
  
  <body>
    <!-- Always shows a header, even in smaller screens. -->
    <div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
      <header class="mdl-layout__header">
        <div class="mdl-layout__header-row">
          <!-- Title -->
          <span class="mdl-layout-title">Chocolates</span>
          <!-- Add spacer, to align navigation to the right -->
          <div class="mdl-layout-spacer"></div>
          <!-- Navigation. We hide it in small screens. -->
          <nav class="mdl-navigation mdl-layout--large-screen-only">
            <a class="mdl-navigation__link" href="./index.html">Home</a>
            <a class="mdl-navigation__link" href="./products.html">Product</a>
            <a class="mdl-navigation__link" href="./sign-in.html">Sign In</a>
            <a class="mdl-navigation__link" href="./sign-out.html">Sign Out</a>
            <a class="mdl-navigation__link" href="./about.html">About</a>
          </nav>
        </div>
      </header>
      <div class="mdl-layout__drawer">
        <span class="mdl-layout-title">Chocolates</span>
        <nav class="mdl-navigation">
          <a class="mdl-navigation__link" href="./index.html">Home</a>
          <a class="mdl-navigation__link" href="./products.html">Product</a>
          <a class="mdl-navigation__link" href="./sign-in.html">Sign In</a>
          <a class="mdl-navigation__link" href="./sign-out.html">Sign Out</a>
          <a class="mdl-navigation__link" href="./about.html">About</a>
        </nav>
      </div>
      <main class="mdl-layout__content">
        <div class="page-content"><!-- Your content goes here --></div>
      </main>
    </div>
    
    <!--Get below the nav menu at the top-->
    <br><br><br>
    
		<div class="container">
      <div>
        <h2>Sign In</h2>
        <div id='sign-in'>
        </div>
      </div>
		</div>
    
    <div class="mdl-layout mdl-js-layout mdl-color--grey-100">
    	<main class="mdl-layout__content">
    		<div class="mdl-card mdl-shadow--6dp">
    			<div class="mdl-card__title mdl-color--primary mdl-color-text--white">
    				<h2 class="mdl-card__title-text">Chocolate Login</h2>
    			</div>
    	  	<div class="mdl-card__supporting-text">
    				<form action="#">
    					<div class="mdl-textfield mdl-js-textfield">
    						<input class="mdl-textfield__input" type="text" id="inputUsername" />
    						<label class="mdl-textfield__label" for="username">Email Address</label>
    					</div>
    					<div class="mdl-textfield mdl-js-textfield">
    						<input class="mdl-textfield__input" type="password" id="inputPassword" />
    						<label class="mdl-textfield__label" for="userpass">Password</label>
    					</div>
    				</form>
    			</div>
    			<div class="mdl-card__actions mdl-card--border">
    				<button class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect" onclick="signInButton();">Log in</button>
    			</div>
    		</div>
    	</main>
    </div>
    
    <div class="container">
      <div>
        <div id='logged-in'>
          <p></p>
        </div>
      </div>
		</div>

  </body>
</html>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="description" content="AWS Serverless Web App tutorial">
    <meta name="keywords" content="HTML,CSS,XML,JavaScript">
    <meta name="author" content="Mr. Coxall">
    <meta name="date" content="Jan 2020">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <!--Google's MDL-->
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.brown-indigo.min.css" /> 
    <script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
    
    <!--Cognito & JavaScript-->
		<script src="./js/amazon-cognito-identity.min.js"></script>  
		<script src="./js/config.js"></script>
		<script src="./js/sign-out.js"></script>
    
    <title>Chocolates</title>
  </head>
  
  <body>
    <!-- Always shows a header, even in smaller screens. -->
    <div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
      <header class="mdl-layout__header">
        <div class="mdl-layout__header-row">
          <!-- Title -->
          <span class="mdl-layout-title">Chocolates</span>
          <!-- Add spacer, to align navigation to the right -->
          <div class="mdl-layout-spacer"></div>
          <!-- Navigation. We hide it in small screens. -->
          <nav class="mdl-navigation mdl-layout--large-screen-only">
            <a class="mdl-navigation__link" href="./index.html">Home</a>
            <a class="mdl-navigation__link" href="./products.html">Product</a>
            <a class="mdl-navigation__link" href="./sign-in.html">Sign In</a>
            <a class="mdl-navigation__link" href="./sign-out.html">Sign Out</a>
            <a class="mdl-navigation__link" href="./about.html">About</a>
          </nav>
        </div>
      </header>
      <div class="mdl-layout__drawer">
        <span class="mdl-layout-title">Chocolates</span>
        <nav class="mdl-navigation">
          <a class="mdl-navigation__link" href="./index.html">Home</a>
          <a class="mdl-navigation__link" href="./products.html">Product</a>
          <a class="mdl-navigation__link" href="./sign-in.html">Sign In</a>
          <a class="mdl-navigation__link" href="./sign-out.html">Sign Out</a>
          <a class="mdl-navigation__link" href="./about.html">About</a>
        </nav>
      </div>
      <main class="mdl-layout__content">
        <div class="page-content"><!-- Your content goes here --></div>
      </main>
    </div>
    
    <!--Get below the nav menu at the top-->
    <br><br><br>
    
		<div class="container">
      <div>
        <h2>Sign Out</h2>
        <div id='sign-out'>
          <p>One moment please ...</p>
        </div>
      </div>
		</div>
		  
    <br>
  </body>
	<script>
		window.onload = function(){
      const temp_var = signOut();
		}
  </script>
</html>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="description" content="AWS Serverless Web App tutorial">
    <meta name="keywords" content="HTML,CSS,XML,JavaScript">
    <meta name="author" content="Mr. Coxall">
    <meta name="date" content="Jan 2020">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <!--Google's MDL-->
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.brown-indigo.min.css" /> 
    <script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
    
    <title>Chocolates</title>
  </head>
  
  <body>
    <!-- Always shows a header, even in smaller screens. -->
    <div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
      <header class="mdl-layout__header">
        <div class="mdl-layout__header-row">
          <!-- Title -->
          <span class="mdl-layout-title">Chocolates</span>
          <!-- Add spacer, to align navigation to the right -->
          <div class="mdl-layout-spacer"></div>
          <!-- Navigation. We hide it in small screens. -->
          <nav class="mdl-navigation mdl-layout--large-screen-only">
            <a class="mdl-navigation__link" href="./index.html">Home</a>
            <a class="mdl-navigation__link" href="./products.html">Product</a>
            <a class="mdl-navigation__link" href="./sign-in.html">Sign In</a>
            <a class="mdl-navigation__link" href="./sign-out.html">Sign Out</a>
            <a class="mdl-navigation__link" href="./about.html">About</a>
          </nav>
        </div>
      </header>
      <div class="mdl-layout__drawer">
        <span class="mdl-layout-title">Chocolates</span>
        <nav class="mdl-navigation">
          <a class="mdl-navigation__link" href="./index.html">Home</a>
          <a class="mdl-navigation__link" href="./products.html">Product</a>
          <a class="mdl-navigation__link" href="./sign-in.html">Sign In</a>
          <a class="mdl-navigation__link" href="./sign-out.html">Sign Out</a>
          <a class="mdl-navigation__link" href="./about.html">About</a>
        </nav>
      </div>
      <main class="mdl-layout__content">
        <div class="page-content"><!-- Your content goes here --></div>
      </main>
    </div>
    
    <!--Get below the nav menu at the top-->
    <br><br><br>
    
		<div class="container">
      <div>
        <h2>About</h2>
        <div id='about'>
          <p>...</p>
        </div>
      </div>
		</div>
    
  </body>
  
</html>

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="description" content="AWS Serverless Web App tutorial">
    <meta name="keywords" content="HTML,CSS,XML,JavaScript">
    <meta name="author" content="Mr. Coxall">
    <meta name="date" content="Jan 2020">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <!--Google's MDL-->
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.brown-indigo.min.css" /> 
    <script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
    
    <!--Cognito & JavaScript-->
    <script src="js/amazon-cognito-identity.min.js"></script>  
    <script src="js/config.js"></script>
    <script type="text/javascript" src="./js/profile.js"></script>
    
    <title>Chocolates</title>
  </head>
  
  <body>
    <!-- Always shows a header, even in smaller screens. -->
    <div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
      <header class="mdl-layout__header">
        <div class="mdl-layout__header-row">
          <!-- Title -->
          <span class="mdl-layout-title">Chocolates</span>
          <!-- Add spacer, to align navigation to the right -->
          <div class="mdl-layout-spacer"></div>
          <!-- Navigation. We hide it in small screens. -->
          <nav class="mdl-navigation mdl-layout--large-screen-only">
            <a class="mdl-navigation__link" href="./index.html">Home</a>
            <a class="mdl-navigation__link" href="./products.html">Product</a>
            <a class="mdl-navigation__link" href="./sign-in.html">Sign In</a>
            <a class="mdl-navigation__link" href="./sign-out.html">Sign Out</a>
            <a class="mdl-navigation__link" href="./about.html">About</a>
          </nav>
        </div>
      </header>
      <div class="mdl-layout__drawer">
        <span class="mdl-layout-title">Chocolates</span>
        <nav class="mdl-navigation">
          <a class="mdl-navigation__link" href="./index.html">Home</a>
          <a class="mdl-navigation__link" href="./products.html">Product</a>
          <a class="mdl-navigation__link" href="./sign-in.html">Sign In</a>
          <a class="mdl-navigation__link" href="./sign-out.html">Sign Out</a>
          <a class="mdl-navigation__link" href="./about.html">About</a>
        </nav>
      </div>
      <main class="mdl-layout__content">
        <div class="page-content"><!-- Your content goes here --></div>
      </main>
    </div>
    
    <!--Get below the nav menu at the top-->
    <br><br><br>
    
		<div class="container">
      <div>
        <h2>Profile</h2>
        <div id='profile'>
        </div>
      </div>
		</div>
		
		<div class="container">
      <table class="mdl-data-table mdl-js-data-table mdl-data-table--selectable">
        <thead>
          <tr>
            <th class="mdl-data-table__cell--non-numeric">Email</th>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Age</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td class="mdl-data-table__cell--non-numeric">qwerty@qwerty.com</td>
            <td>Qwerty</td>
            <td>Qwerty</td>
            <td>15</td>
          </tr>
          <tr>
            <td class="mdl-data-table__cell--non-numeric"><div id='profile_email'></div></td>
            <td><div id='profile_first_name'></div></td>
            <td><div id='profile_last_name'></div></td>
            <td><div id='profile_age'></div></td>
          </tr>
        </tbody>
      </table>
		</div>
		  
  </body>

  <script>
		window.onload = function(){
      const temp_var = getUserAttributes();
		}
  </script>
  
</html>

JavaScript

Home
Products
Sign In
Sign Out
About
Profile
1
// no javascript code

1
// no javascript code

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
// JavaScript File

function signInButton() {
  // sign-in to AWS Cognito
  
  var data = { 
	  UserPoolId : _config.cognito.userPoolId,
    ClientId : _config.cognito.clientId
  };
  var userPool = new AmazonCognitoIdentity.CognitoUserPool(data);
  var cognitoUser = userPool.getCurrentUser();

	var authenticationData = {
    Username : document.getElementById("inputUsername").value,
    Password : document.getElementById("inputPassword").value,
  };

  var authenticationDetails = new AmazonCognitoIdentity.AuthenticationDetails(authenticationData);

  var poolData = {
    UserPoolId : _config.cognito.userPoolId, // Your user pool id here
    ClientId : _config.cognito.clientId, // Your client id here
  };

  var userPool = new AmazonCognitoIdentity.CognitoUserPool(poolData);

  var userData = {
    Username : document.getElementById("inputUsername").value,
    Pool : userPool,
  };

  var cognitoUser = new AmazonCognitoIdentity.CognitoUser(userData);

  cognitoUser.authenticateUser(authenticationDetails, {
    onSuccess: function (result) {
      var accessToken = result.getAccessToken().getJwtToken();
      console.log(result);	
      
      //get user info, to show that you are logged in
			cognitoUser.getUserAttributes(function(err, result) {
				if (err) {
					console.log(err);
					return;
				}
				console.log(result);
				document.getElementById("logged-in").innerHTML = "You are logged in as: " + result[2].getValue();
				
				// now auto redirect to profile page
				window.location.replace("./profile.html");
			});
      
    },
    onFailure: function(err) {
      alert(err.message || JSON.stringify(err));
    },
  });
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
// JavaScript File

function signOut() {
  //
  
  return_message = "";
  
  const data = { 
  	UserPoolId : _config.cognito.userPoolId,
    ClientId : _config.cognito.clientId
  };
  const userPool = new AmazonCognitoIdentity.CognitoUserPool(data);
  const cognitoUser = userPool.getCurrentUser();

	if (cognitoUser != null) {
  	cognitoUser.getSession(function(err, session) {
      if (err) {
      	alert(err);
        return;
      }
      console.log('session validity: ' + session.isValid());

			// sign out
			cognitoUser.signOut();
			console.log("Signed-out");
			return_message = "Signed-out";
  	});
	} else {
		console.log("Already signed-out")
		return_message = "Already signed-out";
	}
	
	const div_user_info = document.getElementById('sign-out');
  div_user_info.innerHTML = return_message;
}

1
// no javascript code

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
// JavaScript File
		
async function getUser(email_address) {
    // get the user info from API Gate
    
    const api_url = 'https://gonvpjbyuf.execute-api.us-east-1.amazonaws.com/prod/user-profile?user_email=' + email_address;
    const api_response = await fetch(api_url);
    const api_data = await(api_response).json();
    console.log(api_data);
    
    const json_profile = JSON.parse(api_data['body']);
    const div_user_profile_email = document.getElementById('profile_email');
    const div_user_profile_first_name = document.getElementById('profile_first_name');
    const div_user_profile_last_name = document.getElementById('profile_last_name');
    const div_user_profile_age = document.getElementById('profile_age');
    
    div_user_profile_email.innerHTML = json_profile['email'];
    div_user_profile_first_name.innerHTML = json_profile['first_name'];
    div_user_profile_last_name.innerHTML = json_profile['last_name'];
    div_user_profile_age.innerHTML = json_profile['age'];
  }
  
function getUserAttributes() {
	var data = { 
		UserPoolId : _config.cognito.userPoolId,
    ClientId : _config.cognito.clientId
	};
	var userPool = new AmazonCognitoIdentity.CognitoUserPool(data);
	var cognitoUser = userPool.getCurrentUser();

	if (cognitoUser != null) {
  	cognitoUser.getSession(function(err, session) {
      if (err) {
      	alert(err);
        return;
      }
      //console.log('session validity: ' + session.isValid());
      
      cognitoUser.getUserAttributes(function(err, result) {
				if (err) {
					console.log(err);
					return;
				}
				// user email address
				console.log(result[2].getValue());
				getUser(result[2].getValue()) 
			});

  	});
	} else {
		console.log("Already signed-out")
	}
}

See also

Google’s Material Design Lite website