Created
February 22, 2018 10:55
-
-
Save noncototient/2f3beac29a435c6fe2d52a3733e9c654 to your computer and use it in GitHub Desktop.
Vue password input component that consumes Have I Been Pwned Password API
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<template> | |
<div> | |
<input class="form-control" :class="'is-'+status" type="password" v-model="password" @change="verify"> | |
<div :class="status+'-feedback'" v-show="message"> | |
<i class="fa fa-spinner fa-spin" v-show="loading"></i> | |
<span v-text="message"></span> | |
</div> | |
</div> | |
</template> | |
<script> | |
export default { | |
data () { | |
return { | |
password: '', | |
loading: false, | |
message: '', | |
status: '' | |
} | |
}, | |
methods: { | |
verify () { | |
if (this.password === '') { | |
this.clearInput() | |
return | |
} | |
this.loading = true | |
this.status = 'checking' | |
this.message = 'Checking password...' | |
axios.get(`https://api.pwnedpasswords.com/pwnedpassword/${this.password}`).then( ({ data }) => { | |
this.clearInput() | |
if (data) { | |
this.status = 'invalid' | |
this.message = `Password is compromised. Found in data breaches ${data} times.` | |
return | |
} | |
}).catch( err => { | |
this.loading = false | |
if (err.response.status === 404) { | |
this.status = 'valid' | |
this.message = 'Password was not found in any known data breaches!' | |
return | |
} | |
}) | |
}, | |
clearInput () { | |
this.loading = false | |
this.status = '' | |
this.message = '' | |
} | |
} | |
} | |
</script> | |
<style lang="scss"> | |
.is-checking { | |
border-color: #0069d9 !important; | |
} | |
.checking-feedback { | |
color: #0069d9 !important; | |
} | |
</style> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment