Procházet zdrojové kódy

Add change password functionality

sbkwgh před 8 roky
rodič
revize
757c539d34
1 změnil soubory, kde provedl 60 přidání a 14 odebrání
  1. 60 14
      src/components/routes/SettingsAccount.vue

+ 60 - 14
src/components/routes/SettingsAccount.vue

@@ -8,17 +8,21 @@
 			</p>
 			<fancy-input
 				placeholder='Current password'
-				v-model='password.old.value'
-				:error='password.old.error'
+				v-model='password.current'
+				:error='password.errors["current password"]'
 				type='password'
 			></fancy-input>
 			<fancy-input
 				placeholder='New password'
-				v-model='password.new.value'
-				:error='password.new.error'
+				v-model='password.new'
+				:error='password.errors["new password"]'
 				type='password'
 			></fancy-input>
-			<button class='button button--green'>Change password</button>
+			<loading-button
+				class='button button--green'
+				@click='savePassword'
+				:loading='password.loading'
+			>Change password</loading-button>
 		</p>
 		<p>
 			<div class='h3 h3--margin_top'>Delete your account</div>
@@ -33,28 +37,70 @@
 
 <script>
 	import FancyInput from '../FancyInput'
+	import LoadingButton from '../LoadingButton'
+
+	import AjaxErrorHandler from '../../assets/js/errorHandler'
 
 	export default {
 		name: 'settingsAccount',
 		components: {
-			FancyInput
+			FancyInput,
+			LoadingButton
 		},
 		data () {
 			return {
 				password: {
-					old: {
-						value: '',
-						error: ''
-					},
-					new: {
-						value: '',
-						error: ''
+					loading: false,
+
+					current: '',
+					new: '',
+
+					errors: {
+						'new password': '',
+						'current password': ''
 					}
 				}
 			}
 		},
 		computed: {},
-		methods: {}
+		methods: {
+			savePassword () {
+				this.password.errors['current password'] = ''
+				this.password.errors['new password'] = ''
+
+				if(!this.password.current.length) {
+					this.password.errors['current password'] = 'Cannot be blank'
+					return
+				}
+				if(!this.password.new.length) {
+					this.password.errors['new password'] = 'Cannot be blank'
+					return
+				}
+
+				this.password.loading = true
+
+				this.axios
+					.put('/api/v1/user/' + this.$store.state.username, {
+						currentPassword: this.password.current,
+						newPassword: this.password.new
+					})
+					.then(_ => {
+						this.password.loading = false
+
+						this.password.current = ''
+						this.password.new = ''
+					})
+					.catch(e => {
+						this.password.loading = false
+
+						console.log(e)
+
+						AjaxErrorHandler(this.$store)(e, error => {
+							this.password.errors[error.parameter] = error.message
+						})
+					})
+			}
+		}
 	}
 </script>