@extends('layouts.app')

@section('content')
<div id='chpass'>
    <form autocomplete='no'>
    <b-container>
        <b-row><b-col><h3>Change your mail account password here</h3></b-col></b-row>
        <b-row><b-col>&nbsp;</b-col></b-row>
        <b-row>
            <b-col>Account</b-col>
            <b-col>
                <b-form-input 
                    type='text'
                    v-model='username' 
                    @change='input_validate' 
                    @keyup='input_validate' 
                    :state='validation.username' 
                    autocomplete=''></b-form-input>
            </b-col>
            <b-col> </b-col>
        </b-row>
        <b-row><b-col>&nbsp;</b-col></b-row>
        <b-row>
            <b-col>Current password</b-col>
            <b-col>
                <b-form-input 
                    type='password' 
                    v-model='pass' 
                    @change='input_validate' 
                    @keyup='input_validate' 
                    :state='validation.pass' 
                    autocomplete='new-password'></b-form-input>
            </b-col>
            <b-col> </b-col>
        </b-row>
        <b-row><b-col>&nbsp;</b-col></b-row>
        <b-row>
            <b-col>New password</b-col>
            <b-col>
                <b-form-input 
                    type='password' 
                    v-model='newpass1' 
                    @change='input_validate' 
                    @keyup='input_validate' 
                    :state='validation.newpass1' 
                    autocomplete='new-password1'></b-form-input>
            </b-col>
            <b-col> </b-col>
        </b-row>
        <b-row>
            <b-col>Confirm password</b-col>
            <b-col>
                <b-form-input 
                    type='password' 
                    v-model='newpass2' 
                    @change='input_validate' 
                    @keyup='input_validate' 
                    :state='validation.newpass2' 
                    autocomplete='new-password2'></b-form-input>
            </b-col>
            <b-col> </b-col>
        </b-row>
        <b-row>
            <b-col>
                <b-button 
                    id='submitbutton'
                    :variant="(resultstatus==null)?'primary':(resultstatus?'success':'danger')"
                    :disabled='processing || !((validation.username === true) && (validation.pass === true) && (validation.newpass1 === true) && (validation.newpass2 === true))' 
                    @click='submit($event)'><b-spinner small v-if="processing"></b-spinner> <span style='vertical-align: middle' v-if="processing">Updating password</span><span v-else>Update password</span></b-button>
                <b-tooltip ref="tooltip" target='submitbutton' placement='right' :disabled="resultstatus==null"> 
                    @{{resultmsg}}
                </b-tooltip>

            </b-col>
            <b-col></b-col>
            <b-col></b-col>
        </b-row>
    </b-container>
    </form>
</div>
@endsection