LIL-159 - Кнопка показать/скрыть пароль

project/templates/lilcity/index.html

@@ -256,9 +256,20 @@
                     <div id="learner-auth-field__password" class="auth__field field learner-auth-form__field">
                       <div class="field__label">ПАРОЛЬ<a class="field__link js-auth-go-pass" href="#" tabindex="4">Забыли
                         пароль?</a></div>
-                      <div class="field__wrap"><input id="learner-auth-form__password" class="field__input"
+                      <div class="field__wrap">
+                        <input id="learner-auth-form__password" class="field__input field__input--password"
                                                       name="password"
                                                       type="password" placeholder="Минимум 5 символов" tabindex="2">
+                        <div class="field__password-show">
+                          <button class="password-toggle" type="button">
+                            <svg class="icon icon-password-eye">
+                              <use xlink:href={% static "img/sprite.svg" %}#icon-password-eye></use>
+                            </svg>
+                            <svg class="icon icon-password-hidden-eye">
+                              <use xlink:href={% static "img/sprite.svg" %}#icon-password-hidden-eye></use>
+                            </svg>
+                          </button>
+                        </div>
                       </div>
                       <div id="learner-auth-field-error__password"
                            class="field__error learner-auth-form__field-error"></div>
@@ -308,8 +319,19 @@
                   <div id="learner-registration-field__password"
                        class="auth__field field learner-registration-form__field">
                     <div class="field__label">ПАРОЛЬ</div>
-                    <div class="field__wrap"><input id="learner-registration-form__password" class="field__input"
+                    <div class="field__wrap">
+                      <input id="learner-registration-form__password" class="field__input field__input--password"
                                                     type="password" name="password" placeholder="Минимум 5 символов">
+                      <div class="field__password-show">
+                        <button class="password-toggle" type="button">
+                          <svg class="icon icon-password-eye">
+                            <use xlink:href={% static "img/sprite.svg" %}#icon-password-eye></use>
+                          </svg>
+                          <svg class="icon icon-password-hidden-eye">
+                            <use xlink:href={% static "img/sprite.svg" %}#icon-password-hidden-eye></use>
+                          </svg>
+                        </button>
+                      </div>
                     </div>
                     <div id="learner-registration-field-error__password"
                          class="field__error learner-registration-form__field-error"></div>

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;
 }

web/build/img/sprite.svg

@@ -1,4 +1,8 @@
-<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg"><symbol id="icon-add-plus" viewBox="0 0 20 20">
+<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs>
+        <path id="a" fill-rule="evenodd" d="M12.5 0C3.846 0 0 7 0 7s3.846 7 12.5 7S25 7 25 7s-3.846-7-12.5-7zm0 1C4.808 1 1.154 7 1.154 7s3.654 6 11.346 6 11.346-6 11.346-6S20.192 1 12.5 1zm0 10c2.124 0 3.846-1.79 3.846-4S14.624 3 12.5 3 8.654 4.79 8.654 7s1.722 4 3.846 4zm0-1c1.593 0 2.885-1.343 2.885-3S14.093 4 12.5 4c-1.593 0-2.885 1.343-2.885 3s1.292 3 2.885 3zm0-2c.531 0 .961-.448.961-1s-.43-1-.961-1c-.531 0-.961.448-.961 1s.43 1 .961 1z"/>
+    
+        <path id="a" fill-rule="evenodd" d="M4.912 13.12C1.555 11.173 0 8.5 0 8.5s3.846-6.611 12.5-6.611c1.254 0 2.408.139 3.463.376l-.817.803a14.781 14.781 0 0 0-2.646-.235C4.808 2.833 1.154 8.5 1.154 8.5s1.456 2.259 4.466 3.924l-.708.696zm4.125 1.615c1.055.237 2.209.376 3.463.376C21.154 15.111 25 8.5 25 8.5s-1.555-2.673-4.912-4.62l-.708.696C22.39 6.24 23.846 8.5 23.846 8.5s-3.654 5.667-11.346 5.667c-.942 0-1.824-.085-2.646-.235l-.817.803zM16.25 7.65c.064.273.097.557.097.849 0 2.086-1.722 3.778-3.846 3.778-.297 0-.586-.033-.864-.096l.864-.849c.738 0 1.476-.276 2.04-.83a2.799 2.799 0 0 0 .845-2.003l.864-.849zm-2.885-2.833a3.925 3.925 0 0 0-.864-.096c-2.124 0-3.846 1.692-3.846 3.778 0 .292.034.576.097.849l.864-.849c0-.725.282-1.45.845-2.003a2.902 2.902 0 0 1 2.04-.83l.864-.85zM20.192 0L3.846 16.056l.962.944L21.154.944 20.192 0z"/>
+    </defs><symbol id="icon-add-plus" viewBox="0 0 20 20">
     <path d="M10.5 9.5h8.571v1H10.5v8.571h-1V10.5H.929v-1H9.5V.929h1V9.5z"/>
 </symbol><symbol id="icon-arrow-down" viewBox="0 0 12 7">
     <path d="M6 5.293L10.646.646l.708.708L6 6.707.646 1.354l.708-.708z"/>
