diff --git a/app/assets/app/auth/MFAChallenge.component.js b/app/assets/app/auth/MFAChallenge.component.js
new file mode 100644
index 0000000..2a16d50
--- /dev/null
+++ b/app/assets/app/auth/MFAChallenge.component.js
@@ -0,0 +1,73 @@
+import { Component } from '../../lib/vues6/vues6.js'
+import { auth_api } from '../service/AuthApi.service.js'
+import { location_service } from '../service/Location.service.js'
+
+const template = `
+
+
+
{{ app_name }}
+
+ Your account has multi-factor authentication enabled. Please enter the code generated by your authenticator app to continue.
+
+
+
+
+
{{ error_message }}
+
{{ other_message }}
+
+
+
+`
+
+export default class MFAChallengePage extends Component {
+ static get selector() { return 'coreid-mfa-challenge-page' }
+ static get props() { return ['app_name'] }
+ static get template() { return template }
+
+ loading = false
+
+ verify_code = ''
+ verify_success = false
+
+ error_message = ''
+ other_message = ''
+
+ async watch_verify_code(new_verify_code, old_verify_code) {
+ if ( new_verify_code.length === 6 ) {
+ this.loading = true
+ const result = await auth_api.mfa_attempt(new_verify_code)
+ this.verify_success = result && result.is_valid
+ if ( !this.verify_success ) {
+ this.other_message = ''
+ this.error_message = `Uh, oh! It looks like that's not the right code. Please try again.`
+ this.loading = false
+ } else {
+ this.error_message = ''
+ this.other_message = `Success! Redirecting...`
+ await location_service.redirect(result.next_destination, 1500)
+ }
+ } else if ( new_verify_code.length > 6 ) {
+ this.verify_code = old_verify_code
+ }
+ }
+
+ async on_key_up(event) {
+ if ( event.keyCode === 13 ) {
+ // Enter was pressed - don't submit the form
+ event.preventDefault()
+ event.stopPropagation()
+ return false
+ }
+ }
+}
diff --git a/app/assets/app/auth/MFASetup.component.js b/app/assets/app/auth/MFASetup.component.js
new file mode 100644
index 0000000..d52f66b
--- /dev/null
+++ b/app/assets/app/auth/MFASetup.component.js
@@ -0,0 +1,148 @@
+import { Component } from '../../lib/vues6/vues6.js'
+import { auth_api } from '../service/AuthApi.service.js'
+import { location_service } from '../service/Location.service.js'
+
+const template = `
+
+
+
{{ app_name }}
+
+
+ We're going to walk you through setting up multi-factor authentication for your account.
+
+ Once this is completed, you will need to provide your second factor of authentication whenever you sign in with your {{ app_name }} account.
+
+ You'll need some kind of MFA token generator such as Google Authenticator.
+
+
+
+
+
+
+
+
+ Scan the QR code below with your authenticator app to add your {{ app_name }} account.
+
+ Once you've done this, we'll ask for one of the generated codes to verify that MFA is working correctly.
+
+
+
+
Secret: {{ secret }}
+
+
+
+
+
+
+
+ Now, enter the code displayed in your authenticator app. {{ app_name }} will verify that the code is
+ correct. Then, you can enable MFA for your account.
+
+
+
+
+
{{ error_message }}
+
{{ other_message }}
+
+
+
+
+
+
+
+
+`
+
+export default class MFASetupPage extends Component {
+ static get selector() { return 'coreid-mfa-setup-page' }
+ static get props() { return ['app_name'] }
+ static get template() { return template }
+
+ loading = false
+ step = 0
+
+ qr_data = ''
+ otpauth_url = ''
+ secret = ''
+ verify_code = ''
+
+ verify_success = false
+
+ error_message = ''
+ other_message = ''
+
+ async watch_verify_code(new_verify_code, old_verify_code) {
+ if ( new_verify_code.length === 6 ) {
+ this.loading = true
+ const result = await auth_api.mfa_attempt(new_verify_code)
+ this.verify_success = result && result.is_valid
+ this.loading = false
+ if ( !this.verify_success ) {
+ this.other_message = ''
+ this.error_message = `Uh, oh! It looks like that's not the right code. Please try again.`
+ } else {
+ this.error_message = ''
+ this.other_message = `Success! That code matched what ${this.app_name} was expecting. You can now enable multi-factor authentication for your account.`
+ }
+ } else if ( new_verify_code.length > 6 ) {
+ this.verify_code = old_verify_code
+ }
+ }
+
+ async back_click() {
+ if ( this.step === 0 ) await location_service.back()
+ else this.step -= 1
+ }
+
+ async on_key_up(event) {
+ if ( event.keyCode === 13 ) {
+ // Enter was pressed - don't submit the form
+ event.preventDefault()
+ event.stopPropagation()
+ return false
+ }
+ }
+
+ async continue_click() {
+ if ( this.step === 0 ) {
+ // Get the MFA token
+ // TODO try/catch this
+ this.loading = true
+ const result = await auth_api.mfa_generate()
+ this.qr_data = result.qr_code
+ this.otpauth_url = result.otpauth_url
+ this.secret = result.secret
+ this.step = 1
+ this.loading = false
+ } else if ( this.step === 1 ) {
+ this.step = 2
+ this.error_message = ''
+ this.other_message = ''
+ this.$nextTick(() => {
+ this.$refs.verify_input.focus()
+ })
+ } else if ( this.step === 2 ) {
+ this.loading = true
+ try {
+ await auth_api.mfa_enable()
+ this.error_message = ''
+ this.other_message = 'MFA has been enabled for your account! For security purposes, you will be asked to sign in again.'
+ await location_service.redirect('/auth/login', 3000)
+ } catch(e) {
+ this.loading = false
+ this.error_message = 'Sorry, an unknown error occurred, and we were unable to continue.'
+ this.other_message = ''
+ }
+ }
+ }
+}
diff --git a/app/assets/app/auth/Page.component.js b/app/assets/app/auth/Page.component.js
new file mode 100644
index 0000000..4af0b4f
--- /dev/null
+++ b/app/assets/app/auth/Page.component.js
@@ -0,0 +1,35 @@
+import { Component } from '../../lib/vues6/vues6.js'
+import { auth_api } from '../service/AuthApi.service.js'
+import { action_service } from '../service/Action.service.js'
+
+const template = `
+