Merge branch 'dev' of https://github.com/Discours/discoursio-webapp into fix/topic-header

package.json

@@ -11,7 +11,7 @@
     "deploy": "graphql-codegen && npm run typecheck && vite build && vercel",
     "dev": "vite",
     "e2e": "npx playwright test --project=chromium",
-    "fix": "npm run lint:code:fix && stylelint **/*.{scss,css} --fix",
+    "fix": "npm run check:code:fix && stylelint **/*.{scss,css} --fix",
     "format": "npx @biomejs/biome format src/. --write",
     "hygen": "HYGEN_TMPLS=gen hygen",
     "postinstall": "npm run codegen && npx patch-package",

public/locales/en/translation.json

@@ -91,6 +91,7 @@
   "Community Principles": "Community Principles",
   "Community values and rules of engagement for the open editorial team": "Community values and rules of engagement for the open editorial team",
   "Confirm": "Confirm",
+  "Contents": "Contents",
   "Contribute to free samizdat. Support Discours - an independent non-profit publication that works only for you. Become a pillar of the open newsroom": "Contribute to free samizdat. Support Discours - an independent non-profit publication that works only for you. Become a pillar of the open newsroom",
   "Cooperate": "Cooperate",
   "Copy link": "Copy link",
@@ -417,6 +418,7 @@
   "Username": "Username",
   "Userpic": "Userpic",
   "Users": "Users",
+  "User was not found": "User was not found",
   "Video format not supported": "Video format not supported",
   "Video": "Video",
   "Views": "Views",
@@ -469,7 +471,6 @@
   "cancel": "cancel",
   "collections": "collections",
   "community": "community",
-  "contents": "contents",
   "delimiter": "delimiter",
   "discussion": "Discours",
   "dogma keywords": "Discours.io, dogma, editorial principles, code of ethics, journalism, community",
@@ -531,5 +532,13 @@
   "It's OK. Just enter your email to receive a link to change your password": "It's OK. Just enter your email to receive a link to change your password",
   "Restore password": "Restore password",
   "Subscribing...": "Subscribing...",
-  "Unsubscribing...": "Unsubscribing..."
+  "Unsubscribing...": "Unsubscribing...",
+  "Login and security": "Login and security",
+  "Settings for account, email, password and login methods.": "Settings for account, email, password and login methods.",
+  "Current password": "Current password",
+  "Confirm your new password": "Confirm your new password",
+  "Connect": "Connect",
+  "Incorrect old password": "Incorrect old password",
+  "Repeat new password": "Repeat new password",
+  "Incorrect new password confirm": "Incorrect new password confirm"
 }

public/locales/ru/translation.json

@@ -95,6 +95,7 @@
   "Community Principles": "Принципы сообщества",
   "Community values and rules of engagement for the open editorial team": "Ценности сообщества и правила взаимодействия открытой редакции",
   "Confirm": "Подтвердить",
+  "Contents": "Оглавление",
   "Contribute to free samizdat. Support Discours - an independent non-profit publication that works only for you. Become a pillar of the open newsroom": "Внесите вклад в свободный самиздат. Поддержите Дискурс — независимое некоммерческое издание, которое работает только для вас. Станьте опорой открытой редакции",
   "Cooperate": "Соучаствовать",
   "Copy link": "Скопировать ссылку",
@@ -492,7 +493,6 @@
   "cancel": "отменить",
   "collections": "коллекции",
   "community": "сообщество",
-  "contents": "оглавление",
   "create_chat": "Создать чат",
   "create_group": "Создать группу",
   "delimiter": "разделитель",
@@ -549,6 +549,7 @@
   "topicKeywords": "{topic}, Discours.io, статьи, журналистика, исследования",
   "topics": "темы",
   "user already exist": "пользователь уже существует",
+  "User was not found": "Пользователь не найден",
   "verified": "уже подтверждён",
   "video": "видео",
   "view": "просмотр",
@@ -558,5 +559,13 @@
   "It's OK. Just enter your email to receive a link to change your password": "Ничего страшного. Просто укажите свою почту, чтобы получить ссылку для смены пароля",
   "Restore password": "Восстановить пароль",
   "Subscribing...": "Подписываем...",
-  "Unsubscribing...": "Отписываем..."
+  "Unsubscribing...": "Отписываем...",
+  "Login and security": "Вход и безопасность",
+  "Settings for account, email, password and login methods.": "Настройки аккаунта, почты, пароля и способов входа.",
+  "Current password": "Текущий пароль",
+  "Confirm your new password": "Подтвердите новый пароль",
+  "Connect": "Привязать",
+  "Incorrect old password": "Старый пароль не верен",
+  "Repeat new password": "Повторите новый пароль",
+  "Incorrect new password confirm": "Неверное подтверждение нового пароля"
 }

src/components/Article/FullArticle.tsx

