Skip to content

Commit ad4470c

Browse files
authored
Merge pull request ForstaLabs#1 from ForstaLabs/newauth
upgrade authentication system
2 parents 8183cc0 + 4b6b70c commit ad4470c

File tree

18 files changed

+661
-355
lines changed

18 files changed

+661
-355
lines changed

client/auth/authenticate.vue

Lines changed: 0 additions & 137 deletions
This file was deleted.

client/auth/loginCode.vue

Lines changed: 111 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,111 @@
1+
<style>
2+
</style>
3+
4+
<template>
5+
<div class="ui main text container" style="margin-top: 80px;">
6+
<div class="ui container center aligned">
7+
<div class="ui basic segment huge">
8+
<h1 class="ui header">
9+
<i class="circular sign in icon"></i>
10+
Message Vault Login
11+
</h1>
12+
</div>
13+
<div class="ui centered grid">
14+
<div class="ui nine wide column basic segment left aligned t0 b1">
15+
<form class="ui huge form enter-code" :class="{loading: loading}">
16+
<div class="field">
17+
<label>Login Code</label>
18+
<div class="ui left icon input">
19+
<input v-focus.lazy="true" type="text" name="code" placeholder="000000" autocomplete="off" v-model='code'>
20+
<i class="lock icon"></i>
21+
</div>
22+
</div>
23+
<button class="ui large primary submit button" type="submit">Submit</button>
24+
<router-link :to="{name: 'loginTag'}" class="ui large button right floated code-cancel">Cancel</router-link>
25+
<div class="ui mini error message" />
26+
</form>
27+
</div>
28+
</div>
29+
<div class="ui basic segment">
30+
<p>Please enter the site login code that was sent to you.</p>
31+
</div>
32+
</div>
33+
</div>
34+
</template>
35+
36+
<script>
37+
util = require('../util');
38+
shared = require('../globalState');
39+
focus = require('vue-focus');
40+
41+
function setup() {
42+
if (!this.global.userId) {
43+
this.$router.push({ name: 'loginTag', query: this.$route.query });
44+
return;
45+
}
46+
47+
util.fetch.call(this, '/api/onboard/status/v1')
48+
.then(result => {
49+
this.global.onboardStatus = result.theJson.status;
50+
if (this.global.onboardStatus !== 'complete') {
51+
this.$router.push({ name: 'welcome' });
52+
}
53+
});
54+
55+
$('form.ui.form.enter-code').form({
56+
fields: {
57+
code: {
58+
identifier: 'code',
59+
rules: [{
60+
type: 'regExp',
61+
value: /^\d{6}$/,
62+
prompt: 'please enter the six-digit code you were just sent'
63+
}]
64+
}
65+
},
66+
onSuccess: (event) => {
67+
event.preventDefault();
68+
tryAuthCode.call(this)
69+
}
70+
});
71+
}
72+
73+
async function tryAuthCode() {
74+
var password = this.password;
75+
this.loading = true;
76+
let result;
77+
try {
78+
result = await util.fetch.call(this, '/api/auth/login/v1', { method: 'post', body: { id: this.global.userId, code: this.code }})
79+
} catch (err) {
80+
console.error(err);
81+
return false;
82+
}
83+
this.loading = false;
84+
if (result.ok) {
85+
const { token } = result.theJson;
86+
this.global.apiToken = token;
87+
const forwardTo = this.$route.query.forwardTo;
88+
this.$router.replace(forwardTo || { name: 'welcome' });
89+
return false;
90+
} else {
91+
util.addFormErrors('enter-code', { code: util.mergeErrors(result.theJson) });
92+
}
93+
return false;
94+
}
95+
96+
module.exports = {
97+
data: () => ({
98+
code: '',
99+
loading: false,
100+
global: shared.state
101+
}),
102+
mounted: function() {
103+
setup.call(this)
104+
},
105+
methods: {
106+
},
107+
directives: {
108+
focus: focus.focus
109+
}
110+
}
111+
</script>

client/auth/loginTag.vue

