@os-team/profile 1.2.1 → 1.2.3

package/src/lib/components/profile/ProfileDrawerContent.tsx

@@ -0,0 +1,276 @@
+import styled from '@emotion/styled';
+import { ThemeSwitcher, message } from '@os-design/core';
+import { clr } from '@os-design/theming';
+import graphql from 'babel-plugin-relay/macro';
+import React, { useCallback, useMemo, useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useMutation } from 'react-relay';
+import getError from '../../utils/getError';
+import ProfileButton from './ProfileButton';
+import { useProfile } from './ProfileContext';
+import ProfileUpdateNameModal from './ProfileUpdateNameModal';
+import ProfileUpdatePasswordModal from './ProfileUpdatePasswordModal';
+import UserAvatar from './UserAvatar';
+import { type ProfileDrawerContentSignOutMutation } from './__generated__/ProfileDrawerContentSignOutMutation.graphql';
+import { type ProfileDrawerContentUpdateAvatarMutation } from './__generated__/ProfileDrawerContentUpdateAvatarMutation.graphql';
+
+export interface ProfileDrawerContentProps {
+  /**
+   * Additional actions placed under the avatar.
+   * @default undefined
+   */
+  actions?: React.ReactNode;
+  /**
+   * The children.
+   */
+  children?: React.ReactNode;
+}
+
+const AvatarContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+`;
+
+const UserContent = styled.div`
+  margin-top: 1em;
+`;
+
+const FullName = styled.div`
+  font-size: ${(p) => p.theme.sizes.large}em;
+  font-weight: 500;
+  text-align: center;
+  line-height: 1.2;
+`;
+
+const Email = styled.div`
+  color: ${(p) => clr(p.theme.inputColorPlaceholder)};
+  margin-top: 0.2em;
+  text-align: center;
+`;
+
+const ActionsContainer = styled.div`
+  margin-top: 1.5em;
+`;
+
+const Footer = styled.div`
+  display: flex;
+  justify-content: center;
+  margin-top: auto;
+  padding-top: 1.5em;
+`;
+
+const HiddenInput = styled.input`
+  display: none;
+`;
+
+const query = graphql`
+  mutation ProfileDrawerContentUpdateAvatarMutation(
+    $input: UpdateAvatarInput!
+  ) {
+    updateAvatar(input: $input) {
+      id
+      avatar
+    }
+  }
+`;
+
+const DeleteAvatarButton: React.FC = () => {
+  const { t } = useTranslation(['profile']);
+
+  const [commit, loading] =
+    useMutation<ProfileDrawerContentUpdateAvatarMutation>(query);
+
+  const handler = useCallback(() => {
+    commit({
+      variables: {
+        input: { avatar: null },
+      },
+      onError: (e) => message.error(getError(e).message),
+      onCompleted: () => {
+        message.success(t('profile:updated'));
+      },
+    });
+  }, [commit, t]);
+
+  return (
+    <ProfileButton loading={loading} onClick={handler}>
+      {t('profile:deleteAvatar')}
+    </ProfileButton>
+  );
+};
+
+interface UpdateAvatarButtonProps {
+  hasAvatar: boolean;
+}
+
+const UpdateAvatarButton: React.FC<UpdateAvatarButtonProps> = ({
+  hasAvatar,
+}) => {
+  const { t } = useTranslation(['profile']);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  const [commit, loading] =
+    useMutation<ProfileDrawerContentUpdateAvatarMutation>(query);
+
+  const handler = useCallback(
+    (e) => {
+      const target = e.target as HTMLInputElement | null;
+      if (!target) return;
+
+      const { files } = target;
+      if (!files) return;
+
+      const file = files[0];
+
+      commit({
+        variables: {
+          input: {},
+        },
+        uploadables: { avatar: file },
+        onError: (error) => message.error(getError(error).message),
+        onCompleted: () => {
+          message.success(t('profile:updated'));
+        },
+      });
+    },
+    [commit, t]
+  );
+
+  return (
+    <>
+      <ProfileButton
+        loading={loading}
+        onClick={() => {
+          if (!fileInputRef.current) return;
+          fileInputRef.current.value = '';
+          fileInputRef.current.click();
+        }}
+      >
+        {t(`profile:${hasAvatar ? 'changeAvatar' : 'setAvatar'}`)}
+      </ProfileButton>
+
+      <HiddenInput
+        type='file'
+        accept='image/jpeg,image/png,image/webp'
+        onChange={handler}
+        ref={fileInputRef}
+      />
+    </>
+  );
+};
+
+interface UpdateNameButtonProps {
+  hasName: boolean;
+}
+
+const UpdateNameButton: React.FC<UpdateNameButtonProps> = ({ hasName }) => {
+  const { t } = useTranslation(['profile']);
+  const [modalVisible, setModalVisible] = useState(false);
+
+  return (
+    <>
+      <ProfileButton onClick={() => setModalVisible(true)}>
+        {t(`profile:${hasName ? 'changeName' : 'setName'}`)}
+      </ProfileButton>
+
+      <ProfileUpdateNameModal
+        visible={modalVisible}
+        onClose={() => setModalVisible(false)}
+      />
+    </>
+  );
+};
+
+const ChangePasswordButton: React.FC = () => {
+  const { t } = useTranslation(['profile']);
+  const [modalVisible, setModalVisible] = useState(false);
+
+  return (
+    <>
+      <ProfileButton onClick={() => setModalVisible(true)}>
+        {t('profile:changePassword')}
+      </ProfileButton>
+
+      <ProfileUpdatePasswordModal
+        visible={modalVisible}
+        onClose={() => setModalVisible(false)}
+      />
+    </>
+  );
+};
+
+const SignOutButton: React.FC = () => {
+  const { t } = useTranslation(['profile']);
+
+  const [commit, loading] = useMutation<ProfileDrawerContentSignOutMutation>(
+    graphql`
+      mutation ProfileDrawerContentSignOutMutation {
+        signOut {
+          ok
+        }
+      }
+    `
+  );
+
+  const handler = useCallback(() => {
+    commit({
+      variables: {},
+      onError: (e) => message.error(getError(e).message),
+      onCompleted: () => {
+        window.location.href = '/auth/';
+      },
+    });
+  }, [commit]);
+
+  return (
+    <ProfileButton danger loading={loading} onClick={handler}>
+      {t('profile:signOut')}
+    </ProfileButton>
+  );
+};
+
+const ProfileDrawerContent: React.FC<ProfileDrawerContentProps> = ({
+  actions,
+  children,
+}) => {
+  const { email, firstName, lastName, avatar } = useProfile();
+
+  const fullName = useMemo(
+    () => [firstName, lastName].filter((i) => i).join(' '),
+    [firstName, lastName]
+  );
+
+  return (
+    <>
+      <AvatarContainer>
+        <UserAvatar size='10em' />
+        <UserContent>
+          {fullName && <FullName>{fullName}</FullName>}
+          <Email>{email}</Email>
+        </UserContent>
+      </AvatarContainer>
+
+      <ActionsContainer>
+        {avatar && <DeleteAvatarButton />}
+
+        <UpdateAvatarButton hasAvatar={!!avatar} />
+        <UpdateNameButton hasName={!!fullName} />
+        <ChangePasswordButton />
+
+        {actions}
+
+        <SignOutButton />
+
+        {children}
+      </ActionsContainer>
+
+      <Footer>
+        <ThemeSwitcher />
+      </Footer>
+    </>
+  );
+};
+
+export default ProfileDrawerContent;

package/src/lib/components/profile/ProfileNavigationItem.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import { useIsMinWidth } from '@os-design/media';
+import { NavigationItem, type NavigationItemProps } from '@os-design/core';
+import { useTranslation } from 'react-i18next';
+import ProfileIcon from '../shared/icons/ProfileIcon';
+
+export interface ProfileNavigationItemProps
+  extends Partial<NavigationItemProps> {
+  onClick?: () => void;
+}
+
+const ProfileNavigationItem: React.FC<ProfileNavigationItemProps> = ({
+  onClick = () => {},
+  ...rest
+}) => {
+  const { t } = useTranslation(['profile']);
+  const isMinMd = useIsMinWidth('md');
+
+  if (isMinMd) return null;
+
+  return (
+    <NavigationItem
+      href='#' // To make focusable
+      icon={<ProfileIcon />}
+      onClick={onClick}
+      onKeyDown={(e) => {
+        if (e.key === 'Enter') onClick();
+      }}
+      {...rest}
+    >
+      {t('profile:menu')}
+    </NavigationItem>
+  );
+};
+
+export default ProfileNavigationItem;

package/src/lib/components/profile/ProfileUpdateNameModal.tsx

@@ -0,0 +1,117 @@
+import { Form, FormItem, Input, message, Modal } from '@os-design/core';
+import { FormProvider, useForm } from '@os-design/form';
+import graphql from 'babel-plugin-relay/macro';
+import React, { useCallback, useEffect, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useMutation } from 'react-relay';
+import handleFormErrors from '../../utils/handleFormErrors';
+import FormError from '../shared/FormError';
+import { type ProfileUpdateNameModalMutation } from './__generated__/ProfileUpdateNameModalMutation.graphql';
+import { useProfile } from './ProfileContext';
+
+interface ProfileUpdateNameFormData {
+  firstName: string;
+  lastName: string;
+}
+
+interface ProfileUpdateNameModalProps {
+  visible: boolean;
+  onClose: () => void;
+}
+
+const ProfileUpdateNameModal: React.FC<ProfileUpdateNameModalProps> = ({
+  visible,
+  onClose,
+}) => {
+  const { t } = useTranslation(['profile']);
+  const { firstName = '', lastName = '' } = useProfile();
+
+  const initValues = useMemo<ProfileUpdateNameFormData>(
+    () => ({ firstName, lastName }),
+    [firstName, lastName]
+  );
+
+  const { form, Field } = useForm(initValues);
+
+  const [commit, loading] = useMutation<ProfileUpdateNameModalMutation>(graphql`
+    mutation ProfileUpdateNameModalMutation($input: UpdateProfileInput!) {
+      updateProfile(input: $input) {
+        firstName
+        lastName
+      }
+    }
+  `);
+
+  // Reset the form when the modal is opened
+  useEffect(() => {
+    if (visible) form.reset();
+  }, [form, visible]);
+
+  const onSubmit = useCallback(() => {
+    commit({
+      variables: {
+        input: form.values.getAll(),
+      },
+      onError: (error) => handleFormErrors(form, error),
+      onCompleted: () => {
+        message.success(t('profile:updated'));
+        onClose();
+      },
+    });
+  }, [commit, form, onClose, t]);
+
+  const firstNameData = useMemo(
+    () => ({
+      label: t('profile:updateNameModal.firstName.label'),
+      placeholder: t('profile:updateNameModal.firstName.placeholder'),
+    }),
+    [t]
+  );
+
+  const lastNameData = useMemo(
+    () => ({
+      label: t('profile:updateNameModal.lastName.label'),
+      placeholder: t('profile:updateNameModal.lastName.placeholder'),
+    }),
+    [t]
+  );
+
+  return (
+    <Modal
+      title={t('profile:updateNameModal.title')}
+      visible={visible}
+      okText={t('profile:update')}
+      okLoading={loading}
+      onOk={onSubmit}
+      onClose={onClose}
+    >
+      <FormProvider form={form}>
+        <Form>
+          <Field
+            name='firstName'
+            data={firstNameData}
+            render={(props, { error }, data) => (
+              <FormItem label={data.label} error={error}>
+                <Input placeholder={data.placeholder} {...props} />
+              </FormItem>
+            )}
+          />
+
+          <Field
+            name='lastName'
+            data={lastNameData}
+            render={(props, { error }, data) => (
+              <FormItem label={data.label} error={error}>
+                <Input placeholder={data.placeholder} {...props} />
+              </FormItem>
+            )}
+          />
+
+          <FormError />
+        </Form>
+      </FormProvider>
+    </Modal>
+  );
+};
+
+export default ProfileUpdateNameModal;

package/src/lib/components/profile/ProfileUpdatePasswordModal.tsx

@@ -0,0 +1,129 @@
+import { Form, FormItem, InputPassword, message, Modal } from '@os-design/core';
+import { FormProvider, useForm } from '@os-design/form';
+import graphql from 'babel-plugin-relay/macro';
+import React, { useCallback, useEffect, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useMutation } from 'react-relay';
+import handleFormErrors from '../../utils/handleFormErrors';
+import FormError from '../shared/FormError';
+import { type ProfileUpdatePasswordModalMutation } from './__generated__/ProfileUpdatePasswordModalMutation.graphql';
+
+interface ProfileUpdatePasswordFormData {
+  currentPassword: string;
+  password: string;
+}
+
+interface ProfileUpdatePasswordModalProps {
+  visible: boolean;
+  onClose: () => void;
+}
+
+const ProfileUpdatePasswordModal: React.FC<ProfileUpdatePasswordModalProps> = ({
+  visible,
+  onClose,
+}) => {
+  const { t } = useTranslation(['profile']);
+
+  const initValues = useMemo<ProfileUpdatePasswordFormData>(
+    () => ({
+      currentPassword: '',
+      password: '',
+    }),
+    []
+  );
+
+  const { form, Field } = useForm(initValues);
+
+  const [commit, loading] = useMutation<ProfileUpdatePasswordModalMutation>(
+    graphql`
+      mutation ProfileUpdatePasswordModalMutation(
+        $input: UpdatePasswordInput!
+      ) {
+        updatePassword(input: $input) {
+          id
+        }
+      }
+    `
+  );
+
+  // Reset the form when the modal is opened
+  useEffect(() => {
+    if (visible) form.reset();
+  }, [form, visible]);
+
+  const onSubmit = useCallback(() => {
+    commit({
+      variables: {
+        input: form.values.getAll(),
+      },
+      onError: (error) => handleFormErrors(form, error),
+      onCompleted: () => {
+        message.success(t('profile:updatePasswordModal.success'));
+        onClose();
+      },
+    });
+  }, [commit, form, onClose, t]);
+
+  const currentPasswordData = useMemo(
+    () => ({
+      label: t('profile:updatePasswordModal.currentPassword.label'),
+      placeholder: t('profile:updatePasswordModal.currentPassword.placeholder'),
+    }),
+    [t]
+  );
+
+  const passwordData = useMemo(
+    () => ({
+      label: t('profile:updatePasswordModal.newPassword.label'),
+      placeholder: t('profile:updatePasswordModal.newPassword.placeholder'),
+      strengthNames: t('profile:updatePasswordModal.passwordStrengthNames', {
+        returnObjects: true,
+      }),
+    }),
+    [t]
+  );
+
+  return (
+    <Modal
+      title={t('profile:updatePasswordModal.title')}
+      visible={visible}
+      okText={t('profile:updatePasswordModal.button')}
+      okLoading={loading}
+      onOk={onSubmit}
+      onClose={onClose}
+    >
+      <FormProvider form={form}>
+        <Form>
+          <Field
+            name='currentPassword'
+            data={currentPasswordData}
+            render={(props, { error }, data) => (
+              <FormItem label={data.label} error={error}>
+                <InputPassword placeholder={data.placeholder} {...props} />
+              </FormItem>
+            )}
+          />
+
+          <Field
+            name='password'
+            data={passwordData}
+            render={(props, { error }, data) => (
+              <FormItem label={data.label} error={error}>
+                <InputPassword
+                  placeholder={data.placeholder}
+                  showStrengthMeter
+                  strengthNames={data.strengthNames}
+                  {...props}
+                />
+              </FormItem>
+            )}
+          />
+
+          <FormError />
+        </Form>
+      </FormProvider>
+    </Modal>
+  );
+};
+
+export default ProfileUpdatePasswordModal;

package/src/lib/components/profile/ProtectedWrapper.tsx

@@ -0,0 +1,81 @@
+import React, { useMemo } from 'react';
+import graphql from 'babel-plugin-relay/macro';
+import { useLazyLoadQuery } from 'react-relay';
+import { ErrorBoundary } from '@os-design/utils';
+import ProfileConfigContext from './ProfileConfigContext';
+import ProfileContext from './ProfileContext';
+import { type ProtectedWrapperQuery } from './__generated__/ProtectedWrapperQuery.graphql';
+
+interface ProtectedWrapperLoaderProps {
+  children?: React.ReactNode;
+}
+
+const ProtectedWrapperLoader: React.FC<ProtectedWrapperLoaderProps> = ({
+  children,
+}) => {
+  const { profile } = useLazyLoadQuery<ProtectedWrapperQuery>(
+    graphql`
+      query ProtectedWrapperQuery {
+        profile {
+          id
+          email
+          firstName
+          lastName
+          avatar
+        }
+      }
+    `,
+    {},
+    { fetchPolicy: 'store-or-network' }
+  );
+
+  const profileContext = useMemo(
+    () => ({
+      id: profile.id,
+      email: profile.email,
+      firstName: profile.firstName || undefined,
+      lastName: profile.lastName || undefined,
+      avatar: profile.avatar || undefined,
+    }),
+    [
+      profile.avatar,
+      profile.email,
+      profile.firstName,
+      profile.id,
+      profile.lastName,
+    ]
+  );
+
+  return (
+    <ProfileContext.Provider value={profileContext}>
+      {children}
+    </ProfileContext.Provider>
+  );
+};
+
+export interface ProtectedWrapperProps {
+  bucketId: string;
+  children?: React.ReactNode;
+}
+
+const ProtectedWrapper: React.FC<ProtectedWrapperProps> = ({
+  bucketId,
+  children,
+}) => {
+  const profileConfigContext = useMemo(() => ({ bucketId }), [bucketId]);
+
+  return (
+    <ProfileConfigContext.Provider value={profileConfigContext}>
+      <ErrorBoundary
+        fallback={() => {
+          window.location.href = '/auth/';
+          return null;
+        }}
+      >
+        <ProtectedWrapperLoader>{children}</ProtectedWrapperLoader>
+      </ErrorBoundary>
+    </ProfileConfigContext.Provider>
+  );
+};
+
+export default ProtectedWrapper;

package/src/lib/components/profile/UserAvatar.tsx

@@ -0,0 +1,23 @@
+import React, { useMemo } from 'react';
+import { Avatar, type AvatarProps } from '@os-design/core';
+import { useProfile } from './ProfileContext';
+import { useProfileConfig } from './ProfileConfigContext';
+
+const UserAvatar: React.FC<AvatarProps> = (props) => {
+  const { email, firstName, lastName, avatar } = useProfile();
+  const { bucketId } = useProfileConfig();
+
+  const avatarProps = useMemo(() => {
+    if (firstName || lastName) return { firstName, lastName };
+    return { firstName: email };
+  }, [email, firstName, lastName]);
+
+  const image = useMemo(() => {
+    if (!avatar) return undefined;
+    return `https://storage.yandexcloud.net/${bucketId}/users/${avatar}`;
+  }, [avatar, bucketId]);
+
+  return <Avatar {...avatarProps} image={image} {...props} />;
+};
+
+export default UserAvatar;