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.
191 lines
7.1 KiB
191 lines
7.1 KiB
import { Component } from '../../../lib/vues6/vues6.js'
|
|
import { auth_api } from '../../service/AuthApi.service.js'
|
|
import { location_service } from '../../service/Location.service.js'
|
|
import { message_service } from '../../service/Message.service.js'
|
|
import { password_service } from '../../service/Password.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>
|
|
<small
|
|
class="mr-3"
|
|
v-if="!loading"
|
|
><a href="#" class="text-secondary" @click="on_forgot_password">Forgot password?</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
|
|
}
|
|
|
|
async on_forgot_password() {
|
|
console.log(message_service)
|
|
await message_service.modal({
|
|
title: 'Reset Password',
|
|
message: 'If you have forgotten your password, you can request a reset e-mail to be sent to your account. Enter your e-mail address:',
|
|
inputs: [
|
|
{
|
|
type: 'email',
|
|
name: 'email',
|
|
placeholder: 'jdoe@contoso.com',
|
|
},
|
|
],
|
|
buttons: [
|
|
{
|
|
type: 'close',
|
|
text: 'Cancel',
|
|
},
|
|
{
|
|
type: 'close',
|
|
class: ['btn', 'btn-primary'],
|
|
text: 'Request',
|
|
on_click: async ($event, { email }) => {
|
|
await password_service.request_reset(email)
|
|
await message_service.alert({
|
|
type: 'success',
|
|
message: 'Success! If that e-mail address is associated with a valid ' + this.app_name + ' account, it will receive an e-mail with more instructions shortly.',
|
|
})
|
|
},
|
|
},
|
|
],
|
|
})
|
|
}
|
|
|
|
do_nothing() {}
|
|
}
|