WIP. change password page development

src/account/profile/ChangePasswordPage.vue

@@ -1,18 +1,145 @@
 <template>
     <div>
-        Change Password
+        <h2>{{messages.form_title_change_password}}<span v-if="this.me === false"> - {{this.userId}}</span></h2>
+
+        <form @submit.prevent="changePass()">
+            <div v-if="me === true && hasRequiredExternalAuth">
+                <div class="form-group">
+                    <p>{{messages.message_change_password_external_auth}}</p>
+                    <div v-for="info in requiredExternalAuthContacts">
+                        {{message['field_label_'+contact.type]}}: {{contact.info}}
+                    </div>
+                    <button class="btn btn-primary" :disabled="loading()">{{messages.button_label_request_password_reset}}</button>
+                    <img v-show="loading()" src="data:image/gif;base64,R0lGODlhEAAQAPIAAP///wAAAMLCwkJCQgAAAGJiYoKCgpKSkiH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAEAAQAAADMwi63P4wyklrE2MIOggZnAdOmGYJRbExwroUmcG2LmDEwnHQLVsYOd2mBzkYDAdKa+dIAAAh+QQJCgAAACwAAAAAEAAQAAADNAi63P5OjCEgG4QMu7DmikRxQlFUYDEZIGBMRVsaqHwctXXf7WEYB4Ag1xjihkMZsiUkKhIAIfkECQoAAAAsAAAAABAAEAAAAzYIujIjK8pByJDMlFYvBoVjHA70GU7xSUJhmKtwHPAKzLO9HMaoKwJZ7Rf8AYPDDzKpZBqfvwQAIfkECQoAAAAsAAAAABAAEAAAAzMIumIlK8oyhpHsnFZfhYumCYUhDAQxRIdhHBGqRoKw0R8DYlJd8z0fMDgsGo/IpHI5TAAAIfkECQoAAAAsAAAAABAAEAAAAzIIunInK0rnZBTwGPNMgQwmdsNgXGJUlIWEuR5oWUIpz8pAEAMe6TwfwyYsGo/IpFKSAAAh+QQJCgAAACwAAAAAEAAQAAADMwi6IMKQORfjdOe82p4wGccc4CEuQradylesojEMBgsUc2G7sDX3lQGBMLAJibufbSlKAAAh+QQJCgAAACwAAAAAEAAQAAADMgi63P7wCRHZnFVdmgHu2nFwlWCI3WGc3TSWhUFGxTAUkGCbtgENBMJAEJsxgMLWzpEAACH5BAkKAAAALAAAAAAQABAAAAMyCLrc/jDKSatlQtScKdceCAjDII7HcQ4EMTCpyrCuUBjCYRgHVtqlAiB1YhiCnlsRkAAAOwAAAAAAAAAAAA==" />
+                </div>
+            </div>
+            <div v-else>
+                <div v-if="me === true && hasRequiredAuthenticator">
+                    <p>{{messages.message_change_password_authenticator_auth}}</p>
+                    <label htmlFor="totpToken">{{messages.field_label_totp_code}}</label>
+                    <input v-validate="'required'" v-model="totpToken" name="totpToken" class="form-control"/>
+                    <div v-if="submitted && errors.has('totpToken')" class="invalid-feedback d-block">{{ errors.first('totpToken') }}</div>
+                </div>
+
+                <div v-if="me === true || user.admin" class="form-group">
+                    <label htmlFor="currentPassword">{{messages.field_label_current_password}}</label>
+                    <input type="password" v-validate="'required'" v-model="currentPassword" name="currentPassword" class="form-control"/>
+                    <div v-if="submitted && errors.has('oldPassword')" class="invalid-feedback d-block">{{ errors.first('oldPassword') }}</div>
+                </div>
+
+                <div class="form-group">
+                    <label htmlFor="newPassword">{{messages.field_label_new_password}}</label>
+                    <input type="password" v-validate="'required'" v-model="newPassword" name="newPassword" class="form-control"/>
+                    <div v-if="submitted && errors.has('password')" class="invalid-feedback d-block">{{ errors.first('password') }}</div>
+                </div>
+                <div class="form-group">
+                    <label htmlFor="newPasswordConfirm">{{messages.field_label_new_password_confirm}}</label>
+                    <input type="password" v-validate="'required'" v-model="newPasswordConfirm" name="newPasswordConfirm" class="form-control"/>
+                </div>
+
+                <div class="form-group">
+                    <button class="btn btn-primary" :disabled="loading()">{{messages.button_label_change_password}}</button>
+                    <img v-show="loading()" src="data:image/gif;base64,R0lGODlhEAAQAPIAAP///wAAAMLCwkJCQgAAAGJiYoKCgpKSkiH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAEAAQAAADMwi63P4wyklrE2MIOggZnAdOmGYJRbExwroUmcG2LmDEwnHQLVsYOd2mBzkYDAdKa+dIAAAh+QQJCgAAACwAAAAAEAAQAAADNAi63P5OjCEgG4QMu7DmikRxQlFUYDEZIGBMRVsaqHwctXXf7WEYB4Ag1xjihkMZsiUkKhIAIfkECQoAAAAsAAAAABAAEAAAAzYIujIjK8pByJDMlFYvBoVjHA70GU7xSUJhmKtwHPAKzLO9HMaoKwJZ7Rf8AYPDDzKpZBqfvwQAIfkECQoAAAAsAAAAABAAEAAAAzMIumIlK8oyhpHsnFZfhYumCYUhDAQxRIdhHBGqRoKw0R8DYlJd8z0fMDgsGo/IpHI5TAAAIfkECQoAAAAsAAAAABAAEAAAAzIIunInK0rnZBTwGPNMgQwmdsNgXGJUlIWEuR5oWUIpz8pAEAMe6TwfwyYsGo/IpFKSAAAh+QQJCgAAACwAAAAAEAAQAAADMwi6IMKQORfjdOe82p4wGccc4CEuQradylesojEMBgsUc2G7sDX3lQGBMLAJibufbSlKAAAh+QQJCgAAACwAAAAAEAAQAAADMgi63P7wCRHZnFVdmgHu2nFwlWCI3WGc3TSWhUFGxTAUkGCbtgENBMJAEJsxgMLWzpEAACH5BAkKAAAALAAAAAAQABAAAAMyCLrc/jDKSatlQtScKdceCAjDII7HcQ4EMTCpyrCuUBjCYRgHVtqlAiB1YhiCnlsRkAAAOwAAAAAAAAAAAA==" />
+                </div>
+            </div>
+
+        </form>
     </div>
 </template>
 
 <script>
