From caff9e19d57c1a2d940fbaee97cf42d679a1f16b Mon Sep 17 00:00:00 2001 From: Harald Wolff Date: Mon, 18 Nov 2019 08:54:22 +0100 Subject: [PATCH] Authentication Alpha --- css/ln.vue.css | 78 +++++++++++++++++++++++++++++ demo.html | 7 ++- js/ln.vue.components.js | 105 ++++++++++++++++++++++++++++++++-------- js/ln.vue.js | 13 +++-- 4 files changed, 175 insertions(+), 28 deletions(-) diff --git a/css/ln.vue.css b/css/ln.vue.css index ef00b44..1bcce17 100644 --- a/css/ln.vue.css +++ b/css/ln.vue.css @@ -36,6 +36,58 @@ font-style: normal; } +* { + flex-grow: 1; +} + +div { + display: inline-block; +} + +h1, h2, h3, h4, h5 { + display: block; +} + +.h1, .h2, .h3, .h4, .h5 { + display: inline-block; + +} + +h1,.h1 { + font-size: 200%; + padding: 8px; +} +h2,.h2 { + font-size: 150%; + padding: 8px; +} +h3,.h3 { + font-size: 110%; + padding: 8px; +} + +.flex { + display: flex; + flex-direction: row; +} + +.flex.column { + flex-direction: column; +} + +.popup { + position: absolute; + top: 100%; + right: 0%; + + width: 100%; + + border: 1px solid black; + background-color: white; + + padding: 8px; +} + sym { display: inline-block; width: 24px; @@ -49,6 +101,18 @@ sym.trash::before { color: red; } +.no-border { + border: none; + display: inline-block; + padding: 0px; + margin: 0px; +} + +.fa-solid { + font-family: 'fa-solid'; + font-size: 20px; +} + div.ln-tooltip { position: absolute; @@ -170,6 +234,20 @@ div.ln-select::after { pointer-events: none; } +.ln-identity { + position: relative; + display: inline-block; + flex-grow: 0; + flex-shrink: 0; + width: 200px; + + text-align: center; + + padding: 8px; + + font-size: 150%; +} + .ln-navbar { display: block; width: 100%; diff --git a/demo.html b/demo.html index 0372b0e..ba77419 100644 --- a/demo.html +++ b/demo.html @@ -28,7 +28,10 @@
@@ -208,7 +211,7 @@ } }, routes: { - '/login': `
Login Pane
`, + '/login': `
Login Pane
`, } }); diff --git a/js/ln.vue.components.js b/js/ln.vue.components.js index f2a2b8a..78fe28a 100644 --- a/js/ln.vue.components.js +++ b/js/ln.vue.components.js @@ -102,6 +102,14 @@ Vue.component('ln-statusbar',{ class="ln-statusbar" >
{{ LNVue.$_.statusText }}
+
+ NOT LOGGED IN + + {{ LNVue.$_.identity.IdentityName }} + +
{{ LNVue.$_.socket && LNVue.$_.socket._state }}
`, }); @@ -507,6 +516,54 @@ Vue.component('ln-select',{ `, }); +Vue.component('ln-identity',{ + data: function(){ + return { + popupVisible: false, + }; + }, + methods: { + logout(){ + LNVue.$_.authenticate("",null,"",""); + this.popupVisible = false; + }, + popup(){ + this.popupVisible = !this.popupVisible; + }, + }, + template: `
+
+ {{ LNVue.$_.identity.IdentityName }} +
+
Not logged in +
+ +
+
+
+
+
+
+
`, +}); Vue.component('ln-login-pane',{ props: { @@ -520,29 +577,25 @@ Vue.component('ln-login-pane',{ .then((challenges)=>{ challenges = challenges.message.Challenges; if (challenges.length > 0){ - LNVue.$_.identity.identityName = this.identityName; + LNVue.$_.identity.IdentityName = this.identityName; LNVue.$_.identity.challenges = challenges; } }); }, - authenticate(challenge){ - console.log("authenticate()",challenge); + logout(){ + LNVue.$_.authenticate("",null,"",""); }, authenticateSeededPassword(challenge){ let encoder = new TextEncoder(); let seed = LNVue.decodeHex(challenge.AuthenticationParameters); let password = encoder.encode(challenge.prove); - console.log("password", LNVue.encodeHex(password),password); - console.log("seed", LNVue.encodeHex(seed),seed); - let secretSource = ArrayBuffer.combine(seed, password, seed); crypto.subtle.digest("SHA-256",secretSource) .then((secret)=>{ let challengebytes = LNVue.decodeB64(challenge.Challenge); secret = new Uint8Array(secret); - console.log("secret", LNVue.encodeHex(secret),secret); let proveSource = ArrayBuffer.combine(challengebytes, secret, challengebytes); @@ -563,28 +616,36 @@ Vue.component('ln-login-pane',{ }, template: `
- IdentityName: {{ LNVue.$_.identity.uniqueID }} / {{ LNVue.$_.identity.identityName }} -
+ v-if="LNVue.$_.identity.UniqueID" + > +
Logged in as
+ {{ LNVue.$_.identity.IdentityName }} + +
+ v-if="!LNVue.$_.identity.UniqueID">
+ v-if="LNVue.$_.identity.IdentityName == ''" + >
+ +
-
+
+
+
{{ challenge.SecureAttributeLabel }} @@ -592,10 +653,12 @@ Vue.component('ln-login-pane',{ v-model="challenge.prove" > -
+
+
`, }); diff --git a/js/ln.vue.js b/js/ln.vue.js index fffe4a2..5341517 100644 --- a/js/ln.vue.js +++ b/js/ln.vue.js @@ -299,8 +299,8 @@ this.navigation = {}; this.identity = { - uniqueID: null, - identityName: "", + UniqueID: null, + IdentityName: "", }; Promise @@ -402,7 +402,6 @@ SecureAttributeTypeName: secureAttributeTypeName, }) .then((challenges)=>{ - console.log("rx challenges",challenges); resolve(challenges); }, (error)=>{ @@ -419,12 +418,16 @@ Challenge: challenge, Prove: prove, }; - console.log("authenticate", authenticationProve); + console.log(authenticationProve); this.socket.request("AuthenticationProve", authenticationProve) .then((identity)=>{ - console.log("auth",identity); + this.identity = identity.message; }, (error)=>{ + this.identity = { + IdentityName: "", + UniqueID: null, + } console.log("auth error",error); }); }