Added subscription and security pages settings

public/icons/password-open.svg

@@ -0,0 +1,3 @@
+<svg width="23" height="14" viewBox="0 0 23 14" 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"/>
+</svg>

src/components/Discours/ProfileSettingsNavigation.module.scss

@@ -0,0 +1,10 @@
+.navigationHeader {
+  @include font-size(1.8rem);
+
+  font-weight: bold;
+  margin-top: 1.1em !important;
+}
+
+.navigation {
+  @include font-size(1.4rem);
+}

src/components/Discours/ProfileSettingsNavigation.tsx

@@ -0,0 +1,21 @@
+import styles from './ProfileSettingsNavigation.module.scss'
+import { clsx } from 'clsx'
+
+export default () => {
+  return (
+    <>
+      <h4 class={styles.navigationHeader}>Настройки</h4>
+      <ul class={clsx(styles.navigation, 'nodash')}>
+        <li>
+          <a href="/profile/settings">Профиль</a>
+        </li>
+        <li>
+          <a href="/profile/subscriptions">Подписки</a>
+        </li>
+        <li>
+          <a href="/profile/security">Вход и&nbsp;безопасность</a>
+        </li>
+      </ul>
+    </>
+  )
+}

src/components/Pages/profile/ProfileSecurityPage.tsx

@@ -0,0 +1,104 @@
+import { PageWrap } from '../../_shared/PageWrap'
+import type { PageProps } from '../../types'
+import styles from './Settings.module.scss'
+import { Icon } from '../../_shared/Icon'
+import { clsx } from 'clsx'
+import ProfileSettingsNavigation from '../../Discours/ProfileSettingsNavigation'
+
+export const ProfileSecurityPage = (props: PageProps) => {
+  return (
+    <PageWrap>
+      <div class="wide-container">
+        <div class="shift-content">
+          <div class="left-col">
+            <div class={clsx('left-navigation', styles.leftNavigation)}>
+              <ProfileSettingsNavigation />
+            </div>
+          </div>
+
+          <div class="row">
+            <div class="col-md-10 col-lg-9 col-xl-8">
+              <h1>Вход и&nbsp;безопасность</h1>
+              <p class="description">Настройки аккаунта, почты, пароля и&nbsp;способов входа.</p>
+
+              <form>
+                <h4>Почта</h4>
+                <div class="pretty-form__item">
+                  <input type="text" name="email" id="email" placeholder="Почта" />
+                  <label for="email">Почта</label>
+                </div>
+
+                <h4>Изменить пароль</h4>
+                <h5>Текущий пароль</h5>
+                <div class="pretty-form__item">
+                  <input
+                    type="password"
+                    name="password-current"
+                    id="password-current"
+                    class={clsx(styles.passwordInput, 'nolabel')}
+                  />
+                  <button class={styles.passwordToggleControl}>
+                    <Icon name="password-open" />
+                  </button>
+                </div>
+
+                <h5>Текущий пароль</h5>
+                <div class="pretty-form__item">
+                  <input
+                    type="password"
+                    name="password-new"
+                    id="password-new"
+                    class={clsx(styles.passwordInput, 'nolabel')}
+                  />
+                  <button class={styles.passwordToggleControl}>
+                    <Icon name="password-open" />
+                  </button>
+                </div>
+
+                <h5>Подтвердите новый пароль</h5>
+                <div class="pretty-form__item">
+                  <input
+                    type="password"
+                    name="password-new-confirm"
+                    id="password-new-confirm"
+                    class={clsx(styles.passwordInput, 'nolabel')}
+                  />
+                  <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>
+                  </div>
+                  <div class={styles.multipleControlsItem}>
+                    <input type="text" name="social1" class="nolabel" />
+                    <button>
+                      <Icon name="remove" class={styles.icon} />
+                    </button>
+                  </div>
+                  <div class={styles.multipleControlsItem}>
+                    <input type="text" name="social1" class="nolabel" />
+                    <button>
+                      <Icon name="remove" class={styles.icon} />
+                    </button>
+                  </div>
+                </div>
+
+                <br />
+                <p>
+                  <button class="button button--submit">Сохранить настройки</button>
+                </p>
+              </form>
+            </div>
+          </div>
+        </div>
+      </div>
+    </PageWrap>
+  )
+}
+
+// for lazy loading
+export default ProfileSecurityPage

