diff --git a/public/locales/en/translation.json b/public/locales/en/translation.json index 33bf7fa8..2911d277 100644 --- a/public/locales/en/translation.json +++ b/public/locales/en/translation.json @@ -2,6 +2,7 @@ "A guide to horizontal editorial: how an open journal works": "A guide to horizontal editorial: how an open journal works", "About": "About", "About the project": "About the project", + "Add": "Add", "Add a few topics so that the reader knows what your content is about and can find it on pages of topics that interest them. Topics can be swapped, the first topic becomes the title": "Add a few topics so that the reader knows what your content is about and can find it on pages of topics that interest them. Topics can be swapped, the first topic becomes the title", "Add a link or click plus to embed media": "Add a link or click plus to embed media", "Add an embed widget": "Add an embed widget", @@ -24,6 +25,7 @@ "Alignment left": "Alignment left", "Alignment right": "Alignment right", "All": "All", + "All articles": "All articles", "All authors": "All authors", "All posts": "All posts", "All topics": "All topics", @@ -59,18 +61,26 @@ "By title": "By title", "By updates": "By updates", "By views": "By views", + "Can make any changes, accept or reject suggestions, and share access with others": "Can make any changes, accept or reject suggestions, and share access with others", + "Can offer edits and comments, but cannot edit the post or share access with others": "Can offer edits and comments, but cannot edit the post or share access with others", + "Can write and edit text directly, and accept or reject suggestions from others": "Can write and edit text directly, and accept or reject suggestions from others", "Cancel": "Cancel", "Cancel changes": "Cancel changes", + "Change password": "Change password", "Characters": "Знаков", "Chat Title": "Chat Title", "Choose a post type": "Choose a post type", "Choose a title image for the article. You can immediately see how the publication card will look like.": "Choose a title image for the article. You can immediately see how the publication card will look like.", "Choose who you want to write to": "Choose who you want to write to", + "Co-author": "Co-author", "Collaborate": "Help Edit", + "Collaborators": "Collaborators", "Collections": "Collections", "Come up with a subtitle for your story": "Come up with a subtitle for your story", "Come up with a title for your story": "Come up with a title for your story", + "Coming soon": "Coming soon", "Comment successfully deleted": "Comment successfully deleted", + "Commentator": "Commentator", "Comments": "Comments", "Communities": "Communities", "Community Discussion Rules": "Community Discussion Rules", @@ -119,9 +129,11 @@ "Edit": "Edit", "Edit profile": "Edit profile", "Editing": "Editing", + "Editor": "Editor", "Email": "Mail", "Enter": "Enter", "Enter URL address": "Enter URL address", + "Enter a new password": "Enter a new password", "Enter footnote text": "Enter footnote text", "Enter image description": "Enter image description", "Enter image title": "Enter image title", @@ -191,6 +203,7 @@ "Invalid image URL": "Invalid image URL", "Invalid url format": "Invalid url format", "Invite co-authors": "Invite co-authors", + "Invite collaborators": "Invite collaborators", "Invite to collab": "Invite to Collab", "It does not look like url": "It doesn't look like a link", "Italic": "Italic", @@ -237,6 +250,7 @@ "Nothing here yet": "There's nothing here yet", "Nothing is here": "There is nothing here", "Notifications": "Notifications", + "Now you can enter a new password, it must contain at least 8 characters and not be the same as the previous password": "Now you can enter a new password, it must contain at least 8 characters and not be the same as the previous password", "Or paste a link to an image": "Or paste a link to an image", "Ordered list": "Ordered list", "Our regular contributor": "Our regular contributor", @@ -250,6 +264,7 @@ "Password should be at least 8 characters": "Password should be at least 8 characters", "Password should contain at least one number": "Password should contain at least one number", "Password should contain at least one special character: !@#$%^&*": "Password should contain at least one special character: !@#$%^&*", + "Password updated!": "Password updated!", "Passwords are not equal": "Passwords are not equal", "Paste Embed code": "Paste Embed code", "Personal": "Personal", @@ -354,9 +369,12 @@ "This comment has not yet been rated": "This comment has not yet been rated", "This email is already taken. If it's you": "This email is already taken. If it's you", "This functionality is currently not available, we would like to work on this issue. Use the download link.": "This functionality is currently not available, we would like to work on this issue. Use the download link.", + "This month": "This month", "This post has not been rated yet": "This post has not been rated yet", "This way we ll realize that you re a real person and ll take your vote into account. And you ll see how others voted": "This way we ll realize that you re a real person and ll take your vote into account. And you ll see how others voted", "This way you ll be able to subscribe to authors, interesting topics and customize your feed": "This way you ll be able to subscribe to authors, interesting topics and customize your feed", + "This week": "This week", + "This year": "This year", "To leave a comment please": "To leave a comment please", "To write a comment, you must": "To write a comment, you must", "Top authors": "Authors rating", @@ -385,6 +403,7 @@ "Video": "Video", "Video format not supported": "Video format not supported", "Views": "Views", + "We are working on collaborative editing of articles and in the near future you will have an amazing opportunity - to create together with your colleagues": "We are working on collaborative editing of articles and in the near future you will have an amazing opportunity - to create together with your colleagues", "We can't find you, check email or": "We can't find you, check email or", "We know you, please try to login": "This email address is already registered, please try to login", "We've sent you a message with a link to enter our website.": "We've sent you an email with a link to your email. Follow the link in the email to enter our website.", @@ -407,7 +426,9 @@ "Write good articles, comment\nand it won't be so empty here": "Write good articles, comment\nand it won't be so empty here", "Write message": "Write a message", "Write to us": "Write to us", + "Write your colleagues name or email": "Write your colleague's name or email", "You can download multiple tracks at once in .mp3, .wav or .flac formats": "You can download multiple tracks at once in .mp3, .wav or .flac formats", + "You can now login using your new password": "Теперь вы можете входить с помощью нового пароля", "You were successfully authorized": "You were successfully authorized", "You ll be able to participate in discussions, rate others' comments and learn about new responses": "You ll be able to participate in discussions, rate others' comments and learn about new responses", "You've confirmed email": "You've confirmed email", diff --git a/public/locales/ru/translation.json b/public/locales/ru/translation.json index 25cd394c..aa5e635c 100644 --- a/public/locales/ru/translation.json +++ b/public/locales/ru/translation.json @@ -3,6 +3,7 @@ "A short introduction to keep the reader interested": "Добавьте вступление, чтобы заинтересовать читателя", "About": "О себе", "About the project": "О проекте", + "Add": "Добавить", "Add a few topics so that the reader knows what your content is about and can find it on pages of topics that interest them. Topics can be swapped, the first topic becomes the title": "Добавьте несколько тем, чтобы читатель знал, о чем ваш материал, и мог найти его на страницах интересных ему тем. Темы можно менять местами, первая тема становится заглавной", "Add a link or click plus to embed media": "Добавьте ссылку или нажмите плюс для вставки медиа", "Add an embed widget": "Добавить embed-виджет", @@ -26,6 +27,7 @@ "Alignment left": "По левому краю", "Alignment right": "По правому краю", "All": "Все", + "All articles": "Все материалы", "All authors": "Все авторы", "All posts": "Все публикации", "All topics": "Все темы", @@ -62,19 +64,27 @@ "By title": "По названию", "By updates": "По обновлениям", "By views": "По просмотрам", + "Can make any changes, accept or reject suggestions, and share access with others": "Может вносить любые изменения, принимать и отклонять предложения, а также делиться доступом с другими", + "Can offer edits and comments, but cannot edit the post or share access with others": "Может предлагать правки и комментарии, но не может изменять пост и делиться доступом с другими", + "Can write and edit text directly, and accept or reject suggestions from others": "Может писать и редактировать текст напрямую, а также принимать или отклонять предложения других", "Cancel": "Отмена", "Cancel changes": "Отменить изменения", + "Change password": "Сменить пароль", "Characters": "Знаков", "Chat Title": "Тема дискурса", "Choose a post type": "Выберите тип публикации", "Choose a title image for the article. You can immediately see how the publication card will look like.": "Выберите заглавное изображение для статьи. Тут же сразу можно увидеть как будет выглядеть карточка публикации.", "Choose who you want to write to": "Выберите кому хотите написать", + "Co-author": "Соавтор", "Collaborate": "Помочь редактировать", + "Collaborators": "Соавторы", "Collections": "Коллекции", "Come up with a subtitle for your story": "Придумайте подзаголовок вашей истории", "Come up with a title for your story": "Придумайте заголовок вашей истории", + "Coming soon": "Уже скоро", "Comment": "Комментировать", "Comment successfully deleted": "Комментарий успешно удален", + "Commentator": "Комментатор", "Comments": "Комментарии", "Communities": "Сообщества", "Community Discussion Rules": "Правила дискуссий в сообществе", @@ -125,9 +135,11 @@ "Edit profile": "Редактировать профиль", "Edited": "Отредактирован", "Editing": "Редактирование", + "Editor": "Редактор", "Email": "Почта", "Enter": "Войти", "Enter URL address": "Введите адрес ссылки", + "Enter a new password": "Введите новый пароль", "Enter footnote text": "Введите текст сноски", "Enter image description": "Введите описание изображения", "Enter image title": "Введите название изображения", @@ -200,6 +212,7 @@ "Invalid image URL": "Некорректная ссылка на изображение", "Invalid url format": "Неверный формат ссылки", "Invite co-authors": "Пригласить соавторов", + "Invite collaborators": "Пригласить соавторов", "Invite experts": "Пригласить экспертов", "Invite to collab": "Пригласить к участию", "It does not look like url": "Это не похоже на ссылку", @@ -249,6 +262,7 @@ "Nothing here yet": "Здесь пока ничего нет", "Nothing is here": "Здесь ничего нет", "Notifications": "Уведомления", + "Now you can enter a new password, it must contain at least 8 characters and not be the same as the previous password": "Теперь можете ввести новый пароль, он должен содержать минимум 8 символов и не совпадать с предыдущим паролем", "Or paste a link to an image": "Или вставьте ссылку на изображение", "Ordered list": "Нумерованный список", "Our regular contributor": "Наш постоянный автор", @@ -262,6 +276,7 @@ "Password should be at least 8 characters": "Пароль должен быть не менее 8 символов", "Password should contain at least one number": "Пароль должен содержать хотя бы одну цифру", "Password should contain at least one special character: !@#$%^&*": "Пароль должен содержать хотя бы один спецсимвол: !@#$%^&*", + "Password updated!": "Пароль обновлен!", "Passwords are not equal": "Пароли не совпадают", "Paste Embed code": "Вставьте embed код", "Personal": "Личные", @@ -375,9 +390,12 @@ "This comment has not yet been rated": "Этот комментарий еще пока никто не оценил", "This email is already taken. If it's you": "Такой email уже зарегистрирован. Если это вы", "This functionality is currently not available, we would like to work on this issue. Use the download link.": "В данный момент этот функционал не доступен, бы работаем над этой проблемой. Воспользуйтесь загрузкой по ссылке.", + "This month": "За месяц", "This post has not been rated yet": "Эту публикацию еще пока никто не оценил", "This way we ll realize that you re a real person and ll take your vote into account. And you ll see how others voted": "Так мы поймем, что вы реальный человек, и учтем ваш голос. А вы увидите, как проголосовали другие", "This way you ll be able to subscribe to authors, interesting topics and customize your feed": "Так вы сможете подписаться на авторов, интересные темы и настроить свою ленту", + "This week": "За неделю", + "This year": "За год", "To leave a comment please": "Чтобы оставить комментарий, необходимо", "To write a comment, you must": "Чтобы написать комментарий, необходимо", "Top authors": "Рейтинг авторов", @@ -406,6 +424,7 @@ "Video": "Видео", "Video format not supported": "Тип видео не поддерживается", "Views": "Просмотры", + "We are working on collaborative editing of articles and in the near future you will have an amazing opportunity - to create together with your colleagues": "Мы работаем над коллаборативным редактированием статей и в ближайшем времени у вас появиться удивительная возможность - творить вместе с коллегами", "We can't find you, check email or": "Не можем вас найти, проверьте адрес электронной почты или", "We know you, please try to login": "Такой адрес почты уже зарегистрирован, попробуйте залогиниться", "We've sent you a message with a link to enter our website.": "Мы выслали вам письмо с ссылкой на почту. Перейдите по ссылке в письме, чтобы войти на сайт.", @@ -429,7 +448,9 @@ "Write good articles, comment\nand it won't be so empty here": "Пишите хорошие статьи, комментируйте,\nи здесь станет не так пусто", "Write message": "Написать сообщение", "Write to us": "Напишите нам", + "Write your colleagues name or email": "Напишите имя или e-mail коллеги", "You can download multiple tracks at once in .mp3, .wav or .flac formats": "Можно загрузить сразу несколько треков в форматах .mp3, .wav или .flac", + "You can now login using your new password": "Теперь вы можете входить с помощью нового пароля", "You was successfully authorized": "Вы были успешно авторизованы", "You ll be able to participate in discussions, rate others' comments and learn about new responses": "Вы сможете участвовать в обсуждениях, оценивать комментарии других и узнавать о новых ответах", "You've confirmed email": "Вы подтвердили почту", diff --git a/src/components/Article/FullArticle.tsx b/src/components/Article/FullArticle.tsx index daa35ccc..eb0eca28 100644 --- a/src/components/Article/FullArticle.tsx +++ b/src/components/Article/FullArticle.tsx @@ -144,7 +144,7 @@ export const FullArticle = (props: Props) => { scrollTo(commentsRef.current) } - const { searchParams, changeSearchParam } = useRouter() + const { searchParams, changeSearchParams } = useRouter() createEffect(() => { if (props.scrollToComments) { @@ -155,7 +155,7 @@ export const FullArticle = (props: Props) => { createEffect(() => { if (searchParams()?.scrollTo === 'comments' && commentsRef.current) { scrollToComments() - changeSearchParam({ + changeSearchParams({ scrollTo: null, }) } @@ -167,7 +167,7 @@ export const FullArticle = (props: Props) => { `[id='comment_${searchParams().commentId}']`, ) - changeSearchParam({ commentId: null }) + changeSearchParams({ commentId: null }) if (commentElement) { scrollTo(commentElement) diff --git a/src/components/AuthGuard/AuthGuard.tsx b/src/components/AuthGuard/AuthGuard.tsx index c7b0c442..d4e2e133 100644 --- a/src/components/AuthGuard/AuthGuard.tsx +++ b/src/components/AuthGuard/AuthGuard.tsx @@ -13,7 +13,7 @@ type Props = { export const AuthGuard = (props: Props) => { const { isAuthenticated, isSessionLoaded } = useSession() - const { changeSearchParam } = useRouter() + const { changeSearchParams } = useRouter() createEffect(() => { if (props.disabled) { @@ -23,7 +23,7 @@ export const AuthGuard = (props: Props) => { if (isAuthenticated()) { hideModal() } else { - changeSearchParam( + changeSearchParams( { source: 'authguard', modal: 'auth', diff --git a/src/components/Author/AuthorBadge/AuthorBadge.tsx b/src/components/Author/AuthorBadge/AuthorBadge.tsx index 9f648ff0..5986e07e 100644 --- a/src/components/Author/AuthorBadge/AuthorBadge.tsx +++ b/src/components/Author/AuthorBadge/AuthorBadge.tsx @@ -29,7 +29,7 @@ export const AuthorBadge = (props: Props) => { subscriptions, actions: { loadSubscriptions, requireAuthentication }, } = useSession() - const { changeSearchParam } = useRouter() + const { changeSearchParams } = useRouter() const { t, formatDate } = useLocalize() const subscribed = createMemo(() => subscriptions().authors.some((a: Author) => a.slug === props.author.slug), @@ -54,7 +54,7 @@ export const AuthorBadge = (props: Props) => { const initChat = () => { requireAuthentication(() => { openPage(router, `inbox`) - changeSearchParam({ + changeSearchParams({ initChat: props.author.id.toString(), }) }, 'discussions') diff --git a/src/components/Author/AuthorCard/AuthorCard.tsx b/src/components/Author/AuthorCard/AuthorCard.tsx index e95742b0..040e0054 100644 --- a/src/components/Author/AuthorCard/AuthorCard.tsx +++ b/src/components/Author/AuthorCard/AuthorCard.tsx @@ -72,11 +72,11 @@ export const AuthorCard = (props: Props) => { }) // TODO: reimplement AuthorCard - const { changeSearchParam } = useRouter() + const { changeSearchParams } = useRouter() const initChat = () => { requireAuthentication(() => { openPage(router, `inbox`) - changeSearchParam({ + changeSearchParams({ initChat: props.author.id.toString(), }) }, 'discussions') diff --git a/src/components/Discours/Hero.tsx b/src/components/Discours/Hero.tsx index 27be6cc3..105300cc 100644 --- a/src/components/Discours/Hero.tsx +++ b/src/components/Discours/Hero.tsx @@ -7,7 +7,7 @@ import styles from './Hero.module.scss' export default () => { const { t } = useLocalize() - const { changeSearchParam } = useRouter() + const { changeSearchParams } = useRouter() return (
@@ -28,7 +28,7 @@ export default () => { class="button" onClick={() => { showModal('auth') - changeSearchParam({ + changeSearchParams({ mode: 'register', }) }} diff --git a/src/components/Editor/Panel/Panel.tsx b/src/components/Editor/Panel/Panel.tsx index 29ea82b3..b639924c 100644 --- a/src/components/Editor/Panel/Panel.tsx +++ b/src/components/Editor/Panel/Panel.tsx @@ -7,6 +7,7 @@ import Typograf from 'typograf' import { useEditorContext } from '../../../context/editor' import { useLocalize } from '../../../context/localize' import { router } from '../../../stores/router' +import { showModal } from '../../../stores/ui' import { useEscKeyDownHandler } from '../../../utils/useEscKeyDownHandler' import { useOutsideClickHandler } from '../../../utils/useOutsideClickHandler' import { Button } from '../../_shared/Button' @@ -91,7 +92,9 @@ export const Panel = (props: Props) => {

- {t('Invite co-authors')} + showModal('inviteCoAuthors')}> + {t('Invite co-authors')} +

{ props.article.authors?.some((a) => a.slug === author()?.slug) || props.article.created_by?.id === author()?.id - const { changeSearchParam } = useRouter() + const { changeSearchParams } = useRouter() const scrollToComments = (event) => { event.preventDefault() openPage(router, 'article', { slug: props.article.slug }) - changeSearchParam({ + changeSearchParams({ scrollTo: 'comments', }) } diff --git a/src/components/Feed/Group.tsx b/src/components/Feed/Group.tsx index 9283f40c..b222524b 100644 --- a/src/components/Feed/Group.tsx +++ b/src/components/Feed/Group.tsx @@ -12,7 +12,6 @@ interface GroupProps { } export default (props: GroupProps) => { - if (!props.articles) props.articles = [] return (

4}> diff --git a/src/components/Nav/AuthModal/AuthModal.module.scss b/src/components/Nav/AuthModal/AuthModal.module.scss index e596c41f..d9b7daaa 100644 --- a/src/components/Nav/AuthModal/AuthModal.module.scss +++ b/src/components/Nav/AuthModal/AuthModal.module.scss @@ -2,6 +2,7 @@ background: #fff; min-height: 550px; position: relative; + justify-content: center; @include media-breakpoint-up(md) { min-height: 600px; @@ -106,6 +107,10 @@ margin-top: 1.6rem; text-align: center; + display: flex; + flex-direction: row; + justify-content: center; + gap: 1rem; a { color: #9fa1a7; @@ -125,7 +130,7 @@ .submitButton { display: block; font-weight: 700; - margin-top: 32px; + margin-top: 36px; padding: 1.6rem !important; width: 100%; } @@ -183,10 +188,6 @@ line-height: 16px; margin-top: 0.3em; - &.registerPassword { - margin-bottom: -32px; - } - /* Red/500 */ color: #d00820; @@ -201,26 +202,6 @@ } } -.passwordToggle { - position: absolute; - right: 10px; - top: 50%; - transform: translateY(-50%); - background: none; - border: none; - cursor: pointer; -} - -.passwordToggleIcon { - height: 1.6em; - display: inline-block; - margin-right: 0.2em; - max-width: 1.4em; - max-height: 1.4em; - transition: filter 0.2s; - vertical-align: middle; -} - .title { font-size: 26px; line-height: 32px; diff --git a/src/components/Nav/AuthModal/ChangePasswordForm.tsx b/src/components/Nav/AuthModal/ChangePasswordForm.tsx new file mode 100644 index 00000000..f519e5d9 --- /dev/null +++ b/src/components/Nav/AuthModal/ChangePasswordForm.tsx @@ -0,0 +1,103 @@ +import type { AuthModalSearchParams } from './types' + +import { clsx } from 'clsx' +import { createSignal, JSX, Show } from 'solid-js' + +import { useLocalize } from '../../../context/localize' +import { useRouter } from '../../../stores/router' +import { hideModal } from '../../../stores/ui' + +import { PasswordField } from './PasswordField' + +import styles from './AuthModal.module.scss' + +type FormFields = { + password: string +} + +type ValidationErrors = Partial> + +export const ChangePasswordForm = () => { + const { changeSearchParams } = useRouter() + const { t } = useLocalize() + const [isSubmitting, setIsSubmitting] = createSignal(false) + const [validationErrors, setValidationErrors] = createSignal({}) + const [newPassword, setNewPassword] = createSignal() + const [passwordError, setPasswordError] = createSignal() + const [isSuccess, setIsSuccess] = createSignal(false) + + const authFormRef: { current: HTMLFormElement } = { current: null } + + const handleSubmit = async (event: Event) => { + event.preventDefault() + setIsSubmitting(true) + // Fake change password logic + console.log('!!! sent new password:', newPassword) + setTimeout(() => { + setIsSubmitting(false) + setIsSuccess(true) + }, 1000) + } + + const handlePasswordInput = (value) => { + setNewPassword(value) + if (passwordError()) { + setValidationErrors((errors) => ({ ...errors, password: passwordError() })) + } else { + setValidationErrors(({ password: _notNeeded, ...rest }) => rest) + } + } + + return ( + <> + +
(authFormRef.current = el)} + > +
+

{t('Enter a new password')}

+
+ {t( + 'Now you can enter a new password, it must contain at least 8 characters and not be the same as the previous password', + )} +
+ + setPasswordError(err)} + onInput={(value) => handlePasswordInput(value)} + /> + +
+ +
+
+ + changeSearchParams({ + mode: 'login', + }) + } + > + {t('Cancel')} + +
+
+
+ + +
{t('Password updated!')}
+
{t('You can now login using your new password')}
+
+ +
+ + + ) +} diff --git a/src/components/Nav/AuthModal/ForgotPasswordForm.tsx b/src/components/Nav/AuthModal/ForgotPasswordForm.tsx index aac65445..3bed4e43 100644 --- a/src/components/Nav/AuthModal/ForgotPasswordForm.tsx +++ b/src/components/Nav/AuthModal/ForgotPasswordForm.tsx @@ -20,8 +20,8 @@ type FormFields = { type ValidationErrors = Partial> export const ForgotPasswordForm = () => { - const { changeSearchParam } = useRouter() - const { t } = useLocalize() + const { changeSearchParams } = useRouter() + const { t, lang } = useLocalize() const handleEmailInput = (newEmail: string) => { setValidationErrors(({ email: _notNeeded, ...rest }) => rest) setEmail(newEmail) @@ -130,7 +130,7 @@ export const ForgotPasswordForm = () => { href="#" onClick={(event) => { event.preventDefault() - changeSearchParam({ + changeSearchParams({ mode: 'register', }) }} @@ -152,7 +152,7 @@ export const ForgotPasswordForm = () => { - changeSearchParam({ + changeSearchParams({ mode: 'login', }) } diff --git a/src/components/Nav/AuthModal/LoginForm.tsx b/src/components/Nav/AuthModal/LoginForm.tsx index 851045e5..dfa1959a 100644 --- a/src/components/Nav/AuthModal/LoginForm.tsx +++ b/src/components/Nav/AuthModal/LoginForm.tsx @@ -10,9 +10,9 @@ import { ApiError } from '../../../graphql/error' import { useRouter } from '../../../stores/router' import { hideModal } from '../../../stores/ui' import { validateEmail } from '../../../utils/validateEmail' -import { Icon } from '../../_shared/Icon' import { AuthModalHeader } from './AuthModalHeader' +import { PasswordField } from './PasswordField' import { email, setEmail } from './sharedLogic' import { SocialProviders } from './SocialProviders' @@ -34,7 +34,6 @@ export const LoginForm = () => { // TODO: better solution for interactive error messages const [isEmailNotConfirmed, setIsEmailNotConfirmed] = createSignal(false) const [isLinkSent, setIsLinkSent] = createSignal(false) - const [showPassword, setShowPassword] = createSignal(false) const authFormRef: { current: HTMLFormElement } = { current: null } @@ -46,7 +45,7 @@ export const LoginForm = () => { actions: { signIn }, } = useSession() - const { changeSearchParam } = useRouter() + const { changeSearchParams } = useRouter() const [password, setPassword] = createSignal('') @@ -167,31 +166,7 @@ export const LoginForm = () => {
-
- handlePasswordInput(event.currentTarget.value)} - /> - - - -
{validationErrors().password}
- -
+ handlePasswordInput(value)} />
@@ -219,7 +204,7 @@ export const LoginForm = () => { - changeSearchParam({ + changeSearchParams({ mode: 'register', }) } diff --git a/src/components/Nav/AuthModal/PasswordField/PasswordField.module.scss b/src/components/Nav/AuthModal/PasswordField/PasswordField.module.scss new file mode 100644 index 00000000..7faae657 --- /dev/null +++ b/src/components/Nav/AuthModal/PasswordField/PasswordField.module.scss @@ -0,0 +1,46 @@ +.PassportField { + .passwordToggle { + position: absolute; + right: 10px; + top: 50%; + transform: translateY(-50%); + background: none; + border: none; + cursor: pointer; + } + + .passwordToggleIcon { + height: 1.6em; + display: inline-block; + margin-right: 0.2em; + max-width: 1.4em; + max-height: 1.4em; + transition: filter 0.2s; + vertical-align: middle; + } + + .validationError { + position: absolute; + top: 100%; + font-size: 12px; + line-height: 16px; + margin-top: 0.3em; + + &.registerPassword { + margin-bottom: -32px; + } + + /* Red/500 */ + color: #d00820; + + a { + color: #d00820; + border-color: #d00820; + + &:hover { + color: var(--default-color-invert); + border-color: var(--background-color-invert); + } + } + } +} diff --git a/src/components/Nav/AuthModal/PasswordField/PasswordField.tsx b/src/components/Nav/AuthModal/PasswordField/PasswordField.tsx new file mode 100644 index 00000000..6dab7ef8 --- /dev/null +++ b/src/components/Nav/AuthModal/PasswordField/PasswordField.tsx @@ -0,0 +1,88 @@ +import { clsx } from 'clsx' +import { createEffect, createSignal, JSX, on, Show } from 'solid-js' + +import { useLocalize } from '../../../../context/localize' +import { resetSortedArticles } from '../../../../stores/zine/articles' +import { Icon } from '../../../_shared/Icon' + +import styles from './PasswordField.module.scss' + +type Props = { + class?: string + errorMessage?: (error: string) => void + onInput: (value: string) => void +} + +export const PasswordField = (props: Props) => { + const { t } = useLocalize() + const [showPassword, setShowPassword] = createSignal(false) + const [error, setError] = createSignal() + + const validatePassword = (passwordToCheck) => { + const minLength = 8 + const hasNumber = /\d/ + const hasSpecial = /[!#$%&*@^]/ + + if (passwordToCheck.length < minLength) { + return t('Password should be at least 8 characters') + } + if (!hasNumber.test(passwordToCheck)) { + return t('Password should contain at least one number') + } + if (!hasSpecial.test(passwordToCheck)) { + return t('Password should contain at least one special character: !@#$%^&*') + } + + return null + } + + const handleInputChange = (value) => { + props.onInput(value) + const errorValue = validatePassword(value) + if (errorValue) { + setError(errorValue) + } else { + setError() + } + } + + createEffect( + on( + () => error(), + () => { + props.errorMessage(error()) + }, + { defer: true }, + ), + ) + + return ( +
+
+ handleInputChange(event.currentTarget.value)} + /> + + + +
{error()}
+ +
+
+ ) +} diff --git a/src/components/Nav/AuthModal/PasswordField/index.ts b/src/components/Nav/AuthModal/PasswordField/index.ts new file mode 100644 index 00000000..d743619c --- /dev/null +++ b/src/components/Nav/AuthModal/PasswordField/index.ts @@ -0,0 +1 @@ +export { PasswordField } from './PasswordField' diff --git a/src/components/Nav/AuthModal/RegisterForm.tsx b/src/components/Nav/AuthModal/RegisterForm.tsx index 93c59837..85a0a599 100644 --- a/src/components/Nav/AuthModal/RegisterForm.tsx +++ b/src/components/Nav/AuthModal/RegisterForm.tsx @@ -11,9 +11,9 @@ import { checkEmail, useEmailChecks } from '../../../stores/emailChecks' import { useRouter } from '../../../stores/router' import { hideModal } from '../../../stores/ui' import { validateEmail } from '../../../utils/validateEmail' -import { Icon } from '../../_shared/Icon' import { AuthModalHeader } from './AuthModalHeader' +import { PasswordField } from './PasswordField' import { email, setEmail } from './sharedLogic' import { SocialProviders } from './SocialProviders' @@ -32,7 +32,7 @@ const handleEmailInput = (newEmail: string) => { } export const RegisterForm = () => { - const { changeSearchParam } = useRouter() + const { changeSearchParams } = useRouter() const { t } = useLocalize() const { emailChecks } = useEmailChecks() const { @@ -42,9 +42,9 @@ export const RegisterForm = () => { const [fullName, setFullName] = createSignal('') const [password, setPassword] = createSignal('') const [isSubmitting, setIsSubmitting] = createSignal(false) - const [showPassword, setShowPassword] = createSignal(false) const [isSuccess, setIsSuccess] = createSignal(false) const [validationErrors, setValidationErrors] = createSignal({}) + const [passwordError, setPasswordError] = createSignal() const authFormRef: { current: HTMLFormElement } = { current: null } @@ -54,37 +54,15 @@ export const RegisterForm = () => { } } - function isValidPassword(passwordToCheck) { - const minLength = 8 - const hasNumber = /\d/ - const hasSpecial = /[!#$%&*@^]/ - - if (passwordToCheck.length < minLength) { - return t('Password should be at least 8 characters') - } - if (!hasNumber.test(passwordToCheck)) { - return t('Password should contain at least one number') - } - if (!hasSpecial.test(passwordToCheck)) { - return t('Password should contain at least one special character: !@#$%^&*') - } - return null - } - - const handlePasswordInput = (newPassword: string) => { - setPassword(newPassword) - } - - const handleNameInput = (newPasswordCopy: string) => { - setFullName(newPasswordCopy) + const handleNameInput = (newName: string) => { + setFullName(newName) } const handleSubmit = async (event: Event) => { event.preventDefault() - const passwordError = isValidPassword(password()) - if (passwordError) { - setValidationErrors((errors) => ({ ...errors, password: passwordError })) + if (passwordError()) { + setValidationErrors((errors) => ({ ...errors, password: passwordError() })) } else { setValidationErrors(({ password: _notNeeded, ...rest }) => rest) } @@ -202,48 +180,17 @@ export const RegisterForm = () => {
{t("This email is already taken. If it's you")},{' '} - { - event.preventDefault() - changeSearchParam({ - mode: 'login', - }) - }} - > + changeSearchParams({ mode: 'login' })}> {t('enter')} - +
-
- handlePasswordInput(event.currentTarget.value)} - /> - - - -
- {validationErrors().password} -
- -
+ setPasswordError(err)} + onInput={(value) => setPassword(value)} + />
*/} - {/*
*/} - - {/*
*/} - {/*
Михаил Драбкин
*/} - {/*
*/} - {/* */} - {/*
*/} - {/*
*/} +

{t('Collaborators')}

+ - - {/*TODO: server sort*/} - {/*
  • */} - {/* */} - {/*
    • */} - {/*
  • */} - {/* */} - {/*
    • */} - {/*
  • */} - {/* */} - {/*
    • */} - - -
    -
    - {`${t('Show')} `} - {t('All posts')} -
    -
    + +
    +
    +
    +
      +
    • + +
      • + {/*TODO: server sort*/} + {/*
    • */} + {/* */} + {/*
      • */} + {/*
    • */} + {/* */} + {/*
      • */} + {/*
    • */} + {/* */} + {/*
      • */} +
    +
    +
    +
    + {`${t('Show')} `} + {t('All posts')}
    +
    +
    - - + + - + - + - + - - + + - 15}> - - - - + 15}> + + + + - - {(page) => ( - <> - - - - - )} - + + {(page) => ( + <> + + + + + )} + - -

    - -

    -     - + +

    + +

    ) diff --git a/src/components/_shared/DropDown/DropDown.module.scss b/src/components/_shared/DropDown/DropDown.module.scss new file mode 100644 index 00000000..c438b02b --- /dev/null +++ b/src/components/_shared/DropDown/DropDown.module.scss @@ -0,0 +1,7 @@ +.chevron { + vertical-align: top; + + &.rotate { + transform: rotate(180deg); + } +} diff --git a/src/components/_shared/DropDown/DropDown.tsx b/src/components/_shared/DropDown/DropDown.tsx new file mode 100644 index 00000000..e1ba7aa4 --- /dev/null +++ b/src/components/_shared/DropDown/DropDown.tsx @@ -0,0 +1,69 @@ +import type { PopupProps } from '../Popup' + +import { clsx } from 'clsx' +import { createSignal, For, Show } from 'solid-js' + +import { Popup } from '../Popup' + +import styles from './DropDown.module.scss' + +export type Option = { + value: string | number + title: string +} + +type Props = { + class?: string + popupProps?: PopupProps + options: TOption[] + currentOption: TOption + triggerCssClass?: string + onChange: (option: TOption) => void +} + +const Chevron = (props: { class?: string }) => { + return ( + + + + ) +} + +export const DropDown = (props: Props) => { + const [isPopupVisible, setIsPopupVisible] = createSignal(false) + + return ( + + + {props.currentOption.title}{' '} + + + } + variant="tiny" + onVisibilityChange={(isVisible) => setIsPopupVisible(isVisible)} + {...props.popupProps} + > + p.value !== props.currentOption.value)}> + {(option) => ( +
    props.onChange(option)}> + {option.title} +
    + )} +     +     +     + ) +} diff --git a/src/components/_shared/DropDown/index.ts b/src/components/_shared/DropDown/index.ts new file mode 100644 index 00000000..8a266f72 --- /dev/null +++ b/src/components/_shared/DropDown/index.ts @@ -0,0 +1 @@ +export { DropDown } from './DropDown' diff --git a/src/components/_shared/DropdownSelect/DropdownSelect.module.scss b/src/components/_shared/DropdownSelect/DropdownSelect.module.scss new file mode 100644 index 00000000..5cc81d75 --- /dev/null +++ b/src/components/_shared/DropdownSelect/DropdownSelect.module.scss @@ -0,0 +1,71 @@ +.DropdownSelect { + position: relative; + + .toggler { + @include font-size(1.3rem); + + display: flex; + align-items: center; + justify-content: center; + gap: 8px; + cursor: pointer; + + &::after { + content: ''; + display: block; + width: 0; + height: 0; + border-left: 6px solid transparent; + border-right: 6px solid transparent; + border-top: 6px solid var(--background-color-invert); + } + + &.isOpen::after { + transform: rotate(-180deg); + } + } + + .listItems { + position: absolute; + right: 0; + padding: 8px 10px; + min-width: 30vw; + top: calc(100% + 2px); + border: 2px solid var(--background-color-invert); + background: var(--background-color); + margin: 0; + + li { + padding: 6px; + cursor: pointer; + list-style: none; + margin: 0; + transition: 0.3s ease-in-out; + + .title { + @include font-size(1.6rem); + + font-weight: 700 !important; + margin-bottom: 0; + } + + .description { + @include font-size(1.2rem); + + color: var(--default-color); + opacity: 0.5; + margin: 6px 0; + } + + &:hover { + background: var(--background-color-invert); + color: var(--default-color-invert); + + .description { + opacity: 1; + color: #9fa1a7; + } + } + } + } +} diff --git a/src/components/_shared/DropdownSelect/DropdownSelect.tsx b/src/components/_shared/DropdownSelect/DropdownSelect.tsx new file mode 100644 index 00000000..e258b9a6 --- /dev/null +++ b/src/components/_shared/DropdownSelect/DropdownSelect.tsx @@ -0,0 +1,61 @@ +import { clsx } from 'clsx' +import { createSignal, For, Show } from 'solid-js' + +import { useOutsideClickHandler } from '../../../utils/useOutsideClickHandler' + +import styles from './DropdownSelect.module.scss' + +type FilterItem = { + title: string + description?: string +} + +type Props = { + class?: string + selectItems: FilterItem[] +} + +export const DropdownSelect = (props: Props) => { + const [selected, setSelected] = createSignal(props.selectItems[0]) + const [isDropDownVisible, setIsDropDownVisible] = createSignal(false) + + const containerRef: { current: HTMLElement } = { + current: null, + } + + const handleShowDropdown = () => { + setIsDropDownVisible(!isDropDownVisible()) + } + + useOutsideClickHandler({ + containerRef, + predicate: () => isDropDownVisible(), + handler: () => setIsDropDownVisible(false), + }) + + return ( +
    +
    +
    {selected().title}
    +
    + + +
      (containerRef.current = el)}> + + {(item) => ( +
    • +

      {item.title}

      + +

      {item.description}

      +       +
      • + )} +       +
    +     +
    + ) +} diff --git a/src/components/_shared/DropdownSelect/index.ts b/src/components/_shared/DropdownSelect/index.ts new file mode 100644 index 00000000..604d3e39 --- /dev/null +++ b/src/components/_shared/DropdownSelect/index.ts @@ -0,0 +1 @@ +export { DropdownSelect } from './DropdownSelect' diff --git a/src/components/_shared/InviteCoAuthorsModal/InviteCoAuthorsModal.tsx b/src/components/_shared/InviteCoAuthorsModal/InviteCoAuthorsModal.tsx new file mode 100644 index 00000000..39ca4eb8 --- /dev/null +++ b/src/components/_shared/InviteCoAuthorsModal/InviteCoAuthorsModal.tsx @@ -0,0 +1,14 @@ +import { useLocalize } from '../../../context/localize' +import { Modal } from '../../Nav/Modal' +import { UserSearch } from '../UserSearch' + +export const InviteCoAuthorsModal = () => { + const { t } = useLocalize() + + return ( + +

    {t('Invite collaborators')}

    + {}} /> +     + ) +} diff --git a/src/components/_shared/InviteCoAuthorsModal/index.ts b/src/components/_shared/InviteCoAuthorsModal/index.ts new file mode 100644 index 00000000..cf10fce7 --- /dev/null +++ b/src/components/_shared/InviteCoAuthorsModal/index.ts @@ -0,0 +1 @@ +export { InviteCoAuthorsModal } from './InviteCoAuthorsModal' diff --git a/src/components/_shared/Lightbox/Lightbox.module.scss b/src/components/_shared/Lightbox/Lightbox.module.scss index 6f99e359..de7910d2 100644 --- a/src/components/_shared/Lightbox/Lightbox.module.scss +++ b/src/components/_shared/Lightbox/Lightbox.module.scss @@ -10,6 +10,9 @@ justify-content: center; z-index: 10000; + animation: 300ms fadeIn; + animation-fill-mode: forwards; + .image { max-width: 90%; max-height: 80%; @@ -72,3 +75,28 @@ } } } + +.fadeOut { + animation: 300ms fadeOut; + animation-fill-mode: backwards; +} + +@keyframes fadeIn { + 0% { + opacity: 0; + } + + 100% { + opacity: 1; + } +} + +@keyframes fadeOut { + 0% { + opacity: 1; + } + + 100% { + opacity: 0; + } +} diff --git a/src/components/_shared/Lightbox/Lightbox.tsx b/src/components/_shared/Lightbox/Lightbox.tsx index 56092245..89c7d94b 100644 --- a/src/components/_shared/Lightbox/Lightbox.tsx +++ b/src/components/_shared/Lightbox/Lightbox.tsx @@ -1,5 +1,5 @@ import { clsx } from 'clsx' -import { createSignal } from 'solid-js' +import { createMemo, createSignal, onCleanup } from 'solid-js' import { useEscKeyDownHandler } from '../../../utils/useEscKeyDownHandler' import { Icon } from '../Icon' @@ -8,40 +8,109 @@ import styles from './Lightbox.module.scss' type Props = { class?: string + imageAlt?: string image: string onClose: () => void } const ZOOM_STEP = 1.08 +const TRANSITION_SPEED = 300 + export const Lightbox = (props: Props) => { const [zoomLevel, setZoomLevel] = createSignal(1) + const [translateX, setTranslateX] = createSignal(0) + const [translateY, setTranslateY] = createSignal(0) + const [transitionEnabled, setTransitionEnabled] = createSignal(false) + + const lightboxRef: { + current: HTMLElement + } = { + current: null, + } const closeLightbox = () => { - props.onClose() + lightboxRef.current?.classList.add(styles.fadeOut) + + setTimeout(() => { + props.onClose() + }, 300) } const zoomIn = (event) => { event.stopPropagation() + setTransitionEnabled(true) setZoomLevel(zoomLevel() * ZOOM_STEP) + setTimeout(() => setTransitionEnabled(false), TRANSITION_SPEED) } + const zoomOut = (event) => { event.stopPropagation() + setTransitionEnabled(true) setZoomLevel(zoomLevel() / ZOOM_STEP) + setTimeout(() => setTransitionEnabled(false), TRANSITION_SPEED) } + const zoomReset = (event) => { event.stopPropagation() setZoomLevel(1) } - const lightboxStyle = () => ({ - transform: `scale(${zoomLevel()})`, - transition: 'transform 0.3s ease', - }) + const handleWheelZoom = (event) => { + event.preventDefault() + + let scale = zoomLevel() + + scale += event.deltaY * -0.01 + + scale = Math.min(Math.max(0.125, scale), 4) + + setZoomLevel(scale * ZOOM_STEP) + } useEscKeyDownHandler(closeLightbox) + let startX: number = 0 + let startY: number = 0 + let isDragging: boolean = false + + const onMouseDown: (event: MouseEvent) => void = (event) => { + startX = event.clientX - translateX() + startY = event.clientY - translateY() + isDragging = true + event.preventDefault() + } + + const onMouseMove: (event: MouseEvent) => void = (event) => { + if (isDragging) { + setTranslateX(event.clientX - startX) + setTranslateY(event.clientY - startY) + } + } + + const onMouseUp: () => void = () => { + isDragging = false + } + + document.addEventListener('mousemove', onMouseMove) + document.addEventListener('mouseup', onMouseUp) + + onCleanup(() => { + document.removeEventListener('mousemove', onMouseMove) + document.removeEventListener('mouseup', onMouseUp) + }) + + const lightboxStyle = createMemo(() => ({ + transform: `translate(${translateX()}px, ${translateY()}px) scale(${zoomLevel()})`, + transition: transitionEnabled() ? `transform ${TRANSITION_SPEED}ms ease-in-out` : '', + cursor: 'grab', + })) + return ( -
    +
    (lightboxRef.current = el)} + > @@ -59,9 +128,11 @@ export const Lightbox = (props: Props) => { {''} event.stopPropagation()} + onWheel={handleWheelZoom} + style={lightboxStyle()} + onMouseDown={onMouseDown} />
    ) diff --git a/src/components/_shared/Popup/Popup.tsx b/src/components/_shared/Popup/Popup.tsx index 78d5cdde..f9cb0902 100644 --- a/src/components/_shared/Popup/Popup.tsx +++ b/src/components/_shared/Popup/Popup.tsx @@ -32,7 +32,9 @@ export const Popup = (props: PopupProps) => { useOutsideClickHandler({ containerRef, predicate: () => isVisible(), - handler: () => setIsVisible(false), + handler: () => { + setIsVisible(false) + }, }) const toggle = () => setIsVisible((oldVisible) => !oldVisible) diff --git a/src/components/_shared/SolidSwiper/ArticleCardSwiper.tsx b/src/components/_shared/SolidSwiper/ArticleCardSwiper.tsx index 0b9cefcc..973b6ffb 100644 --- a/src/components/_shared/SolidSwiper/ArticleCardSwiper.tsx +++ b/src/components/_shared/SolidSwiper/ArticleCardSwiper.tsx @@ -5,6 +5,7 @@ import SwiperCore, { Manipulation, Navigation, Pagination } from 'swiper' import { Shout } from '../../../graphql/schema/core.gen' import { ArticleCard } from '../../Feed/ArticleCard' import { Icon } from '../Icon' +import { ShowOnlyOnClient } from '../ShowOnlyOnClient' import { SwiperRef } from './swiper' @@ -25,65 +26,67 @@ export const ArticleCardSwiper = (props: Props) => { }) return ( -
    - -

    {props.title}

    -     -
    - 0}> -
    - (mainSwipeRef.current = el)} - centered-slides={true} - observer={true} - space-between={10} - breakpoints={{ - 576: { spaceBetween: 20, slidesPerView: 1.5 }, - 992: { spaceBetween: 52, slidesPerView: 1.5 }, - }} - round-lengths={true} - loop={true} - speed={800} - autoplay={{ - disableOnInteraction: false, - delay: 6000, - pauseOnMouseEnter: true, - }} - > - - {(slide, index) => ( - // eslint-disable-next-line @typescript-eslint/ban-ts-comment - // @ts-ignore - - - - )} - - -
    mainSwipeRef.current.swiper.slidePrev()} - > - -
    -
    mainSwipeRef.current.swiper.slideNext()} - > - -
    -
    + +
    + +

    {props.title}

     +
    + 0}> +
    + (mainSwipeRef.current = el)} + centered-slides={true} + observer={true} + space-between={10} + breakpoints={{ + 576: { spaceBetween: 20, slidesPerView: 1.5 }, + 992: { spaceBetween: 52, slidesPerView: 1.5 }, + }} + round-lengths={true} + loop={true} + speed={800} + autoplay={{ + disableOnInteraction: false, + delay: 6000, + pauseOnMouseEnter: true, + }} + > + + {(slide, index) => ( + // eslint-disable-next-line @typescript-eslint/ban-ts-comment + // @ts-ignore + + + + )} + + +
    mainSwipeRef.current.swiper.slidePrev()} + > + +
    +
    mainSwipeRef.current.swiper.slideNext()} + > + +
    +
    +     +
    -
    + ) } diff --git a/src/components/_shared/SolidSwiper/ImageSwiper.tsx b/src/components/_shared/SolidSwiper/ImageSwiper.tsx index 93864056..5364e47b 100644 --- a/src/components/_shared/SolidSwiper/ImageSwiper.tsx +++ b/src/components/_shared/SolidSwiper/ImageSwiper.tsx @@ -7,6 +7,7 @@ import { MediaItem } from '../../../pages/types' import { getImageUrl } from '../../../utils/getImageUrl' import { Icon } from '../Icon' import { Image } from '../Image' +import { Lightbox } from '../Lightbox' import { SwiperRef } from './swiper' @@ -23,12 +24,14 @@ type Props = { const MIN_WIDTH = 540 export const ImageSwiper = (props: Props) => { - const [slideIndex, setSlideIndex] = createSignal(0) - const [isMobileView, setIsMobileView] = createSignal(false) const mainSwipeRef: { current: SwiperRef } = { current: null } const thumbSwipeRef: { current: SwiperRef } = { current: null } const swiperMainContainer: { current: HTMLDivElement } = { current: null } + const [slideIndex, setSlideIndex] = createSignal(0) + const [isMobileView, setIsMobileView] = createSignal(false) + const [selectedImage, setSelectedImage] = createSignal('') + const handleSlideChange = () => { thumbSwipeRef.current.swiper.slideTo(mainSwipeRef.current.swiper.activeIndex) setSlideIndex(mainSwipeRef.current.swiper.activeIndex) @@ -76,6 +79,19 @@ export const ImageSwiper = (props: Props) => { }) }) + const openLightbox = (image) => { + setSelectedImage(image) + } + const handleLightboxClose = () => { + setSelectedImage() + } + + const handleImageClick = (event) => { + const src = event.target.src + + openLightbox(getImageUrl(src)) + } + return (
    (swiperMainContainer.current = el)}> @@ -94,7 +110,7 @@ export const ImageSwiper = (props: Props) => { // eslint-disable-next-line @typescript-eslint/ban-ts-comment // @ts-ignore -
    +
    {slide.title}
    @@ -178,6 +194,10 @@ export const ImageSwiper = (props: Props) => {
    + + + +
    ) } diff --git a/src/components/_shared/SolidSwiper/Swiper.module.scss b/src/components/_shared/SolidSwiper/Swiper.module.scss index 4928695e..f4dbccf1 100644 --- a/src/components/_shared/SolidSwiper/Swiper.module.scss +++ b/src/components/_shared/SolidSwiper/Swiper.module.scss @@ -188,6 +188,7 @@ img { max-height: 100%; width: auto; + cursor: zoom-in; } } diff --git a/src/components/_shared/UserSearch/UserSearch.module.scss b/src/components/_shared/UserSearch/UserSearch.module.scss new file mode 100644 index 00000000..c8239e41 --- /dev/null +++ b/src/components/_shared/UserSearch/UserSearch.module.scss @@ -0,0 +1,50 @@ +.UserSearch { + .searchHeader { + display: flex; + flex-direction: row; + flex-wrap: nowrap; + width: 100%; + gap: 1rem; + } + + .field { + border-bottom: 2px solid var(--background-color-invert); + display: flex; + flex-direction: row; + flex-wrap: nowrap; + padding: 4px 0; + align-items: center; + width: 100%; + } + + .input { + @include font-size(1.5rem); + + border: none; + padding: 0; + margin: 0; + flex: 1; + + &::placeholder { + color: #404040; + } + &:focus { + outline: none; + } + } + + .authors { + height: 400px; + overflow: auto; + padding: 1rem 0; + } + + .teaser { + min-height: 300px; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + text-align: center; + } +} diff --git a/src/components/_shared/UserSearch/UserSearch.tsx b/src/components/_shared/UserSearch/UserSearch.tsx new file mode 100644 index 00000000..296c5d06 --- /dev/null +++ b/src/components/_shared/UserSearch/UserSearch.tsx @@ -0,0 +1,61 @@ +import { clsx } from 'clsx' + +import { useLocalize } from '../../../context/localize' +import { Button } from '../Button' +import { DropdownSelect } from '../DropdownSelect' + +import styles from './UserSearch.module.scss' + +type Props = { + class?: string + placeholder: string + onChange: (value: string) => void +} + +export const UserSearch = (props: Props) => { + const { t } = useLocalize() + const roles = [ + { + title: t('Editor'), + description: t('Can write and edit text directly, and accept or reject suggestions from others'), + }, + { + title: t('Co-author'), + description: t('Can make any changes, accept or reject suggestions, and share access with others'), + }, + { + title: t('Commentator'), + description: t('Can offer edits and comments, but cannot edit the post or share access with others'), + }, + ] + const handleInputChange = (value: string) => { + props.onChange(value) + } + + return ( +
    +
    +
    + handleInputChange(e.target.value)} + /> + +
    + +
    + +
    +

    {t('Coming soon')}

    +

    + {t( + 'We are working on collaborative editing of articles and in the near future you will have an amazing opportunity - to create together with your colleagues', + )} +

    +
    +
    + ) +} diff --git a/src/components/_shared/UserSearch/index.ts b/src/components/_shared/UserSearch/index.ts new file mode 100644 index 00000000..5b665453 --- /dev/null +++ b/src/components/_shared/UserSearch/index.ts @@ -0,0 +1 @@ +export { UserSearch } from './UserSearch' diff --git a/src/context/localize.tsx b/src/context/localize.tsx index 394526e8..8dcc6cd5 100644 --- a/src/context/localize.tsx +++ b/src/context/localize.tsx @@ -32,7 +32,7 @@ export function useLocalize() { export const LocalizeProvider = (props: { children: JSX.Element }) => { const [lang, setLang] = createSignal(i18next.language === 'en' ? 'en' : 'ru') - const { searchParams, changeSearchParam } = useRouter<{ + const { searchParams, changeSearchParams } = useRouter<{ lng: string }>() @@ -46,7 +46,7 @@ export const LocalizeProvider = (props: { children: JSX.Element }) => { changeLanguage(lng) setLang(lng) Cookie.set('lng', lng) - changeSearchParam({ lng: null }, true) + changeSearchParams({ lng: null }, true) }) const formatTime = (date: Date, options: Intl.DateTimeFormatOptions = {}) => { diff --git a/src/graphql/query/articles-load-random-topic.ts b/src/graphql/query/articles-load-random-topic.ts new file mode 100644 index 00000000..b6bc8a39 --- /dev/null +++ b/src/graphql/query/articles-load-random-topic.ts @@ -0,0 +1,62 @@ +import { gql } from '@urql/core' + +export default gql` + query LoadRandomTopicShoutsQuery($limit: Int!) { + loadRandomTopicShouts(limit: $limit) { + topic { + id + title + body + slug + pic + # community + stat { + shouts + authors + followers + # viewed + } + } + shouts { + id + title + lead + description + subtitle + slug + layout + cover + lead + # community + mainTopic + topics { + id + title + body + slug + stat { + shouts + authors + followers + } + } + authors { + id + name + slug + userpic + createdAt + bio + } + createdAt + publishedAt + stat { + viewed + reacted + rating + commented + } + } + } + } +` diff --git a/src/graphql/types.gen.ts b/src/graphql/types.gen.ts new file mode 100644 index 00000000..e69de29b diff --git a/src/pages/feed.page.tsx b/src/pages/feed.page.tsx index 7ea13639..aa29649c 100644 --- a/src/pages/feed.page.tsx +++ b/src/pages/feed.page.tsx @@ -12,7 +12,10 @@ import { loadMyFeed, loadShouts, resetSortedArticles } from '../stores/zine/arti const handleFeedLoadShouts = (options: LoadShoutsOptions) => { return loadShouts({ ...options, - filters: { published: false }, + filters: { + published: false, + ...options.filters, + }, }) } diff --git a/src/pages/topic.page.server.ts b/src/pages/topic.page.server.ts index 424bddfe..64dc7725 100644 --- a/src/pages/topic.page.server.ts +++ b/src/pages/topic.page.server.ts @@ -4,6 +4,7 @@ import type { PageContext } from '../renderer/types' import { render } from 'vike/abort' import { apiClient } from '../graphql/client/core' +import { PRERENDERED_ARTICLES_COUNT } from '../components/Views/Topic' export const onBeforeRender = async (pageContext: PageContext) => { const { slug } = pageContext.routeParams @@ -14,7 +15,12 @@ export const onBeforeRender = async (pageContext: PageContext) => { throw render(404) } - const pageProps: PageProps = { topic, seo: { title: topic.title } } + const topicShouts = await apiClient.getShouts({ + filters: { topic: topic.slug }, + limit: PRERENDERED_ARTICLES_COUNT, + }) + + const pageProps: PageProps = { topic, topicShouts, seo: { title: topic.title } } return { pageContext: { diff --git a/src/pages/topic.page.tsx b/src/pages/topic.page.tsx index 574eb12a..573a3605 100644 --- a/src/pages/topic.page.tsx +++ b/src/pages/topic.page.tsx @@ -1,7 +1,8 @@ import type { PageProps } from './types' -import { createEffect, createMemo, createSignal, on, onCleanup, onMount } from 'solid-js' +import { createEffect, createMemo, createSignal, on, onCleanup, onMount, Show } from 'solid-js' +import { Loading } from '../components/_shared/Loading' import { PageLayout } from '../components/_shared/PageLayout' import { PRERENDERED_ARTICLES_COUNT, TopicView } from '../components/Views/Topic' import { ReactionsProvider } from '../context/reactions' @@ -16,7 +17,7 @@ export const TopicPage = (props: PageProps) => { const [isLoaded, setIsLoaded] = createSignal( Boolean(props.topicShouts) && Boolean(props.topic) && props.topic.slug === slug(), ) - const [pageTitle, setPageTitle] = createSignal() + const preload = () => Promise.all([ loadShouts({ filters: { topic: slug() }, limit: PRERENDERED_ARTICLES_COUNT, offset: 0 }), @@ -51,15 +52,15 @@ export const TopicPage = (props: PageProps) => { const usePrerenderedData = props.topic?.slug === slug() return ( - + - setPageTitle(title)} - isLoaded={isLoaded()} - topic={usePrerenderedData ? props.topic : null} - shouts={usePrerenderedData ? props.topicShouts : null} - topicSlug={slug()} - /> + }> + + ) diff --git a/src/stores/router.ts b/src/stores/router.ts index 4803ed82..a9409c68 100644 --- a/src/stores/router.ts +++ b/src/stores/router.ts @@ -138,7 +138,7 @@ export const useRouter = = Record< const page = useStore(routerStore) const searchParams = useStore(searchParamsStore) as unknown as Accessor - const changeSearchParam = (newValues: Partial, replace = false) => { + const changeSearchParams = (newValues: Partial, replace = false) => { const newSearchParams = { ...searchParamsStore.get() } Object.keys(newValues).forEach((key) => { @@ -155,6 +155,6 @@ export const useRouter = = Record< return { page, searchParams, - changeSearchParam, + changeSearchParams, } } diff --git a/src/stores/ui.ts b/src/stores/ui.ts index b807086b..174f5822 100644 --- a/src/stores/ui.ts +++ b/src/stores/ui.ts @@ -24,6 +24,7 @@ export type ModalType = | 'followers' | 'following' | 'search' + | 'inviteCoAuthors' export const MODALS: Record = { auth: 'auth', @@ -39,18 +40,19 @@ export const MODALS: Record = { editorInsertLink: 'editorInsertLink', followers: 'followers', following: 'following', + inviteCoAuthors: 'inviteCoAuthors', search: 'search', } const [modal, setModal] = createSignal(null) -const { searchParams, changeSearchParam } = useRouter< +const { searchParams, changeSearchParams } = useRouter< AuthModalSearchParams & ConfirmEmailSearchParams & RootSearchParams >() export const showModal = (modalType: ModalType, modalSource?: AuthModalSource) => { if (modalSource) { - changeSearchParam({ + changeSearchParams({ source: modalSource, }) } @@ -72,7 +74,7 @@ export const hideModal = () => { newSearchParams.mode = null } - changeSearchParam(newSearchParams, true) + changeSearchParams(newSearchParams, true) setModal(null) } diff --git a/src/stores/zine/articles.ts b/src/stores/zine/articles.ts index bb9b393b..20a252a0 100644 --- a/src/stores/zine/articles.ts +++ b/src/stores/zine/articles.ts @@ -51,21 +51,6 @@ const articlesByTopic = createLazyMemo(() => { ) }) -const articlesByLayout = createLazyMemo(() => { - return Object.values(articleEntities()).reduce( - (acc, article) => { - if (!acc[article.layout]) { - acc[article.layout] = [] - } - - acc[article.layout].push(article) - - return acc - }, - {} as { [layout: string]: Shout[] }, - ) -}) - const topViewedArticles = createLazyMemo(() => { const result = Object.values(articleEntities()) result.sort(byStat('viewed')) @@ -240,7 +225,6 @@ export const useArticlesStore = (initialState: InitialState = {}) => { articleEntities, sortedArticles, articlesByAuthor, - articlesByLayout, articlesByTopic, topMonthArticles, topArticles, diff --git a/src/styles/app.scss b/src/styles/app.scss index 376ab52d..ef3ea022 100644 --- a/src/styles/app.scss +++ b/src/styles/app.scss @@ -204,7 +204,7 @@ a:hover, a:visited, a:link, .link { - border-bottom: 1px solid rgb(0 0 0 / 30%); + border-bottom: 2px solid rgb(0 0 0 / 30%); text-decoration: none; cursor: pointer; } @@ -624,6 +624,10 @@ figure { margin-bottom: 0.6em; white-space: nowrap; + .link { + border-bottom: none; + } + &:last-child { margin-right: 0; } @@ -645,9 +649,10 @@ figure { } a, + .link, .linkReplacement, button { - border-bottom: 2px solid transparent; + border-bottom: 1px solid transparent; color: var(--link-color); cursor: pointer; font-weight: inherit; @@ -662,6 +667,7 @@ figure { font-weight: bold; a, + .link, .linkReplacement, button { border-bottom: 2px solid #000; diff --git a/src/utils/apiClient.ts b/src/utils/apiClient.ts new file mode 100644 index 00000000..e69de29b