Profile security page fixes

public/icons/apple.svg

@@ -0,0 +1,3 @@
+<svg width="18" height="20" viewBox="0 0 18 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.9159 0C13.0948 1.21486 12.6003 2.40503 11.948 3.24708C11.2501 4.15029 10.0472 4.84886 8.88168 4.8124C8.66892 3.64929 9.21368 2.45089 9.87651 1.6453C10.6036 0.756201 11.8498 0.0740913 12.9159 0ZM16.4177 17.0985C17.0185 16.1776 17.243 15.7131 17.7094 14.6735C14.3169 13.3833 13.7733 8.56035 17.1308 6.70925C16.1067 5.425 14.6676 4.68056 13.3093 4.68056C12.3305 4.68056 11.6599 4.93598 11.0502 5.16818C10.5421 5.36169 10.0764 5.53907 9.50996 5.53907C8.89784 5.53907 8.35578 5.34472 7.78819 5.14121C7.1645 4.91758 6.50998 4.68291 5.69781 4.68291C4.17342 4.68291 2.55083 5.61434 1.5221 7.20672C0.0760363 9.44945 0.322698 13.6656 2.66774 17.2573C3.50592 18.5427 4.62583 19.9869 6.0906 19.9998C6.69839 20.0058 7.10283 19.8244 7.5405 19.6281C8.04146 19.4035 8.58593 19.1592 9.52867 19.1542C10.477 19.1485 11.0128 19.3957 11.5071 19.6237C11.9336 19.8204 12.3291 20.0028 12.9317 19.9963C14.3976 19.9845 15.5795 18.3839 16.4177 17.0985Z" fill="#0B0B0A"/>
+</svg>

public/icons/password-hide.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="18" viewBox="0 0 24 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2.65441 0.231661L9.68495 5.65813C9.7181 5.6779 9.75068 5.69975 9.78214 5.72348C9.82187 5.75305 9.85898 5.78488 9.89344 5.81859L22.6933 15.6986C23.1773 16.0711 23.266 16.7642 22.8933 17.2482C22.6752 17.5322 22.3479 17.6776 22.0184 17.6776C21.7821 17.6776 21.5434 17.6027 21.3436 17.4482L18.8218 15.502C16.7955 16.7934 14.453 17.4731 12 17.4731C6.69216 17.4731 2.01349 14.2511 0.0752888 9.26566C-0.0247164 9.01122 -0.0247164 8.72721 0.0730288 8.47259C0.783219 6.61144 1.93866 4.91947 3.39091 3.59094L1.30455 1.9807C0.820536 1.60798 0.732016 0.914929 1.10473 0.431054C1.47726 -0.0552304 2.17484 -0.141678 2.65437 0.231044L2.65441 0.231661ZM2.29996 8.86387C3.9927 12.7677 7.75343 15.2647 12.0001 15.2647C13.7543 15.2647 15.4355 14.8474 16.9372 14.0475L14.9695 12.529C14.1267 13.1978 13.0877 13.5675 12 13.5675C9.3778 13.5675 7.24641 11.4589 7.24641 8.86623C7.24641 8.18391 7.392 7.51721 7.67224 6.8966L5.1736 4.96766C3.94473 6.0071 2.94617 7.35878 2.29982 8.86377L2.29996 8.86387ZM12.0025 0.209C17.3195 0.209 22.0001 3.45157 23.9272 8.47092C24.025 8.72781 24.025 9.01184 23.9227 9.26853C23.5252 10.291 22.9571 11.3067 22.2868 12.1998C22.0708 12.4906 21.7369 12.6427 21.4028 12.6427C21.1711 12.6427 20.9393 12.5701 20.7415 12.4224C20.253 12.0567 20.1532 11.3636 20.5212 10.8773C20.9869 10.2569 21.3892 9.56631 21.7005 8.86171C20.0145 4.93305 16.2538 2.41745 12.0028 2.41745C10.9849 2.41745 10.0032 2.55832 9.08288 2.83329C8.49452 3.01278 7.88317 2.6766 7.7082 2.09258C7.53324 1.50857 7.86509 0.892876 8.44891 0.717908C9.57365 0.381539 10.7713 0.208817 12.0028 0.208817L12.0025 0.209ZM9.45528 8.86628C9.45528 10.241 10.596 11.3589 12.0003 11.3589C12.3922 11.3589 12.7726 11.2687 13.1182 11.0997L9.51502 8.31838C9.47754 8.48806 9.45532 8.67094 9.45532 8.86623L9.45528 8.86628ZM12.4319 4.11948C14.1339 4.31497 15.5948 5.35327 16.3357 6.89612C16.5992 7.44604 16.3674 8.1073 15.8176 8.37078C15.663 8.44593 15.5018 8.48002 15.3404 8.48002C14.9291 8.48002 14.536 8.25044 14.3429 7.85285C13.9339 6.99836 13.125 6.42355 12.182 6.31454C11.5754 6.24636 11.1413 5.69644 11.2094 5.09208C11.2799 4.48526 11.8479 4.05587 12.4319 4.11951L12.4319 4.11948Z" fill="black"/>
+</svg>

