JakeHillion/storj
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

web/satellite: eye icon fits lastpass (#3091)

Browse Source
This commit is contained in:
Nikolay Yurchenko 2019-09-20 13:13:22 +03:00 committed by GitHub
parent 02fb891d27
commit 74ccc1b86f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 17 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
web/satellite/src/components/common/HeaderlessInput.vue
View File

@ -9,7 +9,7 @@
<h3 class="label-container__error" v-if="error" :style="style.errorStyle">{{error}}</h3>
</div>
<input
:class="{'inputError' : error}"
:class="{'inputError' : error, 'password': isPassword}"
@input="onInput"
@change="onInput"
v-model="value"
@ -17,11 +17,11 @@
:type="type"
:style="style.inputStyle"/>
<!--2 conditions of eye image (crossed or not) -->
<svg v-if="isPassword && !isPasswordShown" v-on:click="changeVision()" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<svg v-if="isPassword && !isPasswordShown" @click="changeVision" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10 4C4.70642 4 1 10 1 10C1 10 3.6999 16 10 16C16.3527 16 19 10 19 10C19 10 15.3472 4 10 4ZM10 13.8176C7.93537 13.8176 6.2946 12.1271 6.2946 10C6.2946 7.87285 7.93537 6.18239 10 6.18239C12.0646 6.18239 13.7054 7.87285 13.7054 10C13.7054 12.1271 12.0646 13.8176 10 13.8176Z" fill="#AFB7C1"/>
<path d="M11.6116 9.96328C11.6116 10.8473 10.8956 11.5633 10.0116 11.5633C9.12763 11.5633 8.41162 10.8473 8.41162 9.96328C8.41162 9.07929 9.12763 8.36328 10.0116 8.36328C10.8956 8.36328 11.6116 9.07929 11.6116 9.96328Z" fill="#AFB7C1"/>
</svg>
<svg v-if="isPassword && isPasswordShown" v-on:click="changeVision()" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<svg v-if="isPassword && isPasswordShown" @click="changeVision" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10 4C4.70642 4 1 10 1 10C1 10 3.6999 16 10 16C16.3527 16 19 10 19 10C19 10 15.3472 4 10 4ZM10 13.8176C7.93537 13.8176 6.2946 12.1271 6.2946 10C6.2946 7.87285 7.93537 6.18239 10 6.18239C12.0646 6.18239 13.7054 7.87285 13.7054 10C13.7054 12.1271 12.0646 13.8176 10 13.8176Z" fill="#AFB7C1"/>
<path d="M11.6121 9.96328C11.6121 10.8473 10.8961 11.5633 10.0121 11.5633C9.12812 11.5633 8.41211 10.8473 8.41211 9.96328C8.41211 9.07929 9.12812 8.36328 10.0121 8.36328C10.8961 8.36328 11.6121 9.07929 11.6121 9.96328Z" fill="#AFB7C1"/>
<mask id="path-3-inside-1" fill="white">
@ -89,11 +89,15 @@ export default class HeaderlessInput extends Vue {
this.$emit('setData', this.value);
}
private changeVision(): void {
public changeVision(): void {
this.isPasswordShown = !this.isPasswordShown;
if (this.isPasswordShown) {
this.type = this.type === this.passwordType ? this.textType : this.passwordType;
this.type = this.textType;
return;
}
this.type = this.passwordType;
}
protected get style(): object {
@ -120,8 +124,8 @@ export default class HeaderlessInput extends Vue {
line-height: 21px;
resize: none;
height: 46px;
padding: 0;
width: 100%;
padding: 0 30px 0 0;
width: calc(100% - 30px) !important;
text-indent: 20px;
border-color: rgba(56, 75, 101, 0.4);
border-radius: 6px;
@ -190,4 +194,9 @@ export default class HeaderlessInput extends Vue {
}
}
}
.password {
width: calc(100% - 75px) !important;
padding-right: 75px;
}
</style>

2
web/satellite/tests/unit/common/__snapshots__/HeaderlessInput.spec.ts.snap
View File

@ -18,7 +18,7 @@ exports[`HeaderlessInput.vue renders correctly with isPassword prop 1`] = `
<!---->
<!---->
<!---->
</div> <input placeholder="default" type="password" class="" style="width: 100%; height: 48px;"> <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
</div> <input placeholder="default" type="password" class="password" style="width: 100%; height: 48px;"> <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10 4C4.70642 4 1 10 1 10C1 10 3.6999 16 10 16C16.3527 16 19 10 19 10C19 10 15.3472 4 10 4ZM10 13.8176C7.93537 13.8176 6.2946 12.1271 6.2946 10C6.2946 7.87285 7.93537 6.18239 10 6.18239C12.0646 6.18239 13.7054 7.87285 13.7054 10C13.7054 12.1271 12.0646 13.8176 10 13.8176Z" fill="#AFB7C1"></path>
<path d="M11.6116 9.96328C11.6116 10.8473 10.8956 11.5633 10.0116 11.5633C9.12763 11.5633 8.41162 10.8473 8.41162 9.96328C8.41162 9.07929 9.12763 8.36328 10.0116 8.36328C10.8956 8.36328 11.6116 9.07929 11.6116 9.96328Z" fill="#AFB7C1"></path>
</svg>