Skip to content
This repository has been archived by the owner on Jun 23, 2023. It is now read-only.

Support Autofill Extensions for Password Inputs #367

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 2 additions & 5 deletions src/components/Seed.vue
Original file line number Diff line number Diff line change
Expand Up @@ -6,11 +6,8 @@
v-model="password"
ref="password"
placeholder="Password"
inputGroupClass="neu-input-group"
:inputClass="[
isIncorrectPassword ? 'incorrect-password' : '',
'form-control form-control-lg neu-input w-100'
]"
displayStyle="FormStyle"
:displayInvalidAttempt="isIncorrectPassword"
:disabled="isLoadingSeed"
/>

Expand Down
71 changes: 59 additions & 12 deletions src/components/Utility/InputPassword.vue
Original file line number Diff line number Diff line change
@@ -1,30 +1,34 @@
<template>
<b-input-group :class="inputGroupClass">
<!-- Todo: make it work with b-form-input + v-model -->
<input
:class="inputClass"
<b-input-group :class="[getGroupClassesByStyle, displayInvalidAttempt ? 'incorrect-password' : '']">
<b-form-input
:class="getInputClassesByStyle"
:placeholder="placeholder"
:type="showPassword ? 'text' : 'password'"
v-bind:value="value"
v-on:input="$emit('input', $event.target.value)"
:value="value"
@input="updateInputValue"
:disabled="disabled"
/>
<b-input-group-append>
<b-button @click="togglePassword" :disabled="disabled">
<b-button :class="getInputClassesByStyle" @click="togglePassword" :disabled="disabled">
<b-icon :icon="showPassword ? 'eye-slash-fill' : 'eye-fill'"></b-icon>
</b-button>
</b-input-group-append>
</b-input-group>
</template>

