Hide comment editor for no auth users

src/components/_shared/CommentEditor/CommentEditor.tsx

@@ -81,34 +81,31 @@ const CommentEditor = (props: Props) => {
 
   return (
     <>
-      <div class={styles.commentEditor}>
+      <Show
-        <div
+        when={session()?.user?.slug}
-          class={clsx('ProseMirrorOverrides', styles.textarea)}
+        fallback={
-          ref={(el) => (editorElRef.current = el)}
+          <div class={styles.signInMessage} id="comments">
-        />
+            {t('To write a comment, you must')}&nbsp;
-        <div class={styles.actions}>
+            <a href="?modal=auth&mode=register">{t('sign up')}</a>
-          <div class={styles.menu} ref={(el) => (menuElRef.current = el)} />
+            &nbsp;{t('or')}&nbsp;
-          <div class={styles.buttons}>
+            <a href="?modal=auth&mode=login">{t('sign in')}</a>
-            <Show when={session()?.user?.slug}>
+          </div>
-              <Button value={t('Send')} variant="primary" onClick={handleSubmitButtonClick} />
+        }
-            </Show>
+      >
-            <Button value={t('cancel')} variant="secondary" onClick={clearEditor} />
+        <div class={styles.commentEditor}>
+          <div
+            class={clsx('ProseMirrorOverrides', styles.textarea)}
+            ref={(el) => (editorElRef.current = el)}
+          />
+          <div class={styles.actions}>
+            <div class={styles.menu} ref={(el) => (menuElRef.current = el)} />
+            <div class={styles.buttons}>
+              <Show when={session()?.user?.slug}>
+                <Button value={t('Send')} variant="primary" onClick={handleSubmitButtonClick} />
+              </Show>
+              <Button value={t('cancel')} variant="secondary" onClick={clearEditor} />
+            </div>
           </div>
-        </div>
-      </div>
-      <div class={styles.helpText}>{'"Cmd-Z": Undo, "Cmd-Y": Redo'}</div>
-      <Show when={!session()?.user?.slug}>
-        <div class={styles.signInMessage} id="comments">
-          {t('To write a comment, you must')}&nbsp;
-          <span
-            class={styles.link}
-            onClick={(evt) => {
-              evt.preventDefault()
-              showModal('auth')
-            }}
-          >
-            {t('sign up or sign in')}
-          </span>
         </div>
       </Show>
     </>

src/components/_shared/CommentEditor/styles/CommentEditor.module.scss

@@ -25,13 +25,6 @@
   }
 }
 
-.helpText {
-  font-size: 12px;
-  color: #696969;
-  margin: 12px 0;
-  font-style: italic;
-}
-
 .signInMessage {
   background: #f1f2f3;
   border-radius: 8px;

src/locales/ru.json

@@ -179,7 +179,9 @@
   "personal data usage and email notifications": "на обработку персональных данных и на получение почтовых уведомлений",
   "post": "пост",
   "register": "зарегистрируйтесь",
-  "sign up or sign in": "зарегистрироваться или войти",
+  "sign up": "зарегистрироваться",
+  "or": "или",
+  "sign in": "войти",
   "terms of use": "правилами пользования сайтом",
   "topics": "темы",
   "user already exist": "пользователь уже существует",