Merge pull request #15881 from PhieF/toggle-password-login

adding toggle password to be able to see it when login

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;

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)
 			},