diff --git a/core/css/guest.css b/core/css/guest.css index 75fc2d93ea80e5df40908895c15e8c6ab5ea090e..4d7df8b89969e294aebf90a0b5e1c9b7b608e7a4 100644 --- a/core/css/guest.css +++ b/core/css/guest.css @@ -228,6 +228,15 @@ input[type='email'] { border: none; font-weight: normal; } +input[type='password'].password-with-toggle, input[type='text'].password-with-toggle { + width: 219px; + padding-right: 40px; +} +.toggle-password { + position: absolute; + top: 17px; + right: 20px; +} input.login { width: 260px; height: 50px; diff --git a/core/js/dist/login.js b/core/js/dist/login.js index 5c0401a951b8461798792176e7d966e40b6ca594..72bdae25f967588352610f96edfc1e9fc8ea1883 100644 Binary files a/core/js/dist/login.js and b/core/js/dist/login.js differ diff --git a/core/js/dist/login.js.map b/core/js/dist/login.js.map index a1397169b030bd71301a3d3daae64973626165b3..71f2b50df32c9b84d29e1f1d950260c5b47066bb 100644 Binary files a/core/js/dist/login.js.map and b/core/js/dist/login.js.map differ diff --git a/core/src/components/login/LoginForm.vue b/core/src/components/login/LoginForm.vue index dc9ef779f983d17623f9921288e7334d6e6302db..5574d65a0595d2347abd82f1fa52d6131a93bdea 100644 --- a/core/src/components/login/LoginForm.vue +++ b/core/src/components/login/LoginForm.vue @@ -65,7 +65,8 @@ <p class="groupbottom" :class="{shake: invalidPassword}"> - <input type="password" + <input :type="passwordInputType" + class="password-with-toggle" name="password" id="password" ref="password" @@ -75,6 +76,9 @@ required> <label for="password" class="infield">{{ t('Password') }}</label> + <a href="#" @click.stop.prevent="togglePassword" class="toggle-password"> + <img :src="OC.imagePath('core', 'actions/toggle.svg')"/> + </a> </p> <div id="submit-wrapper"> @@ -162,6 +166,7 @@ timezoneOffset: (-new Date().getTimezoneOffset() / 60), user: this.username, password: '', + passwordInputType: 'password', } }, computed: { @@ -186,6 +191,14 @@ } }, methods: { + togglePassword () { + if(this.passwordInputType === 'password'){ + this.passwordInputType = 'text' + } + else{ + this.passwordInputType = 'password' + } + }, updateUsername () { this.$emit('update:username', this.user) },