public/icons/password-open.svg

@@ -1,3 +1,3 @@
-<svg width="23" height="14" viewBox="0 0 23 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg width="24" height="18" viewBox="0 0 24 18" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M11.2007 0.000478409C6.59387 0.000666865 2.34285 2.54982 0.084511 6.66517H0.0846948C-0.0281703 6.87055 -0.0281702 7.12152 0.0843271 7.32711C2.34055 11.446 6.59204 13.9981 11.2005 14V13.9998H11.2012C15.808 13.9981 20.0586 11.4475 22.3155 7.33078C22.4282 7.1254 22.4282 6.87443 22.3155 6.66903C20.0585 2.55243 15.8078 0.00241177 11.2012 0H11.2007V0.000478409ZM11.2005 1.35107C15.2089 1.35258 18.9115 3.50189 20.9778 7.00041C18.9111 10.4986 15.2089 12.6473 11.201 12.6493C7.19124 12.6478 3.4876 10.4969 1.42126 6.99655C3.48924 3.49948 7.19204 1.35107 11.2 1.35107H11.2005ZM11.1999 2.90609C9.00178 2.90609 7.20565 4.74714 7.20565 7.00026C7.20565 9.2532 9.00178 11.0942 11.1999 11.0942C13.3979 11.0942 15.194 9.2532 15.194 7.00026C15.194 4.74714 13.3979 2.90609 11.1999 2.90609ZM11.1999 4.25668C12.6858 4.25668 13.8762 5.47689 13.8762 7.00007C13.8762 8.52306 12.6858 9.74327 11.1999 9.74327C9.71392 9.74327 8.52348 8.52306 8.52348 7.00007C8.52348 5.47689 9.71392 4.25668 11.1999 4.25668Z" fill="black"/>
+<path d="M11.9998 0C17.3178 0 21.9994 3.24315 23.927 8.26336C24.0247 8.52025 24.0247 8.80427 23.9247 9.06115C21.9884 14.0474 17.3093 17.27 12 17.27C6.6907 17.27 2.01155 14.0474 0.0752887 9.06115C-0.0247163 8.80426 -0.0247163 8.52024 0.0730287 8.26336C2.00028 3.24334 6.68169 0 12.0002 0H11.9998ZM11.9998 2.21123C7.74537 2.21123 3.9819 4.72722 2.29779 8.65886C3.99092 12.561 7.75463 15.0588 11.9998 15.0588C16.2451 15.0588 20.0086 12.561 21.7019 8.65886C20.018 4.72717 16.2547 2.21123 11.9998 2.21123V2.21123ZM11.9998 3.90662C14.6224 3.90662 16.7542 6.03839 16.7542 8.66112C16.7542 11.2564 14.6201 13.3631 11.9998 13.3631C9.37958 13.3631 7.24554 11.2541 7.24554 8.66112C7.24554 6.03839 9.37731 3.90662 11.9998 3.90662V3.90662ZM11.9998 6.11804C10.5977 6.11804 9.4545 7.25878 9.4545 8.66339C9.4545 10.0383 10.5954 11.1564 11.9998 11.1564C13.4043 11.1564 14.5452 10.0383 14.5452 8.66339C14.5452 7.25878 13.402 6.11804 11.9998 6.11804V6.11804Z" fill="black"/>
 </svg>

src/components/Pages/profile/ProfileSecurityPage.tsx