Lines changed: 124 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,124 @@
1+
<style>
2+
</style>
3+
4+
<template>
5+
<div class="ui main text container" style="margin-top: 80px;">
6+
<div class="ui container center aligned">
7+
<div class="ui basic segment huge">
8+
<h1 class="ui header">
9+
<i class="circular icon user"></i>
10+
Message Vault Login
11+
</h1>
12+
</div>
13+
<div class="ui centered grid">
14+
<div class="ui nine wide column basic segment left aligned t0 b1">
15+
<form class="ui huge form enter-tag" :class="{loading: loading}">
16+
<div class="field">
17+
<label>Authorized User</label>
18+
<div class="ui left icon input">
19+
<input v-focus.lazy="true" type="text" v-model='tag' name="tag" placeholder="user:org" autocomplete="off">
20+
<i class="at icon"></i>
21+
</div>
22+
</div>
23+
<button class="ui large primary submit button" type="submit">Submit</button>
24+
<div class="ui mini error message" />
25+
</form>
26+
</div>
27+
</div>
28+
<div class="ui basic segment">
29+
<p>Please enter your Forsta address so this site can send you a login code.</p>
30+
</div>
31+
</div>
32+
</div>
33+
</template>
34+
35+
<script>
36+
util = require('../util');
37+
focus = require('vue-focus');
38+
shared = require('../globalState');
39+
jwtDecode = require('jwt-decode');
40+
41+
function setup() {
42+
const apiToken = this.global.apiToken;
43+
const forwardTo = this.$route.query.forwardTo;
44+
if (apiToken && forwardTo) {
45+
const decoded = jwtDecode(apiToken);
46+
const expires = new Date(decoded.exp * 1000);
47+
const now = new Date();
48+
49+
if (now < expires) {
50+
this.$router.replace(forwardTo);
51+
return;
52+
}
53+
}
54+
55+
util.fetch.call(this, '/api/onboard/status/v1')
56+
.then(result => {
57+
this.global.onboardStatus = result.theJson.status;
58+
if (this.global.onboardStatus !== 'complete') {
59+
this.$router.push({ name: 'welcome' });
60+
}
61+
});
62+
63+
this.tag = this.global.loginTag;
64+
65+
$('form.ui.form.enter-tag').form({
66+
fields: {
67+
tag: {
68+
identifier: 'tag',
69+
rules: [{
70+
type: 'regExp',
71+
value: /^([\da-z_]([.][\da-z_]|[\da-z_])*)(:([\da-z_]([.]+[\da-z_]|[\da-z_])*))?$/,
72+
prompt: 'please enter full @your.name:your.org'
73+
}]
74+
}
75+
},
76+
onSuccess: (event) => {
77+
event.preventDefault();
78+
requestAuth.call(this)
79+
}
80+
});
81+
}
82+
83+
function requestAuth() {
84+
var tag = this.tag;
85+
this.loading = true;
86+
util.fetch.call(this, '/api/auth/login/v1/' + tag)
87+
.then(result => {
88+
this.loading = false;
89+
if (result.ok) {
90+
const { id } = result.theJson;
91+
this.global.userId = id;
92+
this.global.loginTag = tag;
93+
this.$router.push({ name: 'loginCode', query: this.$route.query });
94+
return false;
95+
} else {
96+
util.addFormErrors('enter-tag', { tag: util.mergeErrors(result.theJson) });
97+
return false;
98+
}
99+
})
100+
.catch(err => {
101+
console.log('got an err in requestAuth', err);
102+
this.loading = false;
103+
});
104+
return false;
105+
}
106+
107+
module.exports = {
108+
data: () => ({
109+
global: shared.state,
110+
tag: '',
111+
loading: false
112+
}),
113+
computed: {
114+
},
115+
mounted: function () {
116+
setup.call(this)
117+
},
118+
methods: {
119+
},
120+
directives: {
121+
focus: focus.focus
122+
}
123+
}
124+
</script>

0 commit comments

Comments
 (0)