Mask Password with asterisk in edit field used in app designer

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.

[Emine Ozkara]

Hello Sampath,

Could you figure out any solution?

Thanks.

[Sampath Rachumallu]

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]

can you help me ,I can not achieve in R2020a in the way of yours and Sean

[Sampath Rachumallu]

@zhi liu what is the problem you are facing?Can you elaborate

[Bavitha Battipati]

I'm facing the same issue. the password is not replaced by asterks. I'm using R2020b. Could you please help?

[Sean de Wolski]

See my answer below.

Answer 1

[Sean de Wolski]

I would recommend using uihtml and the html password edit box.

Attached is a functional example (can be better formatted and whatnot)

EDIT: Robyn made this much easier with this FEX submission: Widgets Toolbox - MATLAB App Building Components - File Exchange - MATLAB Central (mathworks.com)

[Sampath Rachumallu]

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!

Answer 2

[Ruger28]

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.

[Sampath Rachumallu]

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.

Answer 3

[Matt Stead]

function password_entry(src, evt)

    % password stored in src.UserData.password
    % src == 'edit' textbox whose 'KeyPressFcn' == @password_entry
    % src 'Callback' is disabled during entry, and called when enter/return hit
    % there may be a better way to do this, but it works nicely

    if (isempty(src.UserData))  % store password & callback in UserData
        set(src, 'Interruptible', 'off');  % do not allow other key presses until this is done
        src.UserData = struct("password", '', "callback", src.Callback);
        src.Callback = [];
    end
    c = get(gcf, 'CurrentCharacter');  % char(evt.Key) will not get shifted characters
    if (isempty(c))  % modifier key
        return;
    end
    len = length(src.UserData.password);
    if (c < 33 || c > 126)  % non-printable characters
        switch (c)
            case {8, 127}  % backspace, delete
                len = len - 1;
                src.UserData.password = src.UserData.password(1:len);
                ast_str = repmat('*', [1 len]);
                src.String = ast_str;  % first time display 
                drawnow;  % 'edit' builtin display replaces previous string
                src.String = ast_str;  % second display
                return;
            case {9, 10, 13, 27}  % tab, newline, carriage return, escape
                src.Callback = src.UserData.callback;  % src callback will be called on return
                set(src, 'Interruptible', 'on');  % reset default - not sure if this is necessary
                return;
            otherwise
                return;
        end
    end
    src.UserData.password(len + 1) = c;
    ast_str = [repmat('*', [1 len]) c];
    src.String = ast_str;  % first time display (asterisks with last character)
    drawnow;   % 'edit' builtin display replaces previous string
    src.String = ast_str;  % second display
    pause(0.2);  % show asterisks with last character for a brief time
    ast_str(end) = '*';  % replace with all asterisks
    src.String = ast_str;
end

[Jignesh Solanki]

Matt,

I added UIFigureKeyPress callback and connected UIFigureKeyPress callback using existing callback from the Edit Field. Nothing is working from. Please can you explain in details how to use this password_entry function in App Designer 2021a.

Thanks.

[Matt Stead]

Hi Jignesh,

I'm sorry, I don't use App Designer. Here's a textbox creation snippet from some of my code. It works, so I hope this is helpful to you. -matt

% Password Textbox
    passwordTextbox = uicontrol(fig, ...
        'Style', 'edit', ...
        'Position', [(faxRight - TEXT_BOX_WIDTH) (faxTop - 93) TEXT_BOX_WIDTH TEXT_BOX_HEIGHT], ...
        'BackgroundColor', 'white', ...
        'FontSize', SYS_FONT_SIZE, ...
        'FontName', 'FixedWidth', ...
        'HorizontalAlignment', 'left', ...
        'KeyPressFcn', @password_entry, ...
        'Callback', @passwordTextboxCallback);
    passwordTextbox.UserData.password = DEFAULT_PASSWORD;
    passwordTextbox.String = repmat('*', [1 length(DEFAULT_PASSWORD)]);

[Matt Stead]

Also, in case you were wondering, there's nothing special in the callback:

% Password Textbox
    function passwordTextboxCallback(~, ~)
        if (length(passwordTextbox.String) > MAX_PASSWORD_LENGTH)
            errordlg('Password is too long', 'Error');
            passwordTextbox.String = '';
        end
    end  % passwordTextboxCallback()

[Jignesh Solanki]

Matt: No clue what you are referrring in the above code. Please let me know how I can use above code in App Designer 2021a? I will need full details from which Componet Library need to be added and who is calling whom?

Thanks.

[Matt Stead]

Hi Jignesh,

Here's a complete program that works on my machine.

Call as: pw = test_pw_box();

Hope this helps. You'll have to figure out how to use it with App Designer yourself though.

function [password] = test_pw_box()
DEFAULT_PASSWORD = 'test_password';
MAX_PASSWORD_LENGTH = 16;
SYS_FONT_SIZE = 12;
% Figure
fig = figure('Units','pixels', ...
    'Position', [200 100 350 160], ...
    'HandleVisibility','on', ...
    'IntegerHandle','off', ...
    'Renderer','painters', ...
    'Toolbar','none', ...
    'Menubar','none', ...
    'NumberTitle','off', ...
    'Name','Test Password Box', ...
    'Resize', 'on', ...
    'CloseRequestFcn', @figureCloseCallback);
% Axes
ax = axes('parent', fig, ...
    'Units', 'pixels', ...
    'Position', [10 10 330 140], ...
    'Xlim', [1 330], 'Ylim', [1 140], ...
    'Visible', 'off');
% Password Label
passwordLabel = text('Position', [100 100], ...
    'String', 'Password:', ...
    'Color', 'k', ...
    'FontSize', SYS_FONT_SIZE, ...
    'HorizontalAlignment', 'right', ...
    'FontWeight', 'bold', ...
    'FontName', 'FixedWidth');
