Skip to content

Commit 733d756

Browse files
Initial Commit
1 parent e404566 commit 733d756

File tree

12 files changed

+184
-1
lines changed

12 files changed

+184
-1
lines changed

README.md

Lines changed: 42 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,43 @@
1-
# magento-2-passwordhideshow
1+
# Navigate Commerce Customer Form Password Hide Show module for Magento 2
22
Customer Form Password Hide Show.
3+
4+
## How to install Navigate_PasswordHideShow module
5+
6+
### Composer Installation
7+
8+
Run the following command in Magento 2 root directory to install Navigate_PasswordHideShow module via composer.
9+
10+
#### Install
11+
12+
```
13+
composer require navigate/magento-2-passwordhideshow
14+
php bin/magento setup:upgrade
15+
php bin/magento setup:static-content:deploy -f
16+
```
17+
18+
#### Update
19+
20+
```
21+
composer update navigate/magento-2-passwordhideshow
22+
php bin/magento setup:upgrade
23+
php bin/magento setup:static-content:deploy -f
24+
```
25+
26+
Run below command if your store is in the production mode:
27+
28+
```
29+
php bin/magento setup:di:compile
30+
```
31+
32+
### Manual Installation
33+
34+
If you prefer to install this module manually, kindly follow the steps described below -
35+
36+
- Download the latest version [here](https://github.com/navigatecommerce/magento-2-passwordhideshow/archive/refs/heads/main.zip)
37+
- Create a folder path like this `app/code/Navigate/PasswordHideShow` and extract the `main.zip` file into it.
38+
- Navigate to Magento root directory and execute the below commands.
39+
40+
```
41+
php bin/magento setup:upgrade
42+
php bin/magento setup:static-content:deploy -f
43+
```

composer.json

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
{
2+
"name": "navigate/magento-2-passwordhideshow",
3+
"description": "Form Password HideShow by navigate",
4+
"require": {
5+
"php": "~7.0.13|~7.1.0|~7.2.0|~7.3.0|~7.4.0|~8.0.0|~8.1.1"
6+
},
7+
"type": "magento2-module",
8+
"license": "proprietary",
9+
"version": "1.0.0",
10+
"authors": [
11+
{
12+
"name": "Navigate",
13+
"email": "support@navigatecommerce.com",
14+
"homepage": "https://www.navigatecommerce.com",
15+
"role": "Technical Support"
16+
}
17+
],
18+
"autoload": {
19+
"files": [
20+
"registration.php"
21+
],
22+
"psr-4": {
23+
"Navigate\\PasswordHideShow\\": ""
24+
}
25+
}
26+
}

etc/frontend/routes.xml

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
<?xml version="1.0"?>
2+
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:App/etc/routes.xsd">
3+
<router id="standard">
4+
<route id="passwordhideshow" frontName="passwordhideshow">
5+
<module name="Navigate_PasswordHideShow" />
6+
</route>
7+
</router>
8+
</config>

etc/module.xml

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
<?xml version="1.0"?>
2+
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
3+
<module name="Navigate_PasswordHideShow" setup_version="1.0.0"></module>
4+
</config>

registration.php

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
<?php
2+
3+
\Magento\Framework\Component\ComponentRegistrar::register(
4+
\Magento\Framework\Component\ComponentRegistrar::MODULE,
5+
'Navigate_PasswordHideShow',
6+
__DIR__
7+
);
Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<?xml version="1.0"?>
2+
<!--
3+
/**
4+
* Copyright © Magento, Inc. All rights reserved.
5+
* See COPYING.txt for license details.
6+
*/
7+
-->
8+
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
9+
<head>
10+
<css src="Navigate_PasswordHideShow::css/navigate.css"/>
11+
</head>
12+
<body>
13+
<referenceContainer name="content">
14+
<block class="Magento\Framework\View\Element\Template" name="create-show-hide-password" template="Navigate_PasswordHideShow::registershowhidepwd.phtml"/>
15+
</referenceContainer>
16+
</body>
17+
</page>
Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<?xml version="1.0"?>
2+
<!--
3+
/**
4+
* Copyright © Magento, Inc. All rights reserved.
5+
* See COPYING.txt for license details.
6+
*/
7+
-->
8+
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
9+
<head>
10+
<css src="Navigate_PasswordHideShow::css/navigate.css"/>
11+
</head>
12+
<body>
13+
<referenceContainer name="content">
14+
<block class="Magento\Framework\View\Element\Template" name="login-show-hide-password" template="Navigate_PasswordHideShow::loginshowhidepwd.phtml"/>
15+
</referenceContainer>
16+
</body>
17+
</page>
Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<script type="text/javascript">
2+
require(['jquery', 'jquery/ui'], function($){
3+
jQuery("#pass").before('<span toggle="#pass" class="toggle-password"><img src="<?= $this->getViewFileUrl("Navigate_PasswordHideShow::images/eye.png"); ?>" class="eye-open" /><img src="<?= $this->getViewFileUrl("Navigate_PasswordHideShow::images/eye-slash.png"); ?>" class="eye-close" style="display: none;"/></span>');
4+
jQuery("body").on('click', '.toggle-password', function() {
5+
var input = jQuery("#pass");
6+
if (input.attr("type") === "password") {
7+
input.attr("type", "text");
8+
jQuery(".eye-close").show();
9+
jQuery(".eye-open").hide();
10+
} else {
11+
jQuery(".eye-close").hide();
12+
jQuery(".eye-open").show();
13+
input.attr("type", "password");
14+
}
15+
});
16+
});
17+
</script>
Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
<script type="text/javascript">
2+
require(['jquery', 'jquery/ui'], function($){
3+
jQuery("#password").before('<span toggle="#password" class="toggle-password"><img src="<?= $this->getViewFileUrl("Navigate_PasswordHideShow::images/eye.png"); ?>" class="eye-open" /><img src="<?= $this->getViewFileUrl("Navigate_PasswordHideShow::images/eye-slash.png"); ?>" class="eye-close" style="display: none;"/></span>');
4+
jQuery("#password-confirmation").before('<span toggle="#password-confirmation" class="toggle-password-confirmation"><img src="<?= $this->getViewFileUrl("Navigate_PasswordHideShow::images/eye.png"); ?>" class="eye-open-confirmation" /><img src="<?= $this->getViewFileUrl("Navigate_PasswordHideShow::images/eye-slash.png"); ?>" class="eye-close-confirmation" style="display: none;"/></span>');
5+
jQuery("body").on('click', '.toggle-password', function() {
6+
var input = jQuery("#password");
7+
if (input.attr("type") === "password") {
8+
input.attr("type", "text");
9+
jQuery(".eye-close").show();
10+
jQuery(".eye-open").hide();
11+
} else {
12+
jQuery(".eye-close").hide();
13+
jQuery(".eye-open").show();
14+
input.attr("type", "password");
15+
}
16+
});
17+
jQuery("body").on('click', '.toggle-password-confirmation', function() {
18+
var input = jQuery("#password-confirmation");
19+
if (input.attr("type") === "password") {
20+
input.attr("type", "text");
21+
jQuery(".eye-close-confirmation").show();
22+
jQuery(".eye-open-confirmation").hide();
23+
} else {
24+
jQuery(".eye-close-confirmation").hide();
25+
jQuery(".eye-open-confirmation").show();
26+
input.attr("type", "password");
27+
}
28+
});
29+
});
30+
</script>

view/frontend/web/css/navigate.css

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
.field.password .control, .field.confirmation .control{position:relative;}
2+
.toggle-password img, .toggle-password-confirmation img{ height:24px;}
3+
.toggle-password, .toggle-password-confirmation {
4+
position: absolute;
5+
height: 32px;
6+
right: 0;
7+
z-index: 3;
8+
top: 0;
9+
cursor: pointer;
10+
text-align: center;
11+
vertical-align: middle;
12+
width: 32px;
13+
display: flex;
14+
justify-content: center;
15+
align-items: center;
16+
}

0 commit comments

Comments
 (0)