30 |
31 |
Welcome!
32 |
33 |
34 |
35 |
36 |
37 |
Login Cancelled!
38 |
39 |
40 |
41 |
42 |
43 |
Logged In
44 |
45 |
46 |
47 |
48 |
49 |
50 |
51 |
52 |
53 |
--------------------------------------------------------------------------------
/example/www/js/index.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright 2022 Ayogo Health Inc.
3 | *
4 | * Licensed under the Apache License, Version 2.0 (the "License");
5 | * you may not use this file except in compliance with the License.
6 | * You may obtain a copy of the License at
7 | *
8 | * https://www.apache.org/licenses/LICENSE-2.0
9 | *
10 | * Unless required by applicable law or agreed to in writing, software
11 | * distributed under the License is distributed on an "AS IS" BASIS,
12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13 | * See the License for the specific language governing permissions and
14 | * limitations under the License.
15 | */
16 |
17 | /** Set of authentication elements we need to re-evaluate on login. */
18 | const authElements = new Set();
19 |
20 |
21 | /**
22 | * Click handler for the login button to start the OAuth flow.
23 | */
24 | document.querySelectorAll('.login').forEach((btn) => {
25 | btn.addEventListener('click', () => {
26 | // Our fake OAuth redirecting page
27 | const url = 'https://ayogohealth.github.io/cordova-plugin-oauth/example/oauth_access_token.html';
28 |
29 | // Open a window with the "oauth:" prefix to trigger the plugin
30 | const hwnd = window.open(url, '_blank', 'oauth=yes');
31 |
32 | hwnd.addEventListener('close', (evt) => {
33 | if (!localStorage.getItem('access_token')) {
34 | localStorage.setItem('login_cancelled', 'true');
35 |
36 | // Re-evaluate the authentication elements
37 | authElements.forEach((el) => el.evaluateState());
38 | }
39 | });
40 | })
41 | });
42 |
43 |
44 | /**
45 | * Receiver for OAuth login postMessage data from the plugin.
46 | */
47 | window.addEventListener('message', (evt) => {
48 | // Ensure this message is from the plugin, then parse the data
49 | if (evt.data.match(/^oauth::/)) {
50 | const data = JSON.parse(evt.data.substring(7));
51 |
52 | // Store the access token from the OAuth message data
53 | localStorage.setItem('access_token', data.access_token);
54 |
55 | // Re-evaluate the authentication elements
56 | authElements.forEach((el) => el.evaluateState());
57 | }
58 | });
59 |
60 |
61 | /**
62 | * Click handler for the logout button.
63 | */
64 | document.getElementById('logout-button').addEventListener('click', () => {
65 | // Erase the access token in localStorage
66 | localStorage.clear();
67 |
68 | // Re-evaluate the authentication elements
69 | authElements.forEach((el) => el.evaluateState());
70 | });
71 |
72 |
73 | /**
74 | * Custom Element to conditionally show a slot based on authentication status.
75 | */
76 | class AuthRouterElement extends HTMLElement {
77 | constructor() {
78 | super();
79 | this.attachShadow({ mode: 'open' });
80 | }
81 |
82 | connectedCallback() {
83 | authElements.add(this);
84 |
85 | this.evaluateState();
86 | }
87 |
88 | disconnectedCallback() {
89 | authElements.delete(this);
90 | }
91 |
92 | evaluateState() {
93 | const access_token = localStorage.getItem('access_token');
94 | const login_cancelled = localStorage.getItem('login_cancelled');
95 |
96 | if (access_token && access_token != '') {
97 | this.shadowRoot.innerHTML = '