@@ -46,6 +50,24 @@
     <path fill-rule="evenodd" d="M0 10h20V8H0v2zm0-8h20V0H0v2zm0 4h20V4H0v2z"/>
 </symbol><symbol id="icon-money" viewBox="0 0 23 15">
     <path fill-rule="evenodd" d="M21 11v2h-2v2H0V4h2V2h2V0h19v11h-2zM4 3H3v9h17v-1H4V3zM2 5H1v9h17v-1H2V5zm3-4v9h17V1H5zm6.3 3.927h.578V2.333h1.488c.276 0 .528.031.756.094.228.062.423.157.585.284.163.128.29.289.382.484.093.195.139.428.139.7a1.6 1.6 0 0 1-.147.707c-.097.2-.23.367-.398.5a1.697 1.697 0 0 1-.594.296 2.684 2.684 0 0 1-.74.098h-.82v.821h1.308v.537h-1.309V8h-.65V6.854h-.577v-.537h.577v-.821h-.577v-.57zm2.066 0c.374 0 .668-.086.882-.256.214-.171.321-.43.321-.777 0-.347-.107-.599-.321-.756-.214-.157-.508-.236-.882-.236h-.838v2.025h.838z"/>
+</symbol><symbol id="icon-password-eye" viewBox="0 0 25 14">
+    <title>
+        password-eye
+    </title>
+    <desc>
+        Created using Figma
+    </desc>
+    <use xlink:href="#a"/>
+    
+</symbol><symbol id="icon-password-hidden-eye" viewBox="0 0 25 17">
+    <title>
+        password-eye-hidden
+    </title>
+    <desc>
+        Created using Figma
+    </desc>
+    <use xlink:href="#a"/>
+    
 </symbol><symbol id="icon-photo" viewBox="0 0 40 30">
     <path d="M2 2v26.002C2 28 14 28 38 28V1.998C38 2 26 2 2 2zm36-.008v.006-.006zm-38 0C0 .892.892 0 1.997 0h36.006C39.106 0 40 .898 40 1.992v26.016c0 1.1-.892 1.992-1.997 1.992H1.997A1.998 1.998 0 0 1 0 28.008V1.992zM20 23a8 8 0 1 0 0-16 8 8 0 0 0 0 16zm0-2a6 6 0 1 1 0-12 6 6 0 0 1 0 12z"/>
 </symbol><symbol id="icon-play" viewBox="0 0 39 49">

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

web/src/icons/password-eye.svg

