flowfuse/frontend/src/components/auth/UpdateExpiredPassword.vue at 8752e81ee647d237cffcfeffb4f3fe8c724c1899 · FlowFuse/flowfuse · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
<template>
    <form class="space-y-6" ref="password_form" @submit.prevent>
        <div>You must set a new password before continuing</div>
        <FormRow
            type="password"
            @enter="focusPassword"
            :error="errors.old_password"
            v-model="input.old_password"
            ref="row-old"
            container-class="max-w-full"
        >
            Old Password
        </FormRow>
        <FormRow
            type="password"
            @enter="focusConfirmPassword"
            :error="errors.password"
            v-model="input.password"
            ref="row-new"
            container-class="max-w-full"
        >
            New Password
        </FormRow>
        <FormRow
            type="password"
            @enter="changePassword"
            :error="errors.password_confirm"
            v-model="input.password_confirm"
            ref="row-confirm"
            container-class="max-w-full"
        >
            Confirm
        </FormRow>
        <ff-button @click="changePassword" type="submit">
            Change Password
        </ff-button>
        <ff-button kind="tertiary" @click="logout">Log out</ff-button>
        <div v-if="errors.password_change" class="ml-4 text-red-400 font-medium inline text-sm">{{ errors.password_change }}</div>
    </form>
</template>

<script>
import { mapState } from 'pinia'

import userApi from '../../api/user.js'
import FormRow from '../FormRow.vue'

import { useAccountAuthStore } from '@/stores/account-auth.js'

export default {
    name: 'UpdateExpiredPassword',
    computed: {
        ...mapState(useAccountAuthStore, ['loginError'])
    },
    data () {
        return {
            input: {
                username: '',
                password: ''
            },
            errors: {
                username: null,
                password: null
            }
        }
    },
    methods: {
        changePassword () {
            this.errors.old_password = ''
            this.errors.password = ''
            this.errors.password_confirm = ''
            this.errors.password_change = ''

            if (this.input.old_password === '') {
                this.errors.old_password = 'Enter your current password'
                return false
            }
            if (this.input.password === '') {
                this.errors.password = 'Enter a new password'
                return false
            }
            if (this.input.password.length < 8) {
                this.errors.password = 'Password too short'
                return false
            }
            if (this.input.password !== this.input.password_confirm) {
                this.errors.password_confirm = 'Passwords do not match'
                return false
            }
            userApi.changePassword(this.input.old_password, this.input.password).then(() => {
                useAccountAuthStore().checkState()
                this.$router.go()
            }).catch(e => {
                this.errors.password_change = 'Password change failed'
                console.error(e)
            })
        },
        focusOldPassword () {
            this.$refs['row-old'].focus()
        },
        focusPassword () {
            this.$refs['row-new'].focus()
        },
        focusConfirmPassword () {
            this.$refs['row-confirm'].focus()
        },
        logout () {
            useAccountAuthStore().logout()
        }
    },
    mounted () {
        setTimeout(() => {
            this.focusOldPassword()
        }, 50)
    },
    watch: {
        loginError (newError, oldError) {
            this.focusOldPassword()
            this.errors.username = 'Login failed'
        }
    },
    components: {
        FormRow
    }
}
</script>