@@ -32,17 +32,17 @@ export const ProfileSecurityPage = (props: PageProps) => {
                 <h5>Текущий пароль</h5>
                 <div class="pretty-form__item">
                   <input
-                    type="password"
+                    type="text"
                     name="password-current"
                     id="password-current"
                     class={clsx(styles.passwordInput, 'nolabel')}
                   />
-                  <button class={styles.passwordToggleControl}>
+                  <button type="button" class={styles.passwordToggleControl}>
-                    <Icon name="password-open" />
+                    <Icon name="password-hide" />
                   </button>
                 </div>
 
-                <h5>Текущий пароль</h5>
+                <h5>Новый пароль</h5>
                 <div class="pretty-form__item">
                   <input
                     type="password"
@@ -50,7 +50,7 @@ export const ProfileSecurityPage = (props: PageProps) => {
                     id="password-new"
                     class={clsx(styles.passwordInput, 'nolabel')}
                   />
-                  <button class={styles.passwordToggleControl}>
+                  <button type="button" class={styles.passwordToggleControl}>
                     <Icon name="password-open" />
                   </button>
                 </div>
@@ -63,33 +63,64 @@ export const ProfileSecurityPage = (props: PageProps) => {
                     id="password-new-confirm"
                     class={clsx(styles.passwordInput, 'nolabel')}
                   />
-                  <button class={styles.passwordToggleControl}>
+                  <button type="button" class={styles.passwordToggleControl}>
                     <Icon name="password-open" />
                   </button>
                 </div>
 
-                <div class={clsx(styles.multipleControls, 'pretty-form__item')}>
-                  <div class={styles.multipleControlsHeader}>
                 <h4>Социальные сети</h4>
-                    <button class="button">+</button>
+                <h5>Google</h5>
-                  </div>
+                <div class="pretty-form__item">
-                  <div class={styles.multipleControlsItem}>
+                  <p>
-                    <input type="text" name="social1" class="nolabel" />
+                    <button class={clsx(styles.socialButton, 'button button--light')} type="button">
-                    <button>
+                      <Icon name="google" class={styles.icon} />
-                      <Icon name="remove" class={styles.icon} />
+                      Привязать
                     </button>
+                  </p>
                 </div>
-                  <div class={styles.multipleControlsItem}>
+
-                    <input type="text" name="social1" class="nolabel" />
+                <h5>VK</h5>
-                    <button>
+                <div class="pretty-form__item">
-                      <Icon name="remove" class={styles.icon} />
+                  <p>
+                    <button class={clsx(styles.socialButton, 'button button--light')} type="button">
+                      <Icon name="vk" class={styles.icon} />
+                      Привязать
                     </button>
+                  </p>
                 </div>
+
+                <h5>Facebook</h5>
+                <div class="pretty-form__item">
+                  <p>
+                    <button class={clsx(styles.socialButton, 'button button--light')} type="button">
+                      <Icon name="facebook" class={styles.icon} />
+                      Привязать
+                    </button>
+                  </p>
+                </div>
+
+                <h5>Apple</h5>
+                <div class="pretty-form__item">
+                  <p>
+                    <button
+                      class={clsx(
+                        styles.socialButton,
+                        styles.socialButtonApple,
+                        'button' + ' button--light'
+                      )}
+                      type="button"
+                    >
+                      <Icon name="apple" class={styles.icon} />
+                      Привязать
+                    </button>
+                  </p>
                 </div>
 
                 <br />
                 <p>
-                  <button class="button button--submit">Сохранить настройки</button>
+                  <button class="button button--submit" type="submit">
+                    Сохранить настройки
+                  </button>
                 </p>
               </form>
             </div>

src/components/Pages/profile/Settings.module.scss

@@ -154,3 +154,36 @@ h5 {
 .topicsListItem {
   padding-right: 1.5rem !important;
 }
+
+.socialButton {
+  color: #000;
+  display: flex;
+  padding: 0.8em 1em;
+  transition: background-color 0.3s, color 0.3s;
+
+  &:hover {
+    background: #000;
+    color: #fff;
+  }
+
+  img {
+    vertical-align: middle;
+  }
+
+  .icon {
+    margin-right: 1em;
+  }
+}
+
+.socialButtonApple {
+  &:hover {
+    .icon {
+      filter: invert(1);
+    }
+  }
+
+  .icon {
+    filter: invert(0);
+    transition: filter 0.3s;
+  }
+}