changed version to 1.2.0-SNAPSHOT

CHANGELOG.md

@@ -1,8 +1,12 @@
 # Changelog
 
-## [v1.1.0] - 2023-03-20
+## [v1.2.0-SNAPSHOT] - 2023-03-20
 
-- Feature #24755 - generate a fresh token anytime the button is clicked.
+- Decode Button
+- Updatet layout
+- Added refresh token
+- Added expiration
+- Button for decode on https://jwt.io/
 
 ## [v1.0.1] - 2022-05-25
 

deploy.sh

@@ -0,0 +1,2 @@
+mvn package
+scp target/rpt-token-portlet-1.2.0.war life@10.1.30.156:/home/life/Portal-Bundle/deploy/rpt-token-portlet.war

pom.xml

@@ -13,7 +13,7 @@
 	<artifactId>rpt-token-portlet</artifactId>
 	<packaging>war</packaging>
 	<name>RPT UMA Token Portlet</name>
-	<version>1.1.0</version>
+	<version>1.2.0-SNAPSHOT</version>
 	<description>
 		Requesting Party Token Portlet
 		</description>

src/main/java/org/gcube/portlets/admin/RPTTokenReader.java

@@ -13,12 +13,15 @@ import javax.portlet.ResourceRequest;
 import javax.portlet.ResourceResponse;
 import javax.servlet.http.HttpServletRequest;
 
+import java.util.Base64;
+
 import org.gcube.common.portal.PortalContext;
 import org.gcube.common.scope.impl.ScopeBean;
 import org.gcube.common.scope.impl.ScopeBean.Type;
 import org.gcube.oidc.rest.JWTToken;
 import org.gcube.oidc.rest.OpenIdConnectConfiguration;
 import org.gcube.oidc.rest.OpenIdConnectRESTHelper;
+import org.gcube.oidc.rest.OpenIdConnectRESTHelperException;
 import org.gcube.portal.oidc.lr62.JWTCacheProxy;
 import org.gcube.portal.oidc.lr62.LiferayOpenIdConnectConfiguration;
 import org.gcube.vomanagement.usermanagement.GroupManager;
@@ -27,6 +30,7 @@ import org.gcube.vomanagement.usermanagement.model.GCubeGroup;
 
 import com.liferay.portal.kernel.json.JSONFactoryUtil;
 import com.liferay.portal.kernel.json.JSONObject;
+import com.liferay.portal.kernel.json.JSONArray;
 import com.liferay.portal.kernel.log.LogFactoryUtil;
 import com.liferay.portal.kernel.util.ParamUtil;
 import com.liferay.portal.model.User;
