Tuesday, 23 February 2021

Show And Hide Password Using jQuery In ASP.NET

 In this blog, we will discuss how to create a button to show and hide passwords using jQuery in ASP.NET.

By clicking the checkbox or  hovering the mouse on the icon, we can make the password visible.

Step 1

Create a new project in the Visual Studio version of your choice with an empty template. Give it a meaningful name.

Step 2

Add a web form to your project. Right-click and choose a new item, select web form, and give it a name.

Step 3

Add jQuery, bootstrap, and fa icon cdn links to the head section.

  1. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">  
  2. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">  
  3. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>  

Step 4

Write JavaScript and function to hide and show the password.

  1. <script type="text/javascript">  
  2.         $(document).ready(function () {  
  3.             $('#show_password').hover(function show() {  
  4.                 //Change the attribute to text  
  5.                 $('#txtPassword').attr('type', 'text');  
  6.                 $('.icon').removeClass('fa fa-eye-slash').addClass('fa fa-eye');  
  7.             },  
  8.             function () {  
  9.                 //Change the attribute back to password  
  10.                 $('#txtPassword').attr('type', 'password');  
  11.                 $('.icon').removeClass('fa fa-eye').addClass('fa fa-eye-slash');  
  12.             });  
  13.             //CheckBox Show Password  
  14.             $('#ShowPassword').click(function () {  
  15.                 $('#Password').attr('type', $(this).is(':checked') ? 'text' : 'password');  
  16.             });  
  17.         });  
  18.     </script>  

Step 5

Design HTML by dragging and dropping textbox control, checkbox control, and button control as given below.

  1. <body>  
  2.     <form id="form1" runat="server">  
  3.         <div class="container">  
  4.             <h2>Show or Hide Password</h2>  
  5.             <div class="row">  
  6.                 <div class="col-md-6">  
  7.                     <p>Hover on the eye to show/hide the password</p>  
  8.                     <label>Password</label>  
  9.                     <div class="input-group">  
  10.                         <asp:TextBox ID="txtPassword" TextMode="Password" runat="server" CssClass="form-control"></asp:TextBox>  
  11.                         <div class="input-group-append">  
  12.                             <button id="show_password" class="btn btn-primary" type="button">  
  13.                                 <span class="fa fa-eye-slash icon"></span>  
  14.                             </button>  
  15.                         </div>  
  16.                     </div>  
  17.                 </div>  
  18.                 <div class="col-md-6">  
  19.                     <p>Check to show/hide the password</p>  
  20.                     <label>Password</label>  
  21.                     <div class="input-group">  
  22.                         <asp:TextBox ID="Password" TextMode="Password" runat="server" CssClass="form-control"></asp:TextBox>  
  23.                         <div class="input-group-append">  
  24.                             <span class="input-group-text">  
  25.                                 <asp:CheckBox ID="ShowPassword" runat="server" CssClass="checkbox" />  
  26.                             </span>  
  27.                         </div>  
  28.                     </div>  
  29.                 </div>  
  30.             </div>  
  31.         </div>  
  32.     </form>  
  33. </body>  

Here is the complete code for hiding and showing password.

  1. <!DOCTYPE html>         
  2.   
  3. <html>  
  4. <head runat="server">  
  5.     <title>Show Hide Password</title>  
  6.     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">  
  7.     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">  
  8.     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>  
  9.     <script type="text/javascript">  
  10.         $(document).ready(function () {  
  11.             $('#show_password').hover(function show() {  
  12.                 //Change the attribute to text  
  13.                 $('#txtPassword').attr('type', 'text');  
  14.                 $('.icon').removeClass('fa fa-eye-slash').addClass('fa fa-eye');  
  15.             },  
  16.             function () {  
  17.                 //Change the attribute back to password  
  18.                 $('#txtPassword').attr('type', 'password');  
  19.                 $('.icon').removeClass('fa fa-eye').addClass('fa fa-eye-slash');  
  20.             });  
  21.             //CheckBox Show Password  
  22.             $('#ShowPassword').click(function () {  
  23.                 $('#Password').attr('type', $(this).is(':checked') ? 'text' : 'password');  
  24.             });  
  25.         });  
  26.     </script>  
  27. </head>  
  28. <body>  
  29.     <form id="form1" runat="server">  
  30.         <div class="container">  
  31.             <h2>Show or Hide Password</h2>  
  32.             <div class="row">  
  33.                 <div class="col-md-6">  
  34.                     <p>Hover on the eye to show/hide the password</p>  
  35.                     <label>Password</label>  
  36.                     <div class="input-group">  
  37.                         <asp:TextBox ID="txtPassword" TextMode="Password" runat="server" CssClass="form-control"></asp:TextBox>  
  38.                         <div class="input-group-append">  
  39.                             <button id="show_password" class="btn btn-primary" type="button">  
  40.                                 <span class="fa fa-eye-slash icon"></span>  
  41.                             </button>  
  42.                         </div>  
  43.                     </div>  
  44.                 </div>  
  45.                 <div class="col-md-6">  
  46.                     <p>Check to show/hide the password</p>  
  47.                     <label>Password</label>  
  48.                     <div class="input-group">  
  49.                         <asp:TextBox ID="Password" TextMode="Password" runat="server" CssClass="form-control"></asp:TextBox>  
  50.                         <div class="input-group-append">  
  51.                             <span class="input-group-text">  
  52.                                 <asp:CheckBox ID="ShowPassword" runat="server" CssClass="checkbox" />  
  53.                             </span>  
  54.                         </div>  
  55.                     </div>  
  56.                 </div>  
  57.             </div>  
  58.         </div>  
  59.     </form>  
  60. </body>  
  61. </html>  