@@ -0,0 +1,18 @@
+<svg width="25" height="14" viewBox="0 0 25 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<title>password-eye</title>
+<desc>Created using Figma</desc>
+<g id="Canvas" transform="translate(372 -453)">
+<g id="password-eye">
+<g id="Page 1">
+<g id="icon 22 eye">
+<g id="eye">
+<use xlink:href="#path0_fill" transform="translate(-372 453)" fill="#A7A7A7"/>
+</g>
+</g>
+</g>
+</g>
+</g>
+<defs>
+<path id="path0_fill" fill-rule="evenodd" d="M 12.5 0C 3.84615 0 0 7 0 7C 0 7 3.84615 14 12.5 14C 21.1538 14 25 7 25 7C 25 7 21.1538 0 12.5 0ZM 12.5 1C 4.80769 1 1.1538 7 1.1538 7C 1.1538 7 4.80769 13 12.5 13C 20.1923 13 23.8462 7 23.8462 7C 23.8462 7 20.1923 1 12.5 1ZM 12.5 11C 14.6242 11 16.3462 9.20914 16.3462 7C 16.3462 4.79086 14.6242 3 12.5 3C 10.3758 3 8.65385 4.79086 8.65385 7C 8.65385 9.20914 10.3758 11 12.5 11ZM 12.5 10C 14.0931 10 15.3846 8.65685 15.3846 7C 15.3846 5.34315 14.0931 4 12.5 4C 10.9069 4 9.61538 5.34315 9.61538 7C 9.61538 8.65685 10.9069 10 12.5 10ZM 12.5 8C 13.031 8 13.4615 7.55228 13.4615 7C 13.4615 6.44772 13.031 6 12.5 6C 11.969 6 11.5385 6.44772 11.5385 7C 11.5385 7.55228 11.969 8 12.5 8Z"/>
+</defs>
+</svg>

web/src/icons/password-hidden-eye.svg

@@ -0,0 +1,18 @@
+<svg width="25" height="17" viewBox="0 0 25 17" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<title>password-eye-hidden</title>
+<desc>Created using Figma</desc>
+<g id="Canvas" transform="translate(342 -451)">
+<g id="password-eye-hidden">
+<g id="Page 1">
+<g id="icon 21 eye hidden">
+<g id="eye hidden">
+<use xlink:href="#path0_fill" transform="translate(-342 451)" fill="#FD9395"/>
+</g>
+</g>
+</g>
+</g>
+</g>
+<defs>
+<path id="path0_fill" fill-rule="evenodd" d="M 4.91221 13.1196C 1.55501 11.1729 0 8.5 0 8.5C 0 8.5 3.84615 1.88889 12.5 1.88889C 13.7543 1.88889 14.9077 2.02778 15.9629 2.26531L 15.1461 3.06765C 14.3242 2.91838 13.4424 2.83333 12.5 2.83333C 4.80769 2.83333 1.1538 8.5 1.1538 8.5C 1.1538 8.5 2.61032 10.7588 5.62012 12.4242L 4.91221 13.1196ZM 9.03708 14.7347C 10.0923 14.9722 11.2457 15.1111 12.5 15.1111C 21.1538 15.1111 25 8.5 25 8.5C 25 8.5 23.445 5.82711 20.0878 3.88044L 19.3799 4.57576C 22.3897 6.24115 23.8462 8.5 23.8462 8.5C 23.8462 8.5 20.1923 14.1667 12.5 14.1667C 11.5576 14.1667 10.6758 14.0816 9.85394 13.9324L 9.03708 14.7347ZM 16.2487 7.65127C 16.3125 7.92409 16.3462 8.20818 16.3462 8.5C 16.3462 10.5864 14.6242 12.2778 12.5 12.2778C 12.2029 12.2778 11.9137 12.2447 11.6359 12.1821L 12.5 11.3333C 13.2382 11.3333 13.9765 11.0567 14.5397 10.5035C 15.103 9.95023 15.3846 9.22511 15.3846 8.5L 16.2487 7.65127ZM 13.3641 4.81794C 13.0863 4.75531 12.7971 4.72222 12.5 4.72222C 10.3758 4.72222 8.65385 6.41359 8.65385 8.5C 8.65385 8.79182 8.68753 9.07591 8.75129 9.34873L 9.61538 8.5C 9.61538 7.77489 9.89701 7.04977 10.4603 6.49653C 11.0235 5.94329 11.7618 5.66667 12.5 5.66667L 13.3641 4.81794ZM 20.1923 0L 3.84615 16.0556L 4.80769 17L 21.1538 0.944444L 20.1923 0Z"/>
+</defs>
+</svg>

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";

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');
+        }
+    });
+});

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

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;