You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
152 lines
5.6 KiB
152 lines
5.6 KiB
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 = `
|
|
<div class="coreid-login-form col-lg-6 col-md-8 col-sm-10 col-xs-12 offset-lg-3 offset-md-2 offset-sm-1 offset-xs-0 text-left">
|
|
<div class="coreid-login-form-inner">
|
|
<div class="coreid-login-form-header font-weight-light">{{ app_name }}</div>
|
|
<div class="coreid-login-form-message">{{ login_message }}</div>
|
|
<form class="coreid-form" v-on:submit.prevent="do_nothing">
|
|
<div class="form-group">
|
|
<input
|
|
type="text"
|
|
id="coreid-login-form-username"
|
|
name="username"
|
|
class="form-control"
|
|
placeholder="Username"
|
|
v-model="username"
|
|
autofocus
|
|
@keyup="on_key_up"
|
|
:disabled="loading || step_two"
|
|
>
|
|
</div>
|
|
<div class="form-group" v-if="step_two">
|
|
<input
|
|
type="password"
|
|
id="coreid-login-form-password"
|
|
name="password"
|
|
class="form-control"
|
|
placeholder="Password"
|
|
v-model="password"
|
|
:disabled="loading"
|
|
@keyup="on_key_up"
|
|
ref="password_input"
|
|
>
|
|
</div>
|
|
<div v-if="error_message" class="error-message">{{ error_message }}</div>
|
|
<div v-if="other_message" class="other-message">{{ other_message }}</div>
|
|
<div class="buttons text-right">
|
|
<small
|
|
class="mr-3"
|
|
v-if="!step_two && !loading && registration_enabled"
|
|
><a href="#" class="text-secondary" @click="on_register_click">Need an account?</a></small>
|
|
<button type="button" class="btn btn-primary" :disabled="loading" v-if="step_two" v-on:click="back_click">Back</button>
|
|
<button type="button" class="btn btn-primary" :disabled="loading || btn_disabled" v-on:click="step_click">{{ button_text }}</button>
|
|
</div>
|
|
</form>
|
|
<div class="coreid-loading-spinner" v-if="loading"><div class="inner"></div></div>
|
|
</div>
|
|
</div>
|
|
`
|
|
|
|
export default class AuthLoginForm extends Component {
|
|
static get selector() { return 'coreid-login-form' }
|
|
static get props() { return [
|
|
'app_name', 'login_message', 'additional_params', 'no_session', 'registration_enabled',
|
|
] }
|
|
static get template() { return template }
|
|
|
|
username = ''
|
|
password = ''
|
|
button_text = 'Next'
|
|
step_two = false
|
|
btn_disabled = true
|
|
loading = false
|
|
error_message = ''
|
|
other_message = ''
|
|
allow_back = true
|
|
|
|
watch_username(new_username, old_username) {
|
|
this.btn_disabled = !new_username
|
|
}
|
|
|
|
back_click() {
|
|
if ( !this.allow_back ) return;
|
|
this.step_two = false
|
|
this.button_text = 'Next'
|
|
}
|
|
|
|
async vue_on_create() {
|
|
const auth_user = await auth_api.get_authenticated_user()
|
|
if ( auth_user ) {
|
|
this.allow_back = false
|
|
this.username = auth_user
|
|
await this.step_click()
|
|
}
|
|
}
|
|
|
|
async on_key_up(event) {
|
|
if ( event.keyCode === 13 ) {
|
|
// Enter was pressed
|
|
event.preventDefault()
|
|
event.stopPropagation()
|
|
if ( !this.step_two && this.username ) return this.step_click(event)
|
|
else if ( this.step_two && this.username && this.password ) return this.step_click(event)
|
|
}
|
|
}
|
|
|
|
async step_click(event) {
|
|
if ( !this.step_two ) {
|
|
this.loading = true
|
|
try {
|
|
const is_valid = await auth_api.validate_username(this.username)
|
|
if ( !is_valid ) {
|
|
this.error_message = 'That username is invalid. Please try again.'
|
|
} else {
|
|
this.step_two = true
|
|
this.button_text = 'Continue'
|
|
this.error_message = ''
|
|
this.$nextTick(() => {
|
|
this.$refs.password_input.focus()
|
|
})
|
|
}
|
|
} catch (e) {
|
|
this.error_message = 'Sorry, an unknown error has occurred and we are unable to continue at this time.'
|
|
}
|
|
this.loading = false
|
|
} else {
|
|
this.loading = true
|
|
this.error_message = ''
|
|
|
|
let attempt_vars = {
|
|
username: this.username,
|
|
password: this.password,
|
|
create_session: !this.no_session,
|
|
}
|
|
|
|
if ( typeof this.additional_params === 'object' ) {
|
|
attempt_vars = {...attempt_vars, ...this.additional_params}
|
|
}
|
|
|
|
const result = await auth_api.attempt(attempt_vars)
|
|
if ( !result.success ) {
|
|
this.error_message = result.message || 'Sorry, an unknown error has occurred and we are unable to continue at this time.'
|
|
this.loading = false
|
|
return
|
|
}
|
|
|
|
this.other_message = 'Success! Let\'s get you on your way...'
|
|
await location_service.redirect(result.next, 1500)
|
|
}
|
|
}
|
|
|
|
on_register_click() {
|
|
this.loading = true
|
|
this.other_message = 'Okay! Let\'s get started...'
|
|
location_service.redirect('/auth/register', 1500) // TODO get this dynamically
|
|
}
|
|
|
|
do_nothing() {}
|
|
}
|