mirror of
https://github.com/IT4Change/Ocelot-Social.git
synced 2025-12-13 07:45:56 +00:00
basic stuff from alpha
This commit is contained in:
parent
65076d24db
commit
7e258bc3d3
@ -1,35 +1,18 @@
|
||||
<template>
|
||||
<ds-form
|
||||
v-model="formData"
|
||||
:schema="formSchema"
|
||||
@submit="handleSubmit"
|
||||
>
|
||||
<ds-form v-model="formData" :schema="formSchema" @submit="handleSubmit">
|
||||
<template>
|
||||
<ds-input
|
||||
id="oldPassword"
|
||||
model="oldPassword"
|
||||
type="password"
|
||||
label="Your old password"
|
||||
/>
|
||||
<ds-input
|
||||
id="newPassword"
|
||||
model="newPassword"
|
||||
type="password"
|
||||
label="Your new password"
|
||||
/>
|
||||
<ds-input id="oldPassword" model="oldPassword" type="password" label="Your old password"/>
|
||||
<ds-input id="newPassword" model="newPassword" type="password" label="Your new password"/>
|
||||
<ds-input
|
||||
id="confirmPassword"
|
||||
model="confirmPassword"
|
||||
type="password"
|
||||
label="Confirm new password"
|
||||
/>
|
||||
{{ formData }}
|
||||
<password-strength :password="newPassword" @change="e => passwordSecure = e.isSecure"/>
|
||||
<ds-space margin-top="base">
|
||||
<ds-button
|
||||
:loading="loading"
|
||||
primary
|
||||
>
|
||||
{{ $t('settings.security.change-password.button') }}
|
||||
</ds-button>
|
||||
<ds-button :loading="loading" primary>{{ $t('settings.security.change-password.button') }}</ds-button>
|
||||
</ds-space>
|
||||
</template>
|
||||
</ds-form>
|
||||
@ -37,9 +20,13 @@
|
||||
|
||||
<script>
|
||||
import gql from 'graphql-tag'
|
||||
import PasswordStrength from './Strength'
|
||||
|
||||
export default {
|
||||
name: 'ChangePassword',
|
||||
components: {
|
||||
PasswordStrength
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
formData: {
|
||||
@ -56,6 +43,11 @@ export default {
|
||||
disabled: true
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
newPassword() {
|
||||
return 'abcabc1234567!' // this.formData.newPassword
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async handleSubmit(data) {
|
||||
this.loading = true
|
||||
145
webapp/components/Password/Strength.vue
Normal file
145
webapp/components/Password/Strength.vue
Normal file
@ -0,0 +1,145 @@
|
||||
<template>
|
||||
<div class="field">
|
||||
<div class="password-strength-meter">
|
||||
<div class="password-strength-meter-inner" :class="strengthClass"></div>
|
||||
</div>
|
||||
{{ pass }}
|
||||
{{ password }}
|
||||
<p class="help">
|
||||
<span v-if="this.pass" :class="{ insecure: (passwordStrength < 3) }">
|
||||
{{ $t('auth.register.passwordSecurity') }}:
|
||||
<strong>{{ $t(`auth.register.passwordStrength${passwordStrength}`) }}</strong>
|
||||
</span>
|
||||
<span v-else> </span>
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import zxcvbn from 'zxcvbn'
|
||||
import { isEmpty } from 'lodash'
|
||||
|
||||
export default {
|
||||
props: {
|
||||
password: {
|
||||
type: String,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
name: 'password-meter',
|
||||
data() {
|
||||
return {
|
||||
lastScore: 0,
|
||||
pass: this.password || null
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
password(pass) {
|
||||
// update password when prop is changing
|
||||
this.pass = pass || null
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
/**
|
||||
* passwordStrength is the score calculated by zxcvbn
|
||||
* @return {Number} Password Strength Score
|
||||
*/
|
||||
passwordStrength() {
|
||||
/*const score = !isEmpty(this.pass) ? zxcvbn(this.pass).score : 0
|
||||
if (score !== this.lastScore) {
|
||||
this.lastScore = score
|
||||
this.$emit('change', {
|
||||
score,
|
||||
isSecure: Boolean(score >= 3)
|
||||
})
|
||||
}
|
||||
return score*/
|
||||
return 0
|
||||
},
|
||||
strengthClass() {
|
||||
return `strength-${this.passwordStrength}`
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
// TODO export those definitions for reuse?
|
||||
// @import 'assets/styles/_variables';
|
||||
$grey-lighter: hsl(0, 0%, 86%);
|
||||
$red: hsl(12, 51%, 55%);
|
||||
$orange: hsl(14, 100%, 53%);
|
||||
$yellow: hsl(48, 100%, 67%);
|
||||
$green: #4aa41e;
|
||||
// @import 'assets/styles/_variables';
|
||||
|
||||
.password-strength-meter {
|
||||
position: relative;
|
||||
height: 3px;
|
||||
background: $grey-lighter;
|
||||
margin: 10px auto 6px;
|
||||
border-radius: 3px;
|
||||
|
||||
&:before,
|
||||
&:after {
|
||||
content: '';
|
||||
height: inherit;
|
||||
background: transparent;
|
||||
display: block;
|
||||
border-color: #fff;
|
||||
border-style: solid;
|
||||
border-width: 0 6px 0 6px;
|
||||
box-sizing: border-box;
|
||||
position: absolute;
|
||||
width: calc(20% + 6px);
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
&:before {
|
||||
left: calc(20% - 6px);
|
||||
}
|
||||
&:after {
|
||||
right: calc(20% - 6px);
|
||||
}
|
||||
}
|
||||
|
||||
.help {
|
||||
.insecure {
|
||||
strong {
|
||||
color: $red;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.password-strength-meter-inner {
|
||||
background: transparent;
|
||||
height: inherit;
|
||||
position: absolute;
|
||||
width: 0;
|
||||
border-radius: inherit;
|
||||
transition: width 0.5s ease-in-out, background 0.25s;
|
||||
}
|
||||
|
||||
.password-strength-meter-inner {
|
||||
&.strength-0 {
|
||||
background: darken($orange, 40%);
|
||||
width: 20%;
|
||||
}
|
||||
&.strength-1 {
|
||||
background: darken(mix($orange, $yellow, 50%), 30%);
|
||||
width: 40%;
|
||||
}
|
||||
&.strength-2 {
|
||||
background: darken($yellow, 20%);
|
||||
width: 60%;
|
||||
}
|
||||
&.strength-3 {
|
||||
background: darken($green, 10%);
|
||||
width: 80%;
|
||||
}
|
||||
&.strength-4 {
|
||||
background: $green;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -56,7 +56,8 @@
|
||||
"vue-count-to": "~1.0.13",
|
||||
"vue-izitoast": "1.1.2",
|
||||
"vue-sweetalert-icons": "~3.2.0",
|
||||
"vuex-i18n": "~1.11.0"
|
||||
"vuex-i18n": "~1.11.0",
|
||||
"zxcvbn": "^4.4.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "~7.4.3",
|
||||
|
||||
@ -1,12 +1,12 @@
|
||||
<template>
|
||||
<ds-card :header="$t('settings.security.name')">
|
||||
<change-password />
|
||||
<change-password/>
|
||||
</ds-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import HcEmpty from '~/components/Empty.vue'
|
||||
import ChangePassword from '~/components/ChangePassword.vue'
|
||||
import ChangePassword from '~/components/Password/Change'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
|
||||
@ -6121,15 +6121,6 @@ jest-message-util@^24.7.1:
|
||||
version "24.7.1"
|
||||
resolved "https://registry.yarnpkg.com/jest-message-util/-/jest-message-util-24.7.1.tgz#f1dc3a6c195647096a99d0f1dadbc447ae547018"
|
||||
integrity sha512-dk0gqVtyqezCHbcbk60CdIf+8UHgD+lmRHifeH3JRcnAqh4nEyPytSc9/L1+cQyxC+ceaeP696N4ATe7L+omcg==
|
||||
dependencies:
|
||||
"@babel/code-frame" "^7.0.0"
|
||||
"@jest/test-result" "^24.7.1"
|
||||
"@jest/types" "^24.7.0"
|
||||
"@types/stack-utils" "^1.0.1"
|
||||
chalk "^2.0.1"
|
||||
micromatch "^3.1.10"
|
||||
slash "^2.0.0"
|
||||
stack-utils "^1.0.1"
|
||||
|
||||
jest-mock@^24.7.0:
|
||||
version "24.7.0"
|
||||
@ -11381,3 +11372,8 @@ zen-observable@^0.8.0:
|
||||
version "0.8.13"
|
||||
resolved "https://registry.yarnpkg.com/zen-observable/-/zen-observable-0.8.13.tgz#a9f1b9dbdfd2d60a08761ceac6a861427d44ae2e"
|
||||
integrity sha512-fa+6aDUVvavYsefZw0zaZ/v3ckEtMgCFi30sn91SEZea4y/6jQp05E3omjkX91zV6RVdn15fqnFZ6RKjRGbp2g==
|
||||
|
||||
zxcvbn@^4.4.2:
|
||||
version "4.4.2"
|
||||
resolved "https://registry.yarnpkg.com/zxcvbn/-/zxcvbn-4.4.2.tgz#28ec17cf09743edcab056ddd8b1b06262cc73c30"
|
||||
integrity sha1-KOwXzwl0PtyrBW3dixsGJizHPDA=
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user