<script>
const CardStyle = "CardStyle";
const FormStyle = "FormStyle";
export default {
props: {
value: String,
inputClass: [String, Array],
inputGroupClass: {
displayInvalidAttempt: {
type: Boolean,
default: false
},
displayStyle: {
type: String,
default: "card-input-group"
default: CardStyle
},
placeholder: String,
disabled: {
Expand All @@ -35,7 +39,17 @@ export default {
computed: {
showPassword() {
return this.state.showPassword;
}
},
getGroupClassesByStyle() {
return this.displayStyle === FormStyle
? "form-input-group"
: "card-input-group";
},
getInputClassesByStyle() {
return this.displayStyle === FormStyle
? "form-control-lg form-input-group-input btn-lg"
: "card-input-group-input";
},
},
data() {
return {
Expand All @@ -47,9 +61,42 @@ export default {
methods: {
togglePassword() {
return (this.state.showPassword = !this.state.showPassword);
},
updateInputValue: function(val) {
this.$emit("input", val);
}
}
};
</script>

<style lang="scss" scoped></style>
<style lang="scss" scoped>
.incorrect-password {
animation: shake 1s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
transform: translate3d(0, 0, 0);
backface-visibility: hidden;
perspective: 1000px;
}

@keyframes shake {
10%,
90% {
transform: translate3d(-1px, 0, 0);
}

20%,
80% {
transform: translate3d(2px, 0, 0);
}

30%,
50%,
70% {
transform: translate3d(-4px, 0, 0);
}

40%,
60% {
transform: translate3d(4px, 0, 0);
}
}
</style>
76 changes: 66 additions & 10 deletions src/global-styles/custom.scss
Original file line number Diff line number Diff line change
Expand Up @@ -129,6 +129,48 @@ a {
}
}

.form-input-group {
border-radius: 1rem;

.form-input-group-input {
box-shadow: inset 2px 7px 9px -7px rgba(0,0,0,0.2), //top
inset 2px -7px 9px -7px rgba(0,0,0,0.2), //bottom
inset 5px 0 5px -7px rgba(0,0,0,0.2); //left
border: none !important;
}

.form-input-group-input:focus {
box-shadow: inset 3px 7px 9px -7px rgba(0,0,0,0.3), //top
inset 3px -7px 9px -7px rgba(0,0,0,0.3), //bottom
inset 5px 0 5px -7px rgba(0,0,0,0.3); //left
border: none !important;
}

.form-input-group-input:focus + .input-group-append > .btn-lg {
box-shadow: inset -3px 7px 9px -7px rgba(0,0,0,0.3), //top
inset -3px -7px 9px -7px rgba(0,0,0,0.3), //bottom
inset -5px 0 5px -7px rgba(0,0,0,0.3) //right
!important;
}

.input-group-append {
margin-left: 0px;
}

.input-group-append > .btn-lg {
padding: 0.375rem 0.75rem;
color: #616877;
box-shadow: inset -2px 7px 9px -7px rgba(0,0,0,0.2), //top
inset -2px -7px 9px -7px rgba(0,0,0,0.2), //bottom
inset -5px 0 5px -7px rgba(0,0,0,0.2) //right
!important;
background-color: unset;
}

.input-group-append > .btn-lg:active {
background-color: unset;
}
}

.dropdown-menu {
background: #ffffff;
Expand Down Expand Up @@ -160,19 +202,33 @@ a {
}

.card-input-group {
.card-input {
padding-right: 3rem;
box-shadow: 0px 10px 30px rgba(209, 213, 223, 0.5);
border-radius: 1rem;

&:hover,
&:focus,
&:active {
box-shadow: 0px 10px 40px rgba(209, 213, 223, 0.9);
}

.card-input-group-input {
-webkit-appearance: none; //iOS messes up forms - See: https://stackoverflow.com/questions/10757146/iphone-ios-will-not-display-box-shadow-properly
border-radius: 1rem;
height: calc(2.25em + 1.125rem + 2px);
padding: 0.5rem 1rem;
outline: 0 !important;
border: none !important;

&:hover,
&:focus,
&:active {
box-shadow: none;
}
}

.input-group-append > .btn {
background: none !important;
color: #616877;
border: none !important;
outline: none !important;
box-shadow: none !important;
position: absolute;
top: 50%;
transform: translateY(-50%);
right: 0.5rem;
background-color: #ffffff !important;
}
}

Expand Down
36 changes: 2 additions & 34 deletions src/views/Login.vue
Original file line number Diff line number Diff line change
Expand Up @@ -21,10 +21,8 @@
v-model="password"
ref="password"
placeholder="Password"
:inputClass="[
isIncorrectPassword ? 'incorrect-password' : '',
'card-input w-100'
]"
formStyle="CardInput"
:displayInvalidAttempt="isIncorrectPassword"
:disabled="isLoggingIn"
/>
<div class="login-button-container">
Expand Down Expand Up @@ -143,36 +141,6 @@ export default {
}
}

.incorrect-password {
animation: shake 1s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
transform: translate3d(0, 0, 0);
backface-visibility: hidden;
perspective: 1000px;
}

@keyframes shake {
10%,
90% {
transform: translate3d(-1px, 0, 0);
}

20%,
80% {
transform: translate3d(2px, 0, 0);
}

30%,
50%,
70% {
transform: translate3d(-4px, 0, 0);
}

40%,
60% {
transform: translate3d(4px, 0, 0);
}
}

.loading-fade-blink {
animation: loadingFadeBlink 1s infinite linear;
}
Expand Down
10 changes: 4 additions & 6 deletions src/views/Settings.vue
Original file line number Diff line number Diff line change
Expand Up @@ -173,26 +173,24 @@
<input-password
v-model="currentPassword"
ref="password"
inputGroupClass="neu-input-group"
:inputClass="[ isIncorrectPassword ? 'incorrect-password' : '', 'form-control form-control-lg neu-input w-100']"
displayStyle="FormStyle"
:displayInvalidAttempt="isIncorrectPassword"
:disabled="isChangingPassword"
/>
<div class="py-2"></div>
<label class="sr-onlsy" for="input-withdrawal-amount">New password</label>
<input-password
v-model="newPassword"
ref="password"
inputGroupClass="neu-input-group"
inputClass="form-control form-control-lg neu-input w-100"
displayStyle="FormStyle"
:disabled="isChangingPassword"
/>
<div class="py-2"></div>
<label class="sr-onlsy" for="input-withdrawal-amount">Confirm new password</label>
<input-password
v-model="confirmNewPassword"
ref="password"
inputGroupClass="neu-input-group"
inputClass="form-control form-control-lg neu-input w-100"
displayStyle="FormStyle"
:disabled="isChangingPassword"
/>
<div class="py-2"></div>
Expand Down
4 changes: 2 additions & 2 deletions src/views/Start.vue
Original file line number Diff line number Diff line change
Expand Up @@ -20,15 +20,15 @@
ref="password"
v-show="currentStep === 2"
placeholder="Your password"
inputClass="card-input w-100"
displayStyle="CardInput"
/>

<input-password
v-model="confirmPassword"
ref="confirmPassword"
placeholder="Re-enter your password"
v-show="currentStep === 3"
inputClass="card-input w-100"
displayStyle="CardInput"
/>

<div v-show="currentStep === 5">
Expand Down