Step 5

Run the project by pressing CTRL+F5.
 
Final Output


    Posted by at No comments:

    Change TextBox TextMode to Password using jQuery

     In this article I will explain with an example, how to change TextBox TextMode to Password using jQuery.

    The TextMode of a TextBox is decided by its Type attribute i.e. input or password.
    HTML does not allow the Type attribute to be modified with jQuery at runtime and hence the same can be achieved by creating a dynamic TextBox next to the Password TextBox and hiding the Password TextBox.
     
     
    HTML Markup
    The HTML Markup consists of an HTML Password TextBox and a CheckBox.
    <table border="0" cellpadding="0" cellspacing="0">
        <tr>
            <td>Password</td>
            <td><input type="password" id="txtPassword" /></td>
        </tr>
        <tr>
            <td><label for="chkShowPassword">
                    <input id="chkShowPassword" type="checkbox" />
                    Show password</label>
            </td>
        </tr>
    </table>
     
     
    Changing TextBox TextMode to Password using jQuery
    Inside the jQuery document ready event handler, the CheckBox has been assigned a Click event handler.
    If the CheckBox is checked, a dynamic TextBox element is created and appended next to it and the Password TextBox is hidden.
    If the CheckBox is unchecked, the dynamic TextBox element is removed and the Password TextBox is shown again.
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#chkShowPassword").bind("click", function () {
                var txtPassword = $("#txtPassword");
                if ($(this).is(":checked")) {
                    txtPassword.after('<input onchange = "PasswordChanged(this);" id = "txt_' + txtPassword.attr("id") + '" type = "text" value = "' + txtPassword.val() + '" />');
                    txtPassword.hide();
                } else {
                    txtPassword.val(txtPassword.next().val());
                    txtPassword.next().remove();
                    txtPassword.show();
                }
            });
        });
        function PasswordChanged(txt) {
            $(txt).prev().val($(txt).val());
        };
    </script>
     
     
    Screenshot
    Change TextBox TextMode to Password using jQuery
     
     
    Browser Compatibility

    The above code has been tested in the following browsers.

    Internet Explorer  FireFox  Chrome  Safari  Opera 

    * All browser logos displayed above are property of their respective owners.

    Posted by at No comments:

    Sunday, 14 February 2021

    Angular CLI

     

    Installation

    BEFORE YOU INSTALL: please read the prerequisites

    Install Globally

    npm install -g @angular/cli

    Install Locally

    npm install @angular/cli

    To run a locally installed version of the angular-cli, you can call ng commands directly by adding the .bin folder within your local node_modules folder to your PATH. The node_modules and .bin folders are created in the directory where npm install @angular/cli was run upon completion of the install command.

    Alternatively, you can install npx and run npx ng <command> within the local directory where npm install @angular/cli was run, which will use the locally installed angular-cli.

    Install Specific Version (Example: 6.1.1)

    npm install -g @angular/cli@6.1.1

    Usage

    ng help

    Generating and serving an Angular project via a development server

    ng new PROJECT-NAME
cd PROJECT-NAME
ng serve

    Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.

    You can configure the default HTTP host and port used by the development server with two command-line options :

    ng serve --host 0.0.0.0 --port 4201

    Generating Components, Directives, Pipes and Services

    You can use the ng generate (or just ng g) command to generate Angular components:

    ng generate component my-new-component
ng g component my-new-component # using the alias

