How to make a button when pressed that requires a password to open a page?

[ozone]

I am using MangoES.
I have a button AAA on my home page to use to access another page when pressed. Customer requires to restrict the access to the page. So I wish to make the button AAA when pressed to pop up a variable block to ask to enter a password, than if the password is correct, then open the page.
Can this be done through the Dashboard coding? How to do the code? Any examples I can learn? Thanks.

[Jared Wiltshire]

@ozone I would caution against such an approach. The correct way to do this is to setup two users, and give one of them permission to access the second page.

[Jared Wiltshire]

@ozone Here's an example of how to present a login dialog if the user doesn't have access to the page -

<div class="ma-designer-root" id="ba15ba43-ec87-45cc-b5f0-5085b8b5d669" style="width: 1366px; height: 768px; position: relative;" ng-init="page = {}">
    <ma-button id="8a2c4df1-a383-4492-bb9b-cc2ac585435d" raised="true" style="position: absolute; left: 184px; top: 124px;" label="Go to page 2" ng-click="User.current.hasAnyRole('restricted') ? $state.go('ui.pageTwoRestricted') : page.showLogin = {}"></ma-button>
</div>

<ma-dialog show-dialog="page.showLogin">
    <span class="ma-dialog-title">Please switch user</span>
    <span ng-if="!User.current.hasAnyRole('restricted')">User '{{User.current.username}}' doesn't have access to this page. Login as another user?</span>
    <ma-login class="hide-links" on-success="$user.hasAnyRole('restricted') ? $state.go('ui.pageTwoRestricted') : null"></ma-login>
</ma-dialog>

<style>
    ma-login.hide-links a,
    ma-login .already-logged-in {
        display: none;
    }
</style>