diff --git a/project/templates/lilcity/index.html b/project/templates/lilcity/index.html index 7dd24dad..331c4eb0 100644 --- a/project/templates/lilcity/index.html +++ b/project/templates/lilcity/index.html @@ -256,9 +256,20 @@
ПАРОЛЬЗабыли пароль?
-
+ +
+ +
@@ -308,8 +319,19 @@
ПАРОЛЬ
-
+ +
+ +
diff --git a/web/build/css/app.css b/web/build/css/app.css index 2ea79c53..ec807fa7 100755 --- a/web/build/css/app.css +++ b/web/build/css/app.css @@ -216,6 +216,18 @@ html { fill: #979797; } +.icon-password-eye { + width: 1.79em; + height: 1em; + fill: #A7A7A7; +} + +.icon-password-hidden-eye { + width: 1.47em; + height: 1em; + fill: #FD9395; +} + .icon-photo { width: 1.33em; height: 1em; @@ -2373,10 +2385,6 @@ a.grey-link:hover { height: 36px; } -.field__input[type='password'] { - font-size: 30px; -} - .field__input[type='password']::-webkit-input-placeholder { font-size: 18px; } @@ -2462,6 +2470,43 @@ a.grey-link:hover { border-color: #5BD700; } +.field__password-show { + position: absolute; + right: 0; + top: 0; +} + +.field__password-show button.password-toggle { + border: none; + background: none; + margin-top: 11px; +} + +.field__wrap svg.icon-password-eye { + display: block; +} + +.field__wrap svg.icon-password-hidden-eye { + display: none; +} + +.field__wrap.password-visible svg.icon-password-eye { + display: none; +} + +.field__wrap.password-visible svg.icon-password-hidden-eye { + display: block; +} + +.field__wrap.password-visible button.password-toggle { + margin-top: 12px; +} + +.icon-password-eye { + width: 1.47em; + height: 1em; +} + .auth { padding: 0 20px 25px; } diff --git a/web/build/img/sprite.svg b/web/build/img/sprite.svg index 31170448..2853f1c8 100644 --- a/web/build/img/sprite.svg +++ b/web/build/img/sprite.svg @@ -1,4 +1,8 @@ - + + + + + @@ -46,6 +50,24 @@ + + + password-eye + + + Created using Figma + + + + + + password-eye-hidden + + + Created using Figma + + + diff --git a/web/build/js/app.js b/web/build/js/app.js index e388c69b..550c8f6d 100644 --- a/web/build/js/app.js +++ b/web/build/js/app.js @@ -26855,6 +26855,8 @@ __webpack_require__(142); __webpack_require__(152); +__webpack_require__(153); + /***/ }), /* 127 */ /***/ (function(module, exports, __webpack_require__) { @@ -29582,6 +29584,33 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de } }); +/***/ }), +/* 153 */ +/***/ (function(module, exports, __webpack_require__) { + +"use strict"; + + +var _jquery = __webpack_require__(1); + +var _jquery2 = _interopRequireDefault(_jquery); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +(0, _jquery2.default)(document).ready(function () { + (0, _jquery2.default)('button.password-toggle').on('click', function () { + var wrapElement = (0, _jquery2.default)(this).closest('.field__wrap'); + var inputElement = wrapElement.find('input'); + if (inputElement.attr('type') === 'password') { + inputElement.attr('type', 'text'); + wrapElement.addClass('password-visible'); + } else { + inputElement.attr('type', 'password'); + wrapElement.removeClass('password-visible'); + } + }); +}); + /***/ }) /******/ ]); //# sourceMappingURL=app.js.map \ No newline at end of file diff --git a/web/src/icons/password-eye.svg b/web/src/icons/password-eye.svg new file mode 100644 index 00000000..5de68ce3 --- /dev/null +++ b/web/src/icons/password-eye.svg @@ -0,0 +1,18 @@ + +password-eye +Created using Figma + + + + + + + + + + + + + + + diff --git a/web/src/icons/password-hidden-eye.svg b/web/src/icons/password-hidden-eye.svg new file mode 100644 index 00000000..4b175f77 --- /dev/null +++ b/web/src/icons/password-hidden-eye.svg @@ -0,0 +1,18 @@ + +password-eye-hidden +Created using Figma + + + + + + + + + + + + + + + diff --git a/web/src/js/app.js b/web/src/js/app.js index fd015bdc..70eb6e8f 100644 --- a/web/src/js/app.js +++ b/web/src/js/app.js @@ -11,3 +11,4 @@ import "./modules/tabs"; import "./modules/popup"; import "./modules/courses"; import "./modules/comments"; +import "./modules/password-show"; diff --git a/web/src/js/modules/password-show.js b/web/src/js/modules/password-show.js new file mode 100644 index 00000000..67eff8a3 --- /dev/null +++ b/web/src/js/modules/password-show.js @@ -0,0 +1,15 @@ +import $ from 'jquery'; + +$(document).ready(function () { + $('button.password-toggle').on('click', function () { + const wrapElement = $(this).closest('.field__wrap'); + const inputElement = wrapElement.find('input'); + if (inputElement.attr('type') === 'password') { + inputElement.attr('type', 'text'); + wrapElement.addClass('password-visible'); + } else { + inputElement.attr('type', 'password'); + wrapElement.removeClass('password-visible'); + } + }); +}); \ No newline at end of file diff --git a/web/src/sass/_common.sass b/web/src/sass/_common.sass index d16024dc..1c61dacb 100755 --- a/web/src/sass/_common.sass +++ b/web/src/sass/_common.sass @@ -1889,7 +1889,6 @@ a.grey-link &__input height: 36px &[type='password'] - font-size: 30px &::placeholder font-size: 18px &_bg @@ -1936,6 +1935,32 @@ a.grey-link &.success &__input, &.success &__textarea border-color: $green-light + &__password-show + position: absolute + right: 0 + top: 0 + button + &.password-toggle + border: none + background: none + margin-top: 11px +.field__wrap + svg.icon-password-eye + display: block + svg.icon-password-hidden-eye + display: none + &.password-visible + svg.icon-password-eye + display: none + svg.icon-password-hidden-eye + display: block + button + &.password-toggle + margin-top: 12px + +.icon-password-eye + width: 1.47em + height: 1em .auth padding: 0 20px 25px diff --git a/web/src/sass/generated/_sprite-svg.scss b/web/src/sass/generated/_sprite-svg.scss index 92fce2fe..88817d5d 100755 --- a/web/src/sass/generated/_sprite-svg.scss +++ b/web/src/sass/generated/_sprite-svg.scss @@ -118,6 +118,16 @@ height: 1em; fill: #979797; } +.icon-password-eye { + width: 1.79em; + height: 1em; + fill: #A7A7A7; +} +.icon-password-hidden-eye { + width: 1.47em; + height: 1em; + fill: #FD9395; +} .icon-photo { width: 1.33em; height: 1em;