amorfo77/sogo
1
0
Fork 0
mirror of https://github.com/inverse-inc/sogo.git synced 2026-02-17 07:33:57 +00:00
Code Issues Projects Releases Wiki Activity

feat(preferences): Add password visible icons on password change (preferences + login page)

Browse Source
This commit is contained in:
smizrahi
2024-02-13 11:21:26 +01:00
parent fc778295ff
commit 39640ff323
4 changed files with 36 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
UI/Templates/MainUI/SOGoRootPage.wox
View File

@@ -61,8 +61,8 @@
<md-input-container class="md-block">
<label><var:string label:value="Password"/></label>
<md-icon>vpn_key</md-icon>
<input id="passwordField" type="password" ng-model="app.creds.password" ng-required="true"/>
<md-icon id="password-visibility-icon" ng-click="app.changePasswordVisibility()">visibility</md-icon>
<input id="passwordField" ng-model="app.creds.password" ng-required="true"/>
<md-icon id="password-visibility-icon" ng-click="app.changePasswordVisibility('passwordField', 'password-visibility-icon')">visibility</md-icon>
</md-input-container>
@@ -221,17 +221,20 @@
<md-input-container class="md-block" flex="flex" ng-if="!app.isInPasswordRecoveryMode()">
<label><var:string label:value="Current password"/>
</label>
<input type="password" sg-no-dirty-check="true" ng-model="app.passwords.oldPassword"/>
<input type="password" id="oldPassword" sg-no-dirty-check="true" ng-model="app.passwords.oldPassword"/>
<md-icon id="oldpassword-visibility-icon" ng-click="app.changePasswordVisibility('oldPassword', 'oldpassword-visibility-icon')">visibility</md-icon>
</md-input-container>
<md-input-container class="md-block" flex="flex">
<label><var:string label:value="New password"/>
</label>
<input type="password" sg-no-dirty-check="true" ng-model="app.passwords.newPassword"/>
<input type="password" id="newPassword" sg-no-dirty-check="true" ng-model="app.passwords.newPassword"/>
<md-icon id="newpassword-visibility-icon" ng-click="app.changePasswordVisibility('newPassword', 'newpassword-visibility-icon')">visibility</md-icon>
</md-input-container>
<md-input-container class="md-block" flex="flex">
<label><var:string label:value="Confirmation"/>
</label>
<input type="password" name="newPasswordConfirmation" sg-no-dirty-check="true" ng-model="app.passwords.newPasswordConfirmation"/>
<input type="password" id="newPasswordConfirmation" name="newPasswordConfirmation" sg-no-dirty-check="true" ng-model="app.passwords.newPasswordConfirmation"/>
<md-icon id="newpasswordconfirmation-visibility-icon" ng-click="app.changePasswordVisibility('newPasswordConfirmation', 'newpasswordconfirmation-visibility-icon')">visibility</md-icon>
<div ng-messages="loginForm.newPasswordConfirmation.$error">
<div ng-message="newPasswordMismatch"><var:string label:value="Passwords don't match"/></div>
</div>

9
UI/Templates/PreferencesUI/UIxPreferences.wox
View File

@@ -326,12 +326,14 @@
<md-input-container class="md-block" flex="flex">
<label><var:string label:value="Current password"/>
</label>
<input type="password" sg-no-dirty-check="true" ng-model="app.passwords.oldPassword"/>
<input type="password" id="oldPassword" sg-no-dirty-check="true" ng-model="app.passwords.oldPassword"/>
<md-icon id="oldpassword-visibility-icon" ng-click="app.changePasswordVisibility('oldPassword', 'oldpassword-visibility-icon')">visibility</md-icon>
</md-input-container>
<md-input-container class="md-block" flex="flex">
<label><var:string label:value="New password"/>
</label>
<input type="password" sg-no-dirty-check="true" ng-model="app.passwords.newPassword"/>
<input type="password" id="newPassword" sg-no-dirty-check="true" ng-model="app.passwords.newPassword"/>
<md-icon id="newpassword-visibility-icon" ng-click="app.changePasswordVisibility('newPassword', 'newpassword-visibility-icon')">visibility</md-icon>
<div class="sg-hint">
<ul class="sg-padded">
<var:foreach list="passwordPolicy" item="item">
@@ -343,7 +345,8 @@
<md-input-container class="md-block" flex="flex">
<label><var:string label:value="Confirmation"/>
</label>
<input type="password" name="newPasswordConfirmation" sg-no-dirty-check="true" ng-model="app.passwords.newPasswordConfirmation"/>
<input type="password" id="newPasswordConfirmation" name="newPasswordConfirmation" sg-no-dirty-check="true" ng-model="app.passwords.newPasswordConfirmation"/>
<md-icon id="newpasswordconfirmation-visibility-icon" ng-click="app.changePasswordVisibility('newPasswordConfirmation', 'newpasswordconfirmation-visibility-icon')">visibility</md-icon>
<div ng-messages="preferencesForm.newPasswordConfirmation.$error">
<div ng-message="newPasswordMismatch"><var:string label:value="Passwords don't match"/></div>
</div>

17
UI/WebServerResources/js/Main/Main.app.js
View File

@@ -29,7 +29,8 @@
this.verificationCodePattern = '\\d{6}';
// Password policy - change expired password
this.passwords = { newPassword: null, newPasswordConfirmation: null, oldPassword: null, visible: false };
this.passwords = { newPassword: null, newPasswordConfirmation: null, oldPassword: null };
this.passwordsDisplayed = { password: false, oldPassword: false, newPassword: false, newPasswordConfirmation: false };
// Password recovery
this.passwordRecovery = {
@@ -330,17 +331,17 @@
}
};
this.changePasswordVisibility = function () {
this.passwords.visible = !this.passwords.visible;
var field = document.getElementById("passwordField");
if (this.passwords.visible) {
this.changePasswordVisibility = function (fieldId, iconId) {
this.passwordsDisplayed[fieldId] = !this.passwordsDisplayed[fieldId];
var field = document.getElementById(fieldId);
if (this.passwordsDisplayed[fieldId]) {
field.type = "text";
document.getElementById("password-visibility-icon").innerHTML = 'visibility_off';
document.getElementById(iconId).innerHTML = 'visibility_off';
} else {
field.type = "password";
document.getElementById("password-visibility-icon").innerHTML = 'visibility';
document.getElementById(iconId).innerHTML = 'visibility';
}
}
};
}
angular

13
UI/WebServerResources/js/Preferences/PreferencesController.js
View File

@@ -14,6 +14,7 @@
this.$onInit = function() {
this.preferences = Preferences;
this.passwords = { newPassword: null, newPasswordConfirmation: null, oldPassword: null };
this.passwordsDisplayed = { oldPassword: false, newPassword: false, newPasswordConfirmation: false};
this.timeZonesList = $window.timeZonesList;
this.timeZonesSearchText = '';
this.addressesSearchText = '';
@@ -745,6 +746,18 @@
return null;
};
this.changePasswordVisibility = function (fieldId, iconId) {
this.passwordsDisplayed[fieldId] = !this.passwordsDisplayed[fieldId];
var field = document.getElementById(fieldId);
if (this.passwordsDisplayed[fieldId]) {
field.type = "text";
document.getElementById(iconId).innerHTML = 'visibility_off';
} else {
field.type = "password";
document.getElementById(iconId).innerHTML = 'visibility';
}
};
}
angular