src/components/Pages/profile/ProfileSettingsPage.tsx

@@ -3,6 +3,7 @@ import type { PageProps } from '../../types'
 import styles from './Settings.module.scss'
 import { Icon } from '../../_shared/Icon'
 import { clsx } from 'clsx'
+import ProfileSettingsNavigation from '../../Discours/ProfileSettingsNavigation'
 
 export const ProfileSettingsPage = (props: PageProps) => {
   return (
@@ -10,7 +11,9 @@ export const ProfileSettingsPage = (props: PageProps) => {
       <div class="wide-container">
         <div class="shift-content">
           <div class="left-col">
-            <div class="left-navigation">WIP</div>
+            <div class={clsx('left-navigation', styles.leftNavigation)}>
+              <ProfileSettingsNavigation />
+            </div>
           </div>
 
           <div class="row">

src/components/Pages/profile/ProfileSubscriptionsPage.tsx

@@ -0,0 +1,138 @@
+import { PageWrap } from '../../_shared/PageWrap'
+import type { PageProps } from '../../types'
+import styles from './Settings.module.scss'
+import stylesSettings from '../../../styles/FeedSettings.module.scss'
+import { Icon } from '../../_shared/Icon'
+import { clsx } from 'clsx'
+import ProfileSettingsNavigation from '../../Discours/ProfileSettingsNavigation'
+import { SearchField } from '../../_shared/SearchField'
+
+export const ProfileSubscriptionsPage = (props: PageProps) => {
+  return (
+    <PageWrap>
+      <div class="wide-container">
+        <div class="shift-content">
+          <div class="left-col">
+            <div class={clsx('left-navigation', styles.leftNavigation)}>
+              <ProfileSettingsNavigation />
+            </div>
+          </div>
+
+          <div class="row">
+            <div class="col-md-10 col-lg-9 col-xl-8">
+              <h1>Подписки</h1>
+              <p class="description">Здесь можно управлять всеми своими подписками на&nbsp;сайте.</p>
+
+              <form>
+                <ul class="view-switcher">
+                  <li class="selected">
+                    <a href="#">Все</a>
+                  </li>
+                  <li>
+                    <a href="#">Авторы</a>
+                  </li>
+                  <li>
+                    <a href="#">Темы</a>
+                  </li>
+                  <li>
+                    <a href="#">Сообщества</a>
+                  </li>
+                  <li>
+                    <a href="#">Коллекции</a>
+                  </li>
+                </ul>
+
+                <div class={clsx('pretty-form__item', styles.searchContainer)}>
+                  <SearchField onChange={() => {}} class={styles.searchField} />
+                </div>
+
+                <div class={clsx(stylesSettings.settingsList, styles.topicsList)}>
+                  <div class={stylesSettings.settingsListRow}>
+                    <div class={clsx(stylesSettings.settingsListCell, styles.topicsListItem)}>
+                      <input type="checkbox" name="checkbox1" id="checkbox1" />
+                      <label for="checkbox1" />
+                    </div>
+                    <label for="checkbox1" class={styles.settingsListCell}>
+                      Культура
+                    </label>
+                  </div>
+                  <div class={stylesSettings.settingsListRow}>
+                    <div class={clsx(stylesSettings.settingsListCell, styles.topicsListItem)}>
+                      <input type="checkbox" name="checkbox2" id="checkbox2" />
+                      <label for="checkbox2" />
+                    </div>
+                    <label for="checkbox2" class={styles.settingsListCell}>
+                      Eto_ya sam
+                    </label>
+                  </div>
+                  <div class={stylesSettings.settingsListRow}>
+                    <div class={clsx(stylesSettings.settingsListCell, styles.topicsListItem)}>
+                      <input type="checkbox" name="checkbox3" id="checkbox3" />
+                      <label for="checkbox3" />
+                    </div>
+                    <label for="checkbox3" class={styles.settingsListCell}>
+                      Технопарк
+                    </label>
+                  </div>
+                  <div class={stylesSettings.settingsListRow}>
+                    <div class={clsx(stylesSettings.settingsListCell, styles.topicsListItem)}>
+                      <input type="checkbox" name="checkbox4" id="checkbox4" />
+                      <label for="checkbox4" />
+                    </div>
+                    <label for="checkbox4" class={styles.settingsListCell}>
+                      Лучшее
+                    </label>
+                  </div>
+                  <div class={stylesSettings.settingsListRow}>
+                    <div class={clsx(stylesSettings.settingsListCell, styles.topicsListItem)}>
+                      <input type="checkbox" name="checkbox5" id="checkbox5" />
+                      <label for="checkbox5" />
+                    </div>
+                    <label for="checkbox5" class={styles.settingsListCell}>
+                      Реклама
+                    </label>
+                  </div>
+                  <div class={stylesSettings.settingsListRow}>
+                    <div class={clsx(stylesSettings.settingsListCell, styles.topicsListItem)}>
+                      <input type="checkbox" name="checkbox6" id="checkbox6" />
+                      <label for="checkbox6" />
+                    </div>
+                    <label for="checkbox6" class={styles.settingsListCell}>
+                      Искусство
+                    </label>
+                  </div>
+                  <div class={stylesSettings.settingsListRow}>
+                    <div class={clsx(stylesSettings.settingsListCell, styles.topicsListItem)}>
+                      <input type="checkbox" name="checkbox7" id="checkbox7" />
+                      <label for="checkbox7" />
+                    </div>
+                    <label for="checkbox7" class={styles.settingsListCell}>
+                      Общество
+                    </label>
+                  </div>
+                  <div class={stylesSettings.settingsListRow}>
+                    <div class={clsx(stylesSettings.settingsListCell, styles.topicsListItem)}>
+                      <input type="checkbox" name="checkbox8" id="checkbox8" />
+                      <label for="checkbox8" />
+                    </div>
+                    <label for="checkbox8" class={styles.settingsListCell}>
+                      Личный опыт
+                    </label>
+                  </div>
+                </div>
+
+                <br />
+                <p>
+                  <button class="button button--submit">Сохранить настройки</button>
+                </p>
+              </form>
+            </div>
+          </div>
+        </div>
+      </div>
+    </PageWrap>
+  )
+}
+
+// for lazy loading
+export default ProfileSubscriptionsPage

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

@@ -1,7 +1,17 @@
-h4 {
+h4,
+h5 {
   font-weight: 500;
 }
 
+h4 {
+  @include font-size(2.4rem);
+}
+
+h5 {
+  @include font-size(1.7rem);
+  margin: 0 0 0.8rem;
+}
+
 .avatarContainer {
   border-radius: 100%;
   overflow: hidden;
@@ -103,3 +113,44 @@ h4 {
 .discoursNameField {
   flex: 1;
 }
+
+.leftNavigation {
+  top: 9rem !important;
+}
+
+.passwordToggleControl {
+  position: absolute;
+  right: 1em;
+  transform: translateY(-50%);
+  top: 50%;
+}
+
+.passwordInput {
+  padding-right: 3em !important;
+}
+
+.searchContainer {
+  margin-top: 2.4rem;
+}
+
+.searchField {
+  display: block;
+
+  label:first-child {
+    opacity: 0.5;
+    position: absolute;
+    right: 1em;
+    transform: translateY(-50%);
+    top: 50%;
+  }
+}
+
+.topicsList {
+  label {
+    @include font-size(1.7rem);
+  }
+}
+
+.topicsListItem {
+  padding-right: 1.5rem !important;
+}

src/components/Root.tsx

@@ -33,6 +33,8 @@ import { InboxPage } from './Pages/InboxPage'
 import { LayoutShoutsPage } from './Pages/LayoutShoutsPage'
 import { SessionProvider } from '../context/session'
 import { ProfileSettingsPage } from './Pages/profile/ProfileSettingsPage'
+import { ProfileSecurityPage } from './Pages/profile/ProfileSecurityPage'
+import { ProfileSubscriptionsPage } from './Pages/profile/ProfileSubscriptionsPage'
 
 // TODO: lazy load
 // const SomePage = lazy(() => import('./Pages/SomePage'))
@@ -60,7 +62,9 @@ const pagesMap: Record<keyof Routes, Component<PageProps>> = {
   principles: PrinciplesPage,
   termsOfUse: TermsOfUsePage,
   thanks: ThanksPage,
-  profileSettings: ProfileSettingsPage
+  profileSettings: ProfileSettingsPage,
+  profileSecurity: ProfileSecurityPage,
+  profileSubscriptions: ProfileSubscriptionsPage
 }
 
 export const Root = (props: PageProps) => {

src/components/Views/FeedSettings.tsx

@@ -1,4 +1,4 @@
-import '../../styles/FeedSettings.scss'
+import styles from '../../styles/FeedSettings.module.scss'
 import { t } from '../../utils/intl'
 
 // type FeedSettingsSearchParams = {
@@ -27,20 +27,20 @@ export const FeedSettingsView = (_props) => {
         </li>
       </ul>
 
-      <div class="settings-list">
+      <div class={styles.settingsList}>
-        <div class="settings-list__row">
+        <div class={styles.settingsListRow}>
           <h2>Общее</h2>
         </div>
 
-        <div class="settings-list__row">
+        <div class={styles.settingsListRow}>
-          <label for="checkbox1" class="settings-list__cell">
+          <label for="checkbox1" class={styles.settingsListCell}>
             Комментарии к&nbsp;моим постам
           </label>
-          <div class="settings-list__cell">
+          <div class={styles.settingsListCell}>
             <input type="checkbox" name="checkbox1" id="checkbox1" />
             <label for="checkbox1" />
           </div>
-          <div class="settings-list__cell">
+          <div class={styles.settingsListCell}>
             <input
               type="checkbox"
               name="checkbox1-notification"
@@ -51,15 +51,15 @@ export const FeedSettingsView = (_props) => {
           </div>
         </div>
 
-        <div class="settings-list__row">
+        <div class={styles.settingsListRow}>
-          <label for="checkbox2" class="settings-list__cell">
+          <label for="checkbox2" class={styles.settingsListCell}>
             новые подписчики
           </label>
-          <div class="settings-list__cell">
+          <div class={styles.settingsListCell}>
             <input type="checkbox" name="checkbox2" id="checkbox2" />
             <label for="checkbox2" />
           </div>
-          <div class="settings-list__cell">
+          <div class={styles.settingsListCell}>
             <input
               type="checkbox"
               name="checkbox2-notification"
@@ -70,15 +70,15 @@ export const FeedSettingsView = (_props) => {
           </div>
         </div>
 
-        <div class="settings-list__row">
+        <div class={styles.settingsListRow}>
-          <label for="checkbox3" class="settings-list__cell">
+          <label for="checkbox3" class={styles.settingsListCell}>
             добавление моих текстов в&nbsp;коллекции
           </label>
-          <div class="settings-list__cell">
+          <div class={styles.settingsListCell}>
             <input type="checkbox" name="checkbox3" id="checkbox3" />
             <label for="checkbox3" />
           </div>
-          <div class="settings-list__cell">
+          <div class={styles.settingsListCell}>
             <input
               type="checkbox"
               name="checkbox3-notification"
@@ -89,19 +89,19 @@ export const FeedSettingsView = (_props) => {
           </div>
         </div>
 
-        <div class="settings-list__row">
+        <div class={styles.settingsListRow}>
           <h2>Мои подписки</h2>
         </div>
 
-        <div class="settings-list__row">
+        <div class={styles.settingsListRow}>
-          <label for="checkbox4" class="settings-list__cell">
+          <label for="checkbox4" class={styles.settingsListCell}>
             добавление моих текстов в&nbsp;коллекции
           </label>
-          <div class="settings-list__cell">
+          <div class={styles.settingsListCell}>
             <input type="checkbox" name="checkbox4" id="checkbox4" />
             <label for="checkbox4" />
           </div>
-          <div class="settings-list__cell">
+          <div class={styles.settingsListCell}>
             <input
               type="checkbox"
               name="checkbox4-notification"

src/components/_shared/SearchField.module.scss

@@ -8,6 +8,10 @@
     font-family: inherit;
     font-size: inherit;
     width: 100%;
+
+    + label {
+      display: none;
+    }
   }
 
   label {

src/components/_shared/SearchField.tsx

@@ -1,16 +1,18 @@
 import styles from './SearchField.module.scss'
 import { Icon } from './Icon'
 import { t } from '../../utils/intl'
+import clsx from 'clsx'
 
 type SearchFieldProps = {
   onChange: (value: string) => void
+  class?: string
 }
 
 export const SearchField = (props: SearchFieldProps) => {
   const handleInputChange = (event) => props.onChange(event.target.value.trim())
 
   return (
-    <div class={styles.searchField}>
+    <div class={clsx(styles.searchField, props.class)}>
       <label for="search-field">
         <Icon name="search" class={styles.icon} />
       </label>
@@ -21,6 +23,7 @@ export const SearchField = (props: SearchFieldProps) => {
         onInput={handleInputChange}
         placeholder={t('Search')}
       />
+      <label for="search-field">Поиск</label>
     </div>
   )
 }

src/pages/profile/security.astro

@@ -0,0 +1,12 @@
+---
+import Prerendered from '../../main.astro'
+import { Root } from '../../components/Root'
+import { initRouter } from '../../stores/router'
+
+const { pathname, search } = Astro.url
+initRouter(pathname, search)
+---
+
+<Prerendered>
+  <Root client:load />
+</Prerendered>

src/pages/profile/subscriptions.astro

@@ -0,0 +1,12 @@
+---
+import Prerendered from '../../main.astro'
+import { Root } from '../../components/Root'
+import { initRouter } from '../../stores/router'
+
+const { pathname, search } = Astro.url
+initRouter(pathname, search)
+---
+
+<Prerendered>
+  <Root client:load />
+</Prerendered>

src/stores/router.ts

@@ -28,6 +28,8 @@ export interface Routes {
   expo: 'layout'
   inbox: void // TODO: добавить ID текущего юзера
   profileSettings: void
+  profileSecurity: void
+  profileSubscriptions: void
 }
 
 const searchParamsStore = createSearchParams()
@@ -55,7 +57,9 @@ const routerStore = createRouter<Routes>(
     termsOfUse: '/about/terms-of-use',
     thanks: '/about/thanks',
     expo: '/expo/:layout',
-    profileSettings: '/profile/settings'
+    profileSettings: '/profile/settings',
+    profileSecurity: '/profile/security',
+    profileSubscriptions: '/profile/subscriptions'
   },
   {
     search: false,

src/styles/FeedSettings.module.scss

@@ -1,4 +1,4 @@
-.settings-list {
+.settingsList {
   display: table;
 
   h2 {
@@ -20,7 +20,7 @@
         height: 2.8rem;
         position: static;
         width: 2.8rem;
-        vertical-align: middle;
+        vertical-align: bottom;
       }
     }
 
@@ -46,11 +46,11 @@
   }
 }
 
-.settings-list__row {
+.settingsListRow {
   display: table-row;
 }
 
-.settings-list__cell {
+.settingsListCell {
   display: table-cell;
   padding: 0 0.5em 1em 0;