@os-team/profile

The profile module for os-team's web apps.

Installation

Install the package using the following command:

yarn add @os-team/profile

Install peer dependencies:

npx install-peerdeps @os-team/profile

Create the public/locales/en/profile.json file with the following content:

{
  "update": "Save",
  "updated": "Saved",
  "menu": "Profile",
  "setAvatar": "Upload an avatar",
  "changeAvatar": "Change the avatar",
  "deleteAvatar": "Delete the avatar",
  "setName": "Specify the name",
  "changeName": "Change the name",
  "changePassword": "Change the password",
  "signOut": "Sign out",
  "updateNameModal": {
    "title": "Set your name",
    "firstName": {
      "label": "First name",
      "placeholder": "Enter the first name"
    },
    "lastName": {
      "label": "Last name",
      "placeholder": "Enter the last name"
    }
  },
  "updatePasswordModal": {
    "title": "Change your password",
    "button": "Change",
    "success": "Password has been changed",
    "currentPassword": {
      "label": "Current password",
      "placeholder": "Enter the current password"
    },
    "newPassword": {
      "label": "New password",
      "placeholder": "Enter a new password"
    },
    "passwordStrengthNames": {
      "weak": "Weak",
      "good": "Good",
      "strong": "Strong",
      "powerful": "Powerful"
    }
  },
  "sessions": {
    "title": "Active sessions",
    "description": "Every time someone logs into your account, a new session is created, which is displayed here. Terminate all suspicious sessions.",
    "current": "Your current session",
    "other": "Other sessions",
    "destroyAllOther": "Terminate all other sessions",
    "destroyed": "The session has been terminated",
    "destroyedAllOther": "All other sessions have been terminated",
    "deviceType": {
      "browser": "Browser",
      "handset": "Phone",
      "tablet": "Tablet",
      "tv": "TV",
      "desktop": "Desktop",
      "unknown": "Unknown device"
    },
    "lastSeen": "Last seen",
    "lastSeenOn": "Last seen on",
    "seconds": ["second", "seconds"],
    "minutes": ["minute", "minutes"],
    "hours": ["hour", "hours"],
    "ago": "ago",
    "monthAbbreviations": [
      "Jan",
      "Feb",
      "Mar",
      "Apr",
      "May",
      "Jun",
      "Jul",
      "Aug",
      "Sep",
      "Oct",
      "Nov",
      "Dec"
    ]
  }
}

Create the public/locales/ru/profile.json file with the following content:

{
  "update": "Сохранить",
  "updated": "Сохранено",
  "menu": "Профиль",
  "setAvatar": "Загрузить фото",
  "changeAvatar": "Изменить фото",
  "deleteAvatar": "Удалить фото",
  "setName": "Указать имя",
  "changeName": "Изменить имя",
  "changePassword": "Изменить пароль",
  "signOut": "Выйти",
  "updateNameModal": {
    "title": "Укажите ваше имя",
    "firstName": {
      "label": "Имя",
      "placeholder": "Введите свое имя"
    },
    "lastName": {
      "label": "Фамилия",
      "placeholder": "Введите свою фамилию"
    }
  },
  "updatePasswordModal": {
    "title": "Измените свой пароль",
    "button": "Изменить",
    "success": "Пароль изменен",
    "currentPassword": {
      "label": "Текущий пароль",
      "placeholder": "Введите текущий пароль"
    },
    "newPassword": {
      "label": "Новый пароль",
      "placeholder": "Введите новый пароль"
    },
    "passwordStrengthNames": {
      "weak": "Слабый",
      "good": "Хороший",
      "strong": "Надежный",
      "powerful": "Мощный"
    }
  },
  "sessions": {
    "title": "Активные сеансы",
    "description": "Каждый раз, когда кто-то входит в ваш аккаунт, создается новый сеанс, который отображается здесь. Завершите все подозрительные сеансы.",
    "current": "Ваш текущий сеанс",
    "other": "Другие сеансы",
    "destroyAllOther": "Завершить все другие сеансы",
    "destroyed": "Сеанс был завершен",
    "destroyedAllOther": "Все другие сеансы были завершены",
    "deviceType": {
      "browser": "Браузер",
      "handset": "Телефон",
      "tablet": "Планшет",
      "tv": "ТВ",
      "desktop": "Компьютер",
      "unknown": "Неизвестное устройство"
    },
    "lastSeen": "Был",
    "lastSeenOn": "Был",
    "seconds": ["секунду", "секунды", "секунд"],
    "minutes": ["минуту", "минуты", "минут"],
    "hours": ["час", "часа", "часов"],
    "ago": "назад",
    "monthAbbreviations": [
      "янв",
      "фев",
      "мар",
      "апр",
      "май",
      "июн",
      "июл",
      "авг",
      "сен",
      "окт",
      "ноя",
      "дек"
    ]
  }
}