-    import { mapState, mapActions } from 'vuex'
+    import { mapState, mapActions, mapGetters } from 'vuex';
+    import { util } from '../../_helpers';
 
     export default {
-        computed: {
+        data() {
+            return {
+                submitted: false,
+                me: null,
+                linkPrefix: null,
+                userId: null,
+                currentUser: util.currentUser(),
+                currentPassword: null,
+                newPassword: null,
+                newPasswordConfirm: null,
+                totpToken: null
+            }
         },
-        created () {
+        computed: {
+            ...mapState('users', ['user', 'policy']),
+            ...mapState('system', ['messages']),
+            requiredExternalAuthContacts () {
+                const contacts = [];
+                if (this.policy && this.policy.accountContacts && this.policy.accountContacts.length > 0) {
+                    for (let i=0; i<this.policy.accountContacts.length; i++) {
+                        const contact = this.policy.accountContacts[i];
+                        if (contact.type && contact.type !== 'authenticator' && contact.requiredForAccountOperations === true && contact.info) {
+                            contacts.push(contact);
+                        }
+                    }
+                }
+                return contacts;
+            },
+            hasRequiredAuthenticator () {
+                return this.policy && this.authenticatorRequired(this.policy);
+            },
+            hasRequiredExternalAuth () {
+                return this.requiredExternalAuthContacts.length > 0;
+            }
         },
         methods: {
+            ...mapActions('users', ['getPolicyByUserId', 'changePassword']),
+            ...mapGetters('users', ['loading']),
+            authenticatorRequired (p) {
+                if (p && p.accountContacts && p.accountContacts.length > 0) {
+                    for (let i=0; i<p.accountContacts.length; i++) {
+                        const contact = p.accountContacts[i];
+                        if (contact.type === 'authenticator' && contact.requiredForAccountOperations === true) {
+                            return true;
+                        }
+                    }
+                }
+                return false;
+            },
+            changePass (e) {
+                this.submitted = true;
+                this.errors.clear();
+                console.log('changePass called');
+            }
+        },
+        created () {
+            this.me = this.$route.path.startsWith('/me/');
+            if (this.me) {
+                this.linkPrefix = '/me';
+                if (this.currentUser === null) {
+                    this.admin = false;
+                    console.warn('ChangePasswordPage.created: /me requested but no currentUser, sending to home page');
+                    this.$router.push('/');
+                    return;
+
+                } else {
+                    this.admin = this.currentUser.admin === true;
+                    this.userId = this.currentUser.uuid;
+                    this.getUserById({userId: this.currentUser.uuid, messages: this.messages, errors: this.errors});
+                    this.getPolicyByUserId({userId: this.currentUser.uuid, messages: this.messages, errors: this.errors});
+                }
+
+            } else if (this.currentUser.admin !== true) {
+                console.warn('ChangePasswordPage.created: not admin and path not /me, sending to /me ...');
+                this.$router.push('/me');
+                return;
+
+            } else if (typeof this.$route.params.id === 'undefined' || this.$route.params.id === null) {
+                console.warn('ChangePasswordPage.created: no id param found, sending to accounts page');
+                this.$router.push('/admin/accounts');
+                return;
+
+            } else {
+                this.userId = this.$route.params.id;
+                this.linkPrefix = '/admin/accounts/' + this.userId;
+                this.getUserById({userId: this.userId, messages: this.messages, errors: this.errors});
+                this.getPolicyByUserId({userId: this.userId, messages: this.messages, errors: this.errors});
+            }
         }
     };
 </script>