@@ -78,9 +82,16 @@ public class RPTTokenReader extends MVCPortlet {
 		System.out.println("Selected context="+context);
 		HttpServletRequest httpReq = PortalUtil.getOriginalServletRequest(PortalUtil.getHttpServletRequest(resourceRequest));
 		JWTToken umaToken = null;
+
+
+		resourceResponse.setContentType("application/json");
+		JSONObject jsonObject = JSONFactoryUtil.createJSONObject();
+
 		try {
 			User theUser = PortalUtil.getUser(resourceRequest);
 			OpenIdConnectConfiguration configuration = LiferayOpenIdConnectConfiguration.getConfiguration(httpReq);
+			
+			jsonObject.put("token_url", configuration.getTokenURL().toString());
 			JWTCacheProxy jwtCacheProxy = JWTCacheProxy.getInstance();
 			String sessionId = httpReq.getSession().getId();		  
 			String urlEncodedContext = null;
@@ -93,19 +104,51 @@ public class RPTTokenReader extends MVCPortlet {
 			JWTToken authToken = jwtCacheProxy.getOIDCToken(theUser, sessionId);
 			umaToken = OpenIdConnectRESTHelper.queryUMAToken(configuration.getTokenURL(), authToken.getAccessTokenAsBearer(), urlEncodedContext, null);
 			log.debug("Got a new UMA token " + umaToken.getTokenEssentials());
-		} catch (Exception e) {
+		} catch (OpenIdConnectRESTHelperException e) {
+			resourceResponse.setProperty(ResourceResponse.HTTP_STATUS_CODE, "" + e.getStatus());
+			
 			e.printStackTrace();
-			JSONObject jsonObject = JSONFactoryUtil.createJSONObject();
 			jsonObject.put("success", false);
 			jsonObject.put("comment", e.getMessage());
 			resourceResponse.getWriter().println(jsonObject);	
 			super.serveResource(resourceRequest, resourceResponse);
+			return;
+		} catch (Exception e) {
+			e.printStackTrace();
+			jsonObject.put("success", false);
+			jsonObject.put("comment", e.getMessage());
+			resourceResponse.getWriter().println(jsonObject);	
+			super.serveResource(resourceRequest, resourceResponse);
+			return;
 		}
-		String toReturn =  umaToken.getAccessTokenString();
+
-		resourceResponse.setContentType("application/json");
+		// } catch (Exception e) {
-		JSONObject jsonObject = JSONFactoryUtil.createJSONObject();
+		// 	e.printStackTrace();
+		// 	JSONObject jsonObject = JSONFactoryUtil.createJSONObject();
+		// 	jsonObject.put("success", false);
+		// 	jsonObject.put("comment", e.getMessage());
+		// 	resourceResponse.getWriter().println(jsonObject);	
+		// 	super.serveResource(resourceRequest, resourceResponse);
+	//	}
+
 		jsonObject.put("success", true);
-		jsonObject.put("comment", toReturn);
+		jsonObject.put("access_token", umaToken.getAccessTokenString());
+		jsonObject.put("refresh_token", umaToken.getRefreshTokenString());
+
+		jsonObject.put("raw_token", umaToken.getRaw());
+		
+		jsonObject.put("access_token_exp", umaToken.getExp());
+		jsonObject.put("essential", umaToken.getTokenEssentials());
+
+		jsonObject.put("client_id", umaToken.getAzp());
+
+		JSONArray audiences =  JSONFactoryUtil.createJSONArray();
+		List<String> list_audiences = umaToken.getAud();
+		for (int i = 0; i < list_audiences.size(); i++) {
+			audiences.put((String) list_audiences.get(i));
+		}
+		jsonObject.put("audience", audiences);
+
 		resourceResponse.getWriter().println(jsonObject);	
 		super.serveResource(resourceRequest, resourceResponse);
 	}

src/main/webapp/css/main.css

@@ -0,0 +1,11 @@
+code.wraptext {
+    white-space: pre-wrap; 
+    white-space: -moz-pre-wrap;
+    white-space: -pre-wrap;
+    white-space: -o-pre-wrap;
+    word-wrap: break-word;
+}
+
+.bg_white {
+    background-color: white !important;
+}

src/main/webapp/html/rpttokenreader/view.jsp

@@ -4,20 +4,131 @@
 <portlet:defineObjects />
 <portlet:resourceURL var="resourceURL">
 </portlet:resourceURL>
-<%
+<% List<GCubeGroup> userGroups = (List<GCubeGroup>) request.getAttribute("userGroups");
-List<GCubeGroup> userGroups = (List<GCubeGroup>) request.getAttribute("userGroups");
 pageContext.setAttribute("userGroups", userGroups);
 
 List<String> userContexts = (List<String>) request.getAttribute("userContexts");
 pageContext.setAttribute("userContexts", userContexts);
+
+String sub = "-";
+
+if (userContexts != null && userContexts.size()>0){
+	sub = userContexts.get(0).substring(userContexts.get(0).lastIndexOf("/") + 1);
+}
+
+pageContext.setAttribute("firstContextName", sub);
+
 %>
 <script type="text/javascript">
+	var global_token_response = {};
+
+	function formatDuration(seconds) {
+		console.log("seconds", seconds);
+
+		if (!seconds) {
+			return "";
+		}
+		if (seconds < 0) seconds *= seconds;
+
+		var intervals = {
+			day: Math.floor(seconds / (60 * 60 * 24)),
+			hour: Math.floor(seconds / (60 * 60)) % 24,
+			minute: Math.floor(seconds / 60) % 60,
+			second: Math.floor(seconds / 1) % 60
+		};
+
+		return Object.entries(intervals)
+			.filter(val => val[1] !== 0)
+			.map(([key, val]) => "" + val + " " + key + (val != 1 ? 's' : ''))
+			.join(', ');
+	}
+
+	function initForm() {
+		$('#response_group').hide();
+		$('#error_msg').hide();
+		$('#rawTokenResult').hide();
+
+		openInfo('intro_info')
+		closeInfo('token_info')
+		closeInfo('refresh_token_info')
+		closeInfo('refresh')
+
+		console.log("hided response_group")
+	}
+
+	function resetResults() {
+		// $('#buttonCopy').hide();
+		// $('#buttonDecode').hide();
+
+		$('#tokenResult').text('');
+		$('#tokenResultDetails').text('');
+		$('#refreshTokenResult').text('');
+		$('#refreshTokenResultDetails').text('');
+		$('#rawTokenResult').text('');
+
+		$('#error_msg').html("")
+
+		$('#refresh_token_url').html('');
+		$('#client_id').html('');
+	}
+
+	function setResults(resultObject) {
+		global_token_response = resultObject;
+
+		$('#tokenResult').text(resultObject.access_token);
+		$('#refreshTokenResult').text(resultObject.refresh_token);
+
+
+		$('#refresh_token_url').text(resultObject.token_url);
+		$('#client_id').text(resultObject.client_id);
+
+		$('#usage_token').html(generateAccessCurl("[REFRESH_TOKEN]", "[SERVICE_URL]"))
+		$('#usage_refresh').html(generateRefreshCurl("[CLIENT_ID]", "[REFRESH_TOKEN]", "[REFRESH_URL]"))
+
+		var raw = JSON.parse(resultObject.raw_token)
+
+		var expires_in = raw.expires_in;
+		if (expires_in) {
+			$('#tokenResultDetails').html('expires in <b>' + formatDuration(expires_in) + '</b>');
+		}
+
+		var refresh_expires_in = raw.refresh_expires_in;
+		if (expires_in) {
+			$('#refreshTokenResultDetails').html('expires in <b>' + formatDuration(refresh_expires_in) + '</b>');
+		}
+
+		var not_before_policy = raw["not-before-policy"];
+
+		console.log("expires_in", expires_in);
+		console.log("refresh_expires_in", refresh_expires_in);
+		console.log("not-before-policy", not_before_policy);
+
+		$('#rawTokenResult').html(JSON.stringify(raw, undefined, 4));
+		$('#response_group').show();
+
+		console.log("resultObject", resultObject)
+
+		//closeInfo('intro_info', false);
+		// closeInfo('token_info', true);
+		// closeInfo('refresh_token_info', true);
+	}
+
+	function setError(error_comment) {
+		$('response_group').hide();
+
+		$('#error_msg').show();
+		$('#error_msg').html(error_comment);
+	}
+
 	function getUMAToken(endpoint) {
 		console.log("getUMAToken:" + endpoint);
+
 		$('#umaButton').attr("disabled", true);
-		$('#buttonCopy').hide();
+		resetResults();
+
 		var selectedContext = $("#myselect").val();
-		$('#tokenResult').text('');
+		console.log("selected context: ", selectedContext);
+
 		$.ajax({
 			url: endpoint,
 			type: 'POST',
@@ -26,22 +137,125 @@ pageContext.setAttribute("userContexts", userContexts);
 				context: selectedContext
 			},
 			success: function (data) {
-				var resultObject = JSON.parse(JSON.stringify(data));
+
+				$("#intro").hide();
+
+				var raw = JSON.stringify(data)
+				var resultObject = JSON.parse(raw);
 				if (resultObject.success) {
-					$('#tokenResult').text(resultObject.comment);
+					setResults(resultObject);
-					$('#buttonCopy').show();
 				} else {
-					$('#tokenResult').text(resultObject.comment);
+					setError(resultObject.comment)
-					$('#tokenResult').css('color', 'red');
 				}
 				$('#umaButton').attr("disabled", false);
+			},
+			error: function (xhr, status, error) {
+				console.error("error", xhr, status, error);
+				setError("Server error, cannot obtain the token");
+				$('#umaButton').attr("disabled", false);
+
 			}
 		});
 	}
 