@@ -538,7 +538,7 @@ export const FullArticle = (props: Props) => {
                   {(triggerRef: (el) => void) => (
                     <div class={styles.shoutStatsItem} ref={triggerRef}>
                       <a
-                        href={getPagePath(router, 'edit', { shoutId: props.article.id.toString() })}
+                        href={getPagePath(router, 'edit', { shoutId: props.article?.id.toString() })}
                         class={styles.shoutStatsItemInner}
                       >
                         <Icon name="pencil-outline" class={styles.icon} />

src/components/Author/AuthorBadge/AuthorBadge.tsx

@@ -54,7 +54,7 @@ export const AuthorBadge = (props: Props) => {
     requireAuthentication(() => {
       openPage(router, 'inbox')
       changeSearchParams({
-        initChat: props.author.id.toString(),
+        initChat: props.author?.id.toString(),
       })
     }, 'discussions')
   }

src/components/Author/AuthorCard/AuthorCard.tsx

@@ -66,7 +66,7 @@ export const AuthorCard = (props: Props) => {
     requireAuthentication(() => {
       openPage(router, 'inbox')
       changeSearchParams({
-        initChat: props.author.id.toString(),
+        initChat: props.author?.id.toString(),
       })
     }, 'discussions')
   }

src/components/Draft/Draft.tsx

@@ -60,7 +60,7 @@ export const Draft = (props: Props) => {
       <div class={styles.actions}>
         <a
           class={styles.actionItem}
-          href={getPagePath(router, 'edit', { shoutId: props.shout.id.toString() })}
+          href={getPagePath(router, 'edit', { shoutId: props.shout?.id.toString() })}
         >
           {t('Edit')}
         </a>

src/components/Editor/SimplifiedEditor.tsx

@@ -48,11 +48,13 @@ type Props = {
   onChange?: (text: string) => void
   variant?: 'minimal' | 'bordered'
   maxLength?: number
+  noLimits?: boolean
   maxHeight?: number
   submitButtonText?: string
   quoteEnabled?: boolean
   imageEnabled?: boolean
   setClear?: boolean
+  resetToInitial?: boolean
   smallHeight?: boolean
   submitByCtrlEnter?: boolean
   onlyBubbleControls?: boolean
@@ -124,7 +126,7 @@ const SimplifiedEditor = (props: Props) => {
         openOnClick: false,
       }),
       CharacterCount.configure({
-        limit: maxLength,
+        limit: props.noLimits ? null : maxLength,
       }),
       Blockquote.configure({
         HTMLAttributes: {
@@ -216,6 +218,10 @@ const SimplifiedEditor = (props: Props) => {
     if (props.setClear) {
       editor().commands.clearContent(true)
     }
+    if (props.resetToInitial) {
+      editor().commands.clearContent(true)
+      editor().commands.setContent(props.initialContent)
+    }
   })
 
   const handleKeyDown = (event) => {

src/components/Feed/ArticleCard/ArticleCard.tsx

@@ -328,7 +328,7 @@ export const ArticleCard = (props: ArticleCardProps) => {
                 <Popover content={t('Edit')} disabled={isActionPopupActive()}>
                   {(triggerRef: (el) => void) => (
                     <div class={styles.shoutCardDetailsItem} ref={triggerRef}>
-                      <a href={getPagePath(router, 'edit', { shoutId: props.article.id.toString() })}>
+                      <a href={getPagePath(router, 'edit', { shoutId: props.article?.id.toString() })}>
                         <Icon name="pencil-outline" class={clsx(styles.icon, styles.feedControlIcon)} />
                         <Icon
                           name="pencil-outline-hover"

src/components/Nav/AuthModal/LoginForm.tsx

@@ -95,33 +95,37 @@ export const LoginForm = () => {
 
     try {
       const { errors } = await signIn({ email: email(), password: password() })
-      console.error('[signIn errors]', errors)
       if (errors?.length > 0) {
-        if (
+        console.warn('[signIn] errors: ', errors)
-          errors.some(
+        errors.forEach((error) => {
-            (error) =>
+          switch (error.message) {
-              error.message.includes('bad user credentials') || error.message.includes('user not found'),
+            case 'user has not signed up email & password': {
-          )
+              setValidationErrors((prev) => ({
-        ) {
+                ...prev,
-          setValidationErrors((prev) => ({
+                password: t('Something went wrong, check email and password'),
-            ...prev,
+              }))
-            password: t('Something went wrong, check email and password'),
+              break
-          }))
+            }
-        } else if (errors.some((error) => error.message.includes('user not found'))) {
+            case 'user not found': {
-          setSubmitError('Пользователь не найден')
+              setValidationErrors((prev) => ({ ...prev, email: t('User was not found') }))
-        } else if (errors.some((error) => error.message.includes('email not verified'))) {
+              break
-          setSubmitError(
+            }
-            <div class={styles.info}>
+            case 'email not verified': {
-              {t('This email is not verified')}
+              setValidationErrors((prev) => ({ ...prev, email: t('This email is not verified') }))
-              {'. '}
+              break
-              <span class={'link'} onClick={handleSendLinkAgainClick}>
+            }
-                {t('Send link again')}
+            default:
-              </span>
+              setSubmitError(
-            </div>,
+                <div class={styles.info}>
-          )
+                  {t('Error', errors[0].message)}
-        } else {
+                  {'. '}
-          setSubmitError(t('Error', errors[0].message))
+                  <span class={'link'} onClick={handleSendLinkAgainClick}>
-        }
+                    {t('Send link again')}
+                  </span>
+                </div>,
+              )
+          }
+        })
         return
       }
       hideModal()

src/components/Nav/AuthModal/PasswordField/PasswordField.tsx

@@ -16,6 +16,9 @@ type Props = {
   onBlur?: (value: string) => void
   variant?: 'login' | 'registration'
   disableAutocomplete?: boolean
+  noValidate?: boolean
+  onFocus?: () => void
+  value?: string
 }
 
 const minLength = 8
@@ -27,7 +30,7 @@ export const PasswordField = (props: Props) => {
   const [showPassword, setShowPassword] = createSignal(false)
   const [error, setError] = createSignal<string>()
 
-  const validatePassword = (passwordToCheck) => {
+  const validatePassword = (passwordToCheck: string) => {
     if (passwordToCheck.length < minLength) {
       return t('Password should be at least 8 characters')
     }
@@ -50,11 +53,13 @@ export const PasswordField = (props: Props) => {
     }
 
     props.onInput(value)
-    const errorValue = validatePassword(value)
+    if (!props.noValidate) {
-    if (errorValue) {
+      const errorValue = validatePassword(value)
-      setError(errorValue)
+      if (errorValue) {
-    } else {
+        setError(errorValue)
-      setError()
+      } else {
+        setError()
+      }
     }
   }
 
@@ -78,6 +83,8 @@ export const PasswordField = (props: Props) => {
           id="password"
           name="password"
           disabled={props.disabled}
+          onFocus={props.onFocus}
+          value={props.value ? props.value : ''}
           autocomplete={props.disableAutocomplete ? 'one-time-code' : 'current-password'}
           type={showPassword() ? 'text' : 'password'}
           placeholder={props.placeholder || t('Password')}

src/components/Nav/HeaderAuth.tsx

@@ -103,7 +103,13 @@ export const HeaderAuth = (props: Props) => {
         <div class={clsx('col-auto col-lg-7', styles.usernav)}>
           <div class={styles.userControl}>
             <Show when={isCreatePostButtonVisible() && session()?.access_token}>
-              <div class={clsx(styles.userControlItem, styles.userControlItemVerbose)}>
+              <div
+                class={clsx(
+                  styles.userControlItem,
+                  styles.userControlItemVerbose,
+                  styles.userControlItemCreate,
+                )}
+              >
                 <a href={getPagePath(router, 'create')}>
                   <span class={styles.textLabel}>{t('Create post')}</span>
                   <Icon name="pencil-outline" class={styles.icon} />
@@ -210,11 +216,17 @@ export const HeaderAuth = (props: Props) => {
             </Show>
 
             <Show when={isCreatePostButtonVisible() && !session()?.access_token}>
-              <div class={clsx(styles.userControlItem, styles.userControlItemVerbose)}>
+              <div
+                class={clsx(
+                  styles.userControlItem,
+                  styles.userControlItemVerbose,
+                  styles.userControlItemCreate,
+                )}
+              >
                 <a href={getPagePath(router, 'create')}>
                   <span class={styles.textLabel}>{t('Create post')}</span>
-                  <Icon name="pencil" class={styles.icon} />
+                  <Icon name="pencil-outline" class={styles.icon} />
-                  <Icon name="pencil" class={clsx(styles.icon, styles.iconHover)} />
+                  <Icon name="pencil-outline-hover" class={clsx(styles.icon, styles.iconHover)} />
                 </a>
               </div>
             </Show>
@@ -227,7 +239,7 @@ export const HeaderAuth = (props: Props) => {
                     <a href="?m=auth&mode=login">
                       <span class={styles.textLabel}>{t('Enter')}</span>
                       <Icon name="key" class={styles.icon} />
-                      {/*<Icon name="user-default" class={clsx(styles.icon, styles.iconHover)} />*/}
+                      <Icon name="key" class={clsx(styles.icon, styles.iconHover)} />
                     </a>
                   </div>
                 </Show>

src/components/ProfileSettings/ProfileSettings.tsx

@@ -20,6 +20,8 @@ import { useLocalize } from '../../context/localize'
 import { useProfileForm } from '../../context/profile'
 import { useSession } from '../../context/session'
 import { useSnackbar } from '../../context/snackbar'
+import { ProfileInput } from '../../graphql/schema/core.gen'
+import styles from '../../pages/profile/Settings.module.scss'
 import { hideModal, showModal } from '../../stores/ui'
 import { clone } from '../../utils/clone'
 import { getImageUrl } from '../../utils/getImageUrl'
@@ -35,14 +37,12 @@ import { Loading } from '../_shared/Loading'
 import { Popover } from '../_shared/Popover'
 import { SocialNetworkInput } from '../_shared/SocialNetworkInput'
 
-import styles from '../../pages/profile/Settings.module.scss'
-
 const SimplifiedEditor = lazy(() => import('../../components/Editor/SimplifiedEditor'))
 const GrowingTextarea = lazy(() => import('../../components/_shared/GrowingTextarea/GrowingTextarea'))
 
 export const ProfileSettings = () => {
   const { t } = useLocalize()
-  const [prevForm, setPrevForm] = createStore({})
+  const [prevForm, setPrevForm] = createStore<ProfileInput>({})
   const [isFormInitialized, setIsFormInitialized] = createSignal(false)
   const [isSaving, setIsSaving] = createSignal(false)
   const [social, setSocial] = createSignal([])
@@ -59,6 +59,7 @@ export const ProfileSettings = () => {
   const { showSnackbar } = useSnackbar()
   const { loadAuthor, session } = useSession()
   const { showConfirm } = useConfirm()
+  const [clearAbout, setClearAbout] = createSignal(false)
 
   createEffect(() => {
     if (Object.keys(form).length > 0 && !isFormInitialized()) {
@@ -121,7 +122,9 @@ export const ProfileSettings = () => {
       declineButtonVariant: 'secondary',
     })
     if (isConfirmed) {
+      setClearAbout(true)
       setForm(clone(prevForm))
+      setClearAbout(false)
     }
   }
 
@@ -171,11 +174,13 @@ export const ProfileSettings = () => {
     on(
       () => deepEqual(form, prevForm),
       () => {
-        setIsFloatingPanelVisible(!deepEqual(form, prevForm))
+        if (Object.keys(prevForm).length > 0) {
+          setIsFloatingPanelVisible(!deepEqual(form, prevForm))
+        }
       },
-      { defer: true },
     ),
   )
+
   const handleDeleteSocialLink = (link) => {
     updateFormField('links', link, true)
   }
@@ -317,6 +322,8 @@ export const ProfileSettings = () => {
 
                     <h4>{t('About')}</h4>
                     <SimplifiedEditor
+                      resetToInitial={clearAbout()}
+                      noLimits={true}
                       variant="bordered"
                       onlyBubbleControls={true}
                       smallHeight={true}

src/components/TableOfContents/TableOfContents.module.scss

@@ -157,7 +157,7 @@
   color: #000;
   font-size: 14px;
   font-style: normal;
-  font-weight: 400;
+  font-weight: 500;
   line-height: 1.8rem;
   text-align: left;
   vertical-align: bottom;

src/components/TableOfContents/TableOfContents.tsx

@@ -86,7 +86,7 @@ export const TableOfContents = (props: Props) => {
           <Show when={isVisible()}>
             <div class={styles.TableOfContentsContainerInner}>
               <div class={styles.TableOfContentsHeader}>
-                <p class={styles.TableOfContentsHeading}>{t('contents')}</p>
+                <p class={styles.TableOfContentsHeading}>{t('Contents')}</p>
               </div>
               <ul class={styles.TableOfContentsHeadingsList}>
                 <For each={headings()}>

src/components/Topic/TopicBadge/TopicBadge.module.scss

@@ -45,7 +45,6 @@
 
   .info {
     @include font-size(1.4rem);
-
     border: none;
 
     // display: flex;
@@ -63,13 +62,11 @@
 
     .title {
       @include font-size(2.2rem);
-
       font-weight: bold;
     }
 
     .description {
       @include font-size(1.6rem);
-
       line-height: 1.4;
       margin: 0.8rem 0;
       -webkit-line-clamp: 2;
@@ -107,7 +104,6 @@
 
     .title {
       @include font-size(1.4rem);
-
       font-weight: 500;
       line-height: 1em;
       color: var(--blue-500);
@@ -116,9 +112,7 @@
 
     .description {
       color: var(--black-400);
-
       @include font-size(1.2rem);
-
       font-weight: 500;
       margin: 0;
     }

src/components/Topic/TopicBadge/TopicBadge.tsx

@@ -48,7 +48,7 @@ export const TopicBadge = (props: Props) => {
     lang() === 'en' ? capitalize(props.topic.slug.replaceAll('-', ' ')) : props.topic.title
 
   return (
-    <div class={clsx(styles.TopicBadge, props.subscriptionsMode)}>
+    <div class={clsx(styles.TopicBadge, { [styles.TopicBadgeSubscriptionsMode]: props.subscriptionsMode })}>
       <div class={styles.content}>
         <div class={styles.basicInfo}>
           <Show when={props.subscriptionsMode}>

src/components/Views/Author/Author.tsx

@@ -3,10 +3,10 @@ import type { Author, Reaction, Shout, Topic } from '../../../graphql/schema/cor
 import { getPagePath } from '@nanostores/router'
 import { clsx } from 'clsx'
 import { For, Match, Show, Switch, createEffect, createMemo, createSignal, on, onMount } from 'solid-js'
-import { Meta, Title } from '../../../context/meta'
 
 import { useFollowing } from '../../../context/following'
 import { useLocalize } from '../../../context/localize'
+import { Meta, Title } from '../../../context/meta'
 import { useSession } from '../../../context/session'
 import { apiClient } from '../../../graphql/client/core'
 import { router, useRouter } from '../../../stores/router'
@@ -76,24 +76,17 @@ export const AuthorView = (props: Props) => {
 
   const fetchData = async (slug: string) => {
     try {
-      const [followsResult, followersResult, authorResult] = await Promise.all([
+      const [subscriptionsResult, followersResult, authorResult] = await Promise.all([
         apiClient.getAuthorFollows({ slug }),
         apiClient.getAuthorFollowers({ slug }),
         loadAuthor({ slug }),
       ])
-      const { authors, topics, error } = followsResult
+      const { authors, topics } = subscriptionsResult
-      if (error) {
-        console.error(error)
-        return
-      }
-      console.debug(authorResult)
       setAuthor(authorResult)
-      console.debug(authors, topics)
       setFollowing([...(authors || []), ...(topics || [])])
-      console.debug(followersResult)
       setFollowers(followersResult || [])
 
-      console.debug('[components.Author] author follows:', followsResult)
+      console.info('[components.Author] data loaded')
     } catch (error) {
       console.error('[components.Author] fetch error', error)
     }
@@ -250,7 +243,7 @@ export const AuthorView = (props: Props) => {
                   class={styles.longBio}
                   classList={{ [styles.longBioExpanded]: isBioExpanded() }}
                 >
-                  <div ref={(el) => (bioContainerRef.current = el)} innerHTML={author().about} />
+                  <div ref={(el) => (bioContainerRef.current = el)} innerHTML={author()?.about || ''} />
                 </div>
 
                 <Show when={showExpandBioControl()}>

src/components/Views/EditView/EditView.tsx

@@ -2,7 +2,7 @@ import { clsx } from 'clsx'
 import deepEqual from 'fast-deep-equal'
 import { Accessor, Show, createMemo, createSignal, lazy, onCleanup, onMount } from 'solid-js'
 import { createStore } from 'solid-js/store'
-import { throttle } from 'throttle-debounce'
+import { debounce } from 'throttle-debounce'
 
 import { ShoutForm, useEditorContext } from '../../../context/editor'
 import { useLocalize } from '../../../context/localize'
@@ -42,9 +42,8 @@ export const EMPTY_TOPIC: Topic = {
   slug: '',
 }
 
-const THROTTLING_INTERVAL = 2000
+const AUTO_SAVE_DELAY = 3000
-const AUTO_SAVE_INTERVAL = 5000
+
-const AUTO_SAVE_DELAY = 5000
 const handleScrollTopButtonClick = (e) => {
   e.preventDefault()
   window.scrollTo({
@@ -104,6 +103,8 @@ export const EditView = (props: Props) => {
     return JSON.parse(form.media || '[]')
   })
 
+  const [hasChanges, setHasChanges] = createSignal(false)
+
   onMount(() => {
     const handleScroll = () => {
       setIsScrolled(window.scrollY > 0)
@@ -113,7 +114,7 @@ export const EditView = (props: Props) => {
     onCleanup(() => {
       window.removeEventListener('scroll', handleScroll)
     })
-    // eslint-disable-next-line unicorn/consistent-function-scoping
+
     const handleBeforeUnload = (event) => {
       if (!deepEqual(prevForm, form)) {
         event.returnValue = t(
@@ -127,8 +128,8 @@ export const EditView = (props: Props) => {
   })
 
   const handleTitleInputChange = (value: string) => {
-    setForm('title', value)
+    handleInputChange('title', value)
-    setForm('slug', slugify(value))
+    handleInputChange('slug', slugify(value))
     if (value) {
       setFormErrors('title', '')
     }
@@ -136,21 +137,21 @@ export const EditView = (props: Props) => {
 
   const handleAddMedia = (data) => {
     const newMedia = [...mediaItems(), ...data]
-    setForm('media', JSON.stringify(newMedia))
+    handleInputChange('media', JSON.stringify(newMedia))
   }
   const handleSortedMedia = (data) => {
-    setForm('media', JSON.stringify(data))
+    handleInputChange('media', JSON.stringify(data))
   }
 
   const handleMediaDelete = (index) => {
     const copy = [...mediaItems()]
     copy.splice(index, 1)
-    setForm('media', JSON.stringify(copy))
+    handleInputChange('media', JSON.stringify(copy))
   }
 
   const handleMediaChange = (index, value) => {
     const updated = mediaItems().map((item, idx) => (idx === index ? value : item))
-    setForm('media', JSON.stringify(updated))
+    handleInputChange('media', JSON.stringify(updated))
   }
 
   const [baseAudioFields, setBaseAudioFields] = createSignal({
@@ -162,7 +163,7 @@ export const EditView = (props: Props) => {
   const handleBaseFieldsChange = (key, value) => {
     if (mediaItems().length > 0) {
       const updated = mediaItems().map((media) => ({ ...media, [key]: value }))
-      setForm('media', JSON.stringify(updated))
+      handleInputChange('media', JSON.stringify(updated))
     } else {
       setBaseAudioFields({ ...baseAudioFields(), [key]: value })
     }
@@ -182,34 +183,32 @@ export const EditView = (props: Props) => {
     }
   }
 
-  let autoSaveTimeOutId: number | string | NodeJS.Timeout
-
   const autoSave = async () => {
-    const hasChanges = !deepEqual(form, prevForm)
+    console.log('autoSave called')
-    const hasTopic = Boolean(form.mainTopic)
+    if (hasChanges()) {
-    if (hasChanges || hasTopic) {
       console.debug('saving draft', form)
       setSaving(true)
       saveDraftToLocalStorage(form)
       await saveDraft(form)
       setPrevForm(clone(form))
-      setTimeout(() => setSaving(false), AUTO_SAVE_DELAY)
+      setSaving(false)
+      setHasChanges(false)
     }
   }
 
-  // Throttle the autoSave function
+  const debouncedAutoSave = debounce(AUTO_SAVE_DELAY, autoSave)
-  const throttledAutoSave = throttle(THROTTLING_INTERVAL, autoSave)
 
-  const autoSaveRecursive = () => {
+  const handleInputChange = (key, value) => {
-    autoSaveTimeOutId = setTimeout(() => {
+    console.log(`[handleInputChange] ${key}: ${value}`)
-      throttledAutoSave()
+    setForm(key, value)
-      autoSaveRecursive()
+    setHasChanges(true)
-    }, AUTO_SAVE_INTERVAL)
+    debouncedAutoSave()
   }
 
   onMount(() => {
-    autoSaveRecursive()
+    onCleanup(() => {
-    onCleanup(() => clearTimeout(autoSaveTimeOutId))
+      debouncedAutoSave.cancel()
+    })
   })
 
   const showSubtitleInput = () => {
@@ -310,7 +309,7 @@ export const EditView = (props: Props) => {
                                 subtitleInput.current = el
                               }}
                               allowEnterKey={false}
-                              value={(value) => setForm('subtitle', value || '')}
+                              value={(value) => handleInputChange('subtitle', value || '')}
                               class={styles.subtitleInput}
                               placeholder={t('Subheader')}
                               initialValue={form.subtitle || ''}
@@ -324,7 +323,7 @@ export const EditView = (props: Props) => {
                               smallHeight={true}
                               placeholder={t('A short introduction to keep the reader interested')}
                               initialContent={form.lead}
-                              onChange={(value) => setForm('lead', value)}
+                              onChange={(value) => handleInputChange('lead', value)}
                             />
                           </Show>
                         </Show>
@@ -345,7 +344,7 @@ export const EditView = (props: Props) => {
                               }
                               isMultiply={false}
                               fileType={'image'}
-                              onUpload={(val) => setForm('coverImageUrl', val[0].url)}
+                              onUpload={(val) => handleInputChange('coverImageUrl', val[0].url)}
                             />
                           }
                         >
@@ -362,7 +361,7 @@ export const EditView = (props: Props) => {
                                 <div
                                   ref={triggerRef}
                                   class={styles.delete}
-                                  onClick={() => setForm('coverImageUrl', null)}
+                                  onClick={() => handleInputChange('coverImageUrl', null)}
                                 >
                                   <Icon name="close-white" />
                                 </div>
@@ -408,7 +407,7 @@ export const EditView = (props: Props) => {
               <Editor
                 shoutId={form.shoutId}
                 initialContent={form.body}
-                onChange={(body) => setForm('body', body)}
+                onChange={(body) => handleInputChange('body', body)}
               />
             </Show>
           </div>

src/components/_shared/SolidSwiper/ArticleCardSwiper.tsx

@@ -37,7 +37,6 @@ export const ArticleCardSwiper = (props: Props) => {
           [styles.Swiper]: props.slides.length > 1,
           [styles.articleMode]: true,
           [styles.ArticleCardSwiper]: props.slides.length > 1,
-          [styles.unswiped]: props.slides.length === 1,
         })}
       >
         <Show when={props.title}>

src/context/connect.tsx

@@ -30,53 +30,57 @@ const ConnectContext = createContext<ConnectContextType>()
 
 export const ConnectProvider = (props: { children: JSX.Element }) => {
   const [messageHandlers, setHandlers] = createSignal<MessageHandler[]>([])
-  // const [messages, setMessages] = createSignal<Array<SSEMessage>>([]);
   const [connected, setConnected] = createSignal(false)
   const { session } = useSession()
+  const [retried, setRetried] = createSignal<number>(0)
 
   const addHandler = (handler: MessageHandler) => {
     setHandlers((hhh) => [...hhh, handler])
   }
 
-  const [retried, setRetried] = createSignal<number>(0)
   createEffect(async () => {
     const token = session()?.access_token
-    if (token && !connected()) {
+    if (token && !connected() && retried() <= RECONNECT_TIMES) {
       console.info('[context.connect] init SSE connection')
-      await fetchEventSource('https://connect.discours.io', {
+      try {
-        method: 'GET',
+        await fetchEventSource('https://connect.discours.io', {
-        headers: {
+          method: 'GET',
-          'Content-Type': 'application/json',
+          headers: {
-          Authorization: token,
+            'Content-Type': 'application/json',
-        },
+            Authorization: token,
-        onmessage(event) {
+          },
-          const m: SSEMessage = JSON.parse(event.data || '{}')
+          onmessage(event) {
-          console.log('[context.connect] Received message:', m)
+            const m: SSEMessage = JSON.parse(event.data || '{}')
-
+            console.log('[context.connect] Received message:', m)
-          // Iterate over all registered handlers and call them
+            messageHandlers().forEach((handler) => handler(m))
-          messageHandlers().forEach((handler) => handler(m))
+          },
-        },
+          onopen: (response) => {
-        async onopen(response) {
+            console.log('[context.connect] SSE connection opened', response)
-          console.log('[context.connect] SSE connection opened', response)
+            if (response.ok && response.headers.get('content-type') === EventStreamContentType) {
-          if (response.ok && response.headers.get('content-type') === EventStreamContentType) {
+              setConnected(true)
-            setConnected(true)
+              setRetried(0)
-          } else if (response.status === 401) {
+              return Promise.resolve()
-            throw new Error('unauthorized')
+            }
-          } else {
+            return Promise.reject(`SSE: cannot connect to real-time updates, status: ${response.status}`)
-            setRetried((r) => r + 1)
+          },
-            throw new Error('Internal Error')
+          onclose() {
-          }
+            console.log('[context.connect] SSE connection closed by server')
-        },
+            setConnected(false)
-        onclose() {
+            if (retried() < RECONNECT_TIMES) {
-          console.log('[context.connect] SSE connection closed by server')
+              setRetried((r) => r + 1)
-          setConnected(false)
+            }
-        },
+          },
-        onerror(err) {
+          onerror(err) {
-          if (err.message === 'unauthorized' || retried() > RECONNECT_TIMES) {
+            console.error('[context.connect] SSE connection error:', err)
-            throw err // rethrow to stop the operation
+            setConnected(false)
-          }
+            if (retried() < RECONNECT_TIMES) {
-        },
+              setRetried((r) => r + 1)
-      })
+            } else throw Error(err)
+          },
+        })
+      } catch (error) {
+        console.error('[context.connect] SSE connection failed:', error)
+      }
     }
   })
 

src/context/session.tsx

@@ -13,6 +13,7 @@ import {
   LoginInput,
   ResendVerifyEmailInput,
   SignupInput,
+  UpdateProfileInput,
   VerifyEmailInput,
 } from '@authorizerdev/authorizer-js'
 import {
@@ -58,6 +59,7 @@ export type SessionContextType = {
   ) => void
   signUp: (params: SignupInput) => Promise<{ data: AuthToken; errors: Error[] }>
   signIn: (params: LoginInput) => Promise<{ data: AuthToken; errors: Error[] }>
+  updateProfile: (params: UpdateProfileInput) => Promise<{ data: AuthToken; errors: Error[] }>
   signOut: () => Promise<void>
   oauth: (provider: string) => Promise<void>
   forgotPassword: (
@@ -223,9 +225,12 @@ export const SessionProvider = (props: {
           const appdata = session()?.user.app_data
           if (appdata) {
             const { profile } = appdata
-            setAuthor(profile)
+            if (profile?.id) {
-            addAuthors([profile])
+              setAuthor(profile)
-            if (!profile) loadAuthor()
+              addAuthors([profile])
+            } else {
+              setTimeout(loadAuthor, 15)
+            }
           }
         } catch (e) {
           console.error(e)
@@ -305,6 +310,8 @@ export const SessionProvider = (props: {
   }
   const signUp = async (params: SignupInput) => await authenticate(authorizer().signup, params)
   const signIn = async (params: LoginInput) => await authenticate(authorizer().login, params)
+  const updateProfile = async (params: UpdateProfileInput) =>
+    await authenticate(authorizer().updateProfile, params)
 
   const signOut = async () => {
     const authResult: ApiResponse<GenericResponse> = await authorizer().logout()
@@ -381,6 +388,7 @@ export const SessionProvider = (props: {
     signIn,
     signOut,
     confirmEmail,
+    updateProfile,
     setIsSessionLoaded,
     setSession,
     setAuthor,

src/pages/create.page.tsx

@@ -18,7 +18,7 @@ import styles from '../styles/Create.module.scss'
 const handleCreate = async (layout: LayoutType) => {
   const shout = await apiClient.createArticle({ article: { layout: layout } })
   redirectPage(router, 'edit', {
-    shoutId: shout.id.toString(),
+    shoutId: shout?.id.toString(),
   })
 }
 

src/pages/edit.page.tsx

@@ -1,4 +1,4 @@
-import { Show, Suspense, createEffect, createMemo, createSignal, lazy, on, onMount } from 'solid-js'
+import { Show, Suspense, createEffect, createMemo, createSignal, lazy, on } from 'solid-js'
 
 import { AuthGuard } from '../components/AuthGuard'
 import { Loading } from '../components/_shared/Loading'
@@ -7,7 +7,7 @@ import { useLocalize } from '../context/localize'
 import { useSession } from '../context/session'
 import { apiClient } from '../graphql/client/core'
 import { Shout } from '../graphql/schema/core.gen'
-import { router } from '../stores/router'
+import { router, useRouter } from '../stores/router'
 
 import { redirectPage } from '@nanostores/router'
 import { useSnackbar } from '../context/snackbar'
@@ -33,6 +33,7 @@ const getContentTypeTitle = (layout: LayoutType) => {
 export const EditPage = () => {
   const { t } = useLocalize()
   const { session } = useSession()
+  const { page } = useRouter()
   const snackbar = useSnackbar()
 
   const fail = async (error: string) => {
@@ -45,12 +46,22 @@ export const EditPage = () => {
   const [shoutId, setShoutId] = createSignal<number>(0)
   const [shout, setShout] = createSignal<Shout>()
 
-  onMount(() => {
+  createEffect(
-    const shoutId = window.location.pathname.split('/').pop()
+    on(
-    const shoutIdFromUrl = Number.parseInt(shoutId ?? '0', 10)
+      () => page(),
-    console.debug(`editing shout ${shoutIdFromUrl}`)
+      (p) => {
-    if (shoutIdFromUrl) setShoutId(shoutIdFromUrl)
+        if (p?.path) {
-  })
+          console.debug(p?.path)
+          const shoutId = p?.path.split('/').pop()
+          const shoutIdFromUrl = Number.parseInt(shoutId ?? '0', 10)
+          console.debug(`editing shout ${shoutIdFromUrl}`)
+          if (shoutIdFromUrl) {
+            setShoutId(shoutIdFromUrl)
+          }
+        }
+      },
+    ),
+  )
 
   createEffect(
     on([session, shout, shoutId], async ([ses, sh, shid]) => {
@@ -63,6 +74,7 @@ export const EditPage = () => {
         }
       }
     }),
+    { defer: true },
   )
 
   const title = createMemo(() => {

src/pages/profile/Settings.module.scss

@@ -100,17 +100,6 @@ h5 {
   }
 }
 
-.passwordToggleControl {
-  position: absolute;
-  right: 1em;
-  transform: translateY(-50%);
-  top: 50%;
-}
-
-.passwordInput {
-  padding-right: 3em !important;
-}
-
 .searchContainer {
   margin-top: 2.4rem;
 }
@@ -331,3 +320,12 @@ div[data-lastpass-infield="true"] {
   opacity: 0 !important;
 }
 
+
+.emailValidationError {
+  position: absolute;
+  top: 100%;
+  font-size: 12px;
+  line-height: 16px;
+  margin-top: 0.3em;
+  color: var(--danger-color);
+}

src/pages/profile/profileSecurity.page.tsx

@@ -6,135 +6,321 @@ import { Icon } from '../../components/_shared/Icon'
 import { PageLayout } from '../../components/_shared/PageLayout'
 import { useLocalize } from '../../context/localize'
 
+import { UpdateProfileInput } from '@authorizerdev/authorizer-js'
+import { Show, createEffect, createSignal, on } from 'solid-js'
+import { PasswordField } from '../../components/Nav/AuthModal/PasswordField'
+import { Button } from '../../components/_shared/Button'
+import { Loading } from '../../components/_shared/Loading'
+import { useConfirm } from '../../context/confirm'
+import { useSession } from '../../context/session'
+import { useSnackbar } from '../../context/snackbar'
+import { DEFAULT_HEADER_OFFSET } from '../../stores/router'
+import { validateEmail } from '../../utils/validateEmail'
 import styles from './Settings.module.scss'
 
+type FormField = 'oldPassword' | 'newPassword' | 'newPasswordConfirm' | 'email'
 export const ProfileSecurityPage = () => {
   const { t } = useLocalize()
+  const { updateProfile, session, isSessionLoaded } = useSession()
+  const { showSnackbar } = useSnackbar()
+  const { showConfirm } = useConfirm()
+
+  const [newPasswordError, setNewPasswordError] = createSignal<string | undefined>()
+  const [oldPasswordError, setOldPasswordError] = createSignal<string | undefined>()
+  const [emailError, setEmailError] = createSignal<string | undefined>()
+  const [isSubmitting, setIsSubmitting] = createSignal<boolean>()
+  const [isFloatingPanelVisible, setIsFloatingPanelVisible] = createSignal(false)
+
+  const initialState = {
+    oldPassword: undefined,
+    newPassword: undefined,
+    newPasswordConfirm: undefined,
+    email: undefined,
+  }
+  const [formData, setFormData] = createSignal(initialState)
+  const oldPasswordRef: { current: HTMLDivElement } = { current: null }
+  const newPasswordRepeatRef: { current: HTMLDivElement } = { current: null }
+
+  createEffect(
+    on(
+      () => session()?.user?.email,
+      () => {
+        setFormData((prevData) => ({
+          ...prevData,
+          ['email']: session()?.user?.email,
+        }))
+      },
+    ),
+  )
+  const handleInputChange = (name: FormField, value: string) => {
+    if (
+      name === 'email' ||
+      (name === 'newPasswordConfirm' && value && value?.length > 0 && !emailError() && !newPasswordError())
+    ) {
+      setIsFloatingPanelVisible(true)
+    } else {
+      setIsFloatingPanelVisible(false)
+    }
+    setFormData((prevData) => ({
+      ...prevData,
+      [name]: value,
+    }))
+  }
+
+  const handleCancel = async () => {
+    const isConfirmed = await showConfirm({
+      confirmBody: t('Do you really want to reset all changes?'),
+      confirmButtonVariant: 'primary',
+      declineButtonVariant: 'secondary',
+    })
+    if (isConfirmed) {
+      setEmailError()
+      setFormData({
+        ...initialState,
+        ['email']: session()?.user?.email,
+      })
+      setIsFloatingPanelVisible(false)
+    }
+  }
+  const handleChangeEmail = (_value: string) => {
+    if (!validateEmail(formData()['email'])) {
+      setEmailError(t('Invalid email'))
+      return
+    }
+  }
+  const handleCheckNewPassword = (value: string) => {
+    handleInputChange('newPasswordConfirm', value)
+    if (value !== formData()['newPassword']) {
+      const rect = newPasswordRepeatRef.current.getBoundingClientRect()
+      const topPosition = window.scrollY + rect.top - DEFAULT_HEADER_OFFSET * 2
+      window.scrollTo({
+        top: topPosition,
+        left: 0,
+        behavior: 'smooth',
+      })
+      showSnackbar({ type: 'error', body: t('Incorrect new password confirm') })
+      setNewPasswordError(t('Passwords are not equal'))
+    }
+  }
+
+  const handleSubmit = async () => {
+    setIsSubmitting(true)
+
+    const options: UpdateProfileInput = {
+      old_password: formData()['oldPassword'],
+      new_password: formData()['newPassword'] || formData()['oldPassword'],
+      confirm_new_password: formData()['newPassword'] || formData()['oldPassword'],
+      email: formData()['email'],
+    }
+
+    try {
+      const { errors } = await updateProfile(options)
+      if (errors.length > 0) {
+        console.error(errors)
+        if (errors.some((obj) => obj.message === 'incorrect old password')) {
+          setOldPasswordError(t('Incorrect old password'))
+          showSnackbar({ type: 'error', body: t('Incorrect old password') })
+          const rect = oldPasswordRef.current.getBoundingClientRect()
+          const topPosition = window.scrollY + rect.top - DEFAULT_HEADER_OFFSET * 2
+          window.scrollTo({
+            top: topPosition,
+            left: 0,
+            behavior: 'smooth',
+          })
+          setIsFloatingPanelVisible(false)
+        }
+        return
+      }
+      showSnackbar({ type: 'success', body: t('Profile successfully saved') })
+    } catch (error) {
+      console.error(error)
+    } finally {
+      setIsSubmitting(false)
+    }
+  }
 
   return (
     <PageLayout title={t('Profile')}>
       <AuthGuard>
-        <div class="wide-container">
+        <Show when={isSessionLoaded()} fallback={<Loading />}>
-          <div class="row">
+          <div class="wide-container">
-            <div class="col-md-5">
+            <div class="row">
-              <div class={clsx('left-navigation', styles.leftNavigation)}>
+              <div class="col-md-5">
-                <ProfileSettingsNavigation />
+                <div class={clsx('left-navigation', styles.leftNavigation)}>
+                  <ProfileSettingsNavigation />
+                </div>
               </div>
-            </div>
 
-            <div class="col-md-19">
+              <div class="col-md-19">
-              <div class="row">
+                <div class="row">
-                <div class="col-md-20 col-lg-18 col-xl-16">
+                  <div class="col-md-20 col-lg-18 col-xl-16">
-                  <h1>Вход и&nbsp;безопасность</h1>
+                    <h1>{t('Login and security')}</h1>
-                  <p class="description">Настройки аккаунта, почты, пароля и&nbsp;способов входа.</p>
+                    <p class="description">
-
+                      {t('Settings for account, email, password and login methods.')}
-                  <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="text"
-                        name="password-current"
-                        id="password-current"
-                        class={clsx(styles.passwordInput, 'nolabel')}
-                      />
-                      <button type="button" class={styles.passwordToggleControl}>
-                        <Icon name="password-hide" />
-                      </button>
-                    </div>
-
-                    <h5>Новый пароль</h5>
-                    <div class="pretty-form__item">
-                      <input
-                        type="password"
-                        name="password-new"
-                        id="password-new"
-                        class={clsx(styles.passwordInput, 'nolabel')}
-                      />
-                      <button type="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 type="button" class={styles.passwordToggleControl}>
-                        <Icon name="password-open" />
-                      </button>
-                    </div>
-
-                    <h4>Социальные сети</h4>
-                    <h5>Google</h5>
-                    <div class="pretty-form__item">
-                      <p>
-                        <button class={clsx('button', 'button--light', styles.socialButton)} type="button">
-                          <Icon name="google" class={styles.icon} />
-                          Привязать
-                        </button>
-                      </p>
-                    </div>
-
-                    <h5>VK</h5>
-                    <div class="pretty-form__item">
-                      <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" type="submit">
-                        Сохранить настройки
-                      </button>
                     </p>
-                  </form>
+
+                    <form>
+                      <h4>{t('Email')}</h4>
+                      <div class="pretty-form__item">
+                        <input
+                          type="text"
+                          name="email"
+                          id="email"
+                          disabled={isSubmitting()}
+                          value={formData()['email'] || ''}
+                          placeholder={t('Email')}
+                          onFocus={() => setEmailError()}
+                          onInput={(event) => handleChangeEmail(event.target.value)}
+                        />
+                        <label for="email">{t('Email')}</label>
+                        <Show when={emailError()}>
+                          <div
+                            class={clsx(styles.emailValidationError, {
+                              'form-message--error': emailError(),
+                            })}
+                          >
+                            {emailError()}
+                          </div>
+                        </Show>
+                      </div>
+
+                      <h4>{t('Change password')}</h4>
+                      <h5>{t('Current password')}</h5>
+
+                      <div ref={(el) => (oldPasswordRef.current = el)}>
+                        <PasswordField
+                          onFocus={() => setOldPasswordError()}
+                          setError={oldPasswordError()}
+                          onInput={(value) => handleInputChange('oldPassword', value)}
+                          value={formData()['oldPassword'] ?? null}
+                          disabled={isSubmitting()}
+                        />
+                      </div>
+
+                      <h5>{t('New password')}</h5>
+                      <PasswordField
+                        onInput={(value) => {
+                          handleInputChange('newPassword', value)
+                          handleInputChange('newPasswordConfirm', '')
+                        }}
+                        value={formData()['newPassword'] ?? ''}
+                        disabled={isSubmitting()}
+                        disableAutocomplete={true}
+                      />
+
+                      <h5>{t('Confirm your new password')}</h5>
+                      <div ref={(el) => (newPasswordRepeatRef.current = el)}>
+                        <PasswordField
+                          noValidate={true}
+                          value={
+                            formData()['newPasswordConfirm']?.length > 0
+                              ? formData()['newPasswordConfirm']
+                              : null
+                          }
+                          onFocus={() => setNewPasswordError()}
+                          setError={newPasswordError()}
+                          onInput={(value) => handleCheckNewPassword(value)}
+                          disabled={isSubmitting()}
+                          disableAutocomplete={true}
+                        />
+                      </div>
+                      <h4>{t('Social networks')}</h4>
+                      <h5>Google</h5>
+                      <div class="pretty-form__item">
+                        <p>
+                          <button
+                            class={clsx('button', 'button--light', styles.socialButton)}
+                            type="button"
+                          >
+                            <Icon name="google" class={styles.icon} />
+                            {t('Connect')}
+                          </button>
+                        </p>
+                      </div>
+
+                      <h5>VK</h5>
+                      <div class="pretty-form__item">
+                        <p>
+                          <button
+                            class={clsx(styles.socialButton, 'button', 'button--light')}
+                            type="button"
+                          >
+                            <Icon name="vk" class={styles.icon} />
+                            {t('Connect')}
+                          </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} />
+                            {t('Connect')}
+                          </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} />
+                            {t('Connect')}
+                          </button>
+                        </p>
+                      </div>
+                    </form>
+                  </div>
                 </div>
               </div>
             </div>
           </div>
-        </div>
+        </Show>
+
+        <Show when={isFloatingPanelVisible() && !emailError() && !newPasswordError()}>
+          <div class={styles.formActions}>
+            <div class="wide-container">
+              <div class="row">
+                <div class="col-md-19 offset-md-5">
+                  <div class="row">
+                    <div class="col-md-20 col-lg-18 col-xl-16">
+                      <div class={styles.content}>
+                        <Button
+                          class={styles.cancel}
+                          variant="light"
+                          value={
+                            <>
+                              <span class={styles.cancelLabel}>{t('Cancel changes')}</span>
+                              <span class={styles.cancelLabelMobile}>{t('Cancel')}</span>
+                            </>
+                          }
+                          onClick={handleCancel}
+                        />
+                        <Button
+                          onClick={handleSubmit}
+                          variant="primary"
+                          disabled={isSubmitting()}
+                          value={isSubmitting() ? t('Saving...') : t('Save settings')}
+                        />
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </Show>
       </AuthGuard>
     </PageLayout>
   )