Added silent login

README.md

@@ -25,3 +25,9 @@ Make sure you have updated the `config.json` with your application credentials.
 
 [1]: #getting-started
 [2]: #running-the-app-locally
+
+## Silent Login
+This app has silent login enabled which allows you to automatically obtain new tokens for a user without the user having to re-authenticate using a popup. This will attempt to authenticate the user in a hidden iframe.
+
+You will need to enable Cloud Directory SSO.
+Sign in will be successful only if the user has previously signed in using Cloud Directory and their session is not expired.

public/index.css

@@ -62,18 +62,35 @@ body {
 	outline: none;
 }
 
-#error {
-	padding-top: 20px;
+#password {
+	font-family: 'IBMPlexSans-Medium', sans-serif;
 	font-size: 14px;
-	color: red;
+	letter-spacing: 0;
+	text-align: center;
+	background-color: #EBF0F7;
+	border: none;
+	padding: 10px 40px;
+	text-decoration: none;
+	cursor: pointer;
+	width: 200px;
+	height: 40px;
+	margin: 0 auto;
+	outline: none;
+	margin-bottom: 10px;
 }
 
 @-moz-document url-prefix() {
-	#login {
+	#login, #password {
 		font-family: 'IBM Plex Sans Medium', 'Helvetica Neue', Arial, sans-serif;
 	}
 }
 
+#error {
+	padding-top: 20px;
+	font-size: 14px;
+	color: red;
+}
+
 .hintSection {
 	display: flex;
 	justify-content: center;
@@ -97,10 +114,6 @@ body {
 	}
 }
 
-#chevronIconI, #chevronIconII {
-	margin-right: 20px;
-}
-
 .expand {
 	margin-right: 20px;
 }
@@ -127,8 +140,13 @@ body {
 	font-family: 'IBMPlexSans-Medium', sans-serif;
 	box-shadow: 0px -1px 5px 0px rgba(0, 0, 0, 0.15);
  }
+ @-moz-document url-prefix() {
+	.collapsible button {
+		font-family: 'IBM Plex Sans Medium', sans-serif;
+	}
+}
 
- .content {
+.content {
 	display: none;
 	overflow: hidden;
 	padding: 15px;
@@ -139,14 +157,43 @@ body {
 	font-size: 1vw;
 	word-break: break-all;
 	box-shadow: 0px -1px 5px 0px rgba(0, 0, 0, 0.15);
- }
+}
 
- .collapsible.active .content {
-	 display: block;
- }
+.collapsible.active .content {
+	display: block;
+}
+
+@-moz-document url-prefix() {
+	.content {
+		font-family: 'IBM Plex Sans Light', sans-serif;
+	}	
+}
 
 .active button {
 	width: 800px;
 	margin-top: 20px;
 	box-shadow: 0px -1px 5px 0px rgba(0, 0, 0, 0.15);
 }
+
+.loader {
+	/* display: block; */
+	margin: 0 auto;
+	border: 16px solid #f3f3f3;
+	border-radius: 50%;
+	border-top: 16px solid #EBF0F7;
+	border-bottom: 16px solid #EBF0F7;
+	width: 60px;
+	height: 60px;
+	-webkit-animation: spin 2s linear infinite;
+	animation: spin 2s linear infinite;
+ }
+
+ @-webkit-keyframes spin {
+	0% { -webkit-transform: rotate(0deg); }
+	100% { -webkit-transform: rotate(360deg); }
+ }
+
+ @keyframes spin {
+	0% { transform: rotate(0deg); }
+	100% { transform: rotate(360deg); }
+ }

public/index.html

@@ -9,7 +9,7 @@
 	<div class="wrapper">
 		<span><b>IBM Cloud AppID SDK Sample SPA</b></span>
 	</div>
-
+    
     <div id="welcome">
         <div class="welcome-display">
             <div>
@@ -20,7 +20,8 @@
                     Sample App
                 </p>
             </div>
-            <button id="login" class="hidden">Login</button>
+            <div id="spinner" class="loader"></div>
+            <button id="login" class="hidden">Sign in</button>
             <div id="error"></div>
         </div>
         <div class="hintSection">
@@ -36,7 +37,7 @@
 	<div id="afterLogin" class="hidden">
 		<div class="welcome-display">
 			<p id="welcomeNameID"></p>
-			<p id="welcomeMessageII">You've made your first authentication.</p>
+            <p id="welcomeMessageII">You've made your first authentication.</p>
 		</div>
 
         <div class="collapsible">

src/index.js

@@ -8,40 +8,52 @@ const $welcomeNameId = document.getElementById('welcomeNameID');
 const $tokenContent = document.getElementById('tokenContent');
 const $userContent = document.getElementById('userContent');
 const $error = document.getElementById('error');
+const $spinner = document.getElementById('spinner');
+hideElement($spinner);
 
 const appID = new AppID();
 
 async function onLoginButtonClick() {
 	try {
 		hideElement($loginButton);
-
+		showElement($spinner);
 		const tokens = await appID.signin();
-		let userInfo = await appID.getUserInfo(tokens.accessToken);
-
-		hideElement($welcome);
-		showElement($afterLogin);
-
-		let decodeIDToken = tokens.idTokenPayload;
-
-		$welcomeNameId.textContent = 'Hi ' + decodeIDToken.name + ', Congratulations!';
-		$tokenContent.textContent = JSON.stringify(decodeIDToken);
-		$userContent.textContent = JSON.stringify(userInfo);
+		displayUserInfo(tokens);
 	} catch (e) {
-		$error.textContent = e;
+		console.log(e);
+		hideElement($spinner);
+		if (e == 'Error: Popup closed') {
+			$error.textContent = 'The pop-up window closed before sign-in completed. Click Sign in to try again.';
+		} else {
+			$error.textContent = e;
+		}
 		showElement($loginButton);
 	}
 }
 
 (async () => {
 	try {
 		await appID.init(config);
+		showElement($spinner);
+		const tokens = await appID.silentSignin();
+		displayUserInfo(tokens);
+	} catch (e) {
+		hideElement($spinner);
 		showElement($loginButton);
 		$loginButton.addEventListener('click', onLoginButtonClick);
-	} catch (e) {
-		$error.textContent = e;
 	}
 })();
 
+async function displayUserInfo(tokens) {
+	let userInfo = await appID.getUserInfo(tokens.accessToken);
+	let decodeIDToken = tokens.idTokenPayload;
+	hideElement($welcome);
+	showElement($afterLogin);
+	$welcomeNameId.textContent = 'Hi ' + decodeIDToken.name + ', Congratulations!';
+	$tokenContent.textContent = JSON.stringify(decodeIDToken);
+	$userContent.textContent = JSON.stringify(userInfo);
+}
+
 function hideElement($element) {
 	$element.classList.add('hidden');
 }