-	function copyFunction() {
+
+	function openInfo(destination_id) {
+		toggleInfo(destination_id, true)
+	}
+	function closeInfo(destination_id, do_switch) {
+		toggleInfo(destination_id, false)
+	}
+	function toggleInfo(destination_id, do_switch) {
+		$("#" + destination_id).toggle(do_switch);
+		do_switch = $("#" + destination_id).css('display') != 'none';
+		$("#" + destination_id + "_icon").toggleClass("icon-chevron-up", do_switch);
+		$("#" + destination_id + "_icon").toggleClass("icon-chevron-down", !do_switch);
+	}
+
+	function decodeFunction(text_id) {
+		var decode_text = $("#" + text_id).val();
+		window.open(
+			"https://jwt.io/#id_token=" + encodeURIComponent(decode_text),
+			'_blank'
+		);
+	}
+	
+
+	
+
+	function generateAccessCurl(token, service_url) {
+		return "curl -X GET -H 'Authorization: Bearer " + token + "' \\\n"
+			+ "\t " + service_url
+	}
+
+
+	function generateRefreshCurl(client_id, refresh_token, refresh_url) {
+		return "curl -X POST --location '" + refresh_url + "' \\\n" +
+			// "\t--header 'Content-Type: application/x-www-form-urlencoded' \\\n" +
+			"\t--data-urlencode 'grant_type=refresh_token' \\\n" +
+			"\t--data-urlencode 'client_id=" + client_id + "' \\\n" +
+			"\t--data-urlencode 'refresh_token=" + refresh_token + "' "
+
+		// return "curl --request POST " +
+		// 	"--data " +
+		// 	"'refresh_token=eyJhbGciOiJIUzI1NiIsInR5cCIgOiAiSldUIiwia2lkIiA6ICJjOTk5YmVjNC1iNDc4LTQ4Y2YtYmI5OS0wMWMxODY5NzcwNGIifQ.eyJleHAiOjE3MTA5NDMyNzcsImlhdCI6MTcwOTczMzY3NywianRpIjoiYTEyNWNkNjUtYTJlYi00OTM3LWEwODAtNzZkYjMxNThlZGU0IiwiaXNzIjoiaHR0cHM6Ly9hY2NvdW50cy5kZXYuZDRzY2llbmNlLm9yZy9hdXRoL3JlYWxtcy9kNHNjaWVuY2UiLCJhdWQiOiJodHRwczovL2FjY291bnRzLmRldi5kNHNjaWVuY2Uub3JnL2F1dGgvcmVhbG1zL2Q0c2NpZW5jZSIsInN1YiI6ImI5OTY5YjUxLTU3OGYtNGI2OS1hNTNmLTJjOGFkZjllZmNjNyIsInR5cCI6IlJlZnJlc2giLCJhenAiOiJuZXh0LmRldi5kNHNjaWVuY2Uub3JnIiwic2Vzc2lvbl9zdGF0ZSI6IjczMzVjZGY5LTFlMjUtNGU5OC1iNjg2LWM1ZTg1NGU2MmQ4OCIsImF1dGhvcml6YXRpb24iOnsicGVybWlzc2lvbnMiOlt7InJzaWQiOiI1NzI4NTUxMC0zOTM5LTRkZTctOGZjMS1lM2E5ZDNjY2UyODEiLCJyc25hbWUiOiJEZWZhdWx0IFJlc291cmNlIn1dfSwic2NvcGUiOiJlbWFpbCBwcm9maWxlIiwic2lkIjoiNzMzNWNkZjktMWUyNS00ZTk4LWI2ODYtYzVlODU0ZTYyZDg4In0.q6T2tVSvMXJzxaxRGavGaghRB9myk4CSjhO_-mvOXxY" +
+		// 	"&client_id=next.dev.d4science.org" +
+		// 	"&grant_type=refresh_token' " +
+		// 	"https://accounts.dev.d4science.org/auth/realms/d4science/protocol/openid-connect/token"
+	}
+
+	function copyText(text) {
+		var listener = function (ev) {
+			ev.clipboardData.setData("text/plain", text);
+			ev.preventDefault();
+		};
+		document.addEventListener("copy", listener);
+		document.execCommand("copy");
+		document.removeEventListener("copy", listener);
+
+
+		navigator.clipboard.writeText(text).then(function () {
+			/* clipboard successfully set */
+		}, function () {
+			/* clipboard write failed */
+		});
+	}
+
+	function copyAccessCurl() {
+
+		// ***.dev.d4science.org => api.dev.d4science.org
+		// ***.pre.d4science.org => api.pre.d4science.org
+		// xxx.d4science.org => api.d4science.org
+
+		var client_id = global_token_response.client_id;
+		var service_path = "api.d4science.org";
+
+		if (client_id.endsWith("dev.d4science.org")){
+			service_path = "api.dev.d4science.org";
+		} else if (client_id.endsWith("pre.d4science.org")){
+			service_path = "api.pre.d4science.org";
+		}
+
+		var curl = generateAccessCurl(
+			global_token_response.access_token,
+			"https://" +  service_path + "/catalogue/items");
+		copyText(curl);
+	}
+
+
+
+	function copyRefreshCurl() {
+		var curl = generateRefreshCurl(
+			global_token_response.client_id,
+			global_token_response.refresh_token,
+			global_token_response.token_url);
+
+		copyText(curl);
+	}
+
+	function copyFromTextField(text_id) {
 		/* Get the text field */
-		var copyText = document.getElementById("tokenResult");
+		var copyText = document.getElementById(text_id);
 
 		/* Select the text field */
 		copyText.select();
@@ -50,10 +264,24 @@ pageContext.setAttribute("userContexts", userContexts);
 		/* Copy the text inside the text field */
 		document.execCommand("copy");
 	}
+
 </script>
+
+<c:if test="${userContexts.size() == 0}">
+	<div class="alert alert-error">
+		Configuration error, no context available
+	</div>
+</c:if>
+
+<div>
+	<c:if test="${userContexts.size() == 1}">
+		<p>Current context: ${firstContextName}</p>
+		<input type="hidden" name="contexts" id="myselect" value="${userContexts[0]}">
+	</c:if>
+
 	<c:if test="${userContexts.size() > 1}">
 		<p>Select the context:</p>
-</c:if>
+
 		<div>
 			<select style="width: 100%;" name="contexts" id="myselect">
 				<c:forEach var="context" items="${userContexts}">
@@ -61,21 +289,202 @@ pageContext.setAttribute("userContexts", userContexts);
 				</c:forEach>
 			</select>
 		</div>
-<div style="margin-bottom: 15px;">
+	</c:if>
+
+	<div class="row">
+		<div>
+			<c:if test="${userContexts.size() >= 1}">
 				<button name="umaButton" id="umaButton" type="button"
 					class="btn btn-primary" onClick="getUMAToken('${resourceURL}')">Get
 					Token</button>
+			</c:if>
+
 		</div>
-<div>
+	</div>
-	<button id="buttonCopy" class="btn btn-mini" onclick="copyFunction()">
+</div>
-		<i class="icon-copy"></i> Copy
+
+<br>
+
+
+<div id="response_group">
+
+	<div id="response_group_token" class="well well-small">
+		<div class="row">
+			<span class="span9"><b>OAuth Access Token <br> (Bearer Authorization)</b></span>
+			<button id="buttonInfo" data-toggle="tooltip" class="btn btn-small pull-right span2"
+				onclick="toggleInfo('token_info')" title="Toggle infos"
+				alt="Toggle infos">
+				<i class="icon-info"></i>
+				<i id="token_info_icon" class="icon-chevron-down"></i>
 			</button>
-	<textarea style="width: 90%;" 300px; margin: 10px;" id="tokenResult"></textarea>
 		</div>
-<div>
+		<textarea rows=" 2" id="tokenResult" class="disabled span12" readonly></textarea>
-	You can use <a href="https://jwt.io/" target="blank">https://jwt.io/</a>
+		<div class="row">
-	to decode.
+			<span class="help-block span9" id='tokenResultDetails'></span>
+			<div class="btn-group btn-group span2">
+				<button id="buttonDecode" data-toggle="tooltip" class="btn btn-small"
+					onclick="decodeFunction('tokenResult')" title="Decode" alt="Decode">
+					<i class="icon-eye-open"></i>
+				</button>
+				<button id="buttonCopy" data-toggle="tooltip" class="btn btn-small"
+					onclick="copyFromTextField('tokenResult')" title="Copy" alt="Copy">
+					<i class="icon-copy"></i>
+				</button>
 			</div>
+		</div>
+		<div id="token_info" style="display: none;" class="well well-small bg_white">
+			<p>Personal Token used to access protected resources</p>
+			<p>The token has a limited lifespan and must be included as a Bearer
+				token
+				in the Authorization header of the http request"</p>
+			<p>usage:<br>
+				<code id="usage_token" class="wraptext">curl -H "Authorization: Bearer [ACCESS_TOKEN] " \<br>&emsp;https://api.esempio.com/userinfo</code>
+			</p>
+			<p>
+			ref: <a
+				href="https://oauth.net/2/access-tokens">https://oauth.net/2/access-tokens/
+			</a>
+		</p>
+
+		<div class="row">
+			generate curl access request example: <button id="buttonGeneratAccessCurl"
+				data-toggle="tooltip" class="btn btn-small pull-right"
+				onclick="copyAccessCurl()" title="Copy to clipboard"
+				alt="Copy to clipboard">
+				<i class="icon-copy"></i>
+			</button>
+		</div>
+
+		</div>
+
+	</div>
+
+
+	<div id="response_group_refreshToken" class="well well-small">
+		<div class="row">
+			<span span9><b>Oauth2 Refresh Token</b></span>
+			<button id="buttonInfo" data-toggle="tooltip" class="btn btn-small pull-right"
+				onclick="toggleInfo('refresh_token_info')" title="Toggle infos"
+				alt="Toggle infos">
+				<i class="icon-info"></i>
+				<i id="refresh_token_info_icon" class="icon-chevron-down"></i>
+			</button>
+		</div>
+		<textarea rows=" 2" id="refreshTokenResult" class="disabled span12"
+			readonly></textarea>
+		<div class="row">
+			<span class="help-block span9" id='refreshTokenResultDetails'></span>
+			<div class="btn-group btn-group span2">
+				<button id="buttonDecodeRefresh" data-toggle="tooltip" class="btn btn-small"
+					onclick="decodeFunction('refreshTokenResult')" title="Decode"
+					alt="Decode">
+					<i class="icon-eye-open"></i>
+				</button>
+				<button id="buttonCopy" data-toggle="tooltip" class="btn btn-small"
+					onclick="copyFromTextField('refreshTokenResult')" title="Copy"
+					alt="Copy">
+					<i class="icon-copy"></i>
+				</button>
+
+			</div>
+		</div>
+		<div id="refresh_token_info" style="display: none;" class="well well-small bg_white">
+			<p>Use this token to programmaticaly refresh the Access token.
+			</p>
+			<p>usage:<br>
+				<code class="wraptext" id="usage_refresh"></code>
+			</p>
+			ref: <a href="https: //oauth.net/2/refresh-tokens/">
+				https://oauth.net/2/refresh-tokens/</a>
+			<div class="row">
+				generate curl refresh request: <button id="buttonGenerateRefreshCurl"
+					data-toggle="tooltip" class="btn btn-small pull-right"
+					onclick="copyRefreshCurl()" title="Copy to clipboard"
+					alt="Copy to clipboard">
+					<i class="icon-copy"></i>
+				</button>
+			</div>
+		</div>
+	</div>
+
+
+	<div id="parameters" class="well well-small">
+		<div class="row" onclick="toggleInfo('refresh')">
+			<span><b>Refresh parameters</b></span>
+			<i id="refresh_icon" class="icon-chevron-down pull-right"></i>
+		</div>
+		<div id="refresh">
+		<div class="row">
+			<br>
+			refresh token url: <code class="wraptext" id="refresh_token_url"></code>
+			<button id="refresh_token_url_copy" data-toggle="tooltip"
+				class="btn btn-small pull-right"
+				onclick="copyText(global_token_response.token_url)"
+				title="copy refresh token url" alt="copy refresh token url">
+				<i class="icon-copy"></i>
+			</button>
+		</div>
+
+		<div class="row">
+			client_id: <code class="wraptext" id="client_id"></code> <button
+				id="client_id_copy" data-toggle="tooltip" class="btn btn-small pull-right"
+				onclick="copyText(global_token_response.client_id)"
+				title="copy refresh token url" alt="copy refresh token url">
+				<i class="icon-copy"></i>
+			</button><br>
+		</div>
+
+		<div class="row">
+			generate curl refresh request: <button id="buttonGenerateRefreshCurl"
+				data-toggle="tooltip" class="btn btn-small pull-right"
+				onclick="copyRefreshCurl()" title="Copy to clipboard"
+				alt="Copy to clipboard">
+				<i class="icon-copy"></i>
+			</button>
+		</div>
+	</div>
+	</div>
+
+	<div id="div_decode">
+		You can decode the tokens using <a href="https://jwt.io/#debugger-io"
+			target="blank">https://jwt.io/</a>
+	</div>
+</div>
+
+
+<div class="well well-small" id="intro_container">
+	<div class="row" onclick="toggleInfo('intro_info')">
+		<span><b>Instructions</b></span>
+		<i id="intro_info_icon" class="icon-chevron-down pull-right"></i>
+	</div>
+	<div id="intro_info" class="well well-small bg_white">
+		<p>Obtain your personal OAuth2 Access and Refresh Tokens, to be used for
+		programmatic interaction with the Resources</p>
+		<p> Do not use this token to authenticate services but only for personal
+		access
+		</p>
+		<p>
+			ref:
+			<ul>
+				<li><a href="https://dev.d4science.org/how-to-access-resources">
+						Accessing Resources - how to</a></li>
+				<li><a
+						href="https://www.oauth.com/oauth2-servers/making-authenticated-requests">OAuth2:
+						Making Authenticated Requests</a></li>
+				<li><a
+						href="https://www.oauth.com/oauth2-servers/making-authenticated-requests/refreshing-an-access-token/">OAuth2:
+						Refresh Tokens</a></li>
+			</ul>
+		</p>
+	</div>
+</div>
+
+<div id="error_msg" class="alert alert-error">
+	Configuration error, no context available
+</div>
+
+
+
 <script>
-	$('#buttonCopy').hide();
+	initForm();
 </script>