initial commit

dev/tekton/examples/example-bank/public/javascript/welcome.js

@@ -0,0 +1,108 @@
+class Welcome extends HTMLElement {
+
+    constructor() {
+        
+        super();        
+
+        console.log('INITIALIZING WELCOME VIEW');
+
+        let template = document.getElementById('welcomeview');
+        let templateContent = template.content;
+
+        const shadow = this.attachShadow({mode: 'open'})
+          .appendChild(templateContent.cloneNode(true));
+       
+    }
+
+    connectedCallback() {
+
+        let sr = this.shadowRoot;
+
+        let selectUserInput = sr.getElementById("usernameselect")
+        let signinButton = sr.getElementById("signin")
+
+        var phoneview = document.getElementById("phoneview");
+        var mobileview = phoneview.getMobileView();
+
+        if (loyalty.getCookie('access_token') != "" && loyalty.getCookie('id_token') != "") {
+            let id_object = loyalty.parseJwt(loyalty.getCookie('id_token'))
+            console.log(id_object)
+
+            var accountinfo = {
+                firstname: id_object.given_name,
+                surname: id_object.family_name
+            }
+
+            var fullname = accountinfo.firstname + ' ' + accountinfo.surname
+
+            mobileview.innerHTML = "";
+
+            let element = document.createElement('transactions-element')
+            element.setAttribute('name', fullname);
+            mobileview.appendChild(element); 
+
+            localStorage.setItem("loyaltyname", fullname);
+
+            phoneview.showNavigation();
+        } else {
+            getAllUsers((users) => {
+                users.forEach(user => {
+                    var option = document.createElement("option");
+                    option.text = user
+                    selectUserInput.add(option)
+                });
+            })
+        }
+
+        signinButton.addEventListener("click", e => {
+            this.signin(selectUserInput.value, selectUserInput.value)
+        })
+    }
+
+
+    signin(username, password) {
+        let sr = this.shadowRoot;
+        
+        var mobileview = sr.host.parentElement;
+        mobileview.innerHTML = "";
+
+        // create loading spinner first
+        var element = document.createElement('loading-spinner-element');
+        element.setAttribute("status", "Logging in...")
+        mobileview.appendChild(element)
+
+        loginWithAppId(username, password, (jsonWebToken) => {
+            // when login complete,
+            // re-initialize app?
+            new Loyalty(this.mode);
+            let id_object = loyalty.parseJwt(jsonWebToken.id_token)
+            console.log(id_object)
+
+            var accountinfo = {
+                firstname: id_object.given_name,
+                surname: id_object.family_name
+            }
+
+            var fullname = accountinfo.firstname + ' ' + accountinfo.surname
+
+            mobileview.innerHTML = "";
+
+            let element = document.createElement('transactions-element')
+            element.setAttribute('name', fullname);
+            mobileview.appendChild(element);
+
+            localStorage.setItem("loyaltyname", fullname);
+
+            phoneview.showNavigation();
+            // edge case when unable to sign in
+        })
+    }
+}
+
+try {
+    customElements.define('welcome-element', Welcome);
+} catch (err) {
+    const h3 = document.createElement('h3')
+    h3.innerHTML = err
+    document.body.appendChild(h3)
+}