strusbergAlex.github.io/screen.html at main · strusbergAlex/strusbergAlex.github.io · GitHub

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
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
<!DOCTYPE html>


<style>
	.gigyaSDK {
		border: 3px solid black;
		padding: 1px;
	}
</style>

<html lang="en">

	<head>
		<title> Gigya accessibility test page</title>
	</head>

	<body>
		<main>
			<h1>Gigya Screen Set</h1>
			<div class=gigyaSDK id='RAASLogin'></div>
		</main>
		<br>
		<div> <h1>Login status</h1> <span id='ai-login'> </span> </div>
		<div> <span id='ai-login.uid'> </span> </div>
		<h1>Gigya Social UI</h1>
		<div class=gigyaSDK id='SocialUI'></div>

		<h1>Gigya Add connection UI</h1>
		<div class=gigyaSDK id='AddConnection'></div>

		<h1>Gigya Edit connection UI</h1>
		<div class=gigyaSDK id='EditConnection'></div>


		<script>

			function onLoginEvent(e){
				if (e.UID){
					console.log("onLoginEvent");
					document.getElementById('ai-login').innerHTML = "Logged In";
					document.getElementById('ai-login.uid').innerHTML = `UID: ${e.UID}`;
				}
				else{
					document.getElementById('ai-login').innerHTML = "Logged out";
				}
			}

			function onLogoutEvent(e){
				document.getElementById('ai-login').innerHTML = "Logged out";
				document.getElementById('ai-login.uid').innerHTML = "";
			}

			function getQueryVariable(variable) {
				var query = window.location.search.substring(1);
				var vars = query.split('&');
				for (var i = 0; i < vars.length; i++) {
					var pair = vars[i].split('=');
					if (decodeURIComponent(pair[0]) == variable) {
						return decodeURIComponent(pair[1]);
					}
				}
				return '';
			}

			const customLangParams = {
				'this_field_is_required' : '%fieldname is a required field'
			};

			const apiKey = getQueryVariable('apiKey');
			const screenSet = getQueryVariable('screenSet');
			const startScreen = getQueryVariable('startScreen');
			const lang = getQueryVariable('lang');
			const dc = getQueryVariable('dc') === '' ? 'us1' : getQueryVariable('dc');
			const container = getQueryVariable('container') === 'true';

			let gigyaSrc = document.createElement("script");
			gigyaSrc.setAttribute("src", `https://cdns.${dc}.gigya.com/js/gigya.js?apiKey=${apiKey}`);
			document.body.appendChild(gigyaSrc);

			const params = {
				screenSet: screenSet,
				startScreen: startScreen,
				lang: lang,
				customLang: customLangParams
			};

            if (container)
                params.containerID = 'RAASLogin';

			onGigyaServiceReady = function () {
				gigya.accounts.showScreenSet(params);
				gigya.accounts.addEventHandlers({
				 onLogin: onLoginEvent,
				 onLogout: onLogoutEvent
				});
				gigya.accounts.getAccountInfo({
					callback: function (cb) {
					onLoginEvent(cb);
					}
				});
				gigya.socialize.showLoginUI({
					containerID: 'SocialUI',
					showWhatsThis:true,
					width: 200,
					height: 100
				});
				gigya.socialize.showAddConnectionsUI({
					containerID: 'AddConnection',
					showWhatsThis:true,
					width: 200,
					height: 100
				});
				gigya.socialize.showEditConnectionsUI({
					containerID: 'EditConnection',
					showTooltips: true,
					width: 220,
					height: 300
				});
			};

		</script>

	</body>

</html>