@os-team/profile 1.2.0 → 1.2.2

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;

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

@@ -0,0 +1,62 @@
+import React from 'react';
+import { ThemeOverrider } from '@os-design/theming';
+import styled from '@emotion/styled';
+import { resetFocusStyles, transitionStyles } from '@os-design/styles';
+import { type AvatarProps } from '@os-design/core';
+import UserAvatar from './UserAvatar';
+
+export interface UserAvatarAddonProps extends AvatarProps {
+  onClick?: () => void;
+}
+
+const Addon = styled.div`
+  width: 100%;
+  height: ${(p) => p.theme.navigationSideWidth}em;
+  min-height: ${(p) => p.theme.navigationSideWidth}em;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;
+
+const AVATAR_SIZE = 2.5;
+
+const StyledUserAvatar = styled(UserAvatar)`
+  ${resetFocusStyles};
+  cursor: pointer;
+
+  @media (hover: hover) {
+    &:hover,
+    &:focus {
+      opacity: 0.7;
+    }
+    ${transitionStyles('opacity')};
+  }
+`;
+
+const UserAvatarAddon: React.FC<UserAvatarAddonProps> = ({
+  onClick = () => {},
+  ...rest
+}) => (
+  <Addon>
+    <ThemeOverrider
+      overrides={(theme) => ({
+        avatarOnlineColorScoop: theme.navigationColorBg,
+      })}
+    >
+      <StyledUserAvatar
+        online
+        size={`${AVATAR_SIZE}em`}
+        tabIndex={0}
+        role='button'
+        onClick={onClick}
+        onKeyDown={(e) => {
+          if (e.key === 'Enter') onClick();
+        }}
+        onMouseDown={(e) => e.preventDefault()}
+        {...rest}
+      />
+    </ThemeOverrider>
+  </Addon>
+);
+
+export default UserAvatarAddon;

package/src/lib/components/profile/__generated__/ProfileDrawerContentSignOutMutation.graphql.ts

@@ -0,0 +1,74 @@
+/**
+ * @generated SignedSource<<efa148d8abdd56447bf12fa5b041af67>>
+ * @lightSyntaxTransform
+ * @nogrep
+ */
+
+/* tslint:disable */
+/* eslint-disable */
+// @ts-nocheck
+
+import { ConcreteRequest } from 'relay-runtime';
+export type ProfileDrawerContentSignOutMutation$variables = Record<PropertyKey, never>;
+export type ProfileDrawerContentSignOutMutation$data = {
+  readonly signOut: {
+    readonly ok: boolean;
+  };
+};
+export type ProfileDrawerContentSignOutMutation = {
+  response: ProfileDrawerContentSignOutMutation$data;
+  variables: ProfileDrawerContentSignOutMutation$variables;
+};
+
+const node: ConcreteRequest = (function(){
+var v0 = [
+  {
+    "alias": null,
+    "args": null,
+    "concreteType": "StatusPayload",
+    "kind": "LinkedField",
+    "name": "signOut",
+    "plural": false,
+    "selections": [
+      {
+        "alias": null,
+        "args": null,
+        "kind": "ScalarField",
+        "name": "ok",
+        "storageKey": null
+      }
+    ],
+    "storageKey": null
+  }
+];
+return {
+  "fragment": {
+    "argumentDefinitions": [],
+    "kind": "Fragment",
+    "metadata": null,
+    "name": "ProfileDrawerContentSignOutMutation",
+    "selections": (v0/*: any*/),
+    "type": "Mutation",
+    "abstractKey": null
+  },
+  "kind": "Request",
+  "operation": {
+    "argumentDefinitions": [],
+    "kind": "Operation",
+    "name": "ProfileDrawerContentSignOutMutation",
+    "selections": (v0/*: any*/)
+  },
+  "params": {
+    "cacheID": "f5241cc562af19628cf38a9731067807",
+    "id": null,
+    "metadata": {},
+    "name": "ProfileDrawerContentSignOutMutation",
+    "operationKind": "mutation",
+    "text": "mutation ProfileDrawerContentSignOutMutation {\n  signOut {\n    ok\n  }\n}\n"
+  }
+};
+})();
+
+(node as any).hash = "c7ca96e9e713315606b0c22d196b6f7b";
+
+export default node;

package/src/lib/components/profile/__generated__/ProfileDrawerContentUpdateAvatarMutation.graphql.ts

@@ -0,0 +1,100 @@
+/**
+ * @generated SignedSource<<08352a363b20a40c74d7623ce7ecf238>>
+ * @lightSyntaxTransform
+ * @nogrep
+ */
+
+/* tslint:disable */
+/* eslint-disable */
+// @ts-nocheck
+
+import { ConcreteRequest } from 'relay-runtime';
+export type UpdateAvatarInput = {
+  avatar?: any | null | undefined;
+};
+export type ProfileDrawerContentUpdateAvatarMutation$variables = {
+  input: UpdateAvatarInput;
+};
+export type ProfileDrawerContentUpdateAvatarMutation$data = {
+  readonly updateAvatar: {
+    readonly avatar: string | null | undefined;
+    readonly id: string;
+  };
+};
+export type ProfileDrawerContentUpdateAvatarMutation = {
+  response: ProfileDrawerContentUpdateAvatarMutation$data;
+  variables: ProfileDrawerContentUpdateAvatarMutation$variables;
+};
+
+const node: ConcreteRequest = (function(){
+var v0 = [
+  {
+    "defaultValue": null,
+    "kind": "LocalArgument",
+    "name": "input"
+  }
+],
+v1 = [
+  {
+    "alias": null,
+    "args": [
+      {
+        "kind": "Variable",
+        "name": "input",
+        "variableName": "input"
+      }
+    ],
+    "concreteType": "User",
+    "kind": "LinkedField",
+    "name": "updateAvatar",
+    "plural": false,
+    "selections": [
+      {
+        "alias": null,
+        "args": null,
+        "kind": "ScalarField",
+        "name": "id",
+        "storageKey": null
+      },
+      {
+        "alias": null,
+        "args": null,
+        "kind": "ScalarField",
+        "name": "avatar",
+        "storageKey": null
+      }
+    ],
+    "storageKey": null
+  }
+];
+return {
+  "fragment": {
+    "argumentDefinitions": (v0/*: any*/),
+    "kind": "Fragment",
+    "metadata": null,
+    "name": "ProfileDrawerContentUpdateAvatarMutation",
+    "selections": (v1/*: any*/),
+    "type": "Mutation",
+    "abstractKey": null
+  },
+  "kind": "Request",
+  "operation": {
+    "argumentDefinitions": (v0/*: any*/),
+    "kind": "Operation",
+    "name": "ProfileDrawerContentUpdateAvatarMutation",
+    "selections": (v1/*: any*/)
+  },
+  "params": {
+    "cacheID": "b749732615af9f8027386d69ffb57b63",
+    "id": null,
+    "metadata": {},
+    "name": "ProfileDrawerContentUpdateAvatarMutation",
+    "operationKind": "mutation",
+    "text": "mutation ProfileDrawerContentUpdateAvatarMutation(\n  $input: UpdateAvatarInput!\n) {\n  updateAvatar(input: $input) {\n    id\n    avatar\n  }\n}\n"
+  }
+};
+})();
+
+(node as any).hash = "cf72a6314772ed0d1f182b197c858505";
+
+export default node;