Сервис для продажи периодичных изданий pressa.ru./ ReactJS. Fluent UI делаем авторизационную форму.

Теги: django drf python

ReactJS. Fluent UI делаем авторизационную форму.

Создадим компонент UserMenu.tsx под меню пользователя.

import * as React from 'react';
import { PrimaryButton } from 'office-ui-fabric-react';

export default function UserMenu() {

    const login = () => {
        console.log('OK');
    }
  if (window.localStorage.getItem('token')) {
    return (
      <div className="loginForm">
        <PrimaryButton onClick={ () => login() } text="Выход" />
      </div>
    );
  } else {
    return (
      <div className="loginForm">
        <PrimaryButton onClick={ () => login() } text="Вход" />
      </div>
    )
  }

}

Где проверим присутствие переменной token в localStorage.

Теперь прикрепим панель.

ссылка на документацию

import * as React from 'react';
import { PrimaryButton } from 'office-ui-fabric-react';
import { Panel } from 'office-ui-fabric-react/lib/Panel';
import { useBoolean } from '@uifabric/react-hooks';
import { TextField } from 'office-ui-fabric-react/lib/TextField';

export default function UserMenu() {
  const [isOpen, { setTrue: openPanel, setFalse: dismissPanel }] = useBoolean(false);

  if (window.localStorage.getItem('token')) {
    return (
      <div className="loginForm">
        <PrimaryButton onClick={ () => login() } text="Выход" />
      </div>
    );
  } else {
    return (
      <div className="loginForm">
        <PrimaryButton onClick={openPanel} text="Вход" />
        <Panel
          headerText="Вход на сайт"
          isOpen={isOpen}
          onDismiss={dismissPanel}
          closeButtonAriaLabel="Close"
        >
          <TextField label="Required " required />
          <TextField label="Required " required />
          <PrimaryButton onClick={ () => login() } text="Primary" />
      </Panel>

      </div>
    )
  }

}

useBoolean - хук, который управляет несколькими булевыми переменными статуса панели.

Для того, чтобы появились иконки добавим в index.tsx.

import { initializeIcons } from '@uifabric/icons';
initializeIcons();

Появиоась ошибка

Request.tsx:5 Uncaught ReferenceError: regeneratorRuntime is not defined

Устанавливаем

npm install --save @babel/runtime
npm install --save-dev @babel/plugin-transform-runtime

Потом в .babelrc

  "plugins": [
    "react-hot-loader/babel",
    [
      "@babel/plugin-transform-runtime",
      {
        "regenerator": true
      }
    ]
  ],
Задать вопрос, прокомментировать.