# components support relative path generation
# if in the directory src/app/feature/ and you run
ng g component new-cmp
# your component will be generated in src/app/feature/new-cmp
# but if you were to run
ng g component ./newer-cmp
# your component will be generated in src/app/newer-cmp
# if in the directory src/app you can also run
ng g component feature/new-cmp
# and your component will be generated in src/app/feature/new-cmp

    You can find all possible blueprints in the table below:

    ScaffoldUsage
    Componentng g component my-new-component
    Directiveng g directive my-new-directive
    Pipeng g pipe my-new-pipe
    Serviceng g service my-new-service
    Classng g class my-new-class
    Guardng g guard my-new-guard
    Interfaceng g interface my-new-interface
    Enumng g enum my-new-enum
    Moduleng g module my-module

    angular-cli will add reference to components, directives and pipes automatically in the app.module.ts. If you need to add this references to another custom module, follow these steps:

    1. ng g module new-module to create a new module
    2. call ng g component new-module/new-component

    This should add the new component, directive or pipe reference to the new-module you've created.

    Updating Angular CLI

    If you're using Angular CLI 1.0.0-beta.28 or less, you need to uninstall angular-cli package. It should be done due to changing of package's name and scope from angular-cli to @angular/cli:

    npm uninstall -g angular-cli
npm uninstall --save-dev angular-cli

    To update Angular CLI to a new version, you must update both the global package and your project's local package.

    Global package:

    npm uninstall -g @angular/cli
npm cache verify
# if npm version is < 5 then use `npm cache clean`
npm install -g @angular/cli@latest

    Local project package:

    rm -rf node_modules dist # use rmdir /S/Q node_modules dist in Windows Command Prompt; use rm -r -fo node_modules,dist in Windows PowerShell
npm install --save-dev @angular/cli@latest
npm install

    If you are updating to 1.0 from a beta or RC version, check out our 1.0 Update Guide.

    You can find more details about changes between versions in the Releases tab on GitHub.

    Development Hints for working on Angular CLI

    Working with master

    git clone https://github.com/angular/angular-cli.git
yarn
npm run build
cd dist/@angular/cli
npm link

    npm link is very similar to npm install -g except that instead of downloading the package from the repo, the just built dist/@angular/cli/ folder becomes the global package. Additionally, this repository publishes several packages and we use special logic to load all of them on development setups.

    Any changes to the files in the angular-cli/ folder will immediately affect the global @angular/cli package, meaning that, in order to quickly test any changes you make to the cli project, you should simply just run npm run build again.

    Now you can use @angular/cli via the command line:

    ng new foo
cd foo
npm link @angular/cli
ng serve

    npm link @angular/cli is needed because by default the globally installed @angular/cli just loads the local @angular/cli from the project which was fetched remotely from npm. npm link @angular/cli symlinks the global @angular/cli package to the local @angular/cli package. Now the angular-cli you cloned before is in three places: The folder you cloned it into, npm's folder where it stores global packages and the Angular CLI project you just created.

    You can also use ng new foo --link-cli to automatically link the @angular/cli package.

    Please read the official npm-link documentation and the npm-link cheatsheet for more information.

    To run the Angular CLI E2E test suite, use the node ./tests/legacy-cli/run_e2e command. It can also receive a filename to only run that test (e.g. node ./tests/legacy-cli/run_e2e tests/legacy-cli/e2e/tests/build/dev-build.ts).

    As part of the test procedure, all packages will be built and linked. You will need to re-run npm link to re-link the development Angular CLI environment after tests finish.

    Debugging with VS Code

    In order to debug some Angular CLI behaviour using Visual Studio Code, you can run npm run build, and then use a launch configuration like the following:

    {
    "type": "node",
    "request": "launch",
    "name": "ng serve",
    "cwd": "<path to an Angular project generated with Angular-CLI>",
    "program": "${workspaceFolder}/dist/@angular/cli/bin/ng",
    "args": [
        "<ng command>",
        ...other arguments
    ],
    "console": "integratedTerminal"
}

    Then you can add breakpoints in dist/@angular files.

    For more informations about Node.js debugging in VS Code, see the related VS Code Documentation.

    CPU Profiling

    In order to investigate performance issues, CPU profiling is often useful.

    To capture a CPU profiling, you can:

    1. install the v8-profiler-node8 dependency: npm install v8-profiler-node8 --no-save
    2. set the NG_CLI_PROFILING Environment variable to the file name you want:
      • on Unix systems (Linux & Mac OS X): ̀export NG_CLI_PROFILING=my-profile
      • on Windows: ̀̀setx NG_CLI_PROFILING my-profile

    Then, just run the ng command on which you want to capture a CPU profile. You will then obtain a my-profile.cpuprofile file in the folder from which you ran the ng command.

    You can use the Chrome Devtools to process it. To do so:

    1. open chrome://inspect/#devices in Chrome
    2. click on "Open dedicated DevTools for Node"
    3. go to the "profiler" tab
    4. click on the "Load" button and select the generated .cpuprofile file
    5. on the left panel, select the associated file

    In addition to this one, another, more elaborated way to capture a CPU profile using the Chrome Devtools is detailed in https://github.com/angular/angular-cli/issues/8259#issue-269908550.

    Posted by at No comments:
    Subscribe to: Posts (Atom)