% Password Textbox
passwordTextbox = uicontrol(fig, ...
    'Style', 'edit', ...
    'Position', [120 100 150 30], ...s
    'BackgroundColor', 'white', ...
    'FontSize', SYS_FONT_SIZE, ...
    'FontName', 'FixedWidth', ...
    'HorizontalAlignment', 'left', ...
    'KeyPressFcn', @password_entry, ...
    'Callback', @passwordTextboxCallback);
% Finished Pushbutton
finishedPushbutton = uicontrol(fig, ...
    'Style', 'pushbutton', ...
    'String', 'Finished', ...
    'Position', [120 50 100 30], ...
    'FontSize', SYS_FONT_SIZE, ...
    'FontName', 'FixedWidth', ...
    'HorizontalAlignment', 'left', ...
    'Callback', @finishedPushbuttonCallback);
% Set focus to textbox
uicontrol(passwordTextbox);
% Password Textbox Callback
    function passwordTextboxCallback(~, ~)
        if (length(passwordTextbox.String) > MAX_PASSWORD_LENGTH)
            errordlg('Password is too long', 'Error');
            passwordTextbox.String = '';
            passwordTextbox.UserData.password = '';
        else
            uicontrol(finishedPushbutton);
        end
    end  % passwordTextboxCallback()
% Finished Pushbutton Callback
    function finishedPushbuttonCallback(~, ~)          
        figureCloseCallback();
    end  % finishedPushbuttonCallback()
% Figure Close Callback
    function figureCloseCallback(~, ~)
        password = passwordTextbox.UserData.password;
        delete(fig);
        return;
    end  % figureCloseCallback()
uiwait;
end
function password_entry(src, ~)
% password stored in src.UserData.password
% src == 'edit' textbox whose 'KeyPressFcn' == @password_entry
% src 'Callback' is disabled during entry, and called when enter/return hit
% there may be a better way to do this, but it works nicely
if (isempty(src.UserData))  % store password & callback in UserData
    set(src, 'Interruptible', 'off');  % do not allow other key presses until this is done
    src.UserData = struct("password", '', "callback", src.Callback);
    src.Callback = [];
end
c = get(gcf, 'CurrentCharacter');  % char(evt.Key) will not get shifted characters
if (isempty(c))  % modifier key
    return;
end
len = length(src.UserData.password);
if (c < 33 || c > 126)  % non-printable characters
    switch (c)
        case {8, 127}  % backspace, delete
            len = len - 1;
            src.UserData.password = src.UserData.password(1:len);
            ast_str = repmat('*', [1 len]);
            src.String = ast_str;  % first time display 
            drawnow;  % 'edit' builtin display replaces previous string
            src.String = ast_str;  % second display
            return;
        case {9, 10, 13, 27}  % tab, newline, carriage return, escape
            src.Callback = src.UserData.callback;  % src callback will be called on return
            set(src, 'Interruptible', 'on');  % reset default - not sure if this is necessary
            return;
        otherwise
            return;
    end
end
src.UserData.password(len + 1) = c;
ast_str = [repmat('*', [1 len]) c];
src.String = ast_str;  % first time display (asterisks with last character)
drawnow;   % 'edit' builtin display replaces previous string
src.String = ast_str;  % second display
pause(0.3);  % show asterisks with last character for a brief time
ast_str(end) = '*';  % replace with all asterisks
src.String = ast_str;
end

[Jignesh Solanki]

Thank you Matt.

Answer 4

[Raph]

Matt Stead has a really good answer. For App designer, I had to do some modifications.

% add to your edit field the Value changing function
app.PasswordEditField.ValueChangingFcn= @app.password_entry;
% add a function in your appdesigner file.

    function password_entry(app,src, evt)
        % password stored in src.UserData.password
        % src == 'edit' textbox whose 'KeyPressFcn' == @password_entry
        % src 'Callback' is disabled during entry, and called when enter/return hit
        % there may be a better way to do this, but it works nicely
        if (isempty(src.UserData))  % store password & callback in UserData
            set(src, 'Interruptible', 'off');  % do not allow other key presses until this is done
            src.UserData = struct("password", '', "callback", src.ValueChangedFcn);
            src.ValueChangedFcn = [];
        end
        c = get(app.UIFigure, 'CurrentCharacter');  % char(evt.Key) will not get shifted characters
        if (isempty(c))  % modifier key
            return;
        end
        len = length(src.UserData.password);
        if (c < 33 || c > 126)  % non-printable characters
            switch (c)
                case {8, 127}  % backspace, delete
                    len = len - 1;
                    src.UserData.password = src.UserData.password(1:len);
                    ast_str = repmat('*', [1 len]);
                    src.Value= ast_str;  % first time display
                    drawnow;  % 'edit' builtin display replaces previous string
                    src.Value= ast_str;  % second display
                    return;
                case {9, 10, 13, 27}  % tab, newline, carriage return, escape
                    src.ValueChangedFcn = src.UserData.callback;  % src callback will be called on return
                    set(src, 'Interruptible', 'on');  % reset default - not sure if this is necessary
                    return;
                otherwise
                    return;
            end
        end
        src.UserData.password(len + 1) = c;
        ast_str = [repmat('*', [1 len]) c];
        src.Value = ast_str;  % first time display (asterisks with last character)
        drawnow;   % 'edit' builtin display replaces previous string
        src.Value = ast_str;  % second display
        pause(0.2);  % show asterisks with last character for a brief time
        ast_str(end) = '*';  % replace with all asterisks
        src.Value = ast_str;
    end
end

Answer 5

[NIHAD]

Hello, I would recommend to use "Editfield changing value function" Here is a functional sample code for app designer.