Edit your layout like this:

import React, { useState } from 'react';
import {
  Layout as BaseLayout,
  Navigation,
  NavigationItem,
} from '@os-design/core';
import { useLocation, Link } from 'react-router-dom';
import {
  UserAvatarAddon,
  ProfileDrawer,
  ProfileNavigationItem,
  ProfileButton,
  SessionDrawer,
} from '@os-team/profile';
import HomeIcon from './icons/HomeIcon';

const Layout: React.FC = ({ children }) => {
  const { pathname } = useLocation();
  const { t } = useTranslation(['profile']);
  const [profileDrawerVisible, setProfileDrawerVisible] = useState(false);
  const [sessionDrawerVisible, setSessionDrawerVisible] = useState(false);

  return (
    <>
      <BaseLayout hasNavigation hasPageHeader>
        <Navigation
          sideBottom={
            <UserAvatarAddon onClick={() => setProfileDrawerVisible(true)} />
          }
        >
          <NavigationItem
            icon={<HomeIcon />}
            currentPage={pathname === '/home'}
            as={Link}
            to='/home'
          >
            Home
          </NavigationItem>
          <ProfileNavigationItem
            onClick={() => setProfileDrawerVisible(true)}
          />
        </Navigation>

        {children}
      </BaseLayout>

      <ProfileDrawer
        visible={profileDrawerVisible}
        onClose={() => setProfileDrawerVisible(false)}
        actions={
          <ProfileButton onClick={() => setSessionDrawerVisible(true)}>
            {t('profile:sessions.title')}
          </ProfileButton>
        }
      />

      <SessionDrawer
        visible={sessionDrawerVisible}
        onClose={() => setSessionDrawerVisible(false)}
      />
    </>
  );
};

export default Layout;

Note that you need to:

1. Pass UserAvatarAddon to the sideBottom property of the Navigation. It is used to open the profile drawer if the screen size is greater than or equal to 786px.
2. Add ProfileNavigationItem. It is used to open the profile drawer if the screen size is less than 786px.
3. Add ProfileDrawer. It is used to display profile data.

Wrap your app in ProtectedWrapper like this:

import React, { Suspense } from 'react';
import { GlobalStyles } from '@os-design/core';
import { ThemeProvider } from '@os-design/theming';
import { BrowserRouter } from 'react-router-dom';
import { RelayEnvironmentProvider } from 'react-relay/hooks';
import { ProtectedWrapper } from '@os-team/profile';
import ErrorBoundary from '@os-design/error-boundary';
import AppRouter from './AppRouter';
import createRelayEnvironment from './utils/createRelayEnvironment';
import MainLoader from './components/MainLoader';
import Layout from './components/Layout';
import { bucketId } from './utils/getFileUrl';

require('lazysizes');
require('lazysizes/plugins/attrchange/ls.attrchange');
require('./i18next');

const relayEnvironment = createRelayEnvironment();

const App: React.FC = () => (
  <ThemeProvider>
    <GlobalStyles />

    <RelayEnvironmentProvider environment={relayEnvironment}>
      <BrowserRouter>
        <Suspense fallback={<MainLoader />}>
          <ProtectedWrapper bucketId={bucketId}>
            <ErrorBoundary fallback={({ error }) => <p>{error.message}</p>}>
              <Layout>
                <AppRouter />
              </Layout>
            </ErrorBoundary>
          </ProtectedWrapper>
        </Suspense>
      </BrowserRouter>
    </RelayEnvironmentProvider>
  </ThemeProvider>
);

export default App;

Note:

1. Make sure that your ProtectedWrapper is wrapped with the Suspense component.
2. Use ErrorBoundary inside the ProtectedWrapper, otherwise, if a user receives an error, the UI will redirect him to the auth page, because the ProtectedWrapper has its own ErrorBoundary that redirects the user.

If you need to get the profile data somewhere in your app, you can use the useProfile hook.

import { useProfile } from '@os-team/profile';

const { id, email, firstName, lastName, avatar } = useProfile();