MATLAB Answers

Mask Password with asterisk in edit field used in app designer

47 views (last 30 days)
Sampath Rachumallu
Sampath Rachumallu on 12 May 2020
Edited: Sampath Rachumallu on 26 Jun 2020
Hello all, I have created a basic gui in app designer for user login.It has username selection as dropdown and password as edit field.
I want to mask the password with asterisk '*' while the user is typing the password with the edit field in focus. There are lot of resources on how to achieve this functionality in GUIDE but none in app designer.
Since edit field in app designer doesn't have 'keypress' Callback and also has no property 'String' (which are there in GUIDE) .I am finding it difficult how to replicate the same functionality in app designer.
I am using R2019a.Kindly help.

  4 Comments

Show 1 older comment
Sampath Rachumallu
Sampath Rachumallu on 2 Jun 2020
Few days back I received feedback from mathworks team to use 'ValueChangingFcn' along with a sample code to mask the password.I have slightly modified the code and posting the solution here.
1.Firstly I created two public properties 'user_password','prev_password_length' inside my app.
2.Next i have used below 'ValueChanging' callback which i have used for password edit field.
%create two public properties for storing user password and previous password length
properties (Access = public)
user_password=''; %property that will store the password entered by user
prev_password_length=0;
end
%ValueChanging callback for password edit field. Executes whenever focus is in password edit field
% and when user is entering the password
function edit_passwordValueChanging(app, event)
val = event.Value;
current_pass_length=length(val); %get the number of characters present in password edit field
app.prev_password_length=length(app.user_password);
%if password edit field is empty and is in focus
if isempty(val)
app.user_password=''; %set the password property to empty string
app.prev_password_length=0; %set the previous password length to zero
app.edit_password.Value=''; %set the value in edit field to empty string
%if backspace is clicked by user
elseif(current_pass_length<app.prev_password_length)
app.user_password = app.user_password(1:current_pass_length);
app.edit_password.Value = repelem('*', current_pass_length);
else
%remove the previous available '*' from the password value obtained from the app
add_string=erase(val, repelem('*', length(app.user_password)));
%append the chacter to user_passowrd property
app.user_password=append(app.user_password,add_string);
%mask the password in edit field with the total length of characters stored in user_password
app.edit_password.Value = repelem('*', length(app.user_password));
end
end
Note: The above implementation will be helpful for people who are using R2019a or fewer versions. For people who are using R2019b and above they can refer Sean's answer which is more simpler to implement
zhi liu
zhi liu on 11 Jun 2020
can you help me ,I can not achieve in R2020a in the way of yours and Sean

Sign in to comment.

Answers (2)

Sean de Wolski
Sean de Wolski on 2 Jun 2020
I would recommend using uihtml and the html password edit box.
Attached is a functional example (can be better formatted and whatnot)

  1 Comment

Sampath Rachumallu
Sampath Rachumallu on 2 Jun 2020
Wow this is cool. But uihtml is supported from R2019b i guess. I am currently using R2019a :(. So it won't be useful for me.But thanks for the information though!

Sign in to comment.


Ruger28
Ruger28 on 2 Jun 2020
Edited: Ruger28 on 2 Jun 2020
I have created a sample app that just has one EditField (text)
  1. setup a public property, called PasswordVal
  2. add the UIFigureWindowKeyPress callback
  3. that function should follow below
  4. your password will be stored in PasswordVal, and can be used later anywhere in your app.
function UIFigureWindowKeyPress(app, event)
key = event.Key;
% Define letters, numbers, and special chars for your password. This is to
% stop the function from working when anything other than the defined chars
% above are entered.
letters = {'A','B','C','D','E','F','G','H','I','J','K',...
'L','M','N','O','P','Q','R','S','T','U','V',...
'W','X','Y','Z'};
Nums = {'1','2','3','4','5','6','7','8','9','0'};
SpecChars = {'!','@','#','$','%','^','&'};
% check to see if keypress is valid
if any(contains(letters,key,'IgnoreCase',true)) || any(contains(Nums,key,'IgnoreCase',true)) || any(contains(SpecChars,key,'IgnoreCase',true))
% key is valid, append to current password
app.PasswordVal = [app.PasswordVal,key];
% convert chars into *
app.EditField.Value = repmat('*',[1 length(app.PasswordVal)]);
else % invalid key, replce keypress with length of true password
app.EditField.Value = repmat('*',[1 length(app.PasswordVal)]);
end
end
Hope this helps.

  1 Comment

Sampath Rachumallu
Sampath Rachumallu on 2 Jun 2020
Well this method will fail when the edit field is in focus. The UIFigureWindowKeyPress won't get executed when the edit field is in focus.

Sign in to comment.


Translated by