66 files changed, 6321 insertions, 6250 deletions

diff --git a/Timeline/ClientApp/src/App.tsx b/Timeline/ClientApp/src/app/App.tsx
index befa2a9c..befa2a9c 100644
--- a/Timeline/ClientApp/src/App.tsx
+++ b/Timeline/ClientApp/src/app/App.tsx
diff --git a/Timeline/ClientApp/src/about/About.tsx b/Timeline/ClientApp/src/app/about/About.tsx
index 031c46cb..bce4c06e 100644
--- a/Timeline/ClientApp/src/about/About.tsx
+++ b/Timeline/ClientApp/src/app/about/About.tsx
@@ -1,180 +1,180 @@
-import React from 'react';

-import { useTranslation, Trans } from 'react-i18next';

-

-import authorAvatarUrl from './author-avatar.png';

-

-import AppBar from '../common/AppBar';

-

-const frontendCredits: {

-  name: string;

-  url: string;

-  icon?: string;

-}[] = [

-  {

-    name: 'reactjs',

-    url: 'https://reactjs.org',

-    icon: 'react',

-  },

-  {

-    name: 'typescript',

-    url: 'https://www.typescriptlang.org',

-  },

-  {

-    name: 'bootstrap',

-    url: 'https://getbootstrap.com',

-    icon: 'bootstrap',

-  },

-  {

-    name: 'reactstrap',

-    url: 'https://reactstrap.github.io',

-  },

-  {

-    name: 'babeljs',

-    url: 'https://babeljs.io',

-  },

-  {

-    name: 'webpack',

-    url: 'https://webpack.js.org',

-  },

-  {

-    name: 'sass',

-    url: 'https://sass-lang.com',

-    icon: 'sass',

-  },

-  {

-    name: 'fontawesome',

-    url: 'https://fontawesome.com',

-    icon: 'font-awesome-flag',

-  },

-  {

-    name: 'eslint',

-    url: 'https://eslint.org',

-  },

-  {

-    name: 'prettier',

-    url: 'https://prettier.io',

-  },

-  {

-    name: 'pepjs',

-    url: 'https://github.com/jquery/PEP',

-  },

-];

-

-const backendCredits: {

-  name: string;

-  url: string;

-  icon?: string;

-}[] = [

-  {

-    name: 'ASP.NET Core',

-    url: 'https://dotnet.microsoft.com/learn/aspnet/what-is-aspnet-core',

-  },

-  { name: 'sqlite', url: 'https://sqlite.org' },

-  {

-    name: 'ImageSharp',

-    url: 'https://github.com/SixLabors/ImageSharp',

-  },

-];

-

-const About: React.FC = () => {

-  const { t } = useTranslation();

-

-  return (

-    <>

-      <AppBar />

-      <div className="mt-appbar px-2 mb-4">

-        <div className="container mt-4 py-3 shadow border border-primary rounded bg-light">

-          <h4 id="author-info">{t('about.author.title')}</h4>

-          <div>

-            <div className="d-flex">

-              <img

-                src={authorAvatarUrl}

-                className="align-self-start avatar large rounded-circle"

-              />

-              <div>

-                <p>

-                  <small>{t('about.author.fullname')}</small>

-                  <span className="text-primary">杨宇千</span>

-                </p>

-                <p>

-                  <small>{t('about.author.nickname')}</small>

-                  <span className="text-primary">crupest</span>

-                </p>

-                <p>

-                  <small>{t('about.author.introduction')}</small>

-                  {t('about.author.introductionContent')}

-                </p>

-              </div>

-            </div>

-            <p>

-              <small>{t('about.author.links')}</small>

-              <a

-                href="https://github.com/crupest"

-                target="_blank"

-                rel="noopener noreferrer"

-              >

-                <i className="fab fa-github about-link-icon text-body" />

-              </a>

-            </p>

-          </div>

-        </div>

-        <div className="container mt-4 py-3 shadow border border-primary rounded bg-light">

-          <h4>{t('about.site.title')}</h4>

-          <p>

-            <Trans i18nKey="about.site.content">

-              0<span className="text-primary">1</span>2<b>3</b>4

-              <a href="#author-info">5</a>6

-            </Trans>

-          </p>

-          <p>

-            <a

-              href="https://github.com/crupest/Timeline"

-              target="_blank"

-              rel="noopener noreferrer"

-            >

-              {t('about.site.repo')}

-            </a>

-          </p>

-        </div>

-        <div className="container mt-4 py-3 shadow border border-primary rounded bg-light">

-          <h4>{t('about.credits.title')}</h4>

-          <p>{t('about.credits.content')}</p>

-          <p>{t('about.credits.frontend')}</p>

-          <ul>

-            {frontendCredits.map((item, index) => {

-              return (

-                <li key={index}>

-                  <a href={item.url} target="_blank" rel="noopener noreferrer">

-                    {item.icon != null && (

-                      <i className={'fab fa-' + item.icon + ' mx-2'} />

-                    )}

-                    {item.name}

-                  </a>

-                </li>

-              );

-            })}

-            <li>...</li>

-          </ul>

-          <p>{t('about.credits.backend')}</p>

-          <ul>

-            {backendCredits.map((item, index) => {

-              return (

-                <li key={index}>

-                  <a href={item.url} target="_blank" rel="noopener noreferrer">

-                    {item.icon != null && (

-                      <i className={'fab fa-' + item.icon + ' mx-2'} />

-                    )}

-                    {item.name}

-                  </a>

-                </li>

-              );

-            })}

-            <li>...</li>

-          </ul>

-        </div>

-      </div>

-    </>

-  );

-};

-

-export default About;

+import React from 'react';
+import { useTranslation, Trans } from 'react-i18next';
+
+import authorAvatarUrl from './author-avatar.png';
+
+import AppBar from '../common/AppBar';
+
+const frontendCredits: {
+  name: string;
+  url: string;
+  icon?: string;
+}[] = [
+  {
+    name: 'reactjs',
+    url: 'https://reactjs.org',
+    icon: 'react',
+  },
+  {
+    name: 'typescript',
+    url: 'https://www.typescriptlang.org',
+  },
+  {
+    name: 'bootstrap',
+    url: 'https://getbootstrap.com',
+    icon: 'bootstrap',
+  },
+  {
+    name: 'reactstrap',
+    url: 'https://reactstrap.github.io',
+  },
+  {
+    name: 'babeljs',
+    url: 'https://babeljs.io',
+  },
+  {
+    name: 'webpack',
+    url: 'https://webpack.js.org',
+  },
+  {
+    name: 'sass',
+    url: 'https://sass-lang.com',
+    icon: 'sass',
+  },
+  {
+    name: 'fontawesome',
+    url: 'https://fontawesome.com',
+    icon: 'font-awesome-flag',
+  },
+  {
+    name: 'eslint',
+    url: 'https://eslint.org',
+  },
+  {
+    name: 'prettier',
+    url: 'https://prettier.io',
+  },
+  {
+    name: 'pepjs',
+    url: 'https://github.com/jquery/PEP',
+  },
+];
+
+const backendCredits: {
+  name: string;
+  url: string;
+  icon?: string;
+}[] = [
+  {
+    name: 'ASP.NET Core',
+    url: 'https://dotnet.microsoft.com/learn/aspnet/what-is-aspnet-core',
+  },
+  { name: 'sqlite', url: 'https://sqlite.org' },
+  {
+    name: 'ImageSharp',
+    url: 'https://github.com/SixLabors/ImageSharp',
+  },
+];
+
+const About: React.FC = () => {
+  const { t } = useTranslation();
+
+  return (
+    <>
+      <AppBar />
+      <div className="mt-appbar px-2 mb-4">
+        <div className="container mt-4 py-3 shadow border border-primary rounded bg-light">
+          <h4 id="author-info">{t('about.author.title')}</h4>
+          <div>
+            <div className="d-flex">
+              <img
+                src={authorAvatarUrl}
+                className="align-self-start avatar large rounded-circle"
+              />
+              <div>
+                <p>
+                  <small>{t('about.author.fullname')}</small>
+                  <span className="text-primary">杨宇千</span>
+                </p>
+                <p>
+                  <small>{t('about.author.nickname')}</small>
+                  <span className="text-primary">crupest</span>
+                </p>
+                <p>
+                  <small>{t('about.author.introduction')}</small>
+                  {t('about.author.introductionContent')}
+                </p>
+              </div>
+            </div>
+            <p>
+              <small>{t('about.author.links')}</small>
+              <a
+                href="https://github.com/crupest"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                <i className="fab fa-github about-link-icon text-body" />
+              </a>
+            </p>
+          </div>
+        </div>
+        <div className="container mt-4 py-3 shadow border border-primary rounded bg-light">
+          <h4>{t('about.site.title')}</h4>
+          <p>
+            <Trans i18nKey="about.site.content">
+              0<span className="text-primary">1</span>2<b>3</b>4
+              <a href="#author-info">5</a>6
+            </Trans>
+          </p>
+          <p>
+            <a
+              href="https://github.com/crupest/Timeline"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              {t('about.site.repo')}
+            </a>
+          </p>
+        </div>
+        <div className="container mt-4 py-3 shadow border border-primary rounded bg-light">
+          <h4>{t('about.credits.title')}</h4>
+          <p>{t('about.credits.content')}</p>
+          <p>{t('about.credits.frontend')}</p>
+          <ul>
+            {frontendCredits.map((item, index) => {
+              return (
+                <li key={index}>
+                  <a href={item.url} target="_blank" rel="noopener noreferrer">
+                    {item.icon != null && (
+                      <i className={'fab fa-' + item.icon + ' mx-2'} />
+                    )}
+                    {item.name}
+                  </a>
+                </li>
+              );
+            })}
+            <li>...</li>
+          </ul>
+          <p>{t('about.credits.backend')}</p>
+          <ul>
+            {backendCredits.map((item, index) => {
+              return (
+                <li key={index}>
+                  <a href={item.url} target="_blank" rel="noopener noreferrer">
+                    {item.icon != null && (
+                      <i className={'fab fa-' + item.icon + ' mx-2'} />
+                    )}
+                    {item.name}
+                  </a>
+                </li>
+              );
+            })}
+            <li>...</li>
+          </ul>
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default About;
diff --git a/Timeline/ClientApp/src/about/about.sass b/Timeline/ClientApp/src/app/about/about.sass
index 24af9dee..0b0f89f5 100644
--- a/Timeline/ClientApp/src/about/about.sass
+++ b/Timeline/ClientApp/src/app/about/about.sass
@@ -1,3 +1,3 @@
-.about-link-icon

-  @extend .mx-2

-  font-size: 1.2em

+.about-link-icon
+  @extend .mx-2
+  font-size: 1.2em
diff --git a/Timeline/ClientApp/src/about/author-avatar.png b/Timeline/ClientApp/src/app/about/author-avatar.png
index d890d8d0..d890d8d0 100644
--- a/Timeline/ClientApp/src/about/author-avatar.png
+++ b/Timeline/ClientApp/src/app/about/author-avatar.png
diff --git a/Timeline/ClientApp/src/admin/Admin.tsx b/Timeline/ClientApp/src/app/admin/Admin.tsx
index af07dd2b..9e7d592f 100644
--- a/Timeline/ClientApp/src/admin/Admin.tsx
+++ b/Timeline/ClientApp/src/app/admin/Admin.tsx
@@ -1,78 +1,78 @@
-import React, { Fragment } from 'react';

-import { Nav, NavItem, NavLink } from 'reactstrap';

-import {

-  Redirect,

-  Route,

-  Switch,

-  useRouteMatch,

-  useHistory

-} from 'react-router';

-import classnames from 'classnames';

-

-import AppBar from '../common/AppBar';

-import UserAdmin from './UserAdmin';

-

-import { UserWithToken } from '../data/user';

-

-interface AdminProps {

-  user: UserWithToken;

-}

-

-const Admin: React.FC<AdminProps> = props => {

-  const match = useRouteMatch();

-  const history = useHistory();

-  type TabNames = 'users' | 'more';

-

-  const tabName = history.location.pathname.replace(match.path + '/', '');

-

-  function toggle(newTab: TabNames): void {

-    history.push(`${match.url}/${newTab}`);

-  }

-

-  const createRoute = (

-    name: string,

-    body: React.ReactNode

-  ): React.ReactNode => {

-    return (

-      <Route path={`${match.path}/${name}`}>

-        <AppBar />

-        <div style={{ height: 56 }} className="flex-fix-length" />

-        <Nav tabs>

-          <NavItem>

-            <NavLink

-              className={classnames({ active: tabName === 'users' })}

-              onClick={() => {

-                toggle('users');

-              }}

-            >

-              Users

-            </NavLink>

-          </NavItem>

-          <NavItem>

-            <NavLink

-              className={classnames({ active: tabName === 'more' })}

-              onClick={() => {

-                toggle('more');

-              }}

-            >

-              More

-            </NavLink>

-          </NavItem>

-        </Nav>

-        {body}

-      </Route>

-    );

-  };

-

-  return (

-    <Fragment>

-      <Switch>

-        <Redirect from={match.path} to={`${match.path}/users`} exact />

-        {createRoute('users', <UserAdmin user={props.user} />)}

-        {createRoute('more', <div>More Page Works</div>)}

-      </Switch>

-    </Fragment>

-  );

-};

-

-export default Admin;

+import React, { Fragment } from 'react';
+import { Nav, NavItem, NavLink } from 'reactstrap';
+import {
+  Redirect,
+  Route,
+  Switch,
+  useRouteMatch,
+  useHistory
+} from 'react-router';
+import classnames from 'classnames';
+
+import AppBar from '../common/AppBar';
+import UserAdmin from './UserAdmin';
+
+import { UserWithToken } from '../data/user';
+
+interface AdminProps {
+  user: UserWithToken;
+}
+
+const Admin: React.FC<AdminProps> = props => {
+  const match = useRouteMatch();
+  const history = useHistory();
+  type TabNames = 'users' | 'more';
+
+  const tabName = history.location.pathname.replace(match.path + '/', '');
+
+  function toggle(newTab: TabNames): void {
+    history.push(`${match.url}/${newTab}`);
+  }
+
+  const createRoute = (
+    name: string,
+    body: React.ReactNode
+  ): React.ReactNode => {
+    return (
+      <Route path={`${match.path}/${name}`}>
+        <AppBar />
+        <div style={{ height: 56 }} className="flex-fix-length" />
+        <Nav tabs>
+          <NavItem>
+            <NavLink
+              className={classnames({ active: tabName === 'users' })}
+              onClick={() => {
+                toggle('users');
+              }}
+            >
+              Users
+            </NavLink>
+          </NavItem>
+          <NavItem>
+            <NavLink
+              className={classnames({ active: tabName === 'more' })}
+              onClick={() => {
+                toggle('more');
+              }}
+            >
+              More
+            </NavLink>
+          </NavItem>
+        </Nav>
+        {body}
+      </Route>
+    );
+  };
+
+  return (
+    <Fragment>
+      <Switch>
+        <Redirect from={match.path} to={`${match.path}/users`} exact />
+        {createRoute('users', <UserAdmin user={props.user} />)}
+        {createRoute('more', <div>More Page Works</div>)}
+      </Switch>
+    </Fragment>
+  );
+};
+
+export default Admin;
diff --git a/Timeline/ClientApp/src/admin/UserAdmin.tsx b/Timeline/ClientApp/src/app/admin/UserAdmin.tsx
index fc752011..ba14fc84 100644
--- a/Timeline/ClientApp/src/admin/UserAdmin.tsx
+++ b/Timeline/ClientApp/src/app/admin/UserAdmin.tsx
@@ -1,463 +1,463 @@
-import React, { useState, useEffect } from 'react';

-import {

-  ListGroupItem,

-  Row,

-  Col,

-  UncontrolledDropdown,

-  DropdownToggle,

-  DropdownMenu,

-  DropdownItem,

-  Spinner,

-  Button,

-} from 'reactstrap';

-import axios from 'axios';

-

-import OperationDialog from '../common/OperationDialog';

-

-import { User, UserWithToken } from '../data/user';

-import { apiBaseUrl } from '../config';

-

-async function fetchUserList(_token: string): Promise<User[]> {

-  const res = await axios.get<User[]>(`${apiBaseUrl}/users`);

-  return res.data;

-}

-

-interface CreateUserInfo {

-  username: string;

-  password: string;

-  administrator: boolean;

-}

-

-async function createUser(user: CreateUserInfo, token: string): Promise<User> {

-  const res = await axios.post<User>(

-    `${apiBaseUrl}/userop/createuser?token=${token}`,

-    user

-  );

-  return res.data;

-}

-

-function deleteUser(username: string, token: string): Promise<void> {

-  return axios.delete(`${apiBaseUrl}/users/${username}?token=${token}`);

-}

-

-function changeUsername(

-  oldUsername: string,

-  newUsername: string,

-  token: string

-): Promise<void> {

-  return axios.patch(`${apiBaseUrl}/users/${oldUsername}?token=${token}`, {

-    username: newUsername,

-  });

-}

-

-function changePassword(

-  username: string,

-  newPassword: string,

-  token: string

-): Promise<void> {

-  return axios.patch(`${apiBaseUrl}/users/${username}?token=${token}`, {

-    password: newPassword,

-  });

-}

-

-function changePermission(

-  username: string,

-  newPermission: boolean,

-  token: string

-): Promise<void> {

-  return axios.patch(`${apiBaseUrl}/users/${username}?token=${token}`, {

-    administrator: newPermission,

-  });

-}

-

-const kChangeUsername = 'changeusername';

-const kChangePassword = 'changepassword';

-const kChangePermission = 'changepermission';

-const kDelete = 'delete';

-

-type TChangeUsername = typeof kChangeUsername;

-type TChangePassword = typeof kChangePassword;

-type TChangePermission = typeof kChangePermission;

-type TDelete = typeof kDelete;

-

-type ContextMenuItem =

-  | TChangeUsername

-  | TChangePassword

-  | TChangePermission

-  | TDelete;

-

-interface UserCardProps {

-  onContextMenu: (item: ContextMenuItem) => void;

-  user: User;

-}

-

-const UserItem: React.FC<UserCardProps> = (props) => {

-  const user = props.user;

-

-  const createClickCallback = (item: ContextMenuItem): (() => void) => {

-    return () => {

-      props.onContextMenu(item);

-    };

-  };

-

-  return (

-    <ListGroupItem className="container">

-      <Row className="align-items-center">

-        <Col>

-          <p className="mb-0 text-primary">{user.username}</p>

-          <small

-            className={user.administrator ? 'text-danger' : 'text-secondary'}

-          >

-            {user.administrator ? 'administrator' : 'user'}

-          </small>

-        </Col>

-        <Col className="col-auto">

-          <UncontrolledDropdown>

-            <DropdownToggle color="warning" className="text-light" caret>

-              Manage

-            </DropdownToggle>

-            <DropdownMenu>

-              <DropdownItem onClick={createClickCallback(kChangeUsername)}>

-                Change Username

-              </DropdownItem>

-              <DropdownItem onClick={createClickCallback(kChangePassword)}>

-                Change Password

-              </DropdownItem>

-              <DropdownItem onClick={createClickCallback(kChangePermission)}>

-                Change Permission

-              </DropdownItem>

-              <DropdownItem

-                className="text-danger"

-                onClick={createClickCallback(kDelete)}

-              >

-                Delete

-              </DropdownItem>

-            </DropdownMenu>

-          </UncontrolledDropdown>

-        </Col>

-      </Row>

-    </ListGroupItem>

-  );

-};

-

-interface DialogProps {

-  open: boolean;

-  close: () => void;

-}

-

-interface CreateUserDialogProps extends DialogProps {

-  process: (user: CreateUserInfo) => Promise<void>;

-}

-

-const CreateUserDialog: React.FC<CreateUserDialogProps> = (props) => {

-  return (

-    <OperationDialog

-      title="Create"

-      titleColor="create"

-      inputPrompt="You are creating a new user."

-      inputScheme={[

-        { type: 'text', label: 'Username' },

-        { type: 'text', label: 'Password' },

-        { type: 'bool', label: 'Administrator' },

-      ]}

-      onProcess={([username, password, administrator]) =>

-        props.process({

-          username: username as string,

-          password: password as string,

-          administrator: administrator as boolean,

-        })

-      }

-      close={props.close}

-      open={props.open}

-    />

-  );

-};

-

-const UsernameLabel: React.FC = (props) => {

-  return <span style={{ color: 'blue' }}>{props.children}</span>;

-};

-

-interface UserDeleteDialogProps extends DialogProps {

-  username: string;

-  process: () => Promise<void>;

-}

-

-const UserDeleteDialog: React.FC<UserDeleteDialogProps> = (props) => {

-  return (

-    <OperationDialog

-      open={props.open}

-      close={props.close}

-      title="Dangerous"

-      titleColor="dangerous"

-      inputPrompt={() => (

-        <>

-          {'You are deleting user '}

-          <UsernameLabel>{props.username}</UsernameLabel>

-          {' !'}

-        </>

-      )}

-      onProcess={props.process}

-    />

-  );

-};

-

-interface UserModifyDialogProps<T> extends DialogProps {

-  username: string;

-  process: (value: T) => Promise<void>;

-}

-

-const UserChangeUsernameDialog: React.FC<UserModifyDialogProps<string>> = (

-  props

-) => {

-  return (

-    <OperationDialog

-      open={props.open}

-      close={props.close}

-      title="Caution"

-      titleColor="dangerous"

-      inputPrompt={() => (

-        <>

-          {'You are change the username of user '}

-          <UsernameLabel>{props.username}</UsernameLabel>

-          {' !'}

-        </>

-      )}

-      inputScheme={[{ type: 'text', label: 'New Username' }]}

-      onProcess={([newUsername]) => {

-        return props.process(newUsername as string);

-      }}

-    />

-  );

-};

-

-const UserChangePasswordDialog: React.FC<UserModifyDialogProps<string>> = (

-  props

-) => {

-  return (

-    <OperationDialog

-      open={props.open}

-      close={props.close}

-      title="Caution"

-      titleColor="dangerous"

-      inputPrompt={() => (

-        <>

-          {'You are change the password of user '}

-          <UsernameLabel>{props.username}</UsernameLabel>

-          {' !'}

-        </>

-      )}

-      inputScheme={[{ type: 'text', label: 'New Password' }]}

-      onProcess={([newPassword]) => {

-        return props.process(newPassword as string);

-      }}

-    />

-  );

-};

-

-interface UserChangePermissionDialogProps extends DialogProps {

-  username: string;

-  newPermission: boolean;

-  process: () => Promise<void>;

-}

-

-const UserChangePermissionDialog: React.FC<UserChangePermissionDialogProps> = (

-  props

-) => {

-  return (

-    <OperationDialog

-      open={props.open}

-      close={props.close}

-      title="Caution"

-      titleColor="dangerous"

-      inputPrompt={() => (

-        <>

-          {'You are change user '}

-          <UsernameLabel>{props.username}</UsernameLabel>

-          {' to '}

-          <span style={{ color: 'orange' }}>

-            {props.newPermission ? 'administrator' : 'normal user'}

-          </span>

-          {' !'}

-        </>

-      )}

-      onProcess={props.process}

-    />

-  );

-};

-

-interface UserAdminProps {

-  user: UserWithToken;

-}

-

-const UserAdmin: React.FC<UserAdminProps> = (props) => {

-  type DialogInfo =

-    | null

-    | {

-        type: 'create';

-      }

-    | { type: TDelete; username: string }

-    | {

-        type: TChangeUsername;

-        username: string;

-      }

-    | {

-        type: TChangePassword;

-        username: string;

-      }

-    | {

-        type: TChangePermission;

-        username: string;

-        newPermission: boolean;

-      };

-

-  const [users, setUsers] = useState<User[] | null>(null);

-  const [dialog, setDialog] = useState<DialogInfo>(null);

-

-  const token = props.user.token;

-

-  useEffect(() => {

-    let subscribe = true;

-    void fetchUserList(props.user.token).then((us) => {

-      if (subscribe) {

-        setUsers(us);

-      }

-    });

-    return () => {

-      subscribe = false;

-    };

-  }, [props.user]);

-

-  let dialogNode: React.ReactNode;

-  if (dialog)

-    switch (dialog.type) {

-      case 'create':

-        dialogNode = (

-          <CreateUserDialog

-            open

-            close={() => setDialog(null)}

-            process={async (user) => {

-              const u = await createUser(user, token);

-              setUsers((oldUsers) => [...(oldUsers ?? []), u]);

-            }}

-          />

-        );

-        break;

-      case 'delete':

-        dialogNode = (

-          <UserDeleteDialog

-            open

-            close={() => setDialog(null)}

-            username={dialog.username}

-            process={async () => {

-              await deleteUser(dialog.username, token);

-              setUsers((oldUsers) =>

-                (oldUsers ?? []).filter((u) => u.username !== dialog.username)

-              );

-            }}

-          />

-        );

-        break;

-      case kChangeUsername:

-        dialogNode = (

-          <UserChangeUsernameDialog

-            open

-            close={() => setDialog(null)}

-            username={dialog.username}

-            process={async (newUsername) => {

-              await changeUsername(dialog.username, newUsername, token);

-              setUsers((oldUsers) => {

-                const users = (oldUsers ?? []).slice();

-                const findedUser = users.find(

-                  (u) => u.username === dialog.username

-                );

-                if (findedUser) findedUser.username = newUsername;

-                return users;

-              });

-            }}

-          />

-        );

-        break;

-      case kChangePassword:

-        dialogNode = (

-          <UserChangePasswordDialog

-            open

-            close={() => setDialog(null)}

-            username={dialog.username}

-            process={async (newPassword) => {

-              await changePassword(dialog.username, newPassword, token);

-            }}

-          />

-        );

-        break;

-      case kChangePermission: {

-        const newPermission = dialog.newPermission;

-        dialogNode = (

-          <UserChangePermissionDialog

-            open

-            close={() => setDialog(null)}

-            username={dialog.username}

-            newPermission={newPermission}

-            process={async () => {

-              await changePermission(dialog.username, newPermission, token);

-              setUsers((oldUsers) => {

-                const users = (oldUsers ?? []).slice();

-                const findedUser = users.find(

-                  (u) => u.username === dialog.username

-                );

-                if (findedUser) findedUser.administrator = newPermission;

-                return users;

-              });

-            }}

-          />

-        );

-        break;

-      }

-    }

-

-  if (users) {

-    const userComponents = users.map((user) => {

-      return (

-        <UserItem

-          key={user.username}

-          user={user}

-          onContextMenu={(item) => {

-            setDialog(

-              item === kChangePermission

-                ? {

-                    type: kChangePermission,

-                    username: user.username,

-                    newPermission: !user.administrator,

-                  }

-                : {

-                    type: item,

-                    username: user.username,

-                  }

-            );

-          }}

-        />

-      );

-    });

-

-    return (

-      <>

-        <Button

-          color="success"

-          onClick={() =>

-            setDialog({

-              type: 'create',

-            })

-          }

-          className="align-self-end"

-        >

-          Create User

-        </Button>

-        {userComponents}

-        {dialogNode}

-      </>

-    );

-  } else {

-    return <Spinner />;

-  }

-};

-

-export default UserAdmin;

+import React, { useState, useEffect } from 'react';
+import {
+  ListGroupItem,
+  Row,
+  Col,
+  UncontrolledDropdown,
+  DropdownToggle,
+  DropdownMenu,
+  DropdownItem,
+  Spinner,
+  Button,
+} from 'reactstrap';
+import axios from 'axios';
+
+import OperationDialog from '../common/OperationDialog';
+
+import { User, UserWithToken } from '../data/user';
+import { apiBaseUrl } from '../config';
+
+async function fetchUserList(_token: string): Promise<User[]> {
+  const res = await axios.get<User[]>(`${apiBaseUrl}/users`);
+  return res.data;
+}
+
+interface CreateUserInfo {
+  username: string;
+  password: string;
+  administrator: boolean;
+}
+
+async function createUser(user: CreateUserInfo, token: string): Promise<User> {
+  const res = await axios.post<User>(
+    `${apiBaseUrl}/userop/createuser?token=${token}`,
+    user
+  );
+  return res.data;
+}
+
+function deleteUser(username: string, token: string): Promise<void> {
+  return axios.delete(`${apiBaseUrl}/users/${username}?token=${token}`);
+}
+
+function changeUsername(
+  oldUsername: string,
+  newUsername: string,
+  token: string
+): Promise<void> {
+  return axios.patch(`${apiBaseUrl}/users/${oldUsername}?token=${token}`, {
+    username: newUsername,
+  });
+}
+
+function changePassword(
+  username: string,
+  newPassword: string,
+  token: string
+): Promise<void> {
+  return axios.patch(`${apiBaseUrl}/users/${username}?token=${token}`, {
+    password: newPassword,
+  });
+}
+
+function changePermission(
+  username: string,
+  newPermission: boolean,
+  token: string
+): Promise<void> {
+  return axios.patch(`${apiBaseUrl}/users/${username}?token=${token}`, {
+    administrator: newPermission,
+  });
+}
+
+const kChangeUsername = 'changeusername';
+const kChangePassword = 'changepassword';
+const kChangePermission = 'changepermission';
+const kDelete = 'delete';
+
+type TChangeUsername = typeof kChangeUsername;
+type TChangePassword = typeof kChangePassword;
+type TChangePermission = typeof kChangePermission;
+type TDelete = typeof kDelete;
+
+type ContextMenuItem =
+  | TChangeUsername
+  | TChangePassword
+  | TChangePermission
+  | TDelete;
+
+interface UserCardProps {
+  onContextMenu: (item: ContextMenuItem) => void;
+  user: User;
+}
+
+const UserItem: React.FC<UserCardProps> = (props) => {
+  const user = props.user;
+
+  const createClickCallback = (item: ContextMenuItem): (() => void) => {
+    return () => {
+      props.onContextMenu(item);
+    };
+  };
+
+  return (
+    <ListGroupItem className="container">
+      <Row className="align-items-center">
+        <Col>
+          <p className="mb-0 text-primary">{user.username}</p>
+          <small
+            className={user.administrator ? 'text-danger' : 'text-secondary'}
+          >
+            {user.administrator ? 'administrator' : 'user'}
+          </small>
+        </Col>
+        <Col className="col-auto">
+          <UncontrolledDropdown>
+            <DropdownToggle color="warning" className="text-light" caret>
+              Manage
+            </DropdownToggle>
+            <DropdownMenu>
+              <DropdownItem onClick={createClickCallback(kChangeUsername)}>
+                Change Username
+              </DropdownItem>
+              <DropdownItem onClick={createClickCallback(kChangePassword)}>
+                Change Password
+              </DropdownItem>
+              <DropdownItem onClick={createClickCallback(kChangePermission)}>
+                Change Permission
+              </DropdownItem>
+              <DropdownItem
+                className="text-danger"
+                onClick={createClickCallback(kDelete)}
+              >
+                Delete
+              </DropdownItem>
+            </DropdownMenu>
+          </UncontrolledDropdown>
+        </Col>
+      </Row>
+    </ListGroupItem>
+  );
+};
+
+interface DialogProps {
+  open: boolean;
+  close: () => void;
+}
+
+interface CreateUserDialogProps extends DialogProps {
+  process: (user: CreateUserInfo) => Promise<void>;
+}
+
+const CreateUserDialog: React.FC<CreateUserDialogProps> = (props) => {
+  return (
+    <OperationDialog
+      title="Create"
+      titleColor="create"
+      inputPrompt="You are creating a new user."
+      inputScheme={[
+        { type: 'text', label: 'Username' },
+        { type: 'text', label: 'Password' },
+        { type: 'bool', label: 'Administrator' },
+      ]}
+      onProcess={([username, password, administrator]) =>
+        props.process({
+          username: username as string,
+          password: password as string,
+          administrator: administrator as boolean,
+        })
+      }
+      close={props.close}
+      open={props.open}
+    />
+  );
+};
+
+const UsernameLabel: React.FC = (props) => {
+  return <span style={{ color: 'blue' }}>{props.children}</span>;
+};
+
+interface UserDeleteDialogProps extends DialogProps {
+  username: string;
+  process: () => Promise<void>;
+}
+
+const UserDeleteDialog: React.FC<UserDeleteDialogProps> = (props) => {
+  return (
+    <OperationDialog
+      open={props.open}
+      close={props.close}
+      title="Dangerous"
+      titleColor="dangerous"
+      inputPrompt={() => (
+        <>
+          {'You are deleting user '}
+          <UsernameLabel>{props.username}</UsernameLabel>
+          {' !'}
+        </>
+      )}
+      onProcess={props.process}
+    />
+  );
+};
+
+interface UserModifyDialogProps<T> extends DialogProps {
+  username: string;
+  process: (value: T) => Promise<void>;
+}
+
+const UserChangeUsernameDialog: React.FC<UserModifyDialogProps<string>> = (
+  props
+) => {
+  return (
+    <OperationDialog
+      open={props.open}
+      close={props.close}
+      title="Caution"
+      titleColor="dangerous"
+      inputPrompt={() => (
+        <>
+          {'You are change the username of user '}
+          <UsernameLabel>{props.username}</UsernameLabel>
+          {' !'}
+        </>
+      )}
+      inputScheme={[{ type: 'text', label: 'New Username' }]}
+      onProcess={([newUsername]) => {
+        return props.process(newUsername as string);
+      }}
+    />
+  );
+};
+
+const UserChangePasswordDialog: React.FC<UserModifyDialogProps<string>> = (
+  props
+) => {
+  return (
+    <OperationDialog
+      open={props.open}
+      close={props.close}
+      title="Caution"
+      titleColor="dangerous"
+      inputPrompt={() => (
+        <>
+          {'You are change the password of user '}
+          <UsernameLabel>{props.username}</UsernameLabel>
+          {' !'}
+        </>
+      )}
+      inputScheme={[{ type: 'text', label: 'New Password' }]}
+      onProcess={([newPassword]) => {
+        return props.process(newPassword as string);
+      }}
+    />
+  );
+};
+
+interface UserChangePermissionDialogProps extends DialogProps {
+  username: string;
+  newPermission: boolean;
+  process: () => Promise<void>;
+}
+
+const UserChangePermissionDialog: React.FC<UserChangePermissionDialogProps> = (
+  props
+) => {
+  return (
+    <OperationDialog
+      open={props.open}
+      close={props.close}
+      title="Caution"
+      titleColor="dangerous"
+      inputPrompt={() => (
+        <>
+          {'You are change user '}
+          <UsernameLabel>{props.username}</UsernameLabel>
+          {' to '}
+          <span style={{ color: 'orange' }}>
+            {props.newPermission ? 'administrator' : 'normal user'}
+          </span>
+          {' !'}
+        </>
+      )}
+      onProcess={props.process}
+    />
+  );
+};
+
+interface UserAdminProps {
+  user: UserWithToken;
+}
+
+const UserAdmin: React.FC<UserAdminProps> = (props) => {
+  type DialogInfo =
+    | null
+    | {
+        type: 'create';
+      }
+    | { type: TDelete; username: string }
+    | {
+        type: TChangeUsername;
+        username: string;
+      }
+    | {
+        type: TChangePassword;
+        username: string;
+      }
+    | {
+        type: TChangePermission;
+        username: string;
+        newPermission: boolean;
+      };
+
+  const [users, setUsers] = useState<User[] | null>(null);
+  const [dialog, setDialog] = useState<DialogInfo>(null);
+
+  const token = props.user.token;
+
+  useEffect(() => {
+    let subscribe = true;
+    void fetchUserList(props.user.token).then((us) => {
+      if (subscribe) {
+        setUsers(us);
+      }
+    });
+    return () => {
+      subscribe = false;
+    };
+  }, [props.user]);
+
+  let dialogNode: React.ReactNode;
+  if (dialog)
+    switch (dialog.type) {
+      case 'create':
+        dialogNode = (
+          <CreateUserDialog
+            open
+            close={() => setDialog(null)}
+            process={async (user) => {
+              const u = await createUser(user, token);
+              setUsers((oldUsers) => [...(oldUsers ?? []), u]);
+            }}
+          />
+        );
+        break;
+      case 'delete':
+        dialogNode = (
+          <UserDeleteDialog
+            open
+            close={() => setDialog(null)}
+            username={dialog.username}
+            process={async () => {
+              await deleteUser(dialog.username, token);
+              setUsers((oldUsers) =>
+                (oldUsers ?? []).filter((u) => u.username !== dialog.username)
+              );
+            }}
+          />
+        );
+        break;
+      case kChangeUsername:
+        dialogNode = (
+          <UserChangeUsernameDialog
+            open
+            close={() => setDialog(null)}
+            username={dialog.username}
+            process={async (newUsername) => {
+              await changeUsername(dialog.username, newUsername, token);
+              setUsers((oldUsers) => {
+                const users = (oldUsers ?? []).slice();
+                const findedUser = users.find(
+                  (u) => u.username === dialog.username
+                );
+                if (findedUser) findedUser.username = newUsername;
+                return users;
+              });
+            }}
+          />
+        );
+        break;
+      case kChangePassword:
+        dialogNode = (
+          <UserChangePasswordDialog
+            open
+            close={() => setDialog(null)}
+            username={dialog.username}
+            process={async (newPassword) => {
+              await changePassword(dialog.username, newPassword, token);
+            }}
+          />
+        );
+        break;
+      case kChangePermission: {
+        const newPermission = dialog.newPermission;
+        dialogNode = (
+          <UserChangePermissionDialog
+            open
+            close={() => setDialog(null)}
+            username={dialog.username}
+            newPermission={newPermission}
+            process={async () => {
+              await changePermission(dialog.username, newPermission, token);
+              setUsers((oldUsers) => {
+                const users = (oldUsers ?? []).slice();
+                const findedUser = users.find(
+                  (u) => u.username === dialog.username
+                );
+                if (findedUser) findedUser.administrator = newPermission;
+                return users;
+              });
+            }}
+          />
+        );
+        break;
+      }
+    }
+
+  if (users) {
+    const userComponents = users.map((user) => {
+      return (
+        <UserItem
+          key={user.username}
+          user={user}
+          onContextMenu={(item) => {
+            setDialog(
+              item === kChangePermission
+                ? {
+                    type: kChangePermission,
+                    username: user.username,
+                    newPermission: !user.administrator,
+                  }
+                : {
+                    type: item,
+                    username: user.username,
+                  }
+            );
+          }}
+        />
+      );
+    });
+
+    return (
+      <>
+        <Button
+          color="success"
+          onClick={() =>
+            setDialog({
+              type: 'create',
+            })
+          }
+          className="align-self-end"
+        >
+          Create User
+        </Button>
+        {userComponents}
+        {dialogNode}
+      </>
+    );
+  } else {
+    return <Spinner />;
+  }
+};
+
+export default UserAdmin;
diff --git a/Timeline/ClientApp/src/common.ts b/Timeline/ClientApp/src/app/common.ts
index 673f1c98..0b11791a 100644
--- a/Timeline/ClientApp/src/common.ts
+++ b/Timeline/ClientApp/src/app/common.ts
@@ -1,4 +1,4 @@
-// This error is thrown when ui goes wrong with bad logic.

-// Such as am variable should not be null, but it does.

-// This error should never occur. If it does, it indicates there is some logic bug in codes.

-export class UiLogicError extends Error {}

+// This error is thrown when ui goes wrong with bad logic.
+// Such as am variable should not be null, but it does.
+// This error should never occur. If it does, it indicates there is some logic bug in codes.
+export class UiLogicError extends Error {}
diff --git a/Timeline/ClientApp/src/common/AlertHost.tsx b/Timeline/ClientApp/src/app/common/AlertHost.tsx
index 2d9dbb13..c815db2b 100644
--- a/Timeline/ClientApp/src/common/AlertHost.tsx
+++ b/Timeline/ClientApp/src/app/common/AlertHost.tsx
@@ -1,75 +1,75 @@
-import React, { useCallback } from 'react';

-import { Alert } from 'reactstrap';

-import without from 'lodash/without';

-import concat from 'lodash/concat';

-

-import {

-  alertService,

-  AlertInfoEx,

-  kAlertHostId,

-  AlertInfo,

-} from './alert-service';

-

-interface AutoCloseAlertProps {

-  alert: AlertInfo;

-  close: () => void;

-}

-

-export const AutoCloseAlert: React.FC<AutoCloseAlertProps> = (props) => {

-  const { alert } = props;

-

-  React.useEffect(() => {

-    const tag = window.setTimeout(props.close, 5000);

-    return () => window.clearTimeout(tag);

-  }, [props.close]);

-

-  return (

-    <Alert className="m-3" color={alert.type ?? 'primary'} toggle={props.close}>

-      {alert.message}

-    </Alert>

-  );

-};

-

-// oh what a bad name!

-interface AlertInfoExEx extends AlertInfoEx {

-  close: () => void;

-}

-

-export const AlertHost: React.FC = () => {

-  const [alerts, setAlerts] = React.useState<AlertInfoExEx[]>([]);

-

-  // react guarantee that state setters are stable, so we don't need to add it to dependency list

-

-  const consume = useCallback((alert: AlertInfoEx): void => {

-    const alertEx: AlertInfoExEx = {

-      ...alert,

-      close: () => {

-        setAlerts((oldAlerts) => {

-          return without(oldAlerts, alertEx);

-        });

-      },

-    };

-    setAlerts((oldAlerts) => {

-      return concat(oldAlerts, alertEx);

-    });

-  }, []);

-

-  React.useEffect(() => {

-    alertService.registerConsumer(consume);

-    return () => {

-      alertService.unregisterConsumer(consume);

-    };

-  }, [consume]);

-

-  return (

-    <div id={kAlertHostId} className="alert-container">

-      {alerts.map((alert) => {

-        return (

-          <AutoCloseAlert key={alert.id} alert={alert} close={alert.close} />

-        );

-      })}

-    </div>

-  );

-};

-

-export default AlertHost;

+import React, { useCallback } from 'react';
+import { Alert } from 'reactstrap';
+import without from 'lodash/without';
+import concat from 'lodash/concat';
+
+import {
+  alertService,
+  AlertInfoEx,
+  kAlertHostId,
+  AlertInfo,
+} from './alert-service';
+
+interface AutoCloseAlertProps {
+  alert: AlertInfo;
+  close: () => void;
+}
+
+export const AutoCloseAlert: React.FC<AutoCloseAlertProps> = (props) => {
+  const { alert } = props;
+
+  React.useEffect(() => {
+    const tag = window.setTimeout(props.close, 5000);
+    return () => window.clearTimeout(tag);
+  }, [props.close]);
+
+  return (
+    <Alert className="m-3" color={alert.type ?? 'primary'} toggle={props.close}>
+      {alert.message}
+    </Alert>
+  );
+};
+
+// oh what a bad name!
+interface AlertInfoExEx extends AlertInfoEx {
+  close: () => void;
+}
+
+export const AlertHost: React.FC = () => {
+  const [alerts, setAlerts] = React.useState<AlertInfoExEx[]>([]);
+
+  // react guarantee that state setters are stable, so we don't need to add it to dependency list
+
+  const consume = useCallback((alert: AlertInfoEx): void => {
+    const alertEx: AlertInfoExEx = {
+      ...alert,
+      close: () => {
+        setAlerts((oldAlerts) => {
+          return without(oldAlerts, alertEx);
+        });
+      },
+    };
+    setAlerts((oldAlerts) => {
+      return concat(oldAlerts, alertEx);
+    });
+  }, []);
+
+  React.useEffect(() => {
+    alertService.registerConsumer(consume);
+    return () => {
+      alertService.unregisterConsumer(consume);
+    };
+  }, [consume]);
+
+  return (
+    <div id={kAlertHostId} className="alert-container">
+      {alerts.map((alert) => {
+        return (
+          <AutoCloseAlert key={alert.id} alert={alert} close={alert.close} />
+        );
+      })}
+    </div>
+  );
+};
+
+export default AlertHost;
diff --git a/Timeline/ClientApp/src/common/AppBar.tsx b/Timeline/ClientApp/src/app/common/AppBar.tsx
index 4f61798c..f75fe08f 100644
--- a/Timeline/ClientApp/src/common/AppBar.tsx
+++ b/Timeline/ClientApp/src/app/common/AppBar.tsx
@@ -1,107 +1,107 @@
-import React from 'react';

-import { useHistory, matchPath } from 'react-router';

-import { Link, NavLink } from 'react-router-dom';

-import { Navbar, NavbarToggler, Collapse, Nav, NavItem } from 'reactstrap';

-import { useMediaQuery } from 'react-responsive';

-import { useTranslation } from 'react-i18next';

-

-import { useUser } from '../data/user';

-import { useOptionalVersionedAvatarUrl } from '../user/api';

-

-import TimelineLogo from './TimelineLogo';

-

-const AppBar: React.FC = (_) => {

-  const history = useHistory();

-  const user = useUser();

-  const avatarUrl = useOptionalVersionedAvatarUrl(user?._links?.avatar);

-

-  const { t } = useTranslation();

-

-  const isUpMd = useMediaQuery({

-    minWidth: getComputedStyle(document.documentElement).getPropertyValue(

-      '--breakpoint-md'

-    ),

-  });

-

-  const [isMenuOpen, setIsMenuOpen] = React.useState(false);

-

-  const toggleMenu = React.useCallback((): void => {

-    setIsMenuOpen((oldIsMenuOpen) => !oldIsMenuOpen);

-  }, []);

-

-  const isAdministrator = user && user.administrator;

-

-  const rightArea = (

-    <div className="ml-auto mr-2">

-      {user != null ? (

-        <NavLink to={`/users/${user.username}`}>

-          <img

-            className="avatar small rounded-circle bg-white"

-            src={avatarUrl}

-          />

-        </NavLink>

-      ) : (

-        <NavLink className="text-light" to="/login">

-          {t('nav.login')}

-        </NavLink>

-      )}

-    </div>

-  );

-

-  return (

-    <Navbar dark className="fixed-top w-100 bg-primary app-bar" expand="md">

-      <Link to="/" className="navbar-brand d-flex align-items-center">

-        <TimelineLogo style={{ height: '1em' }} />

-        Timeline

-      </Link>

-

-      {isUpMd ? null : rightArea}

-

-      <NavbarToggler onClick={toggleMenu} />

-      <Collapse isOpen={isMenuOpen} navbar>

-        <Nav className="mr-auto" navbar>

-          <NavItem

-            className={

-              matchPath(history.location.pathname, '/settings')

-                ? 'active'

-                : undefined

-            }

-          >

-            <NavLink className="nav-link" to="/settings">

-              {t('nav.settings')}

-            </NavLink>

-          </NavItem>

-

-          <NavItem

-            className={

-              matchPath(history.location.pathname, '/about')

-                ? 'active'

-                : undefined

-            }

-          >

-            <NavLink className="nav-link" to="/about">

-              {t('nav.about')}

-            </NavLink>

-          </NavItem>

-

-          {isAdministrator && (

-            <NavItem

-              className={

-                matchPath(history.location.pathname, '/admin')

-                  ? 'active'

-                  : undefined

-              }

-            >

-              <NavLink className="nav-link" to="/admin">

-                Administration

-              </NavLink>

-            </NavItem>

-          )}

-        </Nav>

-        {isUpMd ? rightArea : null}

-      </Collapse>

-    </Navbar>

-  );

-};

-

-export default AppBar;

+import React from 'react';
+import { useHistory, matchPath } from 'react-router';
+import { Link, NavLink } from 'react-router-dom';
+import { Navbar, NavbarToggler, Collapse, Nav, NavItem } from 'reactstrap';
+import { useMediaQuery } from 'react-responsive';
+import { useTranslation } from 'react-i18next';
+
+import { useUser } from '../data/user';
+import { useOptionalVersionedAvatarUrl } from '../user/api';
+
+import TimelineLogo from './TimelineLogo';
+
+const AppBar: React.FC = (_) => {
+  const history = useHistory();
+  const user = useUser();
+  const avatarUrl = useOptionalVersionedAvatarUrl(user?._links?.avatar);
+
+  const { t } = useTranslation();
+
+  const isUpMd = useMediaQuery({
+    minWidth: getComputedStyle(document.documentElement).getPropertyValue(
+      '--breakpoint-md'
+    ),
+  });
+
+  const [isMenuOpen, setIsMenuOpen] = React.useState(false);
+
+  const toggleMenu = React.useCallback((): void => {
+    setIsMenuOpen((oldIsMenuOpen) => !oldIsMenuOpen);
+  }, []);
+
+  const isAdministrator = user && user.administrator;
+
+  const rightArea = (
+    <div className="ml-auto mr-2">
+      {user != null ? (
+        <NavLink to={`/users/${user.username}`}>
+          <img
+            className="avatar small rounded-circle bg-white"
+            src={avatarUrl}
+          />
+        </NavLink>
+      ) : (
+        <NavLink className="text-light" to="/login">
+          {t('nav.login')}
+        </NavLink>
+      )}
+    </div>
+  );
+
+  return (
+    <Navbar dark className="fixed-top w-100 bg-primary app-bar" expand="md">
+      <Link to="/" className="navbar-brand d-flex align-items-center">
+        <TimelineLogo style={{ height: '1em' }} />
+        Timeline
+      </Link>
+
+      {isUpMd ? null : rightArea}
+
+      <NavbarToggler onClick={toggleMenu} />
+      <Collapse isOpen={isMenuOpen} navbar>
+        <Nav className="mr-auto" navbar>
+          <NavItem
+            className={
+              matchPath(history.location.pathname, '/settings')
+                ? 'active'
+                : undefined
+            }
+          >
+            <NavLink className="nav-link" to="/settings">
+              {t('nav.settings')}
+            </NavLink>
+          </NavItem>
+
+          <NavItem
+            className={
+              matchPath(history.location.pathname, '/about')
+                ? 'active'
+                : undefined
+            }
+          >
+            <NavLink className="nav-link" to="/about">
+              {t('nav.about')}
+            </NavLink>
+          </NavItem>
+
+          {isAdministrator && (
+            <NavItem
+              className={
+                matchPath(history.location.pathname, '/admin')
+                  ? 'active'
+                  : undefined
+              }
+            >
+              <NavLink className="nav-link" to="/admin">
+                Administration
+              </NavLink>
+            </NavItem>
+          )}
+        </Nav>
+        {isUpMd ? rightArea : null}
+      </Collapse>
+    </Navbar>
+  );
+};
+
+export default AppBar;
diff --git a/Timeline/ClientApp/src/common/CollapseButton.tsx b/Timeline/ClientApp/src/app/common/CollapseButton.tsx
index 28385003..5307c4ac 100644
--- a/Timeline/ClientApp/src/common/CollapseButton.tsx
+++ b/Timeline/ClientApp/src/app/common/CollapseButton.tsx
@@ -1,101 +1,101 @@
-import React from 'react';

-

-export interface CollapseButtonProps {

-  collapse: boolean;

-  onClick: () => void;

-  className?: string;

-}

-

-const CollapseButton: React.FC<CollapseButtonProps> = (props) => {

-  const { onClick, collapse, className } = props;

-

-  return (

-    <svg

-      width="25"

-      height="25"

-      viewBox="0 0 100 100"

-      className={className}

-      onClick={onClick}

-    >

-      {(() => {

-        if (collapse) {

-          return (

-            <>

-              <line

-                stroke="currentcolor"

-                strokeWidth="14"

-                x1="50"

-                x2="90"

-                y1="17"

-                y2="17"

-              />

-              <line

-                stroke="currentcolor"

-                strokeWidth="14"

-                x1="10"

-                x2="50"

-                y1="83"

-                y2="83"

-              />

-              <line

-                stroke="currentcolor"

-                strokeWidth="14"

-                x1="17"

-                x2="17"

-                y1="50"

-                y2="90"

-              />

-              <line

-                stroke="currentcolor"

-                strokeWidth="14"

-                x1="83"

-                x2="83"

-                y1="10"

-                y2="50"

-              />

-            </>

-          );

-        } else {

-          return (

-            <>

-              <line

-                stroke="currentcolor"

-                strokeWidth="14"

-                x1="55"

-                x2="95"

-                y1="38"

-                y2="38"

-              />

-              <line

-                stroke="currentcolor"

-                strokeWidth="14"

-                x1="5"

-                x2="45"

-                y1="62"

-                y2="62"

-              />

-              <line

-                stroke="currentcolor"

-                strokeWidth="14"

-                x1="38"

-                x2="38"

-                y1="55"

-                y2="95"

-              />

-              <line

-                stroke="currentcolor"

-                strokeWidth="14"

-                x1="62"

-                x2="62"

-                y1="5"

-                y2="45"

-              />

-            </>

-          );

-        }

-      })()}

-    </svg>

-  );

-};

-

-export default CollapseButton;

+import React from 'react';
+
+export interface CollapseButtonProps {
+  collapse: boolean;
+  onClick: () => void;
+  className?: string;
+}
+
+const CollapseButton: React.FC<CollapseButtonProps> = (props) => {
+  const { onClick, collapse, className } = props;
+
+  return (
+    <svg
+      width="25"
+      height="25"
+      viewBox="0 0 100 100"
+      className={className}
+      onClick={onClick}
+    >
+      {(() => {
+        if (collapse) {
+          return (
+            <>
+              <line
+                stroke="currentcolor"
+                strokeWidth="14"
+                x1="50"
+                x2="90"
+                y1="17"
+                y2="17"
+              />
+              <line
+                stroke="currentcolor"
+                strokeWidth="14"
+                x1="10"
+                x2="50"
+                y1="83"
+                y2="83"
+              />
+              <line
+                stroke="currentcolor"
+                strokeWidth="14"
+                x1="17"
+                x2="17"
+                y1="50"
+                y2="90"
+              />
+              <line
+                stroke="currentcolor"
+                strokeWidth="14"
+                x1="83"
+                x2="83"
+                y1="10"
+                y2="50"
+              />
+            </>
+          );
+        } else {
+          return (
+            <>
+              <line
+                stroke="currentcolor"
+                strokeWidth="14"
+                x1="55"
+                x2="95"
+                y1="38"
+                y2="38"
+              />
+              <line
+                stroke="currentcolor"
+                strokeWidth="14"
+                x1="5"
+                x2="45"
+                y1="62"
+                y2="62"
+              />
+              <line
+                stroke="currentcolor"
+                strokeWidth="14"
+                x1="38"
+                x2="38"
+                y1="55"
+                y2="95"
+              />
+              <line
+                stroke="currentcolor"
+                strokeWidth="14"
+                x1="62"
+                x2="62"
+                y1="5"
+                y2="45"
+              />
+            </>
+          );
+        }
+      })()}
+    </svg>
+  );
+};
+
+export default CollapseButton;
diff --git a/Timeline/ClientApp/src/common/FileInput.tsx b/Timeline/ClientApp/src/app/common/FileInput.tsx
index d434f0fa..20da7b71 100644
--- a/Timeline/ClientApp/src/common/FileInput.tsx
+++ b/Timeline/ClientApp/src/app/common/FileInput.tsx
@@ -1,41 +1,41 @@
-import React from 'react';

-import clsx from 'clsx';

-

-import { ExcludeKey } from '../type-utilities';

-

-export interface FileInputProps

-  extends ExcludeKey<

-    React.InputHTMLAttributes<HTMLInputElement>,

-    'type' | 'id'

-  > {

-  inputId?: string;

-  labelText: string;

-  color?: string;

-  className?: string;

-}

-

-const FileInput: React.FC<FileInputProps> = props => {

-  const { inputId, labelText, color, className, ...otherProps } = props;

-

-  const realInputId = React.useMemo<string>(() => {

-    if (inputId != null) return inputId;

-    return (

-      'file-input-' +

-      (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1)

-    );

-  }, [inputId]);

-

-  return (

-    <>

-      <input className="d-none" type="file" id={realInputId} {...otherProps} />

-      <label

-        htmlFor={realInputId}

-        className={clsx('btn', 'btn-' + (color ?? 'primary'), className)}

-      >

-        {labelText}

-      </label>

-    </>

-  );

-};

-

-export default FileInput;

+import React from 'react';
+import clsx from 'clsx';
+
+import { ExcludeKey } from '../type-utilities';
+
+export interface FileInputProps
+  extends ExcludeKey<
+    React.InputHTMLAttributes<HTMLInputElement>,
+    'type' | 'id'
+  > {
+  inputId?: string;
+  labelText: string;
+  color?: string;
+  className?: string;
+}
+
+const FileInput: React.FC<FileInputProps> = props => {
+  const { inputId, labelText, color, className, ...otherProps } = props;
+
+  const realInputId = React.useMemo<string>(() => {
+    if (inputId != null) return inputId;
+    return (
+      'file-input-' +
+      (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1)
+    );
+  }, [inputId]);
+
+  return (
+    <>
+      <input className="d-none" type="file" id={realInputId} {...otherProps} />
+      <label
+        htmlFor={realInputId}
+        className={clsx('btn', 'btn-' + (color ?? 'primary'), className)}
+      >
+        {labelText}
+      </label>
+    </>
+  );
+};
+
+export default FileInput;
diff --git a/Timeline/ClientApp/src/common/ImageCropper.tsx b/Timeline/ClientApp/src/app/common/ImageCropper.tsx
index fb9bb4f9..7cb8d3cf 100644
--- a/Timeline/ClientApp/src/common/ImageCropper.tsx
+++ b/Timeline/ClientApp/src/app/common/ImageCropper.tsx
@@ -1,306 +1,306 @@
-import * as React from 'react';

-import clsx from 'clsx';

-

-import { UiLogicError } from '../common';

-

-export interface Clip {

-  left: number;

-  top: number;

-  width: number;

-}

-

-interface NormailizedClip extends Clip {

-  height: number;

-}

-

-interface ImageInfo {

-  width: number;

-  height: number;

-  landscape: boolean;

-  ratio: number;

-  maxClipWidth: number;

-  maxClipHeight: number;

-}

-

-interface ImageCropperSavedState {

-  clip: NormailizedClip;

-  x: number;

-  y: number;

-  pointerId: number;

-}

-

-export interface ImageCropperProps {

-  clip: Clip | null;

-  imageUrl: string;

-  onChange: (clip: Clip) => void;

-  imageElementCallback?: (element: HTMLImageElement | null) => void;

-  className?: string;

-}

-

-const ImageCropper = (props: ImageCropperProps): React.ReactElement => {

-  const { clip, imageUrl, onChange, imageElementCallback, className } = props;

-

-  const [oldState, setOldState] = React.useState<ImageCropperSavedState | null>(

-    null

-  );

-  const [imageInfo, setImageInfo] = React.useState<ImageInfo | null>(null);

-

-  const normalizeClip = (c: Clip | null | undefined): NormailizedClip => {

-    if (c == null) {

-      return { left: 0, top: 0, width: 0, height: 0 };

-    }

-

-    return {

-      left: c.left || 0,

-      top: c.top || 0,

-      width: c.width || 0,

-      height: imageInfo != null ? (c.width || 0) / imageInfo.ratio : 0,

-    };

-  };

-

-  const c = normalizeClip(clip);

-

-  const imgElementRef = React.useRef<HTMLImageElement | null>(null);

-

-  const onImageRef = React.useCallback(

-    (e: HTMLImageElement | null) => {

-      imgElementRef.current = e;

-      if (imageElementCallback != null && e == null) {

-        imageElementCallback(null);

-      }

-    },

-    [imageElementCallback]

-  );

-

-  const onImageLoad = React.useCallback(

-    (e: React.SyntheticEvent<HTMLImageElement>) => {

-      const img = e.currentTarget;

-      const landscape = img.naturalWidth >= img.naturalHeight;

-

-      const info = {

-        width: img.naturalWidth,

-        height: img.naturalHeight,

-        landscape,

-        ratio: img.naturalHeight / img.naturalWidth,

-        maxClipWidth: landscape ? img.naturalHeight / img.naturalWidth : 1,

-        maxClipHeight: landscape ? 1 : img.naturalWidth / img.naturalHeight,

-      };

-      setImageInfo(info);

-      onChange({ left: 0, top: 0, width: info.maxClipWidth });

-      if (imageElementCallback != null) {

-        imageElementCallback(img);

-      }

-    },

-    [onChange, imageElementCallback]

-  );

-

-  const onPointerDown = React.useCallback(

-    (e: React.PointerEvent) => {

-      if (oldState != null) return;

-      e.currentTarget.setPointerCapture(e.pointerId);

-      setOldState({

-        x: e.clientX,

-        y: e.clientY,

-        clip: c,

-        pointerId: e.pointerId,

-      });

-    },

-    [oldState, c]

-  );

-

-  const onPointerUp = React.useCallback(

-    (e: React.PointerEvent) => {

-      if (oldState == null || oldState.pointerId !== e.pointerId) return;

-      e.currentTarget.releasePointerCapture(e.pointerId);

-      setOldState(null);

-    },

-    [oldState]

-  );

-

-  const onPointerMove = React.useCallback(

-    (e: React.PointerEvent) => {

-      if (oldState == null) return;

-

-      const oldClip = oldState.clip;

-

-      const movement = { x: e.clientX - oldState.x, y: e.clientY - oldState.y };

-

-      const { current: imgElement } = imgElementRef;

-

-      if (imgElement == null) throw new UiLogicError('Image element is null.');

-

-      const moveRatio = {

-        x: movement.x / imgElement.width,

-        y: movement.y / imgElement.height,

-      };

-

-      const newRatio = {

-        x: oldClip.left + moveRatio.x,

-        y: oldClip.top + moveRatio.y,

-      };

-      if (newRatio.x < 0) {

-        newRatio.x = 0;

-      } else if (newRatio.x > 1 - oldClip.width) {

-        newRatio.x = 1 - oldClip.width;

-      }

-      if (newRatio.y < 0) {

-        newRatio.y = 0;

-      } else if (newRatio.y > 1 - oldClip.height) {

-        newRatio.y = 1 - oldClip.height;

-      }

-

-      onChange({ left: newRatio.x, top: newRatio.y, width: oldClip.width });

-    },

-    [oldState, onChange]

-  );

-

-  const onHandlerPointerMove = React.useCallback(

-    (e: React.PointerEvent) => {

-      if (oldState == null) return;

-

-      const oldClip = oldState.clip;

-

-      const movement = { x: e.clientX - oldState.x, y: e.clientY - oldState.y };

-

-      const ratio = imageInfo == null ? 1 : imageInfo.ratio;

-

-      const { current: imgElement } = imgElementRef;

-

-      if (imgElement == null) throw new UiLogicError('Image element is null.');

-

-      const moveRatio = {

-        x: movement.x / imgElement.width,

-        y: movement.x / imgElement.width / ratio,

-      };

-

-      const newRatio = {

-        x: oldClip.width + moveRatio.x,

-        y: oldClip.height + moveRatio.y,

-      };

-

-      const maxRatio = {

-        x: Math.min(1 - oldClip.left, newRatio.x),

-        y: Math.min(1 - oldClip.top, newRatio.y),

-      };

-

-      const maxWidthRatio = Math.min(maxRatio.x, maxRatio.y * ratio);

-

-      let newWidth;

-      if (newRatio.x < 0) {

-        newWidth = 0;

-      } else if (newRatio.x > maxWidthRatio) {

-        newWidth = maxWidthRatio;

-      } else {

-        newWidth = newRatio.x;

-      }

-

-      onChange({ left: oldClip.left, top: oldClip.top, width: newWidth });

-    },

-    [imageInfo, oldState, onChange]

-  );

-

-  const toPercentage = (n: number): string => `${n}%`;

-

-  // fuck!!! I just can't find a better way to implement this in pure css

-  const containerStyle: React.CSSProperties = (() => {

-    if (imageInfo == null) {

-      return { width: '100%', paddingTop: '100%', height: 0 };

-    } else {

-      if (imageInfo.ratio > 1) {

-        return {

-          width: toPercentage(100 / imageInfo.ratio),

-          paddingTop: '100%',

-          height: 0,

-        };

-      } else {

-        return {

-          width: '100%',

-          paddingTop: toPercentage(100 * imageInfo.ratio),

-          height: 0,

-        };

-      }

-    }

-  })();

-

-  return (

-    <div

-      className={clsx('image-cropper-container', className)}

-      style={containerStyle}

-    >

-      <img ref={onImageRef} src={imageUrl} onLoad={onImageLoad} alt="to crop" />

-      <div className="image-cropper-mask-container">

-        <div

-          className="image-cropper-mask"

-          touch-action="none"

-          style={{

-            left: toPercentage(c.left * 100),

-            top: toPercentage(c.top * 100),

-            width: toPercentage(c.width * 100),

-            height: toPercentage(c.height * 100),

-          }}

-          onPointerMove={onPointerMove}

-          onPointerDown={onPointerDown}

-          onPointerUp={onPointerUp}

-        />

-      </div>

-      <div

-        className="image-cropper-handler"

-        touch-action="none"

-        style={{

-          left: `calc(${(c.left + c.width) * 100}% - 15px)`,

-          top: `calc(${(c.top + c.height) * 100}% - 15px)`,

-        }}

-        onPointerMove={onHandlerPointerMove}

-        onPointerDown={onPointerDown}

-        onPointerUp={onPointerUp}

-      />

-    </div>

-  );

-};

-

-export default ImageCropper;

-

-export function applyClipToImage(

-  image: HTMLImageElement,

-  clip: Clip,

-  mimeType: string

-): Promise<Blob> {

-  return new Promise((resolve, reject) => {

-    const naturalSize = {

-      width: image.naturalWidth,

-      height: image.naturalHeight,

-    };

-    const clipArea = {

-      x: naturalSize.width * clip.left,

-      y: naturalSize.height * clip.top,

-      length: naturalSize.width * clip.width,

-    };

-

-    const canvas = document.createElement('canvas');

-    canvas.width = clipArea.length;

-    canvas.height = clipArea.length;

-    const context = canvas.getContext('2d');

-

-    if (context == null) throw new Error('Failed to create context.');

-

-    context.drawImage(

-      image,

-      clipArea.x,

-      clipArea.y,

-      clipArea.length,

-      clipArea.length,

-      0,

-      0,

-      clipArea.length,

-      clipArea.length

-    );

-

-    canvas.toBlob((blob) => {

-      if (blob == null) {

-        reject(new Error('canvas.toBlob returns null'));

-      } else {

-        resolve(blob);

-      }

-    }, mimeType);

-  });

-}

+import * as React from 'react';
+import clsx from 'clsx';
+
+import { UiLogicError } from '../common';
+
+export interface Clip {
+  left: number;
+  top: number;
+  width: number;
+}
+
+interface NormailizedClip extends Clip {
+  height: number;
+}
+
+interface ImageInfo {
+  width: number;
+  height: number;
+  landscape: boolean;
+  ratio: number;
+  maxClipWidth: number;
+  maxClipHeight: number;
+}
+
+interface ImageCropperSavedState {
+  clip: NormailizedClip;
+  x: number;
+  y: number;
+  pointerId: number;
+}
+
+export interface ImageCropperProps {
+  clip: Clip | null;
+  imageUrl: string;
+  onChange: (clip: Clip) => void;
+  imageElementCallback?: (element: HTMLImageElement | null) => void;
+  className?: string;
+}
+
+const ImageCropper = (props: ImageCropperProps): React.ReactElement => {
+  const { clip, imageUrl, onChange, imageElementCallback, className } = props;
+
+  const [oldState, setOldState] = React.useState<ImageCropperSavedState | null>(
+    null
+  );
+  const [imageInfo, setImageInfo] = React.useState<ImageInfo | null>(null);
+
+  const normalizeClip = (c: Clip | null | undefined): NormailizedClip => {
+    if (c == null) {
+      return { left: 0, top: 0, width: 0, height: 0 };
+    }
+
+    return {
+      left: c.left || 0,
+      top: c.top || 0,
+      width: c.width || 0,
+      height: imageInfo != null ? (c.width || 0) / imageInfo.ratio : 0,
+    };
+  };
+
+  const c = normalizeClip(clip);
+
+  const imgElementRef = React.useRef<HTMLImageElement | null>(null);
+
+  const onImageRef = React.useCallback(
+    (e: HTMLImageElement | null) => {
+      imgElementRef.current = e;
+      if (imageElementCallback != null && e == null) {
+        imageElementCallback(null);
+      }
+    },
+    [imageElementCallback]
+  );
+
+  const onImageLoad = React.useCallback(
+    (e: React.SyntheticEvent<HTMLImageElement>) => {
+      const img = e.currentTarget;
+      const landscape = img.naturalWidth >= img.naturalHeight;
+
+      const info = {
+        width: img.naturalWidth,
+        height: img.naturalHeight,
+        landscape,
+        ratio: img.naturalHeight / img.naturalWidth,
+        maxClipWidth: landscape ? img.naturalHeight / img.naturalWidth : 1,
+        maxClipHeight: landscape ? 1 : img.naturalWidth / img.naturalHeight,
+      };
+      setImageInfo(info);
+      onChange({ left: 0, top: 0, width: info.maxClipWidth });
+      if (imageElementCallback != null) {
+        imageElementCallback(img);
+      }
+    },
+    [onChange, imageElementCallback]
+  );
+
+  const onPointerDown = React.useCallback(
+    (e: React.PointerEvent) => {
+      if (oldState != null) return;
+      e.currentTarget.setPointerCapture(e.pointerId);
+      setOldState({
+        x: e.clientX,
+        y: e.clientY,
+        clip: c,
+        pointerId: e.pointerId,
+      });
+    },
+    [oldState, c]
+  );
+
+  const onPointerUp = React.useCallback(
+    (e: React.PointerEvent) => {
+      if (oldState == null || oldState.pointerId !== e.pointerId) return;
+      e.currentTarget.releasePointerCapture(e.pointerId);
+      setOldState(null);
+    },
+    [oldState]
+  );
+
+  const onPointerMove = React.useCallback(
+    (e: React.PointerEvent) => {
+      if (oldState == null) return;
+
+      const oldClip = oldState.clip;
+
+      const movement = { x: e.clientX - oldState.x, y: e.clientY - oldState.y };
+
+      const { current: imgElement } = imgElementRef;
+
+      if (imgElement == null) throw new UiLogicError('Image element is null.');
+
+      const moveRatio = {
+        x: movement.x / imgElement.width,
+        y: movement.y / imgElement.height,
+      };
+
+      const newRatio = {
+        x: oldClip.left + moveRatio.x,
+        y: oldClip.top + moveRatio.y,
+      };
+      if (newRatio.x < 0) {
+        newRatio.x = 0;
+      } else if (newRatio.x > 1 - oldClip.width) {
+        newRatio.x = 1 - oldClip.width;
+      }
+      if (newRatio.y < 0) {
+        newRatio.y = 0;
+      } else if (newRatio.y > 1 - oldClip.height) {
+        newRatio.y = 1 - oldClip.height;
+      }
+
+      onChange({ left: newRatio.x, top: newRatio.y, width: oldClip.width });
+    },
+    [oldState, onChange]
+  );
+
+  const onHandlerPointerMove = React.useCallback(
+    (e: React.PointerEvent) => {
+      if (oldState == null) return;
+
+      const oldClip = oldState.clip;
+
+      const movement = { x: e.clientX - oldState.x, y: e.clientY - oldState.y };
+
+      const ratio = imageInfo == null ? 1 : imageInfo.ratio;
+
+      const { current: imgElement } = imgElementRef;
+
+      if (imgElement == null) throw new UiLogicError('Image element is null.');
+
+      const moveRatio = {
+        x: movement.x / imgElement.width,
+        y: movement.x / imgElement.width / ratio,
+      };
+
+      const newRatio = {
+        x: oldClip.width + moveRatio.x,
+        y: oldClip.height + moveRatio.y,
+      };
+
+      const maxRatio = {
+        x: Math.min(1 - oldClip.left, newRatio.x),
+        y: Math.min(1 - oldClip.top, newRatio.y),
+      };
+
+      const maxWidthRatio = Math.min(maxRatio.x, maxRatio.y * ratio);
+
+      let newWidth;
+      if (newRatio.x < 0) {
+        newWidth = 0;
+      } else if (newRatio.x > maxWidthRatio) {
+        newWidth = maxWidthRatio;
+      } else {
+        newWidth = newRatio.x;
+      }
+
+      onChange({ left: oldClip.left, top: oldClip.top, width: newWidth });
+    },
+    [imageInfo, oldState, onChange]
+  );
+
+  const toPercentage = (n: number): string => `${n}%`;
+
+  // fuck!!! I just can't find a better way to implement this in pure css
+  const containerStyle: React.CSSProperties = (() => {
+    if (imageInfo == null) {
+      return { width: '100%', paddingTop: '100%', height: 0 };
+    } else {
+      if (imageInfo.ratio > 1) {
+        return {
+          width: toPercentage(100 / imageInfo.ratio),
+          paddingTop: '100%',
+          height: 0,
+        };
+      } else {
+        return {
+          width: '100%',
+          paddingTop: toPercentage(100 * imageInfo.ratio),
+          height: 0,
+        };
+      }
+    }
+  })();
+
+  return (
+    <div
+      className={clsx('image-cropper-container', className)}
+      style={containerStyle}
+    >
+      <img ref={onImageRef} src={imageUrl} onLoad={onImageLoad} alt="to crop" />
+      <div className="image-cropper-mask-container">
+        <div
+          className="image-cropper-mask"
+          touch-action="none"
+          style={{
+            left: toPercentage(c.left * 100),
+            top: toPercentage(c.top * 100),
+            width: toPercentage(c.width * 100),
+            height: toPercentage(c.height * 100),
+          }}
+          onPointerMove={onPointerMove}
+          onPointerDown={onPointerDown}
+          onPointerUp={onPointerUp}
+        />
+      </div>
+      <div
+        className="image-cropper-handler"
+        touch-action="none"
+        style={{
+          left: `calc(${(c.left + c.width) * 100}% - 15px)`,
+          top: `calc(${(c.top + c.height) * 100}% - 15px)`,
+        }}
+        onPointerMove={onHandlerPointerMove}
+        onPointerDown={onPointerDown}
+        onPointerUp={onPointerUp}
+      />
+    </div>
+  );
+};
+
+export default ImageCropper;
+
+export function applyClipToImage(
+  image: HTMLImageElement,
+  clip: Clip,
+  mimeType: string
+): Promise<Blob> {
+  return new Promise((resolve, reject) => {
+    const naturalSize = {
+      width: image.naturalWidth,
+      height: image.naturalHeight,
+    };
+    const clipArea = {
+      x: naturalSize.width * clip.left,
+      y: naturalSize.height * clip.top,
+      length: naturalSize.width * clip.width,
+    };
+
+    const canvas = document.createElement('canvas');
+    canvas.width = clipArea.length;
+    canvas.height = clipArea.length;
+    const context = canvas.getContext('2d');
+
+    if (context == null) throw new Error('Failed to create context.');
+
+    context.drawImage(
+      image,
+      clipArea.x,
+      clipArea.y,
+      clipArea.length,
+      clipArea.length,
+      0,
+      0,
+      clipArea.length,
+      clipArea.length
+    );
+
+    canvas.toBlob((blob) => {
+      if (blob == null) {
+        reject(new Error('canvas.toBlob returns null'));
+      } else {
+        resolve(blob);
+      }
+    }, mimeType);
+  });
+}
diff --git a/Timeline/ClientApp/src/common/LoadingPage.tsx b/Timeline/ClientApp/src/app/common/LoadingPage.tsx
index c1bc7105..81bc74cf 100644
--- a/Timeline/ClientApp/src/common/LoadingPage.tsx
+++ b/Timeline/ClientApp/src/app/common/LoadingPage.tsx
@@ -1,12 +1,12 @@
-import React from 'react';

-import { Spinner } from 'reactstrap';

-

-const LoadingPage: React.FC = () => {

-  return (

-    <div className="position-fixed w-100 h-100 d-flex justify-content-center align-items-center">

-      <Spinner style={{ height: '2.5rem', width: '2.5rem' }} color="primary" />

-    </div>

-  );

-};

-

-export default LoadingPage;

+import React from 'react';
+import { Spinner } from 'reactstrap';
+
+const LoadingPage: React.FC = () => {
+  return (
+    <div className="position-fixed w-100 h-100 d-flex justify-content-center align-items-center">
+      <Spinner style={{ height: '2.5rem', width: '2.5rem' }} color="primary" />
+    </div>
+  );
+};
+
+export default LoadingPage;
diff --git a/Timeline/ClientApp/src/common/OperationDialog.tsx b/Timeline/ClientApp/src/app/common/OperationDialog.tsx
index 501a353e..30db4053 100644
--- a/Timeline/ClientApp/src/common/OperationDialog.tsx
+++ b/Timeline/ClientApp/src/app/common/OperationDialog.tsx
@@ -1,381 +1,381 @@
-import React, { useState } from 'react';

-import { useTranslation } from 'react-i18next';

-import {

-  Spinner,

-  Container,

-  ModalBody,

-  Label,

-  Input,

-  FormGroup,

-  FormFeedback,

-  ModalFooter,

-  Button,

-  Modal,

-  ModalHeader,

-  FormText,

-} from 'reactstrap';

-

-import { UiLogicError } from '../common';

-

-const DefaultProcessPrompt: React.FC = (_) => {

-  return (

-    <Container className="justify-content-center align-items-center">

-      <Spinner />

-    </Container>

-  );

-};

-

-interface DefaultErrorPromptProps {

-  error?: string;

-}

-

-const DefaultErrorPrompt: React.FC<DefaultErrorPromptProps> = (props) => {

-  const { t } = useTranslation();

-

-  let result = <p className="text-danger">{t('operationDialog.error')}</p>;

-

-  if (props.error != null) {

-    result = (

-      <>

-        {result}

-        <p className="text-danger">{props.error}</p>

-      </>

-    );

-  }

-

-  return result;

-};

-

-export type OperationInputOptionalError = undefined | null | string;

-

-export interface OperationInputErrorInfo {

-  [index: number]: OperationInputOptionalError;

-}

-

-export type OperationInputValidator<TValue> = (

-  value: TValue,

-  values: (string | boolean)[]

-) => OperationInputOptionalError | OperationInputErrorInfo;

-

-export interface OperationTextInputInfo {

-  type: 'text';

-  password?: boolean;

-  label?: string;

-  initValue?: string;

-  textFieldProps?: Omit<

-    React.InputHTMLAttributes<HTMLInputElement>,

-    'type' | 'value' | 'onChange'

-  >;

-  helperText?: string;

-  validator?: OperationInputValidator<string>;

-}

-

-export interface OperationBoolInputInfo {

-  type: 'bool';

-  label: string;

-  initValue?: boolean;

-}

-

-export interface OperationSelectInputInfoOption {

-  value: string;

-  label: string;

-  icon?: React.ReactElement;

-}

-

-export interface OperationSelectInputInfo {

-  type: 'select';

-  label: string;

-  options: OperationSelectInputInfoOption[];

-  initValue?: string;

-}

-

-export type OperationInputInfo =

-  | OperationTextInputInfo

-  | OperationBoolInputInfo

-  | OperationSelectInputInfo;

-

-interface OperationResult {

-  type: 'success' | 'failure';

-  data: unknown;

-}

-

-interface OperationDialogProps {

-  open: boolean;

-  close: () => void;

-  title: React.ReactNode;

-  titleColor?: 'default' | 'dangerous' | 'create' | string;

-  onProcess: (inputs: (string | boolean)[]) => Promise<unknown>;

-  inputScheme?: OperationInputInfo[];

-  inputPrompt?: string | (() => React.ReactNode);

-  processPrompt?: () => React.ReactNode;

-  successPrompt?: (data: unknown) => React.ReactNode;

-  failurePrompt?: (error: unknown) => React.ReactNode;

-  onSuccessAndClose?: () => void;

-}

-

-const OperationDialog: React.FC<OperationDialogProps> = (props) => {

-  const inputScheme = props.inputScheme ?? [];

-

-  const { t } = useTranslation();

-

-  type Step = 'input' | 'process' | OperationResult;

-  const [step, setStep] = useState<Step>('input');

-  const [values, setValues] = useState<(boolean | string)[]>(

-    inputScheme.map((i) => {

-      if (i.type === 'bool') {

-        return i.initValue ?? false;

-      } else if (i.type === 'text' || i.type === 'select') {

-        return i.initValue ?? '';

-      } else {

-        throw new UiLogicError('Unknown input scheme.');

-      }

-    })

-  );

-  const [inputError, setInputError] = useState<OperationInputErrorInfo>({});

-

-  const close = (): void => {

-    if (step !== 'process') {

-      props.close();

-      if (

-        typeof step === 'object' &&

-        step.type === 'success' &&

-        props.onSuccessAndClose

-      ) {

-        props.onSuccessAndClose();

-      }

-    } else {

-      console.log('Attempt to close modal when processing.');

-    }

-  };

-

-  const onConfirm = (): void => {

-    setStep('process');

-    props.onProcess(values).then(

-      (d: unknown) => {

-        setStep({

-          type: 'success',

-          data: d,

-        });

-      },

-      (e: unknown) => {

-        setStep({

-          type: 'failure',

-          data: e,

-        });

-      }

-    );

-  };

-

-  let body: React.ReactNode;

-  if (step === 'input') {

-    let inputPrompt =

-      typeof props.inputPrompt === 'function'

-        ? props.inputPrompt()

-        : props.inputPrompt;

-    inputPrompt = <h6>{inputPrompt}</h6>;

-

-    const updateValue = (

-      index: number,

-      newValue: string | boolean

-    ): (string | boolean)[] => {

-      const oldValues = values;

-      const newValues = oldValues.slice();

-      newValues[index] = newValue;

-      setValues(newValues);

-      return newValues;

-    };

-

-    const testErrorInfo = (errorInfo: OperationInputErrorInfo): boolean => {

-      for (let i = 0; i < inputScheme.length; i++) {

-        if (inputScheme[i].type === 'text' && errorInfo[i] != null) {

-          return true;

-        }

-      }

-      return false;

-    };

-

-    const calculateError = (

-      oldError: OperationInputErrorInfo,

-      index: number,

-      newError: OperationInputOptionalError | OperationInputErrorInfo

-    ): OperationInputErrorInfo => {

-      if (newError === undefined) {

-        return oldError;

-      } else if (newError === null || typeof newError === 'string') {

-        return { ...oldError, [index]: newError };

-      } else {

-        const newInputError: OperationInputErrorInfo = { ...oldError };

-        for (const [index, error] of Object.entries(newError)) {

-          if (error !== undefined) {

-            newInputError[+index] = error as OperationInputOptionalError;

-          }

-        }

-        return newInputError;

-      }

-    };

-

-    const validateAll = (): boolean => {

-      let newInputError = inputError;

-      for (let i = 0; i < inputScheme.length; i++) {

-        const item = inputScheme[i];

-        if (item.type === 'text') {

-          newInputError = calculateError(

-            newInputError,

-            i,

-            item.validator?.(values[i] as string, values)

-          );

-        }

-      }

-      const result = !testErrorInfo(newInputError);

-      setInputError(newInputError);

-      return result;

-    };

-

-    body = (

-      <>

-        <ModalBody>

-          {inputPrompt}

-          {inputScheme.map((item, index) => {

-            const value = values[index];

-            const error: string | undefined = ((e) =>

-              typeof e === 'string' ? t(e) : undefined)(inputError?.[index]);

-

-            if (item.type === 'text') {

-              return (

-                <FormGroup key={index}>

-                  {item.label && <Label>{t(item.label)}</Label>}

-                  <Input

-                    type={item.password === true ? 'password' : 'text'}

-                    value={value as string}

-                    onChange={(e) => {

-                      const v = e.target.value;

-                      const newValues = updateValue(index, v);

-                      setInputError(

-                        calculateError(

-                          inputError,

-                          index,

-                          item.validator?.(v, newValues)

-                        )

-                      );

-                    }}

-                    invalid={error != null}

-                    {...item.textFieldProps}

-                  />

-                  {error != null && <FormFeedback>{error}</FormFeedback>}

-                  {item.helperText && <FormText>{t(item.helperText)}</FormText>}

-                </FormGroup>

-              );

-            } else if (item.type === 'bool') {

-              return (

-                <FormGroup check key={index}>

-                  <Input

-                    type="checkbox"

-                    value={value as string}

-                    onChange={(e) => {

-                      updateValue(

-                        index,

-                        (e.target as HTMLInputElement).checked

-                      );

-                    }}

-                  />

-                  <Label check>{t(item.label)}</Label>

-                </FormGroup>

-              );

-            } else if (item.type === 'select') {

-              return (

-                <FormGroup key={index}>

-                  <Label>{t(item.label)}</Label>

-                  <Input

-                    type="select"

-                    value={value as string}

-                    onChange={(event) => {

-                      updateValue(index, event.target.value);

-                    }}

-                  >

-                    {item.options.map((option, i) => {

-                      return (

-                        <option value={option.value} key={i}>

-                          {option.icon}

-                          {t(option.label)}

-                        </option>

-                      );

-                    })}

-                  </Input>

-                </FormGroup>

-              );

-            }

-          })}

-        </ModalBody>

-        <ModalFooter>

-          <Button color="secondary" onClick={close}>

-            {t('operationDialog.cancel')}

-          </Button>

-          <Button

-            color="primary"

-            disabled={testErrorInfo(inputError)}

-            onClick={() => {

-              if (validateAll()) {

-                onConfirm();

-              }

-            }}

-          >

-            {t('operationDialog.confirm')}

-          </Button>

-        </ModalFooter>

-      </>

-    );

-  } else if (step === 'process') {

-    body = (

-      <ModalBody>

-        {props.processPrompt?.() ?? <DefaultProcessPrompt />}

-      </ModalBody>

-    );

-  } else {

-    let content: React.ReactNode;

-    const result = step;

-    if (result.type === 'success') {

-      content =

-        props.successPrompt?.(result.data) ?? t('operationDialog.success');

-      if (typeof content === 'string')

-        content = <p className="text-success">{content}</p>;

-    } else {

-      content = props.failurePrompt?.(result.data) ?? <DefaultErrorPrompt />;

-      if (typeof content === 'string')

-        content = <DefaultErrorPrompt error={content} />;

-    }

-    body = (

-      <>

-        <ModalBody>{content}</ModalBody>

-        <ModalFooter>

-          <Button color="primary" onClick={close}>

-            {t('operationDialog.ok')}

-          </Button>

-        </ModalFooter>

-      </>

-    );

-  }

-

-  const title = typeof props.title === 'string' ? t(props.title) : props.title;

-

-  return (

-    <Modal isOpen={props.open} toggle={close}>

-      <ModalHeader

-        className={

-          props.titleColor != null

-            ? 'text-' +

-              (props.titleColor === 'create'

-                ? 'success'

-                : props.titleColor === 'dangerous'

-                ? 'danger'

-                : props.titleColor)

-            : undefined

-        }

-      >

-        {title}

-      </ModalHeader>

-      {body}

-    </Modal>

-  );

-};

-

-export default OperationDialog;

+import React, { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import {
+  Spinner,
+  Container,
+  ModalBody,
+  Label,
+  Input,
+  FormGroup,
+  FormFeedback,
+  ModalFooter,
+  Button,
+  Modal,
+  ModalHeader,
+  FormText,
+} from 'reactstrap';
+
+import { UiLogicError } from '../common';
+
+const DefaultProcessPrompt: React.FC = (_) => {
+  return (
+    <Container className="justify-content-center align-items-center">
+      <Spinner />
+    </Container>
+  );
+};
+
+interface DefaultErrorPromptProps {
+  error?: string;
+}
+
+const DefaultErrorPrompt: React.FC<DefaultErrorPromptProps> = (props) => {
+  const { t } = useTranslation();
+
+  let result = <p className="text-danger">{t('operationDialog.error')}</p>;
+
+  if (props.error != null) {
+    result = (
+      <>
+        {result}
+        <p className="text-danger">{props.error}</p>
+      </>
+    );
+  }
+
+  return result;
+};
+
+export type OperationInputOptionalError = undefined | null | string;
+
+export interface OperationInputErrorInfo {
+  [index: number]: OperationInputOptionalError;
+}
+
+export type OperationInputValidator<TValue> = (
+  value: TValue,
+  values: (string | boolean)[]
+) => OperationInputOptionalError | OperationInputErrorInfo;
+
+export interface OperationTextInputInfo {
+  type: 'text';
+  password?: boolean;
+  label?: string;
+  initValue?: string;
+  textFieldProps?: Omit<
+    React.InputHTMLAttributes<HTMLInputElement>,
+    'type' | 'value' | 'onChange'
+  >;
+  helperText?: string;
+  validator?: OperationInputValidator<string>;
+}
+
+export interface OperationBoolInputInfo {
+  type: 'bool';
+  label: string;
+  initValue?: boolean;
+}
+
+export interface OperationSelectInputInfoOption {
+  value: string;
+  label: string;
+  icon?: React.ReactElement;
+}
+
+export interface OperationSelectInputInfo {
+  type: 'select';
+  label: string;
+  options: OperationSelectInputInfoOption[];
+  initValue?: string;
+}
+
+export type OperationInputInfo =
+  | OperationTextInputInfo
+  | OperationBoolInputInfo
+  | OperationSelectInputInfo;
+
+interface OperationResult {
+  type: 'success' | 'failure';
+  data: unknown;
+}
+
+interface OperationDialogProps {
+  open: boolean;
+  close: () => void;
+  title: React.ReactNode;
+  titleColor?: 'default' | 'dangerous' | 'create' | string;
+  onProcess: (inputs: (string | boolean)[]) => Promise<unknown>;
+  inputScheme?: OperationInputInfo[];
+  inputPrompt?: string | (() => React.ReactNode);
+  processPrompt?: () => React.ReactNode;
+  successPrompt?: (data: unknown) => React.ReactNode;
+  failurePrompt?: (error: unknown) => React.ReactNode;
+  onSuccessAndClose?: () => void;
+}
+
+const OperationDialog: React.FC<OperationDialogProps> = (props) => {
+  const inputScheme = props.inputScheme ?? [];
+
+  const { t } = useTranslation();
+
+  type Step = 'input' | 'process' | OperationResult;
+  const [step, setStep] = useState<Step>('input');
+  const [values, setValues] = useState<(boolean | string)[]>(
+    inputScheme.map((i) => {
+      if (i.type === 'bool') {
+        return i.initValue ?? false;
+      } else if (i.type === 'text' || i.type === 'select') {
+        return i.initValue ?? '';
+      } else {
+        throw new UiLogicError('Unknown input scheme.');
+      }
+    })
+  );
+  const [inputError, setInputError] = useState<OperationInputErrorInfo>({});
+
+  const close = (): void => {
+    if (step !== 'process') {
+      props.close();
+      if (
+        typeof step === 'object' &&
+        step.type === 'success' &&
+        props.onSuccessAndClose
+      ) {
+        props.onSuccessAndClose();
+      }
+    } else {
+      console.log('Attempt to close modal when processing.');
+    }
+  };
+
+  const onConfirm = (): void => {
+    setStep('process');
+    props.onProcess(values).then(
+      (d: unknown) => {
+        setStep({
+          type: 'success',
+          data: d,
+        });
+      },
+      (e: unknown) => {
+        setStep({
+          type: 'failure',
+          data: e,
+        });
+      }
+    );
+  };
+
+  let body: React.ReactNode;
+  if (step === 'input') {
+    let inputPrompt =
+      typeof props.inputPrompt === 'function'
+        ? props.inputPrompt()
+        : props.inputPrompt;
+    inputPrompt = <h6>{inputPrompt}</h6>;
+
+    const updateValue = (
+      index: number,
+      newValue: string | boolean
+    ): (string | boolean)[] => {
+      const oldValues = values;
+      const newValues = oldValues.slice();
+      newValues[index] = newValue;
+      setValues(newValues);
+      return newValues;
+    };
+
+    const testErrorInfo = (errorInfo: OperationInputErrorInfo): boolean => {
+      for (let i = 0; i < inputScheme.length; i++) {
+        if (inputScheme[i].type === 'text' && errorInfo[i] != null) {
+          return true;
+        }
+      }
+      return false;
+    };
+
+    const calculateError = (
+      oldError: OperationInputErrorInfo,
+      index: number,
+      newError: OperationInputOptionalError | OperationInputErrorInfo
+    ): OperationInputErrorInfo => {
+      if (newError === undefined) {
+        return oldError;
+      } else if (newError === null || typeof newError === 'string') {
+        return { ...oldError, [index]: newError };
+      } else {
+        const newInputError: OperationInputErrorInfo = { ...oldError };
+        for (const [index, error] of Object.entries(newError)) {
+          if (error !== undefined) {
+            newInputError[+index] = error as OperationInputOptionalError;
+          }
+        }
+        return newInputError;
+      }
+    };
+
+    const validateAll = (): boolean => {
+      let newInputError = inputError;
+      for (let i = 0; i < inputScheme.length; i++) {
+        const item = inputScheme[i];
+        if (item.type === 'text') {
+          newInputError = calculateError(
+            newInputError,
+            i,
+            item.validator?.(values[i] as string, values)
+          );
+        }
+      }
+      const result = !testErrorInfo(newInputError);
+      setInputError(newInputError);
+      return result;
+    };
+
+    body = (
+      <>
+        <ModalBody>
+          {inputPrompt}
+          {inputScheme.map((item, index) => {
+            const value = values[index];
+            const error: string | undefined = ((e) =>
+              typeof e === 'string' ? t(e) : undefined)(inputError?.[index]);
+
+            if (item.type === 'text') {
+              return (
+                <FormGroup key={index}>
+                  {item.label && <Label>{t(item.label)}</Label>}
+                  <Input
+                    type={item.password === true ? 'password' : 'text'}
+                    value={value as string}
+                    onChange={(e) => {
+                      const v = e.target.value;
+                      const newValues = updateValue(index, v);
+                      setInputError(
+                        calculateError(
+                          inputError,
+                          index,
+                          item.validator?.(v, newValues)
+                        )
+                      );
+                    }}
+                    invalid={error != null}
+                    {...item.textFieldProps}
+                  />
+                  {error != null && <FormFeedback>{error}</FormFeedback>}
+                  {item.helperText && <FormText>{t(item.helperText)}</FormText>}
+                </FormGroup>
+              );
+            } else if (item.type === 'bool') {
+              return (
+                <FormGroup check key={index}>
+                  <Input
+                    type="checkbox"
+                    value={value as string}
+                    onChange={(e) => {
+                      updateValue(
+                        index,
+                        (e.target as HTMLInputElement).checked
+                      );
+                    }}
+                  />
+                  <Label check>{t(item.label)}</Label>
+                </FormGroup>
+              );
+            } else if (item.type === 'select') {
+              return (
+                <FormGroup key={index}>
+                  <Label>{t(item.label)}</Label>
+                  <Input
+                    type="select"
+                    value={value as string}
+                    onChange={(event) => {
+                      updateValue(index, event.target.value);
+                    }}
+                  >
+                    {item.options.map((option, i) => {
+                      return (
+                        <option value={option.value} key={i}>
+                          {option.icon}
+                          {t(option.label)}
+                        </option>
+                      );
+                    })}
+                  </Input>
+                </FormGroup>
+              );
+            }
+          })}
+        </ModalBody>
+        <ModalFooter>
+          <Button color="secondary" onClick={close}>
+            {t('operationDialog.cancel')}
+          </Button>
+          <Button
+            color="primary"
+            disabled={testErrorInfo(inputError)}
+            onClick={() => {
+              if (validateAll()) {
+                onConfirm();
+              }
+            }}
+          >
+            {t('operationDialog.confirm')}
+          </Button>
+        </ModalFooter>
+      </>
+    );
+  } else if (step === 'process') {
+    body = (
+      <ModalBody>
+        {props.processPrompt?.() ?? <DefaultProcessPrompt />}
+      </ModalBody>
+    );
+  } else {
+    let content: React.ReactNode;
+    const result = step;
+    if (result.type === 'success') {
+      content =
+        props.successPrompt?.(result.data) ?? t('operationDialog.success');
+      if (typeof content === 'string')
+        content = <p className="text-success">{content}</p>;
+    } else {
+      content = props.failurePrompt?.(result.data) ?? <DefaultErrorPrompt />;
+      if (typeof content === 'string')
+        content = <DefaultErrorPrompt error={content} />;
+    }
+    body = (
+      <>
+        <ModalBody>{content}</ModalBody>
+        <ModalFooter>
+          <Button color="primary" onClick={close}>
+            {t('operationDialog.ok')}
+          </Button>
+        </ModalFooter>
+      </>
+    );
+  }
+
+  const title = typeof props.title === 'string' ? t(props.title) : props.title;
+
+  return (
+    <Modal isOpen={props.open} toggle={close}>
+      <ModalHeader
+        className={
+          props.titleColor != null
+            ? 'text-' +
+              (props.titleColor === 'create'
+                ? 'success'
+                : props.titleColor === 'dangerous'
+                ? 'danger'
+                : props.titleColor)
+            : undefined
+        }
+      >
+        {title}
+      </ModalHeader>
+      {body}
+    </Modal>
+  );
+};
+
+export default OperationDialog;
diff --git a/Timeline/ClientApp/src/common/SearchInput.tsx b/Timeline/ClientApp/src/app/common/SearchInput.tsx
index 46fb00d1..50c252fa 100644
--- a/Timeline/ClientApp/src/common/SearchInput.tsx
+++ b/Timeline/ClientApp/src/app/common/SearchInput.tsx
@@ -1,63 +1,63 @@
-import React, { useCallback } from 'react';

-import clsx from 'clsx';

-import { Spinner, Input, Button } from 'reactstrap';

-import { useTranslation } from 'react-i18next';

-

-export interface SearchInputProps {

-  value: string;

-  onChange: (value: string) => void;

-  onButtonClick: () => void;

-  className?: string;

-  loading?: boolean;

-  buttonText?: string;

-  placeholder?: string;

-  additionalButton?: React.ReactNode;

-}

-

-const SearchInput: React.FC<SearchInputProps> = (props) => {

-  const { onChange, onButtonClick } = props;

-

-  const { t } = useTranslation();

-

-  const onInputChange = useCallback(

-    (event: React.ChangeEvent<HTMLInputElement>): void => {

-      onChange(event.currentTarget.value);

-    },

-    [onChange]

-  );

-

-  const onInputKeyPress = useCallback(

-    (event: React.KeyboardEvent<HTMLInputElement>): void => {

-      if (event.key === 'Enter') {

-        onButtonClick();

-      }

-    },

-    [onButtonClick]

-  );

-

-  return (

-    <div className={clsx('form-inline my-2', props.className)}>

-      <Input

-        className="mr-sm-2"

-        value={props.value}

-        onChange={onInputChange}

-        onKeyPress={onInputKeyPress}

-        placeholder={props.placeholder}

-      />

-      <div className="mt-2 mt-sm-0 order-sm-last ml-sm-3">

-        {props.additionalButton}

-      </div>

-      <div className="mt-2 mt-sm-0 ml-auto ml-sm-0">

-        {props.loading ? (

-          <Spinner />

-        ) : (

-          <Button outline color="primary" onClick={props.onButtonClick}>

-            {props.buttonText ?? t('search')}

-          </Button>

-        )}

-      </div>

-    </div>

-  );

-};

-

-export default SearchInput;

+import React, { useCallback } from 'react';
+import clsx from 'clsx';
+import { Spinner, Input, Button } from 'reactstrap';
+import { useTranslation } from 'react-i18next';
+
+export interface SearchInputProps {
+  value: string;
+  onChange: (value: string) => void;
+  onButtonClick: () => void;
+  className?: string;
+  loading?: boolean;
+  buttonText?: string;
+  placeholder?: string;
+  additionalButton?: React.ReactNode;
+}
+
+const SearchInput: React.FC<SearchInputProps> = (props) => {
+  const { onChange, onButtonClick } = props;
+
+  const { t } = useTranslation();
+
+  const onInputChange = useCallback(
+    (event: React.ChangeEvent<HTMLInputElement>): void => {
+      onChange(event.currentTarget.value);
+    },
+    [onChange]
+  );
+
+  const onInputKeyPress = useCallback(
+    (event: React.KeyboardEvent<HTMLInputElement>): void => {
+      if (event.key === 'Enter') {
+        onButtonClick();
+      }
+    },
+    [onButtonClick]
+  );
+
+  return (
+    <div className={clsx('form-inline my-2', props.className)}>
+      <Input
+        className="mr-sm-2"
+        value={props.value}
+        onChange={onInputChange}
+        onKeyPress={onInputKeyPress}
+        placeholder={props.placeholder}
+      />
+      <div className="mt-2 mt-sm-0 order-sm-last ml-sm-3">
+        {props.additionalButton}
+      </div>
+      <div className="mt-2 mt-sm-0 ml-auto ml-sm-0">
+        {props.loading ? (
+          <Spinner />
+        ) : (
+          <Button outline color="primary" onClick={props.onButtonClick}>
+            {props.buttonText ?? t('search')}
+          </Button>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default SearchInput;
diff --git a/Timeline/ClientApp/src/common/TimelineLogo.tsx b/Timeline/ClientApp/src/app/common/TimelineLogo.tsx
index 1ec62021..8dd9e97b 100644
--- a/Timeline/ClientApp/src/common/TimelineLogo.tsx
+++ b/Timeline/ClientApp/src/app/common/TimelineLogo.tsx
@@ -1,26 +1,26 @@
-import React, { SVGAttributes } from 'react';

-

-export interface TimelineLogoProps extends SVGAttributes<SVGElement> {

-  color?: string;

-}

-

-const TimelineLogo: React.FC<TimelineLogoProps> = props => {

-  const { color, ...forwardProps } = props;

-  const coercedColor = color ?? 'currentcolor';

-  return (

-    <svg

-      className={props.className}

-      viewBox="0 0 100 100"

-      fill="none"

-      strokeWidth="12"

-      stroke={coercedColor}

-      {...forwardProps}

-    >

-      <line x1="50" y1="0" x2="50" y2="25" />

-      <circle cx="50" cy="50" r="22" />

-      <line x1="50" y1="75" x2="50" y2="100" />

-    </svg>

-  );

-};

-

-export default TimelineLogo;

+import React, { SVGAttributes } from 'react';
+
+export interface TimelineLogoProps extends SVGAttributes<SVGElement> {
+  color?: string;
+}
+
+const TimelineLogo: React.FC<TimelineLogoProps> = props => {
+  const { color, ...forwardProps } = props;
+  const coercedColor = color ?? 'currentcolor';
+  return (
+    <svg
+      className={props.className}
+      viewBox="0 0 100 100"
+      fill="none"
+      strokeWidth="12"
+      stroke={coercedColor}
+      {...forwardProps}
+    >
+      <line x1="50" y1="0" x2="50" y2="25" />
+      <circle cx="50" cy="50" r="22" />
+      <line x1="50" y1="75" x2="50" y2="100" />
+    </svg>
+  );
+};
+
+export default TimelineLogo;
diff --git a/Timeline/ClientApp/src/common/UserTimelineLogo.tsx b/Timeline/ClientApp/src/app/common/UserTimelineLogo.tsx
index 3b721985..58a429d8 100644
--- a/Timeline/ClientApp/src/common/UserTimelineLogo.tsx
+++ b/Timeline/ClientApp/src/app/common/UserTimelineLogo.tsx
@@ -1,26 +1,26 @@
-import React, { SVGAttributes } from 'react';

-

-export interface UserTimelineLogoProps extends SVGAttributes<SVGElement> {

-  color?: string;

-}

-

-const UserTimelineLogo: React.FC<UserTimelineLogoProps> = props => {

-  const { color, ...forwardProps } = props;

-  const coercedColor = color ?? 'currentcolor';

-

-  return (

-    <svg viewBox="0 0 100 100" {...forwardProps}>

-      <g fill="none" stroke={coercedColor} strokeWidth="12">

-        <line x1="50" x2="50" y1="0" y2="25" />

-        <circle cx="50" cy="50" r="22" />

-        <line x1="50" x2="50" y1="75" y2="100" />

-      </g>

-      <g fill={color}>

-        <circle cx="85" cy="75" r="10" />

-        <path d="m70,100c0,0 15,-30 30,0.25" />

-      </g>

-    </svg>

-  );

-};

-

-export default UserTimelineLogo;

+import React, { SVGAttributes } from 'react';
+
+export interface UserTimelineLogoProps extends SVGAttributes<SVGElement> {
+  color?: string;
+}
+
+const UserTimelineLogo: React.FC<UserTimelineLogoProps> = props => {
+  const { color, ...forwardProps } = props;
+  const coercedColor = color ?? 'currentcolor';
+
+  return (
+    <svg viewBox="0 0 100 100" {...forwardProps}>
+      <g fill="none" stroke={coercedColor} strokeWidth="12">
+        <line x1="50" x2="50" y1="0" y2="25" />
+        <circle cx="50" cy="50" r="22" />
+        <line x1="50" x2="50" y1="75" y2="100" />
+      </g>
+      <g fill={color}>
+        <circle cx="85" cy="75" r="10" />
+        <path d="m70,100c0,0 15,-30 30,0.25" />
+      </g>
+    </svg>
+  );
+};
+
+export default UserTimelineLogo;
diff --git a/Timeline/ClientApp/src/common/alert-service.ts b/Timeline/ClientApp/src/app/common/alert-service.ts
index 305752eb..6d3f8af8 100644
--- a/Timeline/ClientApp/src/common/alert-service.ts
+++ b/Timeline/ClientApp/src/app/common/alert-service.ts
@@ -1,59 +1,59 @@
-import pull from 'lodash/pull';

-

-export interface AlertInfo {

-  type?: 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info';

-  message: string;

-}

-

-export interface AlertInfoEx extends AlertInfo {

-  id: number;

-}

-

-export type AlertConsumer = (alerts: AlertInfoEx) => void;

-

-export class AlertService {

-  private consumers: AlertConsumer[] = [];

-  private savedAlerts: AlertInfoEx[] = [];

-  private currentId = 1;

-

-  private produce(alert: AlertInfoEx): void {

-    for (const consumer of this.consumers) {

-      consumer(alert);

-    }

-  }

-

-  registerConsumer(consumer: AlertConsumer): void {

-    this.consumers.push(consumer);

-    if (this.savedAlerts.length !== 0) {

-      for (const alert of this.savedAlerts) {

-        this.produce(alert);

-      }

-      this.savedAlerts = [];

-    }

-  }

-

-  unregisterConsumer(consumer: AlertConsumer): void {

-    pull(this.consumers, consumer);

-  }

-

-  push(alert: AlertInfo): void {

-    const newAlert: AlertInfoEx = { ...alert, id: this.currentId++ };

-    if (this.consumers.length === 0) {

-      this.savedAlerts.push(newAlert);

-    } else {

-      this.produce(newAlert);

-    }

-  }

-}

-

-export const alertService = new AlertService();

-

-export function pushAlert(alert: AlertInfo): void {

-  alertService.push(alert);

-}

-

-export const kAlertHostId = 'alert-host';

-

-export function getAlertHost(): HTMLElement | null {

-  return document.getElementById(kAlertHostId);

-}

+import pull from 'lodash/pull';
+
+export interface AlertInfo {
+  type?: 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info';
+  message: string;
+}
+
+export interface AlertInfoEx extends AlertInfo {
+  id: number;
+}
+
+export type AlertConsumer = (alerts: AlertInfoEx) => void;
+
+export class AlertService {
+  private consumers: AlertConsumer[] = [];
+  private savedAlerts: AlertInfoEx[] = [];
+  private currentId = 1;
+
+  private produce(alert: AlertInfoEx): void {
+    for (const consumer of this.consumers) {
+      consumer(alert);
+    }
+  }
+
+  registerConsumer(consumer: AlertConsumer): void {
+    this.consumers.push(consumer);
+    if (this.savedAlerts.length !== 0) {
+      for (const alert of this.savedAlerts) {
+        this.produce(alert);
+      }
+      this.savedAlerts = [];
+    }
+  }
+
+  unregisterConsumer(consumer: AlertConsumer): void {
+    pull(this.consumers, consumer);
+  }
+
+  push(alert: AlertInfo): void {
+    const newAlert: AlertInfoEx = { ...alert, id: this.currentId++ };
+    if (this.consumers.length === 0) {
+      this.savedAlerts.push(newAlert);
+    } else {
+      this.produce(newAlert);
+    }
+  }
+}
+
+export const alertService = new AlertService();
+
+export function pushAlert(alert: AlertInfo): void {
+  alertService.push(alert);
+}
+
+export const kAlertHostId = 'alert-host';
+
+export function getAlertHost(): HTMLElement | null {
+  return document.getElementById(kAlertHostId);
+}
diff --git a/Timeline/ClientApp/src/common/alert.sass b/Timeline/ClientApp/src/app/common/alert.sass
index c3560b87..5b6e65c2 100644
--- a/Timeline/ClientApp/src/common/alert.sass
+++ b/Timeline/ClientApp/src/app/common/alert.sass
@@ -1,15 +1,15 @@
-.alert-container

-  position: fixed

-  z-index: $zindex-popover

-

-@include media-breakpoint-up(sm)

-  .alert-container

-    bottom: 0

-    right: 0

-

-@include media-breakpoint-down(sm)

-  .alert-container

-    bottom: 0

-    right: 0

-    left: 0

-    text-align: center

+.alert-container
+  position: fixed
+  z-index: $zindex-popover
+
+@include media-breakpoint-up(sm)
+  .alert-container
+    bottom: 0
+    right: 0
+
+@include media-breakpoint-down(sm)
+  .alert-container
+    bottom: 0
+    right: 0
+    left: 0
+    text-align: center
diff --git a/Timeline/ClientApp/src/common/common.sass b/Timeline/ClientApp/src/app/common/common.sass
index 78e6fd14..15d34d7c 100644
--- a/Timeline/ClientApp/src/common/common.sass
+++ b/Timeline/ClientApp/src/app/common/common.sass
@@ -1,33 +1,33 @@
-.image-cropper-container

-  position: relative

-  box-sizing: border-box

-  user-select: none

-

-.image-cropper-container img

-  position: absolute

-  left: 0

-  top: 0

-  width: 100%

-  height: 100%

-

-.image-cropper-mask-container

-  position: absolute

-  left: 0

-  top: 0

-  right: 0

-  bottom: 0

-  overflow: hidden

-

-.image-cropper-mask

-  position: absolute

-  box-shadow: 0 0 0 10000px rgba(255, 255, 255, 80%)

-  touch-action: none

-

-.image-cropper-handler

-  position: absolute

-  width: 26px

-  height: 26px

-  border: black solid 2px

-  border-radius: 50%

-  background: white

-  touch-action: none

+.image-cropper-container
+  position: relative
+  box-sizing: border-box
+  user-select: none
+
+.image-cropper-container img
+  position: absolute
+  left: 0
+  top: 0
+  width: 100%
+  height: 100%
+
+.image-cropper-mask-container
+  position: absolute
+  left: 0
+  top: 0
+  right: 0
+  bottom: 0
+  overflow: hidden
+
+.image-cropper-mask
+  position: absolute
+  box-shadow: 0 0 0 10000px rgba(255, 255, 255, 80%)
+  touch-action: none
+
+.image-cropper-handler
+  position: absolute
+  width: 26px
+  height: 26px
+  border: black solid 2px
+  border-radius: 50%
+  background: white
+  touch-action: none
diff --git a/Timeline/ClientApp/src/config.ts b/Timeline/ClientApp/src/app/config.ts
index d06c3332..081a2cf6 100644
--- a/Timeline/ClientApp/src/config.ts
+++ b/Timeline/ClientApp/src/app/config.ts
@@ -1 +1 @@
-export const apiBaseUrl = '/api';

+export const apiBaseUrl = '/api';
diff --git a/Timeline/ClientApp/src/data/base64.ts b/Timeline/ClientApp/src/app/data/base64.ts
index 6d846527..7f7c6fcc 100644
--- a/Timeline/ClientApp/src/data/base64.ts
+++ b/Timeline/ClientApp/src/app/data/base64.ts
@@ -1,9 +1,9 @@
-export function base64(blob: Blob): Promise<string> {

-  return new Promise<string>(resolve => {

-    const reader = new FileReader();

-    reader.onload = function() {

-      resolve((reader.result as string).replace(/^data:.+;base64,/, ''));

-    };

-    reader.readAsDataURL(blob);

-  });

-}

+export function base64(blob: Blob): Promise<string> {
+  return new Promise<string>(resolve => {
+    const reader = new FileReader();
+    reader.onload = function() {
+      resolve((reader.result as string).replace(/^data:.+;base64,/, ''));
+    };
+    reader.readAsDataURL(blob);
+  });
+}
diff --git a/Timeline/ClientApp/src/data/common.ts b/Timeline/ClientApp/src/app/data/common.ts
index e2882a80..1cdf93f1 100644
--- a/Timeline/ClientApp/src/data/common.ts
+++ b/Timeline/ClientApp/src/app/data/common.ts
@@ -1,25 +1,25 @@
-import { AxiosError } from 'axios';

-

-export function extractStatusCode(error: AxiosError): number | null {

-  const code = error.response && error.response.status;

-  if (typeof code === 'number') {

-    return code;

-  } else {

-    return null;

-  }

-}

-

-export interface CommonErrorResponse {

-  code: number;

-  message: string;

-}

-

-export function extractErrorCode(error: AxiosError): number | null {

-  const { response } = error as AxiosError<CommonErrorResponse>;

-  const code = response && response.data && response.data.code;

-  if (typeof code === 'number') {

-    return code;

-  } else {

-    return null;

-  }

-}

+import { AxiosError } from 'axios';
+
+export function extractStatusCode(error: AxiosError): number | null {
+  const code = error.response && error.response.status;
+  if (typeof code === 'number') {
+    return code;
+  } else {
+    return null;
+  }
+}
+
+export interface CommonErrorResponse {
+  code: number;
+  message: string;
+}
+
+export function extractErrorCode(error: AxiosError): number | null {
+  const { response } = error as AxiosError<CommonErrorResponse>;
+  const code = response && response.data && response.data.code;
+  if (typeof code === 'number') {
+    return code;
+  } else {
+    return null;
+  }
+}
diff --git a/Timeline/ClientApp/src/data/timeline.ts b/Timeline/ClientApp/src/app/data/timeline.ts
index 66d9e57a..19bb3d45 100644
--- a/Timeline/ClientApp/src/data/timeline.ts
+++ b/Timeline/ClientApp/src/app/data/timeline.ts
@@ -1,345 +1,345 @@
-import axios from 'axios';

-import XRegExp from 'xregexp';

-

-import { base64 } from './base64';

-import { apiBaseUrl } from '../config';

-import { User, UserAuthInfo, getCurrentUser, UserWithToken } from './user';

-import { UiLogicError } from '../common';

-

-export const kTimelineVisibilities = ['Public', 'Register', 'Private'] as const;

-

-export type TimelineVisibility = typeof kTimelineVisibilities[number];

-

-export const timelineVisibilityTooltipTranslationMap: Record<

-  TimelineVisibility,

-  string

-> = {

-  Public: 'timeline.visibilityTooltip.public',

-  Register: 'timeline.visibilityTooltip.register',

-  Private: 'timeline.visibilityTooltip.private',

-};

-

-export interface TimelineInfo {

-  name: string;

-  description: string;

-  owner: User;

-  visibility: TimelineVisibility;

-  members: User[];

-  _links: {

-    posts: string;

-  };

-}

-

-export interface TimelinePostTextContent {

-  type: 'text';

-  text: string;

-}

-

-export interface TimelinePostImageContent {

-  type: 'image';

-  url: string;

-}

-

-export type TimelinePostContent =

-  | TimelinePostTextContent

-  | TimelinePostImageContent;

-

-export interface TimelinePostInfo {

-  id: number;

-  content: TimelinePostContent;

-  time: Date;

-  author: User;

-}

-

-export interface CreatePostRequestTextContent {

-  type: 'text';

-  text: string;

-}

-

-export interface CreatePostRequestImageContent {

-  type: 'image';

-  data: Blob;

-}

-

-export type CreatePostRequestContent =

-  | CreatePostRequestTextContent

-  | CreatePostRequestImageContent;

-

-export interface CreatePostRequest {

-  content: CreatePostRequestContent;

-  time?: Date;

-}

-

-// TODO: Remove in the future

-export interface TimelineChangePropertyRequest {

-  visibility?: TimelineVisibility;

-  description?: string;

-}

-

-export interface PersonalTimelineChangePropertyRequest {

-  visibility?: TimelineVisibility;

-  description?: string;

-}

-

-export interface OrdinaryTimelineChangePropertyRequest {

-  // not supported by server now

-  // name?: string;

-  visibility?: TimelineVisibility;

-  description?: string;

-}

-

-//-------------------- begin: internal model --------------------

-

-interface RawTimelinePostTextContent {

-  type: 'text';

-  text: string;

-}

-

-interface RawTimelinePostImageContent {

-  type: 'image';

-  url: string;

-}

-

-type RawTimelinePostContent =

-  | RawTimelinePostTextContent

-  | RawTimelinePostImageContent;

-

-interface RawTimelinePostInfo {

-  id: number;

-  content: RawTimelinePostContent;

-  time: string;

-  author: User;

-}

-

-interface RawCreatePostRequestTextContent {

-  type: 'text';

-  text: string;

-}

-

-interface RawCreatePostRequestImageContent {

-  type: 'text';

-  data: string;

-}

-

-type RawCreatePostRequestContent =

-  | RawCreatePostRequestTextContent

-  | RawCreatePostRequestImageContent;

-

-interface RawCreatePostRequest {

-  content: RawCreatePostRequestContent;

-  time?: string;

-}

-

-//-------------------- end: internal model --------------------

-

-function processRawTimelinePostInfo(

-  raw: RawTimelinePostInfo,

-  token?: string

-): TimelinePostInfo {

-  return {

-    ...raw,

-    content: (() => {

-      if (raw.content.type === 'image' && token != null) {

-        return {

-          ...raw.content,

-          url: raw.content.url + '?token=' + token,

-        };

-      }

-      return raw.content;

-    })(),

-    time: new Date(raw.time),

-  };

-}

-

-type TimelineUrlResolver = (name: string) => string;

-

-export class TimelineServiceTemplate<

-  TTimeline extends TimelineInfo,

-  TChangePropertyRequest

-> {

-  private checkUser(): UserWithToken {

-    const user = getCurrentUser();

-    if (user == null) {

-      throw new UiLogicError('You must login to perform the operation.');

-    }

-    return user;

-  }

-

-  constructor(private urlResolver: TimelineUrlResolver) {}

-

-  changeProperty(

-    name: string,

-    req: TChangePropertyRequest

-  ): Promise<TTimeline> {

-    const user = this.checkUser();

-

-    return axios

-      .patch<TTimeline>(`${this.urlResolver(name)}?token=${user.token}`, req)

-      .then((res) => res.data);

-  }

-

-  fetch(name: string): Promise<TTimeline> {

-    return axios

-      .get<TTimeline>(`${this.urlResolver(name)}`)

-      .then((res) => res.data);

-  }

-

-  fetchPosts(name: string): Promise<TimelinePostInfo[]> {

-    const token = getCurrentUser()?.token;

-    return axios

-      .get<RawTimelinePostInfo[]>(

-        token == null

-          ? `${this.urlResolver(name)}/posts`

-          : `${this.urlResolver(name)}/posts?token=${token}`

-      )

-      .then((res) => res.data.map((p) => processRawTimelinePostInfo(p, token)));

-  }

-

-  createPost(

-    name: string,

-    request: CreatePostRequest

-  ): Promise<TimelinePostInfo> {

-    const user = this.checkUser();

-

-    const rawReq: Promise<RawCreatePostRequest> = new Promise<

-      RawCreatePostRequestContent

-    >((resolve) => {

-      if (request.content.type === 'image') {

-        void base64(request.content.data).then((d) =>

-          resolve({

-            ...request.content,

-            data: d,

-          } as RawCreatePostRequestImageContent)

-        );

-      } else {

-        resolve(request.content);

-      }

-    }).then((content) => {

-      const rawReq: RawCreatePostRequest = {

-        content,

-      };

-      if (request.time != null) {

-        rawReq.time = request.time.toISOString();

-      }

-      return rawReq;

-    });

-

-    return rawReq

-      .then((req) =>

-        axios.post<RawTimelinePostInfo>(

-          `${this.urlResolver(name)}/posts?token=${user.token}`,

-          req

-        )

-      )

-      .then((res) => processRawTimelinePostInfo(res.data, user.token));

-  }

-

-  deletePost(name: string, id: number): Promise<void> {

-    const user = this.checkUser();

-

-    return axios.delete(

-      `${this.urlResolver(name)}/posts/${id}?token=${user.token}`

-    );

-  }

-

-  addMember(name: string, username: string): Promise<void> {

-    const user = this.checkUser();

-

-    return axios.put(

-      `${this.urlResolver(name)}/members/${username}?token=${user.token}`

-    );

-  }

-

-  removeMember(name: string, username: string): Promise<void> {

-    const user = this.checkUser();

-

-    return axios.delete(

-      `${this.urlResolver(name)}/members/${username}?token=${user.token}`

-    );

-  }

-

-  isMemberOf(username: string, timeline: TTimeline): boolean {

-    return timeline.members.findIndex((m) => m.username == username) >= 0;

-  }

-

-  hasReadPermission(

-    user: UserAuthInfo | null | undefined,

-    timeline: TTimeline

-  ): boolean {

-    if (user != null && user.administrator) return true;

-

-    const { visibility } = timeline;

-    if (visibility === 'Public') {

-      return true;

-    } else if (visibility === 'Register') {

-      if (user != null) return true;

-    } else if (visibility === 'Private') {

-      if (user != null && this.isMemberOf(user.username, timeline)) {

-        return true;

-      }

-    }

-    return false;

-  }

-

-  hasPostPermission(

-    user: UserAuthInfo | null | undefined,

-    timeline: TTimeline

-  ): boolean {

-    if (user != null && user.administrator) return true;

-

-    return (

-      user != null &&

-      (timeline.owner.username === user.username ||

-        this.isMemberOf(user.username, timeline))

-    );

-  }

-

-  hasManagePermission(

-    user: UserAuthInfo | null | undefined,

-    timeline: TTimeline

-  ): boolean {

-    if (user != null && user.administrator) return true;

-

-    return user != null && user.username == timeline.owner.username;

-  }

-

-  hasModifyPostPermission(

-    user: UserAuthInfo | null | undefined,

-    timeline: TTimeline,

-    post: TimelinePostInfo

-  ): boolean {

-    if (user != null && user.administrator) return true;

-

-    return (

-      user != null &&

-      (user.username === timeline.owner.username ||

-        user.username === post.author.username)

-    );

-  }

-}

-

-export type PersonalTimelineService = TimelineServiceTemplate<

-  TimelineInfo,

-  PersonalTimelineChangePropertyRequest

->;

-

-export const personalTimelineService: PersonalTimelineService = new TimelineServiceTemplate<

-  TimelineInfo,

-  PersonalTimelineChangePropertyRequest

->((name) => `${apiBaseUrl}/timelines/@${name}`);

-

-export type OrdinaryTimelineService = TimelineServiceTemplate<

-  TimelineInfo,

-  OrdinaryTimelineChangePropertyRequest

->;

-

-export const ordinaryTimelineService: OrdinaryTimelineService = new TimelineServiceTemplate<

-  TimelineInfo,

-  TimelineChangePropertyRequest

->((name) => `${apiBaseUrl}/timelines/${name}`);

-

-const timelineNameReg = XRegExp('^[-_\\p{L}]*$', 'u');

-

-export function validateTimelineName(name: string): boolean {

-  return timelineNameReg.test(name);

-}

+import axios from 'axios';
+import XRegExp from 'xregexp';
+
+import { base64 } from './base64';
+import { apiBaseUrl } from '../config';
+import { User, UserAuthInfo, getCurrentUser, UserWithToken } from './user';
+import { UiLogicError } from '../common';
+
+export const kTimelineVisibilities = ['Public', 'Register', 'Private'] as const;
+
+export type TimelineVisibility = typeof kTimelineVisibilities[number];
+
+export const timelineVisibilityTooltipTranslationMap: Record<
+  TimelineVisibility,
+  string
+> = {
+  Public: 'timeline.visibilityTooltip.public',
+  Register: 'timeline.visibilityTooltip.register',
+  Private: 'timeline.visibilityTooltip.private',
+};
+
+export interface TimelineInfo {
+  name: string;
+  description: string;
+  owner: User;
+  visibility: TimelineVisibility;
+  members: User[];
+  _links: {
+    posts: string;
+  };
+}
+
+export interface TimelinePostTextContent {
+  type: 'text';
+  text: string;
+}
+
+export interface TimelinePostImageContent {
+  type: 'image';
+  url: string;
+}
+
+export type TimelinePostContent =
+  | TimelinePostTextContent
+  | TimelinePostImageContent;
+
+export interface TimelinePostInfo {
+  id: number;
+  content: TimelinePostContent;
+  time: Date;
+  author: User;
+}
+
+export interface CreatePostRequestTextContent {
+  type: 'text';
+  text: string;
+}
+
+export interface CreatePostRequestImageContent {
+  type: 'image';
+  data: Blob;
+}
+
+export type CreatePostRequestContent =
+  | CreatePostRequestTextContent
+  | CreatePostRequestImageContent;
+
+export interface CreatePostRequest {
+  content: CreatePostRequestContent;
+  time?: Date;
+}
+
+// TODO: Remove in the future
+export interface TimelineChangePropertyRequest {
+  visibility?: TimelineVisibility;
+  description?: string;
+}
+
+export interface PersonalTimelineChangePropertyRequest {
+  visibility?: TimelineVisibility;
+  description?: string;
+}
+
+export interface OrdinaryTimelineChangePropertyRequest {
+  // not supported by server now
+  // name?: string;
+  visibility?: TimelineVisibility;
+  description?: string;
+}
+
+//-------------------- begin: internal model --------------------
+
+interface RawTimelinePostTextContent {
+  type: 'text';
+  text: string;
+}
+
+interface RawTimelinePostImageContent {
+  type: 'image';
+  url: string;
+}
+
+type RawTimelinePostContent =
+  | RawTimelinePostTextContent
+  | RawTimelinePostImageContent;
+
+interface RawTimelinePostInfo {
+  id: number;
+  content: RawTimelinePostContent;
+  time: string;
+  author: User;
+}
+
+interface RawCreatePostRequestTextContent {
+  type: 'text';
+  text: string;
+}
+
+interface RawCreatePostRequestImageContent {
+  type: 'text';
+  data: string;
+}
+
+type RawCreatePostRequestContent =
+  | RawCreatePostRequestTextContent
+  | RawCreatePostRequestImageContent;
+
+interface RawCreatePostRequest {
+  content: RawCreatePostRequestContent;
+  time?: string;
+}
+
+//-------------------- end: internal model --------------------
+
+function processRawTimelinePostInfo(
+  raw: RawTimelinePostInfo,
+  token?: string
+): TimelinePostInfo {
+  return {
+    ...raw,
+    content: (() => {
+      if (raw.content.type === 'image' && token != null) {
+        return {
+          ...raw.content,
+          url: raw.content.url + '?token=' + token,
+        };
+      }
+      return raw.content;
+    })(),
+    time: new Date(raw.time),
+  };
+}
+
+type TimelineUrlResolver = (name: string) => string;
+
+export class TimelineServiceTemplate<
+  TTimeline extends TimelineInfo,
+  TChangePropertyRequest
+> {
+  private checkUser(): UserWithToken {
+    const user = getCurrentUser();
+    if (user == null) {
+      throw new UiLogicError('You must login to perform the operation.');
+    }
+    return user;
+  }
+
+  constructor(private urlResolver: TimelineUrlResolver) {}
+
+  changeProperty(
+    name: string,
+    req: TChangePropertyRequest
+  ): Promise<TTimeline> {
+    const user = this.checkUser();
+
+    return axios
+      .patch<TTimeline>(`${this.urlResolver(name)}?token=${user.token}`, req)
+      .then((res) => res.data);
+  }
+
+  fetch(name: string): Promise<TTimeline> {
+    return axios
+      .get<TTimeline>(`${this.urlResolver(name)}`)
+      .then((res) => res.data);
+  }
+
+  fetchPosts(name: string): Promise<TimelinePostInfo[]> {
+    const token = getCurrentUser()?.token;
+    return axios
+      .get<RawTimelinePostInfo[]>(
+        token == null
+          ? `${this.urlResolver(name)}/posts`
+          : `${this.urlResolver(name)}/posts?token=${token}`
+      )
+      .then((res) => res.data.map((p) => processRawTimelinePostInfo(p, token)));
+  }
+
+  createPost(
+    name: string,
+    request: CreatePostRequest
+  ): Promise<TimelinePostInfo> {
+    const user = this.checkUser();
+
+    const rawReq: Promise<RawCreatePostRequest> = new Promise<
+      RawCreatePostRequestContent
+    >((resolve) => {
+      if (request.content.type === 'image') {
+        void base64(request.content.data).then((d) =>
+          resolve({
+            ...request.content,
+            data: d,
+          } as RawCreatePostRequestImageContent)
+        );
+      } else {
+        resolve(request.content);
+      }
+    }).then((content) => {
+      const rawReq: RawCreatePostRequest = {
+        content,
+      };
+      if (request.time != null) {
+        rawReq.time = request.time.toISOString();
+      }
+      return rawReq;
+    });
+
+    return rawReq
+      .then((req) =>
+        axios.post<RawTimelinePostInfo>(
+          `${this.urlResolver(name)}/posts?token=${user.token}`,
+          req
+        )
+      )
+      .then((res) => processRawTimelinePostInfo(res.data, user.token));
+  }
+
+  deletePost(name: string, id: number): Promise<void> {
+    const user = this.checkUser();
+
+    return axios.delete(
+      `${this.urlResolver(name)}/posts/${id}?token=${user.token}`
+    );
+  }
+
+  addMember(name: string, username: string): Promise<void> {
+    const user = this.checkUser();
+
+    return axios.put(
+      `${this.urlResolver(name)}/members/${username}?token=${user.token}`
+    );
+  }
+
+  removeMember(name: string, username: string): Promise<void> {
+    const user = this.checkUser();
+
+    return axios.delete(
+      `${this.urlResolver(name)}/members/${username}?token=${user.token}`
+    );
+  }
+
+  isMemberOf(username: string, timeline: TTimeline): boolean {
+    return timeline.members.findIndex((m) => m.username == username) >= 0;
+  }
+
+  hasReadPermission(
+    user: UserAuthInfo | null | undefined,
+    timeline: TTimeline
+  ): boolean {
+    if (user != null && user.administrator) return true;
+
+    const { visibility } = timeline;
+    if (visibility === 'Public') {
+      return true;
+    } else if (visibility === 'Register') {
+      if (user != null) return true;
+    } else if (visibility === 'Private') {
+      if (user != null && this.isMemberOf(user.username, timeline)) {
+        return true;
+      }
+    }
+    return false;
+  }
+
+  hasPostPermission(
+    user: UserAuthInfo | null | undefined,
+    timeline: TTimeline
+  ): boolean {
+    if (user != null && user.administrator) return true;
+
+    return (
+      user != null &&
+      (timeline.owner.username === user.username ||
+        this.isMemberOf(user.username, timeline))
+    );
+  }
+
+  hasManagePermission(
+    user: UserAuthInfo | null | undefined,
+    timeline: TTimeline
+  ): boolean {
+    if (user != null && user.administrator) return true;
+
+    return user != null && user.username == timeline.owner.username;
+  }
+
+  hasModifyPostPermission(
+    user: UserAuthInfo | null | undefined,
+    timeline: TTimeline,
+    post: TimelinePostInfo
+  ): boolean {
+    if (user != null && user.administrator) return true;
+
+    return (
+      user != null &&
+      (user.username === timeline.owner.username ||
+        user.username === post.author.username)
+    );
+  }
+}
+
+export type PersonalTimelineService = TimelineServiceTemplate<
+  TimelineInfo,
+  PersonalTimelineChangePropertyRequest
+>;
+
+export const personalTimelineService: PersonalTimelineService = new TimelineServiceTemplate<
+  TimelineInfo,
+  PersonalTimelineChangePropertyRequest
+>((name) => `${apiBaseUrl}/timelines/@${name}`);
+
+export type OrdinaryTimelineService = TimelineServiceTemplate<
+  TimelineInfo,
+  OrdinaryTimelineChangePropertyRequest
+>;
+
+export const ordinaryTimelineService: OrdinaryTimelineService = new TimelineServiceTemplate<
+  TimelineInfo,
+  TimelineChangePropertyRequest
+>((name) => `${apiBaseUrl}/timelines/${name}`);
+
+const timelineNameReg = XRegExp('^[-_\\p{L}]*$', 'u');
+
+export function validateTimelineName(name: string): boolean {
+  return timelineNameReg.test(name);
+}
diff --git a/Timeline/ClientApp/src/data/user.ts b/Timeline/ClientApp/src/app/data/user.ts
index b85f4f27..8f787478 100644
--- a/Timeline/ClientApp/src/data/user.ts
+++ b/Timeline/ClientApp/src/app/data/user.ts
@@ -1,224 +1,224 @@
-import axios, { AxiosError } from 'axios';

-import { useState, useEffect } from 'react';

-import { BehaviorSubject, Observable } from 'rxjs';

-

-import { apiBaseUrl } from '../config';

-import { extractErrorCode } from './common';

-import { pushAlert } from '../common/alert-service';

-import { i18nPromise } from '../i18n';

-import { UiLogicError } from '../common';

-

-export interface UserAuthInfo {

-  username: string;

-  administrator: boolean;

-}

-

-export interface User {

-  username: string;

-  administrator: boolean;

-  nickname: string;

-  _links: {

-    avatar: string;

-    timeline: string;

-  };

-}

-

-export interface UserWithToken extends User {

-  token: string;

-}

-

-interface CreateTokenRequest {

-  username: string;

-  password: string;

-}

-

-interface CreateTokenResponse {

-  token: string;

-  user: User;

-}

-

-interface VerifyTokenRequest {

-  token: string;

-}

-

-interface VerifyTokenResponse {

-  user: User;

-}

-

-export type LoginCredentials = CreateTokenRequest;

-

-const userSubject = new BehaviorSubject<UserWithToken | null | undefined>(

-  undefined

-);

-

-export const user$: Observable<UserWithToken | null | undefined> = userSubject;

-

-export function getCurrentUser(): UserWithToken | null | undefined {

-  return userSubject.value;

-}

-

-const kCreateTokenUrl = '/token/create';

-const kVerifyTokenUrl = '/token/verify';

-const createTokenUrl = apiBaseUrl + kCreateTokenUrl;

-const verifyTokenUrl = apiBaseUrl + kVerifyTokenUrl;

-

-function verifyToken(token: string): Promise<User> {

-  return axios

-    .post<VerifyTokenResponse>(verifyTokenUrl, {

-      token: token,

-    } as VerifyTokenRequest)

-    .then((res) => res.data.user);

-}

-

-const TOKEN_STORAGE_KEY = 'token';

-

-export function checkUserLoginState(): Promise<UserWithToken | null> {

-  if (getCurrentUser() !== undefined)

-    throw new UiLogicError("Already checked user. Can't check twice.");

-

-  const savedToken = window.localStorage.getItem(TOKEN_STORAGE_KEY);

-  if (savedToken) {

-    return verifyToken(savedToken)

-      .then(

-        (u) => {

-          const user: UserWithToken = {

-            ...u,

-            token: savedToken,

-          };

-          void i18nPromise.then((t) => {

-            pushAlert({

-              type: 'success',

-              message: t('user.welcomeBack'),

-            });

-          });

-          return user;

-        },

-        (e: AxiosError) => {

-          if (e.response != null) {

-            window.localStorage.removeItem(TOKEN_STORAGE_KEY);

-            void i18nPromise.then((t) => {

-              pushAlert({

-                type: 'danger',

-                message: t('user.verifyTokenFailed'),

-              });

-            });

-          } else {

-            void i18nPromise.then((t) => {

-              pushAlert({

-                type: 'danger',

-                message: t('user.verifyTokenFailedNetwork'),

-              });

-            });

-          }

-

-          return null;

-        }

-      )

-      .then((u) => {

-        userSubject.next(u);

-        return u;

-      });

-  }

-  userSubject.next(null);

-  return Promise.resolve(null);

-}

-

-export class BadCredentialError {

-  constructor(public innerError: Error) {}

-

-  message = 'login.badCredential';

-}

-

-export function userLogin(

-  credentials: LoginCredentials,

-  rememberMe: boolean

-): Promise<UserWithToken> {

-  if (getCurrentUser()) {

-    throw new UiLogicError('Already login.');

-  }

-  return axios

-    .post<CreateTokenResponse>(createTokenUrl, { ...credentials, expire: 30 })

-    .catch((e: AxiosError) => {

-      if (extractErrorCode(e) === 11010101) {

-        throw new BadCredentialError(e);

-      }

-      throw e;

-    })

-    .then((res) => {

-      const body = res.data;

-      const token = body.token;

-      if (rememberMe) {

-        window.localStorage.setItem(TOKEN_STORAGE_KEY, token);

-      }

-      const user = {

-        ...body.user,

-        token,

-      };

-      userSubject.next(user);

-      return user;

-    });

-}

-

-export function userLogout(): void {

-  if (getCurrentUser() === undefined) {

-    throw new UiLogicError('Please check user first.');

-  }

-  if (getCurrentUser() === null) {

-    throw new UiLogicError('No login.');

-  }

-  window.localStorage.removeItem(TOKEN_STORAGE_KEY);

-  userSubject.next(null);

-}

-

-export function useOptionalUser(): UserWithToken | null | undefined {

-  const [user, setUser] = useState<UserWithToken | null | undefined>(

-    userSubject.value

-  );

-  useEffect(() => {

-    const sub = user$.subscribe((u) => setUser(u));

-    return () => {

-      sub.unsubscribe();

-    };

-  });

-  return user;

-}

-

-export function useUser(): UserWithToken | null {

-  const [user, setUser] = useState<UserWithToken | null>(() => {

-    const initUser = userSubject.value;

-    if (initUser === undefined) {

-      throw new UiLogicError(

-        "This is a logic error in user module. Current user can't be undefined in useUser."

-      );

-    }

-    return initUser;

-  });

-  useEffect(() => {

-    const sub = user$.subscribe((u) => {

-      if (u === undefined) {

-        throw new UiLogicError(

-          "This is a logic error in user module. User emitted can't be undefined later."

-        );

-      }

-      setUser(u);

-    });

-    return () => {

-      sub.unsubscribe();

-    };

-  });

-  return user;

-}

-

-export function useUserLoggedIn(): UserWithToken {

-  const user = useUser();

-  if (user == null) {

-    throw new UiLogicError('You assert user has logged in but actually not.');

-  }

-  return user;

-}

-

-export function fetchUser(username: string): Promise<User> {

-  return axios

-    .get<User>(`${apiBaseUrl}/users/${username}`)

-    .then((res) => res.data);

-}

+import axios, { AxiosError } from 'axios';
+import { useState, useEffect } from 'react';
+import { BehaviorSubject, Observable } from 'rxjs';
+
+import { apiBaseUrl } from '../config';
+import { extractErrorCode } from './common';
+import { pushAlert } from '../common/alert-service';
+import { i18nPromise } from '../i18n';
+import { UiLogicError } from '../common';
+
+export interface UserAuthInfo {
+  username: string;
+  administrator: boolean;
+}
+
+export interface User {
+  username: string;
+  administrator: boolean;
+  nickname: string;
+  _links: {
+    avatar: string;
+    timeline: string;
+  };
+}
+
+export interface UserWithToken extends User {
+  token: string;
+}
+
+interface CreateTokenRequest {
+  username: string;
+  password: string;
+}
+
+interface CreateTokenResponse {
+  token: string;
+  user: User;
+}
+
+interface VerifyTokenRequest {
+  token: string;
+}
+
+interface VerifyTokenResponse {
+  user: User;
+}
+
+export type LoginCredentials = CreateTokenRequest;
+
+const userSubject = new BehaviorSubject<UserWithToken | null | undefined>(
+  undefined
+);
+
+export const user$: Observable<UserWithToken | null | undefined> = userSubject;
+
+export function getCurrentUser(): UserWithToken | null | undefined {
+  return userSubject.value;
+}
+
+const kCreateTokenUrl = '/token/create';
+const kVerifyTokenUrl = '/token/verify';
+const createTokenUrl = apiBaseUrl + kCreateTokenUrl;
+const verifyTokenUrl = apiBaseUrl + kVerifyTokenUrl;
+
+function verifyToken(token: string): Promise<User> {
+  return axios
+    .post<VerifyTokenResponse>(verifyTokenUrl, {
+      token: token,
+    } as VerifyTokenRequest)
+    .then((res) => res.data.user);
+}
+
+const TOKEN_STORAGE_KEY = 'token';
+
+export function checkUserLoginState(): Promise<UserWithToken | null> {
+  if (getCurrentUser() !== undefined)
+    throw new UiLogicError("Already checked user. Can't check twice.");
+
+  const savedToken = window.localStorage.getItem(TOKEN_STORAGE_KEY);
+  if (savedToken) {
+    return verifyToken(savedToken)
+      .then(
+        (u) => {
+          const user: UserWithToken = {
+            ...u,
+            token: savedToken,
+          };
+          void i18nPromise.then((t) => {
+            pushAlert({
+              type: 'success',
+              message: t('user.welcomeBack'),
+            });
+          });
+          return user;
+        },
+        (e: AxiosError) => {
+          if (e.response != null) {
+            window.localStorage.removeItem(TOKEN_STORAGE_KEY);
+            void i18nPromise.then((t) => {
+              pushAlert({
+                type: 'danger',
+                message: t('user.verifyTokenFailed'),
+              });
+            });
+          } else {
+            void i18nPromise.then((t) => {
+              pushAlert({
+                type: 'danger',
+                message: t('user.verifyTokenFailedNetwork'),
+              });
+            });
+          }
+
+          return null;
+        }
+      )
+      .then((u) => {
+        userSubject.next(u);
+        return u;
+      });
+  }
+  userSubject.next(null);
+  return Promise.resolve(null);
+}
+
+export class BadCredentialError {
+  constructor(public innerError: Error) {}
+
+  message = 'login.badCredential';
+}
+
+export function userLogin(
+  credentials: LoginCredentials,
+  rememberMe: boolean
+): Promise<UserWithToken> {
+  if (getCurrentUser()) {
+    throw new UiLogicError('Already login.');
+  }
+  return axios
+    .post<CreateTokenResponse>(createTokenUrl, { ...credentials, expire: 30 })
+    .catch((e: AxiosError) => {
+      if (extractErrorCode(e) === 11010101) {
+        throw new BadCredentialError(e);
+      }
+      throw e;
+    })
+    .then((res) => {
+      const body = res.data;
+      const token = body.token;
+      if (rememberMe) {
+        window.localStorage.setItem(TOKEN_STORAGE_KEY, token);
+      }
+      const user = {
+        ...body.user,
+        token,
+      };
+      userSubject.next(user);
+      return user;
+    });
+}
+
+export function userLogout(): void {
+  if (getCurrentUser() === undefined) {
+    throw new UiLogicError('Please check user first.');
+  }
+  if (getCurrentUser() === null) {
+    throw new UiLogicError('No login.');
+  }
+  window.localStorage.removeItem(TOKEN_STORAGE_KEY);
+  userSubject.next(null);
+}
+
+export function useOptionalUser(): UserWithToken | null | undefined {
+  const [user, setUser] = useState<UserWithToken | null | undefined>(
+    userSubject.value
+  );
+  useEffect(() => {
+    const sub = user$.subscribe((u) => setUser(u));
+    return () => {
+      sub.unsubscribe();
+    };
+  });
+  return user;
+}
+
+export function useUser(): UserWithToken | null {
+  const [user, setUser] = useState<UserWithToken | null>(() => {
+    const initUser = userSubject.value;
+    if (initUser === undefined) {
+      throw new UiLogicError(
+        "This is a logic error in user module. Current user can't be undefined in useUser."
+      );
+    }
+    return initUser;
+  });
+  useEffect(() => {
+    const sub = user$.subscribe((u) => {
+      if (u === undefined) {
+        throw new UiLogicError(
+          "This is a logic error in user module. User emitted can't be undefined later."
+        );
+      }
+      setUser(u);
+    });
+    return () => {
+      sub.unsubscribe();
+    };
+  });
+  return user;
+}
+
+export function useUserLoggedIn(): UserWithToken {
+  const user = useUser();
+  if (user == null) {
+    throw new UiLogicError('You assert user has logged in but actually not.');
+  }
+  return user;
+}
+
+export function fetchUser(username: string): Promise<User> {
+  return axios
+    .get<User>(`${apiBaseUrl}/users/${username}`)
+    .then((res) => res.data);
+}
diff --git a/Timeline/ClientApp/src/helper.ts b/Timeline/ClientApp/src/app/helper.ts
index 904dcbbe..b48829b5 100644
--- a/Timeline/ClientApp/src/helper.ts
+++ b/Timeline/ClientApp/src/app/helper.ts
@@ -1,35 +1,35 @@
-//copied from https://stackoverflow.com/questions/5999118/how-can-i-add-or-update-a-query-string-parameter

-export function updateQueryString(

-  key: string,

-  value?: string | null,

-  url?: string

-): string {

-  if (!url) url = window.location.href;

-  const re = new RegExp('([?&])' + key + '=.*?(&|#|$)(.*)', 'gi');

-  let hash;

-

-  if (re.test(url)) {

-    if (typeof value !== 'undefined' && value !== null) {

-      return url.replace(re, '$1' + key + '=' + value + '$2$3');

-    } else {

-      hash = url.split('#');

-      url = hash[0].replace(re, '$1$3').replace(/(&|\?)$/, '');

-      if (typeof hash[1] !== 'undefined' && hash[1] !== null) {

-        url += '#' + hash[1];

-      }

-      return url;

-    }

-  } else {

-    if (typeof value !== 'undefined' && value !== null) {

-      const separator = url.includes('?') ? '&' : '?';

-      hash = url.split('#');

-      url = hash[0] + separator + key + '=' + value;

-      if (typeof hash[1] !== 'undefined' && hash[1] !== null) {

-        url += '#' + hash[1];

-      }

-      return url;

-    } else {

-      return url;

-    }

-  }

-}

+//copied from https://stackoverflow.com/questions/5999118/how-can-i-add-or-update-a-query-string-parameter
+export function updateQueryString(
+  key: string,
+  value?: string | null,
+  url?: string
+): string {
+  if (!url) url = window.location.href;
+  const re = new RegExp('([?&])' + key + '=.*?(&|#|$)(.*)', 'gi');
+  let hash;
+
+  if (re.test(url)) {
+    if (typeof value !== 'undefined' && value !== null) {
+      return url.replace(re, '$1' + key + '=' + value + '$2$3');
+    } else {
+      hash = url.split('#');
+      url = hash[0].replace(re, '$1$3').replace(/(&|\?)$/, '');
+      if (typeof hash[1] !== 'undefined' && hash[1] !== null) {
+        url += '#' + hash[1];
+      }
+      return url;
+    }
+  } else {
+    if (typeof value !== 'undefined' && value !== null) {
+      const separator = url.includes('?') ? '&' : '?';
+      hash = url.split('#');
+      url = hash[0] + separator + key + '=' + value;
+      if (typeof hash[1] !== 'undefined' && hash[1] !== null) {
+        url += '#' + hash[1];
+      }
+      return url;
+    } else {
+      return url;
+    }
+  }
+}
diff --git a/Timeline/ClientApp/src/home/Home.tsx b/Timeline/ClientApp/src/app/home/Home.tsx
index 495781d0..775a1a87 100644
--- a/Timeline/ClientApp/src/home/Home.tsx
+++ b/Timeline/ClientApp/src/app/home/Home.tsx
@@ -1,155 +1,155 @@
-import React from 'react';

-import { useHistory } from 'react-router';

-import { Row, Container, Button, Col } from 'reactstrap';

-import { useTranslation } from 'react-i18next';

-import axios from 'axios';

-

-import { apiBaseUrl } from '../config';

-import { useUser } from '../data/user';

-import { TimelineInfo } from '../data/timeline';

-

-import AppBar from '../common/AppBar';

-import SearchInput from '../common/SearchInput';

-import TimelineBoardAreaWithoutUser from './TimelineBoardAreaWithoutUser';

-import TimelineBoardAreaWithUser from './TimelineBoardAreaWithUser';

-import TimelineCreateDialog from './TimelineCreateDialog';

-

-const Home: React.FC = (_) => {

-  const history = useHistory();

-

-  const { t } = useTranslation();

-

-  const user = useUser();

-

-  const [navText, setNavText] = React.useState<string>('');

-

-  const [publicTimelines, setPublicTimelines] = React.useState<

-    TimelineInfo[] | undefined

-  >(undefined);

-  const [ownTimelines, setOwnTimelines] = React.useState<

-    TimelineInfo[] | undefined

-  >(undefined);

-  const [joinTimelines, setJoinTimelines] = React.useState<

-    TimelineInfo[] | undefined

-  >(undefined);

-

-  React.useEffect(() => {

-    let subscribe = true;

-    if (user == null) {

-      setOwnTimelines(undefined);

-      setJoinTimelines(undefined);

-      void axios

-        .get<TimelineInfo[]>(`${apiBaseUrl}/timelines?visibility=public`)

-        .then((res) => {

-          if (subscribe) {

-            setPublicTimelines(res.data);

-          }

-        });

-    } else {

-      setPublicTimelines(undefined);

-      void axios

-        .get<TimelineInfo[]>(

-          `${apiBaseUrl}/timelines?relate=${user.username}&relateType=own`

-        )

-        .then((res) => {

-          if (subscribe) {

-            setOwnTimelines(res.data);

-          }

-        });

-      void axios

-        .get<TimelineInfo[]>(

-          `${apiBaseUrl}/timelines?relate=${user.username}&relateType=join`

-        )

-        .then((res) => {

-          if (subscribe) {

-            setJoinTimelines(res.data);

-          }

-        });

-    }

-    return () => {

-      subscribe = false;

-    };

-  }, [user]);

-

-  const [dialog, setDialog] = React.useState<'create' | null>(null);

-

-  const goto = React.useCallback((): void => {

-    if (navText === '') {

-      history.push('users/crupest');

-    } else if (navText.startsWith('@')) {

-      history.push(`users/${navText.slice(1)}`);

-    } else {

-      history.push(`timelines/${navText}`);

-    }

-  }, [navText, history]);

-

-  const openCreateDialog = React.useCallback(() => {

-    setDialog('create');

-  }, []);

-

-  const closeDialog = React.useCallback(() => {

-    setDialog(null);

-  }, []);

-

-  return (

-    <>

-      <AppBar />

-      <Container fluid style={{ marginTop: '56px' }}>

-        <Row>

-          <Col>

-            <SearchInput

-              className="justify-content-center"

-              value={navText}

-              onChange={setNavText}

-              onButtonClick={goto}

-              buttonText={t('home.go')}

-              placeholder="@crupest"

-              additionalButton={

-                user != null && (

-                  <Button color="success" outline onClick={openCreateDialog}>

-                    {t('home.createButton')}

-                  </Button>

-                )

-              }

-            />

-          </Col>

-        </Row>

-        {(() => {

-          if (user == null) {

-            return (

-              <TimelineBoardAreaWithoutUser publicTimelines={publicTimelines} />

-            );

-          } else {

-            return (

-              <TimelineBoardAreaWithUser

-                ownTimelines={ownTimelines}

-                joinTimelines={joinTimelines}

-              />

-            );

-          }

-        })()}

-      </Container>

-      <footer className="text-right">

-        <a

-          className="mx-3 text-muted"

-          href="http://beian.miit.gov.cn/"

-          target="_blank"

-          rel="noopener noreferrer"

-        >

-          <small>鄂ICP备18030913号-1</small>

-        </a>

-        <a

-          className="mx-3 text-muted"

-          href="http://www.beian.gov.cn/"

-          target="_blank"

-          rel="noopener noreferrer"

-        >

-          <small className="white-space-no-wrap">公安备案 42112102000124</small>

-        </a>

-      </footer>

-      {dialog === 'create' && <TimelineCreateDialog open close={closeDialog} />}

-    </>

-  );

-};

-

-export default Home;

+import React from 'react';
+import { useHistory } from 'react-router';
+import { Row, Container, Button, Col } from 'reactstrap';
+import { useTranslation } from 'react-i18next';
+import axios from 'axios';
+
+import { apiBaseUrl } from '../config';
+import { useUser } from '../data/user';
+import { TimelineInfo } from '../data/timeline';
+
+import AppBar from '../common/AppBar';
+import SearchInput from '../common/SearchInput';
+import TimelineBoardAreaWithoutUser from './TimelineBoardAreaWithoutUser';
+import TimelineBoardAreaWithUser from './TimelineBoardAreaWithUser';
+import TimelineCreateDialog from './TimelineCreateDialog';
+
+const Home: React.FC = (_) => {
+  const history = useHistory();
+
+  const { t } = useTranslation();
+
+  const user = useUser();
+
+  const [navText, setNavText] = React.useState<string>('');
+
+  const [publicTimelines, setPublicTimelines] = React.useState<
+    TimelineInfo[] | undefined
+  >(undefined);
+  const [ownTimelines, setOwnTimelines] = React.useState<
+    TimelineInfo[] | undefined
+  >(undefined);
+  const [joinTimelines, setJoinTimelines] = React.useState<
+    TimelineInfo[] | undefined
+  >(undefined);
+
+  React.useEffect(() => {
+    let subscribe = true;
+    if (user == null) {
+      setOwnTimelines(undefined);
+      setJoinTimelines(undefined);
+      void axios
+        .get<TimelineInfo[]>(`${apiBaseUrl}/timelines?visibility=public`)
+        .then((res) => {
+          if (subscribe) {
+            setPublicTimelines(res.data);
+          }
+        });
+    } else {
+      setPublicTimelines(undefined);
+      void axios
+        .get<TimelineInfo[]>(
+          `${apiBaseUrl}/timelines?relate=${user.username}&relateType=own`
+        )
+        .then((res) => {
+          if (subscribe) {
+            setOwnTimelines(res.data);
+          }
+        });
+      void axios
+        .get<TimelineInfo[]>(
+          `${apiBaseUrl}/timelines?relate=${user.username}&relateType=join`
+        )
+        .then((res) => {
+          if (subscribe) {
+            setJoinTimelines(res.data);
+          }
+        });
+    }
+    return () => {
+      subscribe = false;
+    };
+  }, [user]);
+
+  const [dialog, setDialog] = React.useState<'create' | null>(null);
+
+  const goto = React.useCallback((): void => {
+    if (navText === '') {
+      history.push('users/crupest');
+    } else if (navText.startsWith('@')) {
+      history.push(`users/${navText.slice(1)}`);
+    } else {
+      history.push(`timelines/${navText}`);
+    }
+  }, [navText, history]);
+
+  const openCreateDialog = React.useCallback(() => {
+    setDialog('create');
+  }, []);
+
+  const closeDialog = React.useCallback(() => {
+    setDialog(null);
+  }, []);
+
+  return (
+    <>
+      <AppBar />
+      <Container fluid style={{ marginTop: '56px' }}>
+        <Row>
+          <Col>
+            <SearchInput
+              className="justify-content-center"
+              value={navText}
+              onChange={setNavText}
+              onButtonClick={goto}
+              buttonText={t('home.go')}
+              placeholder="@crupest"
+              additionalButton={
+                user != null && (
+                  <Button color="success" outline onClick={openCreateDialog}>
+                    {t('home.createButton')}
+                  </Button>
+                )
+              }
+            />
+          </Col>
+        </Row>
+        {(() => {
+          if (user == null) {
+            return (
+              <TimelineBoardAreaWithoutUser publicTimelines={publicTimelines} />
+            );
+          } else {
+            return (
+              <TimelineBoardAreaWithUser
+                ownTimelines={ownTimelines}
+                joinTimelines={joinTimelines}
+              />
+            );
+          }
+        })()}
+      </Container>
+      <footer className="text-right">
+        <a
+          className="mx-3 text-muted"
+          href="http://beian.miit.gov.cn/"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          <small>鄂ICP备18030913号-1</small>
+        </a>
+        <a
+          className="mx-3 text-muted"
+          href="http://www.beian.gov.cn/"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          <small className="white-space-no-wrap">公安备案 42112102000124</small>
+        </a>
+      </footer>
+      {dialog === 'create' && <TimelineCreateDialog open close={closeDialog} />}
+    </>
+  );
+};
+
+export default Home;
diff --git a/Timeline/ClientApp/src/home/TimelineBoard.tsx b/Timeline/ClientApp/src/app/home/TimelineBoard.tsx
index 2e017bf7..ca77ab43 100644
--- a/Timeline/ClientApp/src/home/TimelineBoard.tsx
+++ b/Timeline/ClientApp/src/app/home/TimelineBoard.tsx
@@ -1,54 +1,54 @@
-import React from 'react';

-import clsx from 'clsx';

-import { Link } from 'react-router-dom';

-import { Spinner } from 'reactstrap';

-

-import { TimelineInfo } from '../data/timeline';

-

-import TimelineLogo from '../common/TimelineLogo';

-import UserTimelineLogo from '../common/UserTimelineLogo';

-

-export interface TimelineBoardProps {

-  title?: string;

-  timelines?: TimelineInfo[];

-  className?: string;

-}

-

-const TimelineBoard: React.FC<TimelineBoardProps> = props => {

-  const { title, timelines, className } = props;

-

-  return (

-    <div className={clsx('timeline-board', className)}>

-      {title != null && <h3 className="text-center">{title}</h3>}

-      {(() => {

-        if (timelines == null) {

-          return (

-            <div className="d-flex flex-grow-1 justify-content-center align-items-center">

-              <Spinner color="primary" />

-            </div>

-          );

-        } else {

-          return timelines.map(timeline => {

-            const { name } = timeline;

-            const isPersonal = name.startsWith('@');

-            const url = isPersonal

-              ? `/users/${timeline.owner.username}`

-              : `/timelines/${name}`;

-            return (

-              <div key={name} className="timeline-board-item">

-                {isPersonal ? (

-                  <UserTimelineLogo className="icon" />

-                ) : (

-                  <TimelineLogo className="icon" />

-                )}

-                <Link to={url}>{name}</Link>

-              </div>

-            );

-          });

-        }

-      })()}

-    </div>

-  );

-};

-

-export default TimelineBoard;

+import React from 'react';
+import clsx from 'clsx';
+import { Link } from 'react-router-dom';
+import { Spinner } from 'reactstrap';
+
+import { TimelineInfo } from '../data/timeline';
+
+import TimelineLogo from '../common/TimelineLogo';
+import UserTimelineLogo from '../common/UserTimelineLogo';
+
+export interface TimelineBoardProps {
+  title?: string;
+  timelines?: TimelineInfo[];
+  className?: string;
+}
+
+const TimelineBoard: React.FC<TimelineBoardProps> = props => {
+  const { title, timelines, className } = props;
+
+  return (
+    <div className={clsx('timeline-board', className)}>
+      {title != null && <h3 className="text-center">{title}</h3>}
+      {(() => {
+        if (timelines == null) {
+          return (
+            <div className="d-flex flex-grow-1 justify-content-center align-items-center">
+              <Spinner color="primary" />
+            </div>
+          );
+        } else {
+          return timelines.map(timeline => {
+            const { name } = timeline;
+            const isPersonal = name.startsWith('@');
+            const url = isPersonal
+              ? `/users/${timeline.owner.username}`
+              : `/timelines/${name}`;
+            return (
+              <div key={name} className="timeline-board-item">
+                {isPersonal ? (
+                  <UserTimelineLogo className="icon" />
+                ) : (
+                  <TimelineLogo className="icon" />
+                )}
+                <Link to={url}>{name}</Link>
+              </div>
+            );
+          });
+        }
+      })()}
+    </div>
+  );
+};
+
+export default TimelineBoard;
diff --git a/Timeline/ClientApp/src/home/TimelineBoardAreaWithUser.tsx b/Timeline/ClientApp/src/app/home/TimelineBoardAreaWithUser.tsx
index a8603b9e..ea1c6beb 100644
--- a/Timeline/ClientApp/src/home/TimelineBoardAreaWithUser.tsx
+++ b/Timeline/ClientApp/src/app/home/TimelineBoardAreaWithUser.tsx
@@ -1,36 +1,36 @@
-import React from 'react';

-import { Row, Col } from 'reactstrap';

-import { useTranslation } from 'react-i18next';

-

-import TimelineBoard from './TimelineBoard';

-import { TimelineInfo } from '../data/timeline';

-

-interface TimelineBoardAreaWithUserProps {

-  ownTimelines?: TimelineInfo[];

-  joinTimelines?: TimelineInfo[];

-}

-

-const TimelineBoardAreaWithUser: React.FC<TimelineBoardAreaWithUserProps> = (

-  props

-) => {

-  const { t } = useTranslation();

-

-  return (

-    <Row className="my-2 justify-content-center">

-      <Col sm="6" lg="5" className="py-2">

-        <TimelineBoard

-          title={t('home.ownTimeline')}

-          timelines={props.ownTimelines}

-        />

-      </Col>

-      <Col sm="6" lg="5" className="py-2">

-        <TimelineBoard

-          title={t('home.joinTimeline')}

-          timelines={props.joinTimelines}

-        />

-      </Col>

-    </Row>

-  );

-};

-

-export default TimelineBoardAreaWithUser;

+import React from 'react';
+import { Row, Col } from 'reactstrap';
+import { useTranslation } from 'react-i18next';
+
+import TimelineBoard from './TimelineBoard';
+import { TimelineInfo } from '../data/timeline';
+
+interface TimelineBoardAreaWithUserProps {
+  ownTimelines?: TimelineInfo[];
+  joinTimelines?: TimelineInfo[];
+}
+
+const TimelineBoardAreaWithUser: React.FC<TimelineBoardAreaWithUserProps> = (
+  props
+) => {
+  const { t } = useTranslation();
+
+  return (
+    <Row className="my-2 justify-content-center">
+      <Col sm="6" lg="5" className="py-2">
+        <TimelineBoard
+          title={t('home.ownTimeline')}
+          timelines={props.ownTimelines}
+        />
+      </Col>
+      <Col sm="6" lg="5" className="py-2">
+        <TimelineBoard
+          title={t('home.joinTimeline')}
+          timelines={props.joinTimelines}
+        />
+      </Col>
+    </Row>
+  );
+};
+
+export default TimelineBoardAreaWithUser;
diff --git a/Timeline/ClientApp/src/home/TimelineBoardAreaWithoutUser.tsx b/Timeline/ClientApp/src/app/home/TimelineBoardAreaWithoutUser.tsx
index dc05ff09..c79558b6 100644
--- a/Timeline/ClientApp/src/home/TimelineBoardAreaWithoutUser.tsx
+++ b/Timeline/ClientApp/src/app/home/TimelineBoardAreaWithoutUser.tsx
@@ -1,26 +1,26 @@
-import React from 'react';

-import { Row, Col } from 'reactstrap';

-

-import { TimelineInfo } from '../data/timeline';

-

-import TimelineBoard from './TimelineBoard';

-

-interface TimelineBoardAreaWithoutUserProps {

-  publicTimelines?: TimelineInfo[];

-}

-

-const TimelineBoardAreaWithoutUser: React.FC<TimelineBoardAreaWithoutUserProps> = (

-  props

-) => {

-  const { publicTimelines } = props;

-

-  return (

-    <Row className="my-2 justify-content-center">

-      <Col sm="8" lg="6">

-        <TimelineBoard timelines={publicTimelines} />

-      </Col>

-    </Row>

-  );

-};

-

-export default TimelineBoardAreaWithoutUser;

+import React from 'react';
+import { Row, Col } from 'reactstrap';
+
+import { TimelineInfo } from '../data/timeline';
+
+import TimelineBoard from './TimelineBoard';
+
+interface TimelineBoardAreaWithoutUserProps {
+  publicTimelines?: TimelineInfo[];
+}
+
+const TimelineBoardAreaWithoutUser: React.FC<TimelineBoardAreaWithoutUserProps> = (
+  props
+) => {
+  const { publicTimelines } = props;
+
+  return (
+    <Row className="my-2 justify-content-center">
+      <Col sm="8" lg="6">
+        <TimelineBoard timelines={publicTimelines} />
+      </Col>
+    </Row>
+  );
+};
+
+export default TimelineBoardAreaWithoutUser;
diff --git a/Timeline/ClientApp/src/home/TimelineCreateDialog.tsx b/Timeline/ClientApp/src/app/home/TimelineCreateDialog.tsx
index 27c9d0d6..925c6c76 100644
--- a/Timeline/ClientApp/src/home/TimelineCreateDialog.tsx
+++ b/Timeline/ClientApp/src/app/home/TimelineCreateDialog.tsx
@@ -1,60 +1,60 @@
-import React from 'react';

-import { useHistory } from 'react-router';

-import axios from 'axios';

-

-import { apiBaseUrl } from '../config';

-import { useUserLoggedIn } from '../data/user';

-import { validateTimelineName } from '../data/timeline';

-

-import OperationDialog from '../common/OperationDialog';

-

-interface TimelineCreateDialogProps {

-  open: boolean;

-  close: () => void;

-}

-

-const TimelineCreateDialog: React.FC<TimelineCreateDialogProps> = (props) => {

-  const history = useHistory();

-  const user = useUserLoggedIn();

-

-  let nameSaved: string;

-

-  return (

-    <OperationDialog

-      open={props.open}

-      close={props.close}

-      titleColor="success"

-      title="home.createDialog.title"

-      inputScheme={[

-        {

-          type: 'text',

-          label: 'home.createDialog.name',

-          helperText: 'home.createDialog.nameFormat',

-          validator: (name) => {

-            if (name.length === 0) {

-              return 'home.createDialog.noEmpty';

-            } else if (name.length > 26) {

-              return 'home.createDialog.tooLong';

-            } else if (!validateTimelineName(name)) {

-              return 'home.createDialog.badFormat';

-            } else {

-              return null;

-            }

-          },

-        },

-      ]}

-      onProcess={([name]) => {

-        nameSaved = name as string;

-        return axios.post(`${apiBaseUrl}/timelines?token=${user.token}`, {

-          name,

-        });

-      }}

-      onSuccessAndClose={() => {

-        history.push(`timelines/${nameSaved}`);

-      }}

-      failurePrompt={(e) => `${e as string}`}

-    />

-  );

-};

-

-export default TimelineCreateDialog;

+import React from 'react';
+import { useHistory } from 'react-router';
+import axios from 'axios';
+
+import { apiBaseUrl } from '../config';
+import { useUserLoggedIn } from '../data/user';
+import { validateTimelineName } from '../data/timeline';
+
+import OperationDialog from '../common/OperationDialog';
+
+interface TimelineCreateDialogProps {
+  open: boolean;
+  close: () => void;
+}
+
+const TimelineCreateDialog: React.FC<TimelineCreateDialogProps> = (props) => {
+  const history = useHistory();
+  const user = useUserLoggedIn();
+
+  let nameSaved: string;
+
+  return (
+    <OperationDialog
+      open={props.open}
+      close={props.close}
+      titleColor="success"
+      title="home.createDialog.title"
+      inputScheme={[
+        {
+          type: 'text',
+          label: 'home.createDialog.name',
+          helperText: 'home.createDialog.nameFormat',
+          validator: (name) => {
+            if (name.length === 0) {
+              return 'home.createDialog.noEmpty';
+            } else if (name.length > 26) {
+              return 'home.createDialog.tooLong';
+            } else if (!validateTimelineName(name)) {
+              return 'home.createDialog.badFormat';
+            } else {
+              return null;
+            }
+          },
+        },
+      ]}
+      onProcess={([name]) => {
+        nameSaved = name as string;
+        return axios.post(`${apiBaseUrl}/timelines?token=${user.token}`, {
+          name,
+        });
+      }}
+      onSuccessAndClose={() => {
+        history.push(`timelines/${nameSaved}`);
+      }}
+      failurePrompt={(e) => `${e as string}`}
+    />
+  );
+};
+
+export default TimelineCreateDialog;
diff --git a/Timeline/ClientApp/src/home/home.sass b/Timeline/ClientApp/src/app/home/home.sass
index 28a2e5f3..f5d6ffc3 100644
--- a/Timeline/ClientApp/src/home/home.sass
+++ b/Timeline/ClientApp/src/app/home/home.sass
@@ -1,13 +1,13 @@
-.timeline-board-item

-  font-size: 1.1em

-  @extend .my-2

-  .icon

-    height: 1.3em

-    @extend .mr-2

-

-.timeline-board

-  @extend .cru-card

-  @extend .d-flex

-  @extend .flex-column

-  @extend .p-3

-  min-height: 200px

+.timeline-board-item
+  font-size: 1.1em
+  @extend .my-2
+  .icon
+    height: 1.3em
+    @extend .mr-2
+
+.timeline-board
+  @extend .cru-card
+  @extend .d-flex
+  @extend .flex-column
+  @extend .p-3
+  min-height: 200px
diff --git a/Timeline/ClientApp/src/i18n.ts b/Timeline/ClientApp/src/app/i18n.ts
index aa293819..bda33fe8 100644
--- a/Timeline/ClientApp/src/i18n.ts
+++ b/Timeline/ClientApp/src/app/i18n.ts
@@ -1,79 +1,79 @@
-import i18n, { BackendModule, ResourceKey } from 'i18next';

-import LanguageDetector from 'i18next-browser-languagedetector';

-import { initReactI18next } from 'react-i18next';

-

-const backend: BackendModule = {

-  type: 'backend',

-  async read(language, namespace, callback) {

-    function error(message: string): void {

-      callback(new Error(message), false);

-    }

-

-    function success(result: ResourceKey): void {

-      callback(null, result);

-    }

-

-    if (namespace !== 'translation') {

-      error("Namespace must be 'translation'.");

-    }

-

-    if (language === 'en') {

-      const res = (

-        await import(

-          /* webpackChunkName: "locales-en" */ './locales/en/translation'

-        )

-      ).default;

-      success(res);

-    } else if (language === 'zh-cn' || language === 'zh') {

-      const res = (

-        await import(

-          /* webpackChunkName: "locales-zh" */ './locales/zh/translation'

-        )

-      ).default;

-      success(res);

-    } else {

-      error(`Language ${language} is not supported.`);

-    }

-  },

-  init() {}, // eslint-disable-line @typescript-eslint/no-empty-function

-  create() {}, // eslint-disable-line @typescript-eslint/no-empty-function

-};

-

-export const i18nPromise = i18n

-  .use(LanguageDetector)

-  .use(backend)

-  .use(initReactI18next) // bind react-i18next to the instance

-  .init({

-    fallbackLng: false,

-    lowerCaseLng: true,

-

-    debug: process.env.NODE_ENV === 'development',

-

-    interpolation: {

-      escapeValue: false, // not needed for react!!

-    },

-

-    // react i18next special options (optional)

-    // override if needed - omit if ok with defaults

-    /*

-    react: {

-      bindI18n: 'languageChanged',

-      bindI18nStore: '',

-      transEmptyNodeValue: '',

-      transSupportBasicHtmlNodes: true,

-      transKeepBasicHtmlNodesFor: ['br', 'strong', 'i'],

-      useSuspense: true,

-    }

-    */

-  });

-

-if (module.hot) {

-  module.hot.accept(

-    ['./locales/en/translation', './locales/zh/translation'],

-    () => {

-      void i18n.reloadResources();

-    }

-  );

-}

-

-export default i18n;

+import i18n, { BackendModule, ResourceKey } from 'i18next';
+import LanguageDetector from 'i18next-browser-languagedetector';
+import { initReactI18next } from 'react-i18next';
+
+const backend: BackendModule = {
+  type: 'backend',
+  async read(language, namespace, callback) {
+    function error(message: string): void {
+      callback(new Error(message), false);
+    }
+
+    function success(result: ResourceKey): void {
+      callback(null, result);
+    }
+
+    if (namespace !== 'translation') {
+      error("Namespace must be 'translation'.");
+    }
+
+    if (language === 'en') {
+      const res = (
+        await import(
+          /* webpackChunkName: "locales-en" */ './locales/en/translation'
+        )
+      ).default;
+      success(res);
+    } else if (language === 'zh-cn' || language === 'zh') {
+      const res = (
+        await import(
+          /* webpackChunkName: "locales-zh" */ './locales/zh/translation'
+        )
+      ).default;
+      success(res);
+    } else {
+      error(`Language ${language} is not supported.`);
+    }
+  },
+  init() {}, // eslint-disable-line @typescript-eslint/no-empty-function
+  create() {}, // eslint-disable-line @typescript-eslint/no-empty-function
+};
+
+export const i18nPromise = i18n
+  .use(LanguageDetector)
+  .use(backend)
+  .use(initReactI18next) // bind react-i18next to the instance
+  .init({
+    fallbackLng: false,
+    lowerCaseLng: true,
+
+    debug: process.env.NODE_ENV === 'development',
+
+    interpolation: {
+      escapeValue: false, // not needed for react!!
+    },
+
+    // react i18next special options (optional)
+    // override if needed - omit if ok with defaults
+    /*
+    react: {
+      bindI18n: 'languageChanged',
+      bindI18nStore: '',
+      transEmptyNodeValue: '',
+      transSupportBasicHtmlNodes: true,
+      transKeepBasicHtmlNodesFor: ['br', 'strong', 'i'],
+      useSuspense: true,
+    }
+    */
+  });
+
+if (module.hot) {
+  module.hot.accept(
+    ['./locales/en/translation', './locales/zh/translation'],
+    () => {
+      void i18n.reloadResources();
+    }
+  );
+}
+
+export default i18n;
diff --git a/Timeline/ClientApp/src/index.sass b/Timeline/ClientApp/src/app/index.sass
index 86276701..86276701 100644
--- a/Timeline/ClientApp/src/index.sass
+++ b/Timeline/ClientApp/src/app/index.sass
diff --git a/Timeline/ClientApp/src/index.tsx b/Timeline/ClientApp/src/app/index.tsx
index 086bd6e8..73788c3a 100644
--- a/Timeline/ClientApp/src/index.tsx
+++ b/Timeline/ClientApp/src/app/index.tsx
@@ -13,3 +13,10 @@ import './i18n';
 import App from './App';
 
 ReactDOM.render(<App />, document.getElementById('app'));
+
+if ('serviceWorker' in navigator) {
+  // Use the window load event to keep the page load performant
+  window.addEventListener('load', () => {
+    void navigator.serviceWorker.register('/sw.js');
+  });
+}
diff --git a/Timeline/ClientApp/src/locales/en/translation.ts b/Timeline/ClientApp/src/app/locales/en/translation.ts
index 99783d04..00672f67 100644
--- a/Timeline/ClientApp/src/locales/en/translation.ts
+++ b/Timeline/ClientApp/src/app/locales/en/translation.ts
@@ -1,183 +1,183 @@
-import TranslationResource from '../scheme';

-

-const translation: TranslationResource = {

-  welcome: 'Welcome!',

-  search: 'Search',

-  nav: {

-    settings: 'Settings',

-    login: 'Login',

-    about: 'About',

-  },

-  chooseImage: 'Choose a image',

-  loadImageError: 'Failed to load image.',

-  home: {

-    go: 'Go!',

-    allTimeline: 'All Timelines',

-    joinTimeline: 'Joined Timelines',

-    ownTimeline: 'Owned Timelines',

-    createButton: 'Create Timeline',

-    createDialog: {

-      title: 'Create Timeline!',

-      name: 'Name',

-      nameFormat:

-        'Name must consist of only letter including non-English letter, digit, hyphen(-) and underline(_) and be no longer than 26.',

-      badFormat: 'Bad format.',

-      noEmpty: 'Empty is not allowed.',

-      tooLong: 'Too long.',

-    },

-  },

-  operationDialog: {

-    retry: 'Retry',

-    nextStep: 'Next',

-    previousStep: 'Previous',

-    confirm: 'Confirm',

-    cancel: 'Cancel',

-    ok: 'OK!',

-    processing: 'Processing...',

-    success: 'Success!',

-    error: 'An error occured.',

-  },

-  timeline: {

-    messageCantSee: 'Sorry, you are not allowed to see this timeline.😅',

-    userNotExist: 'The user does not exist!',

-    timelineNotExist: 'The timeline does not exist!',

-    manage: 'Manage',

-    memberButton: 'Member',

-    send: 'Send',

-    deletePostFailed: 'Failed to delete post.',

-    sendPostFailed: 'Failed to send post.',

-    visibility: {

-      public: 'public to everyone',

-      register: 'only registed people can see',

-      private: 'only members can see',

-    },

-    visibilityTooltip: {

-      public:

-        'Everyone including those without accounts can see content of the timeline.',

-      register:

-        'Only those who have an account and logined can see content of the timeline.',

-      private: 'Only members of this timeline can see content of the timeline.',

-    },

-    dialogChangeProperty: {

-      title: 'Change Timeline Properties',

-      visibility: 'Visibility',

-      description: 'Description',

-    },

-    member: {

-      alreadyMember: 'The user is already a member.',

-      add: 'Add',

-      remove: 'Remove',

-    },

-    manageItem: {

-      nickname: 'Nickname',

-      avatar: 'Avatar',

-      property: 'Timeline Property',

-      member: 'Timeline Member',

-      delete: 'Delete Timeline',

-    },

-    deleteDialog: {

-      title: 'Delete Timeline',

-      inputPrompt:

-        'This is a dangerous action. If you are sure to delete timeline<1>{{name}}</1>, please input its name below and click confirm button.',

-      notMatch: 'Name does not match.',

-    },

-    post: {

-      deleteDialog: {

-        title: 'Confirm Delete',

-        prompt:

-          'Are you sure to delete the post? This operation is not recoverable.',

-      },

-    },

-  },

-  user: {

-    username: 'username',

-    password: 'password',

-    login: 'login',

-    rememberMe: 'Remember Me',

-    welcomeBack: 'Welcome back!',

-    verifyTokenFailed: 'User login info is expired. Please login again!',

-    verifyTokenFailedNetwork:

-      'Verifying user login info failed. Please check your network and refresh page!',

-  },

-  login: {

-    emptyUsername: "Username can't be empty.",

-    emptyPassword: "Password can't be empty.",

-    badCredential: 'Username or password is invalid.',

-    alreadyLogin: 'Already login! Redirect to home page in 3s!',

-  },

-  userPage: {

-    dialogChangeNickname: {

-      title: 'Change Nickname',

-      inputLabel: 'New nickname',

-    },

-    dialogChangeAvatar: {

-      title: 'Change Avatar',

-      previewImgAlt: 'preview',

-      prompt: {

-        select: 'Please select a picture.',

-        crop: 'Please crop the picture.',

-        processingCrop: 'Cropping picture...',

-        uploading: 'Uploading...',

-        preview: 'Please preview avatar',

-      },

-      upload: 'upload',

-    },

-  },

-  settings: {

-    subheaders: {

-      account: 'Account',

-      customization: 'Customization',

-    },

-    languagePrimary: 'Choose display language.',

-    languageSecondary:

-      'You language preference will be saved locally. Next time you visit this page, last language option will be used.',

-    changePassword: "Change account's password.",

-    logout: 'Log out this account.',

-    gotoSelf:

-      'Click here to go to timeline of myself to change nickname and avatar.',

-    dialogChangePassword: {

-      title: 'Change Password',

-      prompt:

-        'You are changing your password. You need to input the correct old password. After change, you need to login again and all old login will be invalid.',

-      inputOldPassword: 'Old password',

-      inputNewPassword: 'New password',

-      inputRetypeNewPassword: 'Retype new password',

-      errorEmptyOldPassword: "Old password can't be empty.",

-      errorEmptyNewPassword: "New password can't be empty.",

-      errorRetypeNotMatch: 'Password retyped does not match.',

-    },

-    dialogConfirmLogout: {

-      title: 'Confirm Logout',

-      prompt:

-        'Are you sure to log out? All cached data in the browser will be deleted.',

-    },

-  },

-  about: {

-    author: {

-      title: 'Site Developer',

-      fullname: 'Fullname: ',

-      nickname: 'Nickname: ',

-      introduction: 'Introduction: ',

-      introductionContent: 'A programmer coding based on coincidence',

-      links: 'Links: ',

-    },

-    site: {

-      title: 'Site Information',

-      content:

-        'The name of this site is <1>Timeline</1>, which is a Web App with <3>timeline</3> as its core concept. Its frontend and backend are both developed by <5>me</5>, and open source on GitHub. It is relatively easy to deploy it on your own server, which is also one of my goals. Welcome to comment anything in GitHub repository.',

-      repo: 'GitHub Repo',

-    },

-    credits: {

-      title: 'Credits',

-      content:

-        'Timeline is works standing on shoulders of gaints. Special appreciation for many open source projects listed below or not. Related licenses could be found in GitHub repository.',

-      frontend: 'Frontend: ',

-      backend: 'Backend: ',

-    },

-  },

-  admin: {

-    title: 'admin',

-  },

-};

-

-export default translation;

+import TranslationResource from '../scheme';
+
+const translation: TranslationResource = {
+  welcome: 'Welcome!',
+  search: 'Search',
+  nav: {
+    settings: 'Settings',
+    login: 'Login',
+    about: 'About',
+  },
+  chooseImage: 'Choose a image',
+  loadImageError: 'Failed to load image.',
+  home: {
+    go: 'Go!',
+    allTimeline: 'All Timelines',
+    joinTimeline: 'Joined Timelines',
+    ownTimeline: 'Owned Timelines',
+    createButton: 'Create Timeline',
+    createDialog: {
+      title: 'Create Timeline!',
+      name: 'Name',
+      nameFormat:
+        'Name must consist of only letter including non-English letter, digit, hyphen(-) and underline(_) and be no longer than 26.',
+      badFormat: 'Bad format.',
+      noEmpty: 'Empty is not allowed.',
+      tooLong: 'Too long.',
+    },
+  },
+  operationDialog: {
+    retry: 'Retry',
+    nextStep: 'Next',
+    previousStep: 'Previous',
+    confirm: 'Confirm',
+    cancel: 'Cancel',
+    ok: 'OK!',
+    processing: 'Processing...',
+    success: 'Success!',
+    error: 'An error occured.',
+  },
+  timeline: {
+    messageCantSee: 'Sorry, you are not allowed to see this timeline.😅',
+    userNotExist: 'The user does not exist!',
+    timelineNotExist: 'The timeline does not exist!',
+    manage: 'Manage',
+    memberButton: 'Member',
+    send: 'Send',
+    deletePostFailed: 'Failed to delete post.',
+    sendPostFailed: 'Failed to send post.',
+    visibility: {
+      public: 'public to everyone',
+      register: 'only registed people can see',
+      private: 'only members can see',
+    },
+    visibilityTooltip: {
+      public:
+        'Everyone including those without accounts can see content of the timeline.',
+      register:
+        'Only those who have an account and logined can see content of the timeline.',
+      private: 'Only members of this timeline can see content of the timeline.',
+    },
+    dialogChangeProperty: {
+      title: 'Change Timeline Properties',
+      visibility: 'Visibility',
+      description: 'Description',
+    },
+    member: {
+      alreadyMember: 'The user is already a member.',
+      add: 'Add',
+      remove: 'Remove',
+    },
+    manageItem: {
+      nickname: 'Nickname',
+      avatar: 'Avatar',
+      property: 'Timeline Property',
+      member: 'Timeline Member',
+      delete: 'Delete Timeline',
+    },
+    deleteDialog: {
+      title: 'Delete Timeline',
+      inputPrompt:
+        'This is a dangerous action. If you are sure to delete timeline<1>{{name}}</1>, please input its name below and click confirm button.',
+      notMatch: 'Name does not match.',
+    },
+    post: {
+      deleteDialog: {
+        title: 'Confirm Delete',
+        prompt:
+          'Are you sure to delete the post? This operation is not recoverable.',
+      },
+    },
+  },
+  user: {
+    username: 'username',
+    password: 'password',
+    login: 'login',
+    rememberMe: 'Remember Me',
+    welcomeBack: 'Welcome back!',
+    verifyTokenFailed: 'User login info is expired. Please login again!',
+    verifyTokenFailedNetwork:
+      'Verifying user login info failed. Please check your network and refresh page!',
+  },
+  login: {
+    emptyUsername: "Username can't be empty.",
+    emptyPassword: "Password can't be empty.",
+    badCredential: 'Username or password is invalid.',
+    alreadyLogin: 'Already login! Redirect to home page in 3s!',
+  },
+  userPage: {
+    dialogChangeNickname: {
+      title: 'Change Nickname',
+      inputLabel: 'New nickname',
+    },
+    dialogChangeAvatar: {
+      title: 'Change Avatar',
+      previewImgAlt: 'preview',
+      prompt: {
+        select: 'Please select a picture.',
+        crop: 'Please crop the picture.',
+        processingCrop: 'Cropping picture...',
+        uploading: 'Uploading...',
+        preview: 'Please preview avatar',
+      },
+      upload: 'upload',
+    },
+  },
+  settings: {
+    subheaders: {
+      account: 'Account',
+      customization: 'Customization',
+    },
+    languagePrimary: 'Choose display language.',
+    languageSecondary:
+      'You language preference will be saved locally. Next time you visit this page, last language option will be used.',
+    changePassword: "Change account's password.",
+    logout: 'Log out this account.',
+    gotoSelf:
+      'Click here to go to timeline of myself to change nickname and avatar.',
+    dialogChangePassword: {
+      title: 'Change Password',
+      prompt:
+        'You are changing your password. You need to input the correct old password. After change, you need to login again and all old login will be invalid.',
+      inputOldPassword: 'Old password',
+      inputNewPassword: 'New password',
+      inputRetypeNewPassword: 'Retype new password',
+      errorEmptyOldPassword: "Old password can't be empty.",
+      errorEmptyNewPassword: "New password can't be empty.",
+      errorRetypeNotMatch: 'Password retyped does not match.',
+    },
+    dialogConfirmLogout: {
+      title: 'Confirm Logout',
+      prompt:
+        'Are you sure to log out? All cached data in the browser will be deleted.',
+    },
+  },
+  about: {
+    author: {
+      title: 'Site Developer',
+      fullname: 'Fullname: ',
+      nickname: 'Nickname: ',
+      introduction: 'Introduction: ',
+      introductionContent: 'A programmer coding based on coincidence',
+      links: 'Links: ',
+    },
+    site: {
+      title: 'Site Information',
+      content:
+        'The name of this site is <1>Timeline</1>, which is a Web App with <3>timeline</3> as its core concept. Its frontend and backend are both developed by <5>me</5>, and open source on GitHub. It is relatively easy to deploy it on your own server, which is also one of my goals. Welcome to comment anything in GitHub repository.',
+      repo: 'GitHub Repo',
+    },
+    credits: {
+      title: 'Credits',
+      content:
+        'Timeline is works standing on shoulders of gaints. Special appreciation for many open source projects listed below or not. Related licenses could be found in GitHub repository.',
+      frontend: 'Frontend: ',
+      backend: 'Backend: ',
+    },
+  },
+  admin: {
+    title: 'admin',
+  },
+};
+
+export default translation;
diff --git a/Timeline/ClientApp/src/locales/scheme.ts b/Timeline/ClientApp/src/app/locales/scheme.ts
index 0bf08257..bb3f14df 100644
--- a/Timeline/ClientApp/src/locales/scheme.ts
+++ b/Timeline/ClientApp/src/app/locales/scheme.ts
@@ -1,167 +1,167 @@
-export default interface TranslationResource {

-  welcome: string;

-  search: string;

-  chooseImage: string;

-  loadImageError: string;

-  nav: {

-    settings: string;

-    login: string;

-    about: string;

-  };

-  home: {

-    go: string;

-    allTimeline: string;

-    joinTimeline: string;

-    ownTimeline: string;

-    createButton: string;

-    createDialog: {

-      title: string;

-      name: string;

-      nameFormat: string;

-      badFormat: string;

-      noEmpty: string;

-      tooLong: string;

-    };

-  };

-  operationDialog: {

-    retry: string;

-    nextStep: string;

-    previousStep: string;

-    confirm: string;

-    cancel: string;

-    ok: string;

-    processing: string;

-    success: string;

-    error: string;

-  };

-  timeline: {

-    messageCantSee: string;

-    userNotExist: string;

-    timelineNotExist: string;

-    manage: string;

-    memberButton: string;

-    send: string;

-    deletePostFailed: string;

-    sendPostFailed: string;

-    visibility: {

-      public: string;

-      register: string;

-      private: string;

-    };

-    visibilityTooltip: {

-      public: string;

-      register: string;

-      private: string;

-    };

-    dialogChangeProperty: {

-      title: string;

-      visibility: string;

-      description: string;

-    };

-    member: {

-      alreadyMember: string;

-      add: string;

-      remove: string;

-    };

-    manageItem: {

-      nickname: string;

-      avatar: string;

-      property: string;

-      member: string;

-      delete: string;

-    };

-    deleteDialog: {

-      title: string;

-      inputPrompt: string;

-      notMatch: string;

-    };

-    post: {

-      deleteDialog: {

-        title: string;

-        prompt: string;

-      };

-    };

-  };

-  user: {

-    username: string;

-    password: string;

-    login: string;

-    rememberMe: string;

-    welcomeBack: string;

-    verifyTokenFailed: string;

-    verifyTokenFailedNetwork: string;

-  };

-  login: {

-    emptyUsername: string;

-    emptyPassword: string;

-    badCredential: string;

-    alreadyLogin: string;

-  };

-  userPage: {

-    dialogChangeNickname: {

-      title: string;

-      inputLabel: string;

-    };

-    dialogChangeAvatar: {

-      title: string;

-      previewImgAlt: string;

-      prompt: {

-        select: string;

-        crop: string;

-        processingCrop: string;

-        preview: string;

-        uploading: string;

-      };

-      upload: string;

-    };

-  };

-  settings: {

-    subheaders: {

-      account: string;

-      customization: string;

-    };

-    languagePrimary: string;

-    languageSecondary: string;

-    changePassword: string;

-    logout: string;

-    gotoSelf: string;

-    dialogChangePassword: {

-      title: string;

-      prompt: string;

-      inputOldPassword: string;

-      inputNewPassword: string;

-      inputRetypeNewPassword: string;

-      errorEmptyOldPassword: string;

-      errorEmptyNewPassword: string;

-      errorRetypeNotMatch: string;

-    };

-    dialogConfirmLogout: {

-      title: string;

-      prompt: string;

-    };

-  };

-  about: {

-    author: {

-      title: string;

-      fullname: string;

-      nickname: string;

-      introduction: string;

-      introductionContent: string;

-      links: string;

-    };

-    site: {

-      title: string;

-      content: string;

-      repo: string;

-    };

-    credits: {

-      title: string;

-      content: string;

-      frontend: string;

-      backend: string;

-    };

-  };

-  admin: {

-    title: string;

-  };

-}

+export default interface TranslationResource {
+  welcome: string;
+  search: string;
+  chooseImage: string;
+  loadImageError: string;
+  nav: {
+    settings: string;
+    login: string;
+    about: string;
+  };
+  home: {
+    go: string;
+    allTimeline: string;
+    joinTimeline: string;
+    ownTimeline: string;
+    createButton: string;
+    createDialog: {
+      title: string;
+      name: string;
+      nameFormat: string;
+      badFormat: string;
+      noEmpty: string;
+      tooLong: string;
+    };
+  };
+  operationDialog: {
+    retry: string;
+    nextStep: string;
+    previousStep: string;
+    confirm: string;
+    cancel: string;
+    ok: string;
+    processing: string;
+    success: string;
+    error: string;
+  };
+  timeline: {
+    messageCantSee: string;
+    userNotExist: string;
+    timelineNotExist: string;
+    manage: string;
+    memberButton: string;
+    send: string;
+    deletePostFailed: string;
+    sendPostFailed: string;
+    visibility: {
+      public: string;
+      register: string;
+      private: string;
+    };
+    visibilityTooltip: {
+      public: string;
+      register: string;
+      private: string;
+    };
+    dialogChangeProperty: {
+      title: string;
+      visibility: string;
+      description: string;
+    };
+    member: {
+      alreadyMember: string;
+      add: string;
+      remove: string;
+    };
+    manageItem: {
+      nickname: string;
+      avatar: string;
+      property: string;
+      member: string;
+      delete: string;
+    };
+    deleteDialog: {
+      title: string;
+      inputPrompt: string;
+      notMatch: string;
+    };
+    post: {
+      deleteDialog: {
+        title: string;
+        prompt: string;
+      };
+    };
+  };
+  user: {
+    username: string;
+    password: string;
+    login: string;
+    rememberMe: string;
+    welcomeBack: string;
+    verifyTokenFailed: string;
+    verifyTokenFailedNetwork: string;
+  };
+  login: {
+    emptyUsername: string;
+    emptyPassword: string;
+    badCredential: string;
+    alreadyLogin: string;
+  };
+  userPage: {
+    dialogChangeNickname: {
+      title: string;
+      inputLabel: string;
+    };
+    dialogChangeAvatar: {
+      title: string;
+      previewImgAlt: string;
+      prompt: {
+        select: string;
+        crop: string;
+        processingCrop: string;
+        preview: string;
+        uploading: string;
+      };
+      upload: string;
+    };
+  };
+  settings: {
+    subheaders: {
+      account: string;
+      customization: string;
+    };
+    languagePrimary: string;
+    languageSecondary: string;
+    changePassword: string;
+    logout: string;
+    gotoSelf: string;
+    dialogChangePassword: {
+      title: string;
+      prompt: string;
+      inputOldPassword: string;
+      inputNewPassword: string;
+      inputRetypeNewPassword: string;
+      errorEmptyOldPassword: string;
+      errorEmptyNewPassword: string;
+      errorRetypeNotMatch: string;
+    };
+    dialogConfirmLogout: {
+      title: string;
+      prompt: string;
+    };
+  };
+  about: {
+    author: {
+      title: string;
+      fullname: string;
+      nickname: string;
+      introduction: string;
+      introductionContent: string;
+      links: string;
+    };
+    site: {
+      title: string;
+      content: string;
+      repo: string;
+    };
+    credits: {
+      title: string;
+      content: string;
+      frontend: string;
+      backend: string;
+    };
+  };
+  admin: {
+    title: string;
+  };
+}
diff --git a/Timeline/ClientApp/src/locales/zh/translation.ts b/Timeline/ClientApp/src/app/locales/zh/translation.ts
index 4054893e..66421375 100644
--- a/Timeline/ClientApp/src/locales/zh/translation.ts
+++ b/Timeline/ClientApp/src/app/locales/zh/translation.ts
@@ -1,178 +1,178 @@
-import TranslationResource from '../scheme';

-

-const translation: TranslationResource = {

-  welcome: '欢迎！',

-  search: '搜索',

-  nav: {

-    settings: '设置',

-    login: '登陆',

-    about: '关于',

-  },

-  chooseImage: '选择一个图片',

-  loadImageError: '加载图片失败',

-  home: {

-    go: '冲！',

-    allTimeline: '所有的时间线',

-    joinTimeline: '加入的时间线',

-    ownTimeline: '拥有的时间线',

-    createButton: '创建时间线',

-    createDialog: {

-      title: '创建时间线！',

-      name: '名字',

-      nameFormat:

-        '名字只能由字母、汉字、数字、下划线（_）和连字符（-）构成，且长度不能超过26.',

-      badFormat: '格式错误',

-      noEmpty: '不能为空',

-      tooLong: '太长了',

-    },

-  },

-  operationDialog: {

-    retry: '重试',

-    nextStep: '下一步',

-    previousStep: '上一步',

-    confirm: '确定',

-    cancel: '取消',

-    ok: '好的！',

-    processing: '处理中...',

-    success: '成功！',

-    error: '出错啦！',

-  },

-  timeline: {

-    messageCantSee: '不好意思，你没有权限查看这个时间线。😅',

-    userNotExist: '该用户不存在！',

-    timelineNotExist: '该时间线不存在！',

-    manage: '管理',

-    memberButton: '成员',

-    send: '发送',

-    deletePostFailed: '删除消息失败。',

-    sendPostFailed: '发送消息失败。',

-    visibility: {

-      public: '对所有人公开',

-      register: '仅注册可见',

-      private: '仅成员可见',

-    },

-    visibilityTooltip: {

-      public: '所有人都可以看到这个时间线的内容，包括没有注册的人。',

-      register: '只有拥有本网站的账号且登陆了的人才能看到这个时间线的内容。',

-      private: '只有这个时间线的成员可以看到这个时间线的内容。',

-    },

-    dialogChangeProperty: {

-      title: '修改时间线属性',

-      visibility: '可见性',

-      description: '描述',

-    },

-    member: {

-      alreadyMember: '该用户已经是一个成员。',

-      add: '添加',

-      remove: '移除',

-    },

-    manageItem: {

-      nickname: '昵称',

-      avatar: '头像',

-      property: '时间线属性',

-      member: '时间线成员',

-      delete: '删除时间线',

-    },

-    deleteDialog: {

-      title: '删除时间线',

-      inputPrompt:

-        '这是一个危险的操作。如果您确认要删除时间线<1>{{name}}</1>，请在下面输入它的名字并点击确认。',

-      notMatch: '名字不匹配',

-    },

-    post: {

-      deleteDialog: {

-        title: '确认删除',

-        prompt: '确定删除这个消息？这个操作不可撤销。',

-      },

-    },

-  },

-  user: {

-    username: '用户名',

-    password: '密码',

-    login: '登录',

-    rememberMe: '记住我',

-    welcomeBack: '欢迎回来！',

-    verifyTokenFailed: '用户登录信息已过期，请重新登陆！',

-    verifyTokenFailedNetwork:

-      '验证用户登录信息失败，请检查网络连接并刷新页面！',

-  },

-  login: {

-    emptyUsername: '用户名不能为空。',

-    emptyPassword: '密码不能为空。',

-    badCredential: '用户名或密码错误。',

-    alreadyLogin: '已经登陆，三秒后导航到首页！',

-  },

-  userPage: {

-    dialogChangeNickname: {

-      title: '更改昵称',

-      inputLabel: '新昵称',

-    },

-    dialogChangeAvatar: {

-      title: '修改头像',

-      previewImgAlt: '预览',

-      prompt: {

-        select: '请选择一个图片',

-        crop: '请裁剪图片',

-        processingCrop: '正在裁剪图片',

-        uploading: '正在上传',

-        preview: '请预览图片',

-      },

-      upload: '上传',

-    },

-  },

-  settings: {

-    subheaders: {

-      account: '账户',

-      customization: '个性化',

-    },

-    languagePrimary: '选择显示的语言。',

-    languageSecondary:

-      '您的语言偏好将会存储在本地，下次浏览时将自动使用上次保存的语言选项。',

-    changePassword: '更改账号的密码。',

-    logout: '注销此账号。',

-    gotoSelf: '点击前往个人时间线修改昵称和头像！',

-    dialogChangePassword: {

-      title: '修改密码',

-      prompt:

-        '您正在修改密码，您需要输入正确的旧密码。成功修改后您需要重新登陆，而且以前所有的登录都会失效。',

-      inputOldPassword: '旧密码',

-      inputNewPassword: '新密码',

-      inputRetypeNewPassword: '再次输入新密码',

-      errorEmptyOldPassword: '旧密码不能为空。',

-      errorEmptyNewPassword: '新密码不能为空',

-      errorRetypeNotMatch: '两次输入的密码不一致',

-    },

-    dialogConfirmLogout: {

-      title: '确定注销',

-      prompt: '您确定注销此账号？这将删除所有已经缓存在浏览器的数据。',

-    },

-  },

-  about: {

-    author: {

-      title: '网站作者',

-      fullname: '姓名：',

-      nickname: '昵称：',

-      introduction: '简介：',

-      introductionContent: '一个基于巧合编程的代码爱好者。',

-      links: '链接：',

-    },

-    site: {

-      title: '网站信息',

-      content:

-        '这个网站的名字叫 <1>Timeline</1>，是一个以<3>时间线</3>为核心概念的 Web App . 它的前端和后端都是由<5>我</5>开发，并且在 GitHub 上开源。大家可以相对轻松的把它们部署在自己的服务器上，这也是我的目标之一。欢迎大家前往 GitHub 仓库提出任何意见。',

-      repo: 'GitHub 仓库',

-    },

-    credits: {

-      title: '鸣谢',

-      content:

-        'Timeline 是站在巨人肩膀上的作品，感谢以下列出的和其他未列出的许多开源项目，相关 License 请在 GitHub 仓库中查看。',

-      frontend: '前端：',

-      backend: '后端：',

-    },

-  },

-  admin: {

-    title: '管理',

-  },

-};

-

-export default translation;

+import TranslationResource from '../scheme';
+
+const translation: TranslationResource = {
+  welcome: '欢迎！',
+  search: '搜索',
+  nav: {
+    settings: '设置',
+    login: '登陆',
+    about: '关于',
+  },
+  chooseImage: '选择一个图片',
+  loadImageError: '加载图片失败',
+  home: {
+    go: '冲！',
+    allTimeline: '所有的时间线',
+    joinTimeline: '加入的时间线',
+    ownTimeline: '拥有的时间线',
+    createButton: '创建时间线',
+    createDialog: {
+      title: '创建时间线！',
+      name: '名字',
+      nameFormat:
+        '名字只能由字母、汉字、数字、下划线（_）和连字符（-）构成，且长度不能超过26.',
+      badFormat: '格式错误',
+      noEmpty: '不能为空',
+      tooLong: '太长了',
+    },
+  },
+  operationDialog: {
+    retry: '重试',
+    nextStep: '下一步',
+    previousStep: '上一步',
+    confirm: '确定',
+    cancel: '取消',
+    ok: '好的！',
+    processing: '处理中...',
+    success: '成功！',
+    error: '出错啦！',
+  },
+  timeline: {
+    messageCantSee: '不好意思，你没有权限查看这个时间线。😅',
+    userNotExist: '该用户不存在！',
+    timelineNotExist: '该时间线不存在！',
+    manage: '管理',
+    memberButton: '成员',
+    send: '发送',
+    deletePostFailed: '删除消息失败。',
+    sendPostFailed: '发送消息失败。',
+    visibility: {
+      public: '对所有人公开',
+      register: '仅注册可见',
+      private: '仅成员可见',
+    },
+    visibilityTooltip: {
+      public: '所有人都可以看到这个时间线的内容，包括没有注册的人。',
+      register: '只有拥有本网站的账号且登陆了的人才能看到这个时间线的内容。',
+      private: '只有这个时间线的成员可以看到这个时间线的内容。',
+    },
+    dialogChangeProperty: {
+      title: '修改时间线属性',
+      visibility: '可见性',
+      description: '描述',
+    },
+    member: {
+      alreadyMember: '该用户已经是一个成员。',
+      add: '添加',
+      remove: '移除',
+    },
+    manageItem: {
+      nickname: '昵称',
+      avatar: '头像',
+      property: '时间线属性',
+      member: '时间线成员',
+      delete: '删除时间线',
+    },
+    deleteDialog: {
+      title: '删除时间线',
+      inputPrompt:
+        '这是一个危险的操作。如果您确认要删除时间线<1>{{name}}</1>，请在下面输入它的名字并点击确认。',
+      notMatch: '名字不匹配',
+    },
+    post: {
+      deleteDialog: {
+        title: '确认删除',
+        prompt: '确定删除这个消息？这个操作不可撤销。',
+      },
+    },
+  },
+  user: {
+    username: '用户名',
+    password: '密码',
+    login: '登录',
+    rememberMe: '记住我',
+    welcomeBack: '欢迎回来！',
+    verifyTokenFailed: '用户登录信息已过期，请重新登陆！',
+    verifyTokenFailedNetwork:
+      '验证用户登录信息失败，请检查网络连接并刷新页面！',
+  },
+  login: {
+    emptyUsername: '用户名不能为空。',
+    emptyPassword: '密码不能为空。',
+    badCredential: '用户名或密码错误。',
+    alreadyLogin: '已经登陆，三秒后导航到首页！',
+  },
+  userPage: {
+    dialogChangeNickname: {
+      title: '更改昵称',
+      inputLabel: '新昵称',
+    },
+    dialogChangeAvatar: {
+      title: '修改头像',
+      previewImgAlt: '预览',
+      prompt: {
+        select: '请选择一个图片',
+        crop: '请裁剪图片',
+        processingCrop: '正在裁剪图片',
+        uploading: '正在上传',
+        preview: '请预览图片',
+      },
+      upload: '上传',
+    },
+  },
+  settings: {
+    subheaders: {
+      account: '账户',
+      customization: '个性化',
+    },
+    languagePrimary: '选择显示的语言。',
+    languageSecondary:
+      '您的语言偏好将会存储在本地，下次浏览时将自动使用上次保存的语言选项。',
+    changePassword: '更改账号的密码。',
+    logout: '注销此账号。',
+    gotoSelf: '点击前往个人时间线修改昵称和头像！',
+    dialogChangePassword: {
+      title: '修改密码',
+      prompt:
+        '您正在修改密码，您需要输入正确的旧密码。成功修改后您需要重新登陆，而且以前所有的登录都会失效。',
+      inputOldPassword: '旧密码',
+      inputNewPassword: '新密码',
+      inputRetypeNewPassword: '再次输入新密码',
+      errorEmptyOldPassword: '旧密码不能为空。',
+      errorEmptyNewPassword: '新密码不能为空',
+      errorRetypeNotMatch: '两次输入的密码不一致',
+    },
+    dialogConfirmLogout: {
+      title: '确定注销',
+      prompt: '您确定注销此账号？这将删除所有已经缓存在浏览器的数据。',
+    },
+  },
+  about: {
+    author: {
+      title: '网站作者',
+      fullname: '姓名：',
+      nickname: '昵称：',
+      introduction: '简介：',
+      introductionContent: '一个基于巧合编程的代码爱好者。',
+      links: '链接：',
+    },
+    site: {
+      title: '网站信息',
+      content:
+        '这个网站的名字叫 <1>Timeline</1>，是一个以<3>时间线</3>为核心概念的 Web App . 它的前端和后端都是由<5>我</5>开发，并且在 GitHub 上开源。大家可以相对轻松的把它们部署在自己的服务器上，这也是我的目标之一。欢迎大家前往 GitHub 仓库提出任何意见。',
+      repo: 'GitHub 仓库',
+    },
+    credits: {
+      title: '鸣谢',
+      content:
+        'Timeline 是站在巨人肩膀上的作品，感谢以下列出的和其他未列出的许多开源项目，相关 License 请在 GitHub 仓库中查看。',
+      frontend: '前端：',
+      backend: '后端：',
+    },
+  },
+  admin: {
+    title: '管理',
+  },
+};
+
+export default translation;
diff --git a/Timeline/ClientApp/src/settings/Settings.tsx b/Timeline/ClientApp/src/app/settings/Settings.tsx
index bf7ee4ef..96a3fab4 100644
--- a/Timeline/ClientApp/src/settings/Settings.tsx
+++ b/Timeline/ClientApp/src/app/settings/Settings.tsx
@@ -1,253 +1,253 @@
-import React, { useState } from 'react';

-import { useHistory } from 'react-router';

-import { useTranslation } from 'react-i18next';

-import axios, { AxiosError } from 'axios';

-import {

-  Container,

-  Row,

-  Col,

-  Input,

-  Modal,

-  ModalHeader,

-  ModalBody,

-  ModalFooter,

-  Button,

-} from 'reactstrap';

-

-import { apiBaseUrl } from '../config';

-

-import { useUser, userLogout, useUserLoggedIn } from '../data/user';

-

-import AppBar from '../common/AppBar';

-import OperationDialog, {

-  OperationInputErrorInfo,

-} from '../common/OperationDialog';

-import { CommonErrorResponse } from '../data/common';

-

-interface ChangePasswordDialogProps {

-  open: boolean;

-  close: () => void;

-}

-

-async function changePassword(

-  oldPassword: string,

-  newPassword: string,

-  token: string

-): Promise<void> {

-  const url = `${apiBaseUrl}/userop/changepassword?token=${token}`;

-  try {

-    await axios.post(url, {

-      oldPassword,

-      newPassword,

-    });

-  } catch (e) {

-    const error = e as AxiosError<CommonErrorResponse>;

-    if (

-      error.response &&

-      error.response.status === 400 &&

-      error.response.data &&

-      error.response.data.message

-    ) {

-      throw error.response.data.message;

-    }

-    throw e;

-  }

-}

-

-const ChangePasswordDialog: React.FC<ChangePasswordDialogProps> = (props) => {

-  const user = useUserLoggedIn();

-  const history = useHistory();

-  const { t } = useTranslation();

-

-  const [redirect, setRedirect] = useState<boolean>(false);

-

-  return (

-    <OperationDialog

-      open={props.open}

-      title={t('settings.dialogChangePassword.title')}

-      titleColor="dangerous"

-      inputPrompt={t('settings.dialogChangePassword.prompt')}

-      inputScheme={[

-        {

-          type: 'text',

-          label: t('settings.dialogChangePassword.inputOldPassword'),

-          password: true,

-          validator: (v) =>

-            v === ''

-              ? 'settings.dialogChangePassword.errorEmptyOldPassword'

-              : null,

-        },

-        {

-          type: 'text',

-          label: t('settings.dialogChangePassword.inputNewPassword'),

-          password: true,

-          validator: (v, values) => {

-            const error: OperationInputErrorInfo = {};

-            error[1] =

-              v === ''

-                ? 'settings.dialogChangePassword.errorEmptyNewPassword'

-                : null;

-            if (v === values[2]) {

-              error[2] = null;

-            } else {

-              if (values[2] !== '') {

-                error[2] = 'settings.dialogChangePassword.errorRetypeNotMatch';

-              }

-            }

-            return error;

-          },

-        },

-        {

-          type: 'text',

-          label: t('settings.dialogChangePassword.inputRetypeNewPassword'),

-          password: true,

-          validator: (v, values) =>

-            v !== values[1]

-              ? 'settings.dialogChangePassword.errorRetypeNotMatch'

-              : null,

-        },

-      ]}

-      onProcess={async ([oldPassword, newPassword]) => {

-        await changePassword(

-          oldPassword as string,

-          newPassword as string,

-          user.token

-        );

-        userLogout();

-        setRedirect(true);

-      }}

-      close={() => {

-        props.close();

-        if (redirect) {

-          history.push('/login');

-        }

-      }}

-    />

-  );

-};

-

-const ConfirmLogoutDialog: React.FC<{

-  toggle: () => void;

-  onConfirm: () => void;

-}> = ({ toggle, onConfirm }) => {

-  const { t } = useTranslation();

-

-  return (

-    <Modal isOpen centered>

-      <ModalHeader className="text-danger">

-        {t('settings.dialogConfirmLogout.title')}

-      </ModalHeader>

-      <ModalBody>{t('settings.dialogConfirmLogout.prompt')}</ModalBody>

-      <ModalFooter>

-        <Button color="secondary" onClick={toggle}>

-          {t('operationDialog.cancel')}

-        </Button>

-        <Button color="danger" onClick={onConfirm}>

-          {t('operationDialog.confirm')}

-        </Button>

-      </ModalFooter>

-    </Modal>

-  );

-};

-

-const Settings: React.FC = (_) => {

-  const { i18n, t } = useTranslation();

-  const user = useUser();

-  const history = useHistory();

-

-  const [dialog, setDialog] = useState<null | 'changepassword' | 'logout'>(

-    null

-  );

-

-  const language = i18n.language.slice(0, 2);

-

-  return (

-    <>

-      <AppBar />

-      <Container fluid className="mt-appbar">

-        {user ? (

-          <>

-            <Row className="border-bottom p-3 cursor-pointer">

-              <Col xs="12">

-                <h5

-                  onClick={() => {

-                    history.push(`/users/${user.username}`);

-                  }}

-                >

-                  {t('settings.gotoSelf')}

-                </h5>

-              </Col>

-            </Row>

-            <Row className="border-bottom p-3 cursor-pointer">

-              <Col xs="12">

-                <h5

-                  className="text-danger"

-                  onClick={() => setDialog('changepassword')}

-                >

-                  {t('settings.changePassword')}

-                </h5>

-              </Col>

-            </Row>

-            <Row className="border-bottom p-3 cursor-pointer">

-              <Col xs="12">

-                <h5

-                  className="text-danger"

-                  onClick={() => {

-                    setDialog('logout');

-                  }}

-                >

-                  {t('settings.logout')}

-                </h5>

-              </Col>

-            </Row>

-          </>

-        ) : null}

-        <Row className="align-items-center border-bottom p-3">

-          <Col xs="12" sm="auto">

-            <h5>{t('settings.languagePrimary')}</h5>

-            <p>{t('settings.languageSecondary')}</p>

-          </Col>

-          <Col xs="auto" className="ml-auto">

-            <Input

-              type="select"

-              value={language}

-              onChange={(e) => {

-                void i18n.changeLanguage(e.target.value);

-              }}

-            >

-              <option value="zh">中文</option>

-              <option value="en">English</option>

-            </Input>

-          </Col>

-        </Row>

-        {(() => {

-          switch (dialog) {

-            case 'changepassword':

-              return (

-                <ChangePasswordDialog

-                  open

-                  close={() => {

-                    setDialog(null);

-                  }}

-                />

-              );

-            case 'logout':

-              return (

-                <ConfirmLogoutDialog

-                  toggle={() => setDialog(null)}

-                  onConfirm={() => {

-                    userLogout();

-                    history.push('/');

-                  }}

-                />

-              );

-            default:

-              return null;

-          }

-        })()}

-      </Container>

-    </>

-  );

-};

-

-export default Settings;

+import React, { useState } from 'react';
+import { useHistory } from 'react-router';
+import { useTranslation } from 'react-i18next';
+import axios, { AxiosError } from 'axios';
+import {
+  Container,
+  Row,
+  Col,
+  Input,
+  Modal,
+  ModalHeader,
+  ModalBody,
+  ModalFooter,
+  Button,
+} from 'reactstrap';
+
+import { apiBaseUrl } from '../config';
+
+import { useUser, userLogout, useUserLoggedIn } from '../data/user';
+
+import AppBar from '../common/AppBar';
+import OperationDialog, {
+  OperationInputErrorInfo,
+} from '../common/OperationDialog';
+import { CommonErrorResponse } from '../data/common';
+
+interface ChangePasswordDialogProps {
+  open: boolean;
+  close: () => void;
+}
+
+async function changePassword(
+  oldPassword: string,
+  newPassword: string,
+  token: string
+): Promise<void> {
+  const url = `${apiBaseUrl}/userop/changepassword?token=${token}`;
+  try {
+    await axios.post(url, {
+      oldPassword,
+      newPassword,
+    });
+  } catch (e) {
+    const error = e as AxiosError<CommonErrorResponse>;
+    if (
+      error.response &&
+      error.response.status === 400 &&
+      error.response.data &&
+      error.response.data.message
+    ) {
+      throw error.response.data.message;
+    }
+    throw e;
+  }
+}
+
+const ChangePasswordDialog: React.FC<ChangePasswordDialogProps> = (props) => {
+  const user = useUserLoggedIn();
+  const history = useHistory();
+  const { t } = useTranslation();
+
+  const [redirect, setRedirect] = useState<boolean>(false);
+
+  return (
+    <OperationDialog
+      open={props.open}
+      title={t('settings.dialogChangePassword.title')}
+      titleColor="dangerous"
+      inputPrompt={t('settings.dialogChangePassword.prompt')}
+      inputScheme={[
+        {
+          type: 'text',
+          label: t('settings.dialogChangePassword.inputOldPassword'),
+          password: true,
+          validator: (v) =>
+            v === ''
+              ? 'settings.dialogChangePassword.errorEmptyOldPassword'
+              : null,
+        },
+        {
+          type: 'text',
+          label: t('settings.dialogChangePassword.inputNewPassword'),
+          password: true,
+          validator: (v, values) => {
+            const error: OperationInputErrorInfo = {};
+            error[1] =
+              v === ''
+                ? 'settings.dialogChangePassword.errorEmptyNewPassword'
+                : null;
+            if (v === values[2]) {
+              error[2] = null;
+            } else {
+              if (values[2] !== '') {
+                error[2] = 'settings.dialogChangePassword.errorRetypeNotMatch';
+              }
+            }
+            return error;
+          },
+        },
+        {
+          type: 'text',
+          label: t('settings.dialogChangePassword.inputRetypeNewPassword'),
+          password: true,
+          validator: (v, values) =>
+            v !== values[1]
+              ? 'settings.dialogChangePassword.errorRetypeNotMatch'
+              : null,
+        },
+      ]}
+      onProcess={async ([oldPassword, newPassword]) => {
+        await changePassword(
+          oldPassword as string,
+          newPassword as string,
+          user.token
+        );
+        userLogout();
+        setRedirect(true);
+      }}
+      close={() => {
+        props.close();
+        if (redirect) {
+          history.push('/login');
+        }
+      }}
+    />
+  );
+};
+
+const ConfirmLogoutDialog: React.FC<{
+  toggle: () => void;
+  onConfirm: () => void;
+}> = ({ toggle, onConfirm }) => {
+  const { t } = useTranslation();
+
+  return (
+    <Modal isOpen centered>
+      <ModalHeader className="text-danger">
+        {t('settings.dialogConfirmLogout.title')}
+      </ModalHeader>
+      <ModalBody>{t('settings.dialogConfirmLogout.prompt')}</ModalBody>
+      <ModalFooter>
+        <Button color="secondary" onClick={toggle}>
+          {t('operationDialog.cancel')}
+        </Button>
+        <Button color="danger" onClick={onConfirm}>
+          {t('operationDialog.confirm')}
+        </Button>
+      </ModalFooter>
+    </Modal>
+  );
+};
+
+const Settings: React.FC = (_) => {
+  const { i18n, t } = useTranslation();
+  const user = useUser();
+  const history = useHistory();
+
+  const [dialog, setDialog] = useState<null | 'changepassword' | 'logout'>(
+    null
+  );
+
+  const language = i18n.language.slice(0, 2);
+
+  return (
+    <>
+      <AppBar />
+      <Container fluid className="mt-appbar">
+        {user ? (
+          <>
+            <Row className="border-bottom p-3 cursor-pointer">
+              <Col xs="12">
+                <h5
+                  onClick={() => {
+                    history.push(`/users/${user.username}`);
+                  }}
+                >
+                  {t('settings.gotoSelf')}
+                </h5>
+              </Col>
+            </Row>
+            <Row className="border-bottom p-3 cursor-pointer">
+              <Col xs="12">
+                <h5
+                  className="text-danger"
+                  onClick={() => setDialog('changepassword')}
+                >
+                  {t('settings.changePassword')}
+                </h5>
+              </Col>
+            </Row>
+            <Row className="border-bottom p-3 cursor-pointer">
+              <Col xs="12">
+                <h5
+                  className="text-danger"
+                  onClick={() => {
+                    setDialog('logout');
+                  }}
+                >
+                  {t('settings.logout')}
+                </h5>
+              </Col>
+            </Row>
+          </>
+        ) : null}
+        <Row className="align-items-center border-bottom p-3">
+          <Col xs="12" sm="auto">
+            <h5>{t('settings.languagePrimary')}</h5>
+            <p>{t('settings.languageSecondary')}</p>
+          </Col>
+          <Col xs="auto" className="ml-auto">
+            <Input
+              type="select"
+              value={language}
+              onChange={(e) => {
+                void i18n.changeLanguage(e.target.value);
+              }}
+            >
+              <option value="zh">中文</option>
+              <option value="en">English</option>
+            </Input>
+          </Col>
+        </Row>
+        {(() => {
+          switch (dialog) {
+            case 'changepassword':
+              return (
+                <ChangePasswordDialog
+                  open
+                  close={() => {
+                    setDialog(null);
+                  }}
+                />
+              );
+            case 'logout':
+              return (
+                <ConfirmLogoutDialog
+                  toggle={() => setDialog(null)}
+                  onConfirm={() => {
+                    userLogout();
+                    history.push('/');
+                  }}
+                />
+              );
+            default:
+              return null;
+          }
+        })()}
+      </Container>
+    </>
+  );
+};
+
+export default Settings;
diff --git a/Timeline/ClientApp/src/timeline/Timeline.tsx b/Timeline/ClientApp/src/app/timeline/Timeline.tsx
index 1ec3795f..35d6490b 100644
--- a/Timeline/ClientApp/src/timeline/Timeline.tsx
+++ b/Timeline/ClientApp/src/app/timeline/Timeline.tsx
@@ -1,99 +1,99 @@
-import React from 'react';

-import clsx from 'clsx';

-import { Container } from 'reactstrap';

-

-import { TimelinePostInfo } from '../data/timeline';

-import { useUser } from '../data/user';

-import { useAvatarVersion } from '../user/api';

-

-import TimelineItem from './TimelineItem';

-

-export interface TimelinePostInfoEx extends TimelinePostInfo {

-  deletable: boolean;

-}

-

-export type TimelineDeleteCallback = (index: number, id: number) => void;

-

-export interface TimelineProps {

-  className?: string;

-  posts: TimelinePostInfoEx[];

-  onDelete: TimelineDeleteCallback;

-  onResize?: () => void;

-}

-

-const Timeline: React.FC<TimelineProps> = (props) => {

-  const user = useUser();

-  const avatarVersion = useAvatarVersion();

-

-  const { posts, onDelete, onResize } = props;

-

-  const [indexShowDeleteButton, setIndexShowDeleteButton] = React.useState<

-    number

-  >(-1);

-

-  const onItemClick = React.useCallback(() => {

-    setIndexShowDeleteButton(-1);

-  }, []);

-

-  const onToggleDelete = React.useMemo(() => {

-    return posts.map((post, i) => {

-      return post.deletable

-        ? () => {

-            setIndexShowDeleteButton((oldIndexShowDeleteButton) => {

-              return oldIndexShowDeleteButton !== i ? i : -1;

-            });

-          }

-        : undefined;

-    });

-  }, [posts]);

-

-  const onItemDelete = React.useMemo(() => {

-    return posts.map((post, i) => {

-      return () => {

-        onDelete(i, post.id);

-      };

-    });

-  }, [posts, onDelete]);

-

-  return (

-    <Container

-      fluid

-      className={clsx('d-flex flex-column position-relative', props.className)}

-    >

-      <div className="timeline-enter-animation-mask" />

-      {(() => {

-        const length = posts.length;

-        return posts.map((post, i) => {

-          const av: number | undefined =

-            user != null && user.username === post.author.username

-              ? avatarVersion

-              : undefined;

-

-          const toggleMore = onToggleDelete[i];

-

-          return (

-            <TimelineItem

-              post={post}

-              key={post.id}

-              current={length - 1 === i}

-              more={

-                toggleMore

-                  ? {

-                      isOpen: indexShowDeleteButton === i,

-                      toggle: toggleMore,

-                      onDelete: onItemDelete[i],

-                    }

-                  : undefined

-              }

-              onClick={onItemClick}

-              avatarVersion={av}

-              onResize={onResize}

-            />

-          );

-        });

-      })()}

-    </Container>

-  );

-};

-

-export default Timeline;

+import React from 'react';
+import clsx from 'clsx';
+import { Container } from 'reactstrap';
+
+import { TimelinePostInfo } from '../data/timeline';
+import { useUser } from '../data/user';
+import { useAvatarVersion } from '../user/api';
+
+import TimelineItem from './TimelineItem';
+
+export interface TimelinePostInfoEx extends TimelinePostInfo {
+  deletable: boolean;
+}
+
+export type TimelineDeleteCallback = (index: number, id: number) => void;
+
+export interface TimelineProps {
+  className?: string;
+  posts: TimelinePostInfoEx[];
+  onDelete: TimelineDeleteCallback;
+  onResize?: () => void;
+}
+
+const Timeline: React.FC<TimelineProps> = (props) => {
+  const user = useUser();
+  const avatarVersion = useAvatarVersion();
+
+  const { posts, onDelete, onResize } = props;
+
+  const [indexShowDeleteButton, setIndexShowDeleteButton] = React.useState<
+    number
+  >(-1);
+
+  const onItemClick = React.useCallback(() => {
+    setIndexShowDeleteButton(-1);
+  }, []);
+
+  const onToggleDelete = React.useMemo(() => {
+    return posts.map((post, i) => {
+      return post.deletable
+        ? () => {
+            setIndexShowDeleteButton((oldIndexShowDeleteButton) => {
+              return oldIndexShowDeleteButton !== i ? i : -1;
+            });
+          }
+        : undefined;
+    });
+  }, [posts]);
+
+  const onItemDelete = React.useMemo(() => {
+    return posts.map((post, i) => {
+      return () => {
+        onDelete(i, post.id);
+      };
+    });
+  }, [posts, onDelete]);
+
+  return (
+    <Container
+      fluid
+      className={clsx('d-flex flex-column position-relative', props.className)}
+    >
+      <div className="timeline-enter-animation-mask" />
+      {(() => {
+        const length = posts.length;
+        return posts.map((post, i) => {
+          const av: number | undefined =
+            user != null && user.username === post.author.username
+              ? avatarVersion
+              : undefined;
+
+          const toggleMore = onToggleDelete[i];
+
+          return (
+            <TimelineItem
+              post={post}
+              key={post.id}
+              current={length - 1 === i}
+              more={
+                toggleMore
+                  ? {
+                      isOpen: indexShowDeleteButton === i,
+                      toggle: toggleMore,
+                      onDelete: onItemDelete[i],
+                    }
+                  : undefined
+              }
+              onClick={onItemClick}
+              avatarVersion={av}
+              onResize={onResize}
+            />
+          );
+        });
+      })()}
+    </Container>
+  );
+};
+
+export default Timeline;
diff --git a/Timeline/ClientApp/src/timeline/TimelineDeleteDialog.tsx b/Timeline/ClientApp/src/app/timeline/TimelineDeleteDialog.tsx
index e2d8ad5a..5e7c6dd4 100644
--- a/Timeline/ClientApp/src/timeline/TimelineDeleteDialog.tsx
+++ b/Timeline/ClientApp/src/app/timeline/TimelineDeleteDialog.tsx
@@ -1,59 +1,59 @@
-import React from 'react';

-import axios from 'axios';

-import { useHistory } from 'react-router';

-import { Trans } from 'react-i18next';

-

-import { apiBaseUrl } from '../config';

-import { useUserLoggedIn } from '../data/user';

-import OperationDialog from '../common/OperationDialog';

-

-interface TimelineDeleteDialog {

-  open: boolean;

-  name: string;

-  close: () => void;

-}

-

-const TimelineDeleteDialog: React.FC<TimelineDeleteDialog> = (props) => {

-  const user = useUserLoggedIn();

-  const history = useHistory();

-

-  const { name } = props;

-

-  return (

-    <OperationDialog

-      open={props.open}

-      close={props.close}

-      title="timeline.deleteDialog.title"

-      titleColor="danger"

-      inputPrompt={() => {

-        return (

-          <Trans i18nKey="timeline.deleteDialog.inputPrompt">

-            0<code className="mx-2">{{ name }}</code>2

-          </Trans>

-        );

-      }}

-      inputScheme={[

-        {

-          type: 'text',

-          validator: (value) => {

-            if (value !== name) {

-              return 'timeline.deleteDialog.notMatch';

-            } else {

-              return null;

-            }

-          },

-        },

-      ]}

-      onProcess={() => {

-        return axios.delete(

-          `${apiBaseUrl}/timelines/${name}?token=${user.token}`

-        );

-      }}

-      onSuccessAndClose={() => {

-        history.replace('/');

-      }}

-    />

-  );

-};

-

-export default TimelineDeleteDialog;

+import React from 'react';
+import axios from 'axios';
+import { useHistory } from 'react-router';
+import { Trans } from 'react-i18next';
+
+import { apiBaseUrl } from '../config';
+import { useUserLoggedIn } from '../data/user';
+import OperationDialog from '../common/OperationDialog';
+
+interface TimelineDeleteDialog {
+  open: boolean;
+  name: string;
+  close: () => void;
+}
+
+const TimelineDeleteDialog: React.FC<TimelineDeleteDialog> = (props) => {
+  const user = useUserLoggedIn();
+  const history = useHistory();
+
+  const { name } = props;
+
+  return (
+    <OperationDialog
+      open={props.open}
+      close={props.close}
+      title="timeline.deleteDialog.title"
+      titleColor="danger"
+      inputPrompt={() => {
+        return (
+          <Trans i18nKey="timeline.deleteDialog.inputPrompt">
+            0<code className="mx-2">{{ name }}</code>2
+          </Trans>
+        );
+      }}
+      inputScheme={[
+        {
+          type: 'text',
+          validator: (value) => {
+            if (value !== name) {
+              return 'timeline.deleteDialog.notMatch';
+            } else {
+              return null;
+            }
+          },
+        },
+      ]}
+      onProcess={() => {
+        return axios.delete(
+          `${apiBaseUrl}/timelines/${name}?token=${user.token}`
+        );
+      }}
+      onSuccessAndClose={() => {
+        history.replace('/');
+      }}
+    />
+  );
+};
+
+export default TimelineDeleteDialog;
diff --git a/Timeline/ClientApp/src/timeline/TimelineInfoCard.tsx b/Timeline/ClientApp/src/app/timeline/TimelineInfoCard.tsx
index b3af4cab..e4bc07d1 100644
--- a/Timeline/ClientApp/src/timeline/TimelineInfoCard.tsx
+++ b/Timeline/ClientApp/src/app/timeline/TimelineInfoCard.tsx
@@ -1,109 +1,109 @@
-import React from 'react';

-import clsx from 'clsx';

-import {

-  Dropdown,

-  DropdownToggle,

-  DropdownMenu,

-  DropdownItem,

-  Button,

-} from 'reactstrap';

-import { useTranslation } from 'react-i18next';

-import { fromEvent } from 'rxjs';

-

-import {

-  timelineVisibilityTooltipTranslationMap,

-  TimelineInfo,

-} from '../data/timeline';

-import { TimelineCardComponentProps } from './TimelinePageTemplateUI';

-

-export type OrdinaryTimelineManageItem = 'delete';

-

-export type TimelineInfoCardProps = TimelineCardComponentProps<

-  TimelineInfo,

-  OrdinaryTimelineManageItem

->;

-

-const TimelineInfoCard: React.FC<TimelineInfoCardProps> = (props) => {

-  const { onHeight, onManage } = props;

-

-  const { t } = useTranslation();

-

-  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion

-  const containerRef = React.useRef<HTMLDivElement>(null!);

-

-  const notifyHeight = React.useCallback((): void => {

-    if (onHeight) {

-      onHeight(containerRef.current.getBoundingClientRect().height);

-    }

-  }, [onHeight]);

-

-  React.useEffect(() => {

-    const subscription = fromEvent(window, 'resize').subscribe(notifyHeight);

-    return () => subscription.unsubscribe();

-  });

-

-  const [manageDropdownOpen, setManageDropdownOpen] = React.useState<boolean>(

-    false

-  );

-  const toggleManageDropdown = React.useCallback(

-    (): void => setManageDropdownOpen((old) => !old),

-    []

-  );

-

-  return (

-    <div

-      ref={containerRef}

-      className={clsx('rounded border p-2 bg-light', props.className)}

-      onTransitionEnd={notifyHeight}

-    >

-      <h3 className="text-primary mx-3 d-inline-block align-middle">

-        {props.timeline.name}

-      </h3>

-      <div className="d-inline-block align-middle">

-        <img

-          src={props.timeline.owner._links.avatar}

-          onLoad={notifyHeight}

-          className="avatar small rounded-circle"

-        />

-        {props.timeline.owner.nickname}

-        <small className="ml-3 text-secondary">

-          @{props.timeline.owner.username}

-        </small>

-      </div>

-      <p className="mb-0">{props.timeline.description}</p>

-      <small className="mt-1 d-block">

-        {t(timelineVisibilityTooltipTranslationMap[props.timeline.visibility])}

-      </small>

-      <div className="text-right mt-2">

-        {onManage != null ? (

-          <Dropdown isOpen={manageDropdownOpen} toggle={toggleManageDropdown}>

-            <DropdownToggle outline color="primary">

-              {t('timeline.manage')}

-            </DropdownToggle>

-            <DropdownMenu>

-              <DropdownItem onClick={() => onManage('property')}>

-                {t('timeline.manageItem.property')}

-              </DropdownItem>

-              <DropdownItem onClick={props.onMember}>

-                {t('timeline.manageItem.member')}

-              </DropdownItem>

-              <DropdownItem divider />

-              <DropdownItem

-                className="text-danger"

-                onClick={() => onManage('delete')}

-              >

-                {t('timeline.manageItem.delete')}

-              </DropdownItem>

-            </DropdownMenu>

-          </Dropdown>

-        ) : (

-          <Button color="primary" outline onClick={props.onMember}>

-            {t('timeline.memberButton')}

-          </Button>

-        )}

-      </div>

-    </div>

-  );

-};

-

-export default TimelineInfoCard;

+import React from 'react';
+import clsx from 'clsx';
+import {
+  Dropdown,
+  DropdownToggle,
+  DropdownMenu,
+  DropdownItem,
+  Button,
+} from 'reactstrap';
+import { useTranslation } from 'react-i18next';
+import { fromEvent } from 'rxjs';
+
+import {
+  timelineVisibilityTooltipTranslationMap,
+  TimelineInfo,
+} from '../data/timeline';
+import { TimelineCardComponentProps } from './TimelinePageTemplateUI';
+
+export type OrdinaryTimelineManageItem = 'delete';
+
+export type TimelineInfoCardProps = TimelineCardComponentProps<
+  TimelineInfo,
+  OrdinaryTimelineManageItem
+>;
+
+const TimelineInfoCard: React.FC<TimelineInfoCardProps> = (props) => {
+  const { onHeight, onManage } = props;
+
+  const { t } = useTranslation();
+
+  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+  const containerRef = React.useRef<HTMLDivElement>(null!);
+
+  const notifyHeight = React.useCallback((): void => {
+    if (onHeight) {
+      onHeight(containerRef.current.getBoundingClientRect().height);
+    }
+  }, [onHeight]);
+
+  React.useEffect(() => {
+    const subscription = fromEvent(window, 'resize').subscribe(notifyHeight);
+    return () => subscription.unsubscribe();
+  });
+
+  const [manageDropdownOpen, setManageDropdownOpen] = React.useState<boolean>(
+    false
+  );
+  const toggleManageDropdown = React.useCallback(
+    (): void => setManageDropdownOpen((old) => !old),
+    []
+  );
+
+  return (
+    <div
+      ref={containerRef}
+      className={clsx('rounded border p-2 bg-light', props.className)}
+      onTransitionEnd={notifyHeight}
+    >
+      <h3 className="text-primary mx-3 d-inline-block align-middle">
+        {props.timeline.name}
+      </h3>
+      <div className="d-inline-block align-middle">
+        <img
+          src={props.timeline.owner._links.avatar}
+          onLoad={notifyHeight}
+          className="avatar small rounded-circle"
+        />
+        {props.timeline.owner.nickname}
+        <small className="ml-3 text-secondary">
+          @{props.timeline.owner.username}
+        </small>
+      </div>
+      <p className="mb-0">{props.timeline.description}</p>
+      <small className="mt-1 d-block">
+        {t(timelineVisibilityTooltipTranslationMap[props.timeline.visibility])}
+      </small>
+      <div className="text-right mt-2">
+        {onManage != null ? (
+          <Dropdown isOpen={manageDropdownOpen} toggle={toggleManageDropdown}>
+            <DropdownToggle outline color="primary">
+              {t('timeline.manage')}
+            </DropdownToggle>
+            <DropdownMenu>
+              <DropdownItem onClick={() => onManage('property')}>
+                {t('timeline.manageItem.property')}
+              </DropdownItem>
+              <DropdownItem onClick={props.onMember}>
+                {t('timeline.manageItem.member')}
+              </DropdownItem>
+              <DropdownItem divider />
+              <DropdownItem
+                className="text-danger"
+                onClick={() => onManage('delete')}
+              >
+                {t('timeline.manageItem.delete')}
+              </DropdownItem>
+            </DropdownMenu>
+          </Dropdown>
+        ) : (
+          <Button color="primary" outline onClick={props.onMember}>
+            {t('timeline.memberButton')}
+          </Button>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default TimelineInfoCard;
diff --git a/Timeline/ClientApp/src/timeline/TimelineItem.tsx b/Timeline/ClientApp/src/app/timeline/TimelineItem.tsx
index 9e08acc7..4737fd7d 100644
--- a/Timeline/ClientApp/src/timeline/TimelineItem.tsx
+++ b/Timeline/ClientApp/src/app/timeline/TimelineItem.tsx
@@ -1,175 +1,175 @@
-import React from 'react';

-import clsx from 'clsx';

-import {

-  Row,

-  Col,

-  Modal,

-  ModalHeader,

-  ModalBody,

-  ModalFooter,

-  Button,

-} from 'reactstrap';

-import { Link } from 'react-router-dom';

-import { useTranslation } from 'react-i18next';

-

-import { TimelinePostInfo } from '../data/timeline';

-import { useAvatarUrlWithGivenVersion } from '../user/api';

-

-const TimelinePostDeleteConfirmDialog: React.FC<{

-  toggle: () => void;

-  onConfirm: () => void;

-}> = ({ toggle, onConfirm }) => {

-  const { t } = useTranslation();

-

-  return (

-    <Modal toggle={toggle} isOpen centered>

-      <ModalHeader className="text-danger">

-        {t('timeline.post.deleteDialog.title')}

-      </ModalHeader>

-      <ModalBody>{t('timeline.post.deleteDialog.prompt')}</ModalBody>

-      <ModalFooter>

-        <Button color="secondary" onClick={toggle}>

-          {t('operationDialog.cancel')}

-        </Button>

-        <Button

-          color="danger"

-          onClick={() => {

-            onConfirm();

-            toggle();

-          }}

-        >

-          {t('operationDialog.confirm')}

-        </Button>

-      </ModalFooter>

-    </Modal>

-  );

-};

-

-export interface TimelineItemProps {

-  post: TimelinePostInfo;

-  current?: boolean;

-  more?: {

-    isOpen: boolean;

-    toggle: () => void;

-    onDelete: () => void;

-  };

-  onClick?: () => void;

-  avatarVersion?: number;

-  onResize?: () => void;

-  className?: string;

-  style?: React.CSSProperties;

-}

-

-const TimelineItem: React.FC<TimelineItemProps> = (props) => {

-  const { i18n } = useTranslation();

-

-  const current = props.current === true;

-

-  const { more, onResize } = props;

-

-  const avatarUrl = useAvatarUrlWithGivenVersion(

-    props.avatarVersion,

-    props.post.author._links.avatar

-  );

-

-  const [deleteDialog, setDeleteDialog] = React.useState<boolean>(false);

-  const toggleDeleteDialog = React.useCallback(

-    () => setDeleteDialog((old) => !old),

-    []

-  );

-

-  return (

-    <Row

-      className={clsx(

-        'position-relative flex-nowrap',

-        current && 'current',

-        props.className

-      )}

-      onClick={props.onClick}

-      style={props.style}

-    >

-      <Col className="timeline-line-area">

-        <div className="timeline-line-segment start"></div>

-        <div className="timeline-line-node-container">

-          <div className="timeline-line-node"></div>

-        </div>

-        <div className="timeline-line-segment end"></div>

-        {current && <div className="timeline-line-segment current-end" />}

-      </Col>

-      <Col className="timeline-pt-start">

-        <Row className="flex-nowrap">

-          <div className="col-auto flex-shrink-1 px-0">

-            <Row className="ml-n3 mr-0 align-items-center">

-              <span className="ml-3 text-primary white-space-no-wrap">

-                {props.post.time.toLocaleString(i18n.languages)}

-              </span>

-              <small className="text-dark ml-3">

-                {props.post.author.nickname}

-              </small>

-            </Row>

-          </div>

-          {more != null ? (

-            <div className="col-auto px-2 d-flex justify-content-center align-items-center">

-              <i

-                className="fas fa-chevron-circle-down text-info icon-button"

-                onClick={(e) => {

-                  more.toggle();

-                  e.stopPropagation();

-                }}

-              />

-            </div>

-          ) : null}

-        </Row>

-        <p className="row d-block timeline-content">

-          <Link

-            className="float-right float-sm-left mx-2"

-            to={'/users/' + props.post.author.username}

-          >

-            <img onLoad={onResize} src={avatarUrl} className="avatar rounded" />

-          </Link>

-          {(() => {

-            const { content } = props.post;

-            if (content.type === 'text') {

-              return content.text;

-            } else {

-              return (

-                <img

-                  onLoad={onResize}

-                  src={content.url}

-                  className="timeline-content-image"

-                />

-              );

-            }

-          })()}

-        </p>

-      </Col>

-      {more != null && more.isOpen ? (

-        <>

-          <div

-            className="position-absolute position-lt w-100 h-100 mask d-flex justify-content-center align-items-center"

-            onClick={more.toggle}

-          >

-            <i

-              className="fas fa-trash text-danger large-icon"

-              onClick={(e) => {

-                toggleDeleteDialog();

-                e.stopPropagation();

-              }}

-            />

-          </div>

-          {deleteDialog ? (

-            <TimelinePostDeleteConfirmDialog

-              toggle={() => {

-                toggleDeleteDialog();

-                more.toggle();

-              }}

-              onConfirm={more.onDelete}

-            />

-          ) : null}

-        </>

-      ) : null}

-    </Row>

-  );

-};

-

-export default TimelineItem;

+import React from 'react';
+import clsx from 'clsx';
+import {
+  Row,
+  Col,
+  Modal,
+  ModalHeader,
+  ModalBody,
+  ModalFooter,
+  Button,
+} from 'reactstrap';
+import { Link } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
+
+import { TimelinePostInfo } from '../data/timeline';
+import { useAvatarUrlWithGivenVersion } from '../user/api';
+
+const TimelinePostDeleteConfirmDialog: React.FC<{
+  toggle: () => void;
+  onConfirm: () => void;
+}> = ({ toggle, onConfirm }) => {
+  const { t } = useTranslation();
+
+  return (
+    <Modal toggle={toggle} isOpen centered>
+      <ModalHeader className="text-danger">
+        {t('timeline.post.deleteDialog.title')}
+      </ModalHeader>
+      <ModalBody>{t('timeline.post.deleteDialog.prompt')}</ModalBody>
+      <ModalFooter>
+        <Button color="secondary" onClick={toggle}>
+          {t('operationDialog.cancel')}
+        </Button>
+        <Button
+          color="danger"
+          onClick={() => {
+            onConfirm();
+            toggle();
+          }}
+        >
+          {t('operationDialog.confirm')}
+        </Button>
+      </ModalFooter>
+    </Modal>
+  );
+};
+
+export interface TimelineItemProps {
+  post: TimelinePostInfo;
+  current?: boolean;
+  more?: {
+    isOpen: boolean;
+    toggle: () => void;
+    onDelete: () => void;
+  };
+  onClick?: () => void;
+  avatarVersion?: number;
+  onResize?: () => void;
+  className?: string;
+  style?: React.CSSProperties;
+}
+
+const TimelineItem: React.FC<TimelineItemProps> = (props) => {
+  const { i18n } = useTranslation();
+
+  const current = props.current === true;
+
+  const { more, onResize } = props;
+
+  const avatarUrl = useAvatarUrlWithGivenVersion(
+    props.avatarVersion,
+    props.post.author._links.avatar
+  );
+
+  const [deleteDialog, setDeleteDialog] = React.useState<boolean>(false);
+  const toggleDeleteDialog = React.useCallback(
+    () => setDeleteDialog((old) => !old),
+    []
+  );
+
+  return (
+    <Row
+      className={clsx(
+        'position-relative flex-nowrap',
+        current && 'current',
+        props.className
+      )}
+      onClick={props.onClick}
+      style={props.style}
+    >
+      <Col className="timeline-line-area">
+        <div className="timeline-line-segment start"></div>
+        <div className="timeline-line-node-container">
+          <div className="timeline-line-node"></div>
+        </div>
+        <div className="timeline-line-segment end"></div>
+        {current && <div className="timeline-line-segment current-end" />}
+      </Col>
+      <Col className="timeline-pt-start">
+        <Row className="flex-nowrap">
+          <div className="col-auto flex-shrink-1 px-0">
+            <Row className="ml-n3 mr-0 align-items-center">
+              <span className="ml-3 text-primary white-space-no-wrap">
+                {props.post.time.toLocaleString(i18n.languages)}
+              </span>
+              <small className="text-dark ml-3">
+                {props.post.author.nickname}
+              </small>
+            </Row>
+          </div>
+          {more != null ? (
+            <div className="col-auto px-2 d-flex justify-content-center align-items-center">
+              <i
+                className="fas fa-chevron-circle-down text-info icon-button"
+                onClick={(e) => {
+                  more.toggle();
+                  e.stopPropagation();
+                }}
+              />
+            </div>
+          ) : null}
+        </Row>
+        <p className="row d-block timeline-content">
+          <Link
+            className="float-right float-sm-left mx-2"
+            to={'/users/' + props.post.author.username}
+          >
+            <img onLoad={onResize} src={avatarUrl} className="avatar rounded" />
+          </Link>
+          {(() => {
+            const { content } = props.post;
+            if (content.type === 'text') {
+              return content.text;
+            } else {
+              return (
+                <img
+                  onLoad={onResize}
+                  src={content.url}
+                  className="timeline-content-image"
+                />
+              );
+            }
+          })()}
+        </p>
+      </Col>
+      {more != null && more.isOpen ? (
+        <>
+          <div
+            className="position-absolute position-lt w-100 h-100 mask d-flex justify-content-center align-items-center"
+            onClick={more.toggle}
+          >
+            <i
+              className="fas fa-trash text-danger large-icon"
+              onClick={(e) => {
+                toggleDeleteDialog();
+                e.stopPropagation();
+              }}
+            />
+          </div>
+          {deleteDialog ? (
+            <TimelinePostDeleteConfirmDialog
+              toggle={() => {
+                toggleDeleteDialog();
+                more.toggle();
+              }}
+              onConfirm={more.onDelete}
+            />
+          ) : null}
+        </>
+      ) : null}
+    </Row>
+  );
+};
+
+export default TimelineItem;
diff --git a/Timeline/ClientApp/src/timeline/TimelineMember.tsx b/Timeline/ClientApp/src/app/timeline/TimelineMember.tsx
index b8bb49ee..f9747b4d 100644
--- a/Timeline/ClientApp/src/timeline/TimelineMember.tsx
+++ b/Timeline/ClientApp/src/app/timeline/TimelineMember.tsx
@@ -1,196 +1,196 @@
-import React, { useState } from 'react';

-import { useTranslation } from 'react-i18next';

-

-import { User } from '../data/user';

-

-import SearchInput from '../common/SearchInput';

-import {

-  Container,

-  ListGroup,

-  ListGroupItem,

-  Modal,

-  Row,

-  Col,

-  Button,

-} from 'reactstrap';

-

-export interface TimelineMemberCallbacks {

-  onCheckUser: (username: string) => Promise<User | null>;

-  onAddUser: (user: User) => Promise<void>;

-  onRemoveUser: (username: string) => void;

-}

-

-export interface TimelineMemberProps {

-  members: User[];

-  edit: TimelineMemberCallbacks | null | undefined;

-}

-

-const TimelineMember: React.FC<TimelineMemberProps> = (props) => {

-  const { t } = useTranslation();

-

-  const [userSearchText, setUserSearchText] = useState<string>('');

-  const [userSearchState, setUserSearchState] = useState<

-    | {

-        type: 'user';

-        data: User;

-      }

-    | { type: 'error'; data: string }

-    | { type: 'loading' }

-    | { type: 'init' }

-  >({ type: 'init' });

-

-  const members = props.members;

-

-  return (

-    <Container className="px-4">

-      <ListGroup className="my-3">

-        {members.map((member, index) => (

-          <ListGroupItem key={member.username} className="container">

-            <Row>

-              <Col className="col-auto">

-                <img src={member._links.avatar} className="avatar small" />

-              </Col>

-              <Col>

-                <Row>{member.nickname}</Row>

-                <Row>

-                  <small>{'@' + member.username}</small>

-                </Row>

-              </Col>

-              {(() => {

-                if (index === 0) {

-                  return null;

-                }

-                const onRemove = props.edit?.onRemoveUser;

-                if (onRemove == null) {

-                  return null;

-                }

-                return (

-                  <Button

-                    className="align-self-center"

-                    color="danger"

-                    onClick={() => {

-                      onRemove(member.username);

-                    }}

-                  >

-                    {t('timeline.member.remove')}

-                  </Button>

-                );

-              })()}

-            </Row>

-          </ListGroupItem>

-        ))}

-      </ListGroup>

-      {(() => {

-        const edit = props.edit;

-        if (edit != null) {

-          return (

-            <>

-              <SearchInput

-                value={userSearchText}

-                onChange={(v) => {

-                  setUserSearchText(v);

-                }}

-                loading={userSearchState.type === 'loading'}

-                onButtonClick={() => {

-                  if (userSearchText === '') {

-                    setUserSearchState({

-                      type: 'error',

-                      data: 'login.emptyUsername',

-                    });

-                    return;

-                  }

-

-                  setUserSearchState({ type: 'loading' });

-                  edit.onCheckUser(userSearchText).then(

-                    (u) => {

-                      if (u == null) {

-                        setUserSearchState({

-                          type: 'error',

-                          data: 'timeline.userNotExist',

-                        });

-                      } else {

-                        setUserSearchState({ type: 'user', data: u });

-                      }

-                    },

-                    (e) => {

-                      setUserSearchState({

-                        type: 'error',

-                        data: `${e as string}`,

-                      });

-                    }

-                  );

-                }}

-              />

-              {(() => {

-                if (userSearchState.type === 'user') {

-                  const u = userSearchState.data;

-                  const addable =

-                    members.findIndex((m) => m.username === u.username) === -1;

-                  return (

-                    <>

-                      {!addable ? (

-                        <p>{t('timeline.member.alreadyMember')}</p>

-                      ) : null}

-                      <Container className="mb-3">

-                        <Row>

-                          <Col className="col-auto">

-                            <img

-                              src={u._links.avatar}

-                              className="avatar small"

-                            />

-                          </Col>

-                          <Col>

-                            <Row>{u.nickname}</Row>

-                            <Row>

-                              <small>{'@' + u.username}</small>

-                            </Row>

-                          </Col>

-                          <Button

-                            color="primary"

-                            className="align-self-center"

-                            disabled={!addable}

-                            onClick={() => {

-                              void edit.onAddUser(u).then((_) => {

-                                setUserSearchText('');

-                                setUserSearchState({ type: 'init' });

-                              });

-                            }}

-                          >

-                            {t('timeline.member.add')}

-                          </Button>

-                        </Row>

-                      </Container>

-                    </>

-                  );

-                } else if (userSearchState.type === 'error') {

-                  return (

-                    <p className="text-danger">{t(userSearchState.data)}</p>

-                  );

-                }

-              })()}

-            </>

-          );

-        } else {

-          return null;

-        }

-      })()}

-    </Container>

-  );

-};

-

-export default TimelineMember;

-

-export interface TimelineMemberDialogProps extends TimelineMemberProps {

-  open: boolean;

-  onClose: () => void;

-}

-

-export const TimelineMemberDialog: React.FC<TimelineMemberDialogProps> = (

-  props

-) => {

-  return (

-    <Modal isOpen={props.open} toggle={props.onClose}>

-      <TimelineMember {...props} />

-    </Modal>

-  );

-};

+import React, { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { User } from '../data/user';
+
+import SearchInput from '../common/SearchInput';
+import {
+  Container,
+  ListGroup,
+  ListGroupItem,
+  Modal,
+  Row,
+  Col,
+  Button,
+} from 'reactstrap';
+
+export interface TimelineMemberCallbacks {
+  onCheckUser: (username: string) => Promise<User | null>;
+  onAddUser: (user: User) => Promise<void>;
+  onRemoveUser: (username: string) => void;
+}
+
+export interface TimelineMemberProps {
+  members: User[];
+  edit: TimelineMemberCallbacks | null | undefined;
+}
+
+const TimelineMember: React.FC<TimelineMemberProps> = (props) => {
+  const { t } = useTranslation();
+
+  const [userSearchText, setUserSearchText] = useState<string>('');
+  const [userSearchState, setUserSearchState] = useState<
+    | {
+        type: 'user';
+        data: User;
+      }
+    | { type: 'error'; data: string }
+    | { type: 'loading' }
+    | { type: 'init' }
+  >({ type: 'init' });
+
+  const members = props.members;
+
+  return (
+    <Container className="px-4">
+      <ListGroup className="my-3">
+        {members.map((member, index) => (
+          <ListGroupItem key={member.username} className="container">
+            <Row>
+              <Col className="col-auto">
+                <img src={member._links.avatar} className="avatar small" />
+              </Col>
+              <Col>
+                <Row>{member.nickname}</Row>
+                <Row>
+                  <small>{'@' + member.username}</small>
+                </Row>
+              </Col>
+              {(() => {
+                if (index === 0) {
+                  return null;
+                }
+                const onRemove = props.edit?.onRemoveUser;
+                if (onRemove == null) {
+                  return null;
+                }
+                return (
+                  <Button
+                    className="align-self-center"
+                    color="danger"
+                    onClick={() => {
+                      onRemove(member.username);
+                    }}
+                  >
+                    {t('timeline.member.remove')}
+                  </Button>
+                );
+              })()}
+            </Row>
+          </ListGroupItem>
+        ))}
+      </ListGroup>
+      {(() => {
+        const edit = props.edit;
+        if (edit != null) {
+          return (
+            <>
+              <SearchInput
+                value={userSearchText}
+                onChange={(v) => {
+                  setUserSearchText(v);
+                }}
+                loading={userSearchState.type === 'loading'}
+                onButtonClick={() => {
+                  if (userSearchText === '') {
+                    setUserSearchState({
+                      type: 'error',
+                      data: 'login.emptyUsername',
+                    });
+                    return;
+                  }
+
+                  setUserSearchState({ type: 'loading' });
+                  edit.onCheckUser(userSearchText).then(
+                    (u) => {
+                      if (u == null) {
+                        setUserSearchState({
+                          type: 'error',
+                          data: 'timeline.userNotExist',
+                        });
+                      } else {
+                        setUserSearchState({ type: 'user', data: u });
+                      }
+                    },
+                    (e) => {
+                      setUserSearchState({
+                        type: 'error',
+                        data: `${e as string}`,
+                      });
+                    }
+                  );
+                }}
+              />
+              {(() => {
+                if (userSearchState.type === 'user') {
+                  const u = userSearchState.data;
+                  const addable =
+                    members.findIndex((m) => m.username === u.username) === -1;
+                  return (
+                    <>
+                      {!addable ? (
+                        <p>{t('timeline.member.alreadyMember')}</p>
+                      ) : null}
+                      <Container className="mb-3">
+                        <Row>
+                          <Col className="col-auto">
+                            <img
+                              src={u._links.avatar}
+                              className="avatar small"
+                            />
+                          </Col>
+                          <Col>
+                            <Row>{u.nickname}</Row>
+                            <Row>
+                              <small>{'@' + u.username}</small>
+                            </Row>
+                          </Col>
+                          <Button
+                            color="primary"
+                            className="align-self-center"
+                            disabled={!addable}
+                            onClick={() => {
+                              void edit.onAddUser(u).then((_) => {
+                                setUserSearchText('');
+                                setUserSearchState({ type: 'init' });
+                              });
+                            }}
+                          >
+                            {t('timeline.member.add')}
+                          </Button>
+                        </Row>
+                      </Container>
+                    </>
+                  );
+                } else if (userSearchState.type === 'error') {
+                  return (
+                    <p className="text-danger">{t(userSearchState.data)}</p>
+                  );
+                }
+              })()}
+            </>
+          );
+        } else {
+          return null;
+        }
+      })()}
+    </Container>
+  );
+};
+
+export default TimelineMember;
+
+export interface TimelineMemberDialogProps extends TimelineMemberProps {
+  open: boolean;
+  onClose: () => void;
+}
+
+export const TimelineMemberDialog: React.FC<TimelineMemberDialogProps> = (
+  props
+) => {
+  return (
+    <Modal isOpen={props.open} toggle={props.onClose}>
+      <TimelineMember {...props} />
+    </Modal>
+  );
+};
diff --git a/Timeline/ClientApp/src/timeline/TimelinePage.tsx b/Timeline/ClientApp/src/app/timeline/TimelinePage.tsx
index 5adebe1f..900d6e6a 100644
--- a/Timeline/ClientApp/src/timeline/TimelinePage.tsx
+++ b/Timeline/ClientApp/src/app/timeline/TimelinePage.tsx
@@ -1,39 +1,39 @@
-import React from 'react';

-import { useParams } from 'react-router';

-

-import { ordinaryTimelineService } from '../data/timeline';

-

-import TimelinePageUI from './TimelinePageUI';

-import TimelinePageTemplate from '../timeline/TimelinePageTemplate';

-import { OrdinaryTimelineManageItem } from './TimelineInfoCard';

-import TimelineDeleteDialog from './TimelineDeleteDialog';

-

-const TimelinePage: React.FC = _ => {

-  const { name } = useParams<{ name: string }>();

-

-  const [dialog, setDialog] = React.useState<OrdinaryTimelineManageItem | null>(

-    null

-  );

-

-  let dialogElement: React.ReactElement | undefined;

-  if (dialog === 'delete') {

-    dialogElement = (

-      <TimelineDeleteDialog open close={() => setDialog(null)} name={name} />

-    );

-  }

-

-  return (

-    <>

-      <TimelinePageTemplate

-        name={name}

-        UiComponent={TimelinePageUI}

-        onManage={item => setDialog(item)}

-        service={ordinaryTimelineService}

-        notFoundI18nKey="timeline.timelineNotExist"

-      />

-      {dialogElement}

-    </>

-  );

-};

-

-export default TimelinePage;

+import React from 'react';
+import { useParams } from 'react-router';
+
+import { ordinaryTimelineService } from '../data/timeline';
+
+import TimelinePageUI from './TimelinePageUI';
+import TimelinePageTemplate from '../timeline/TimelinePageTemplate';
+import { OrdinaryTimelineManageItem } from './TimelineInfoCard';
+import TimelineDeleteDialog from './TimelineDeleteDialog';
+
+const TimelinePage: React.FC = _ => {
+  const { name } = useParams<{ name: string }>();
+
+  const [dialog, setDialog] = React.useState<OrdinaryTimelineManageItem | null>(
+    null
+  );
+
+  let dialogElement: React.ReactElement | undefined;
+  if (dialog === 'delete') {
+    dialogElement = (
+      <TimelineDeleteDialog open close={() => setDialog(null)} name={name} />
+    );
+  }
+
+  return (
+    <>
+      <TimelinePageTemplate
+        name={name}
+        UiComponent={TimelinePageUI}
+        onManage={item => setDialog(item)}
+        service={ordinaryTimelineService}
+        notFoundI18nKey="timeline.timelineNotExist"
+      />
+      {dialogElement}
+    </>
+  );
+};
+
+export default TimelinePage;
diff --git a/Timeline/ClientApp/src/timeline/TimelinePageTemplate.tsx b/Timeline/ClientApp/src/app/timeline/TimelinePageTemplate.tsx
index f8721985..38ecd8f9 100644
--- a/Timeline/ClientApp/src/timeline/TimelinePageTemplate.tsx
+++ b/Timeline/ClientApp/src/app/timeline/TimelinePageTemplate.tsx
@@ -1,275 +1,275 @@
-import React from 'react';

-import { useTranslation } from 'react-i18next';

-import { AxiosError } from 'axios';

-import concat from 'lodash/concat';

-import without from 'lodash/without';

-

-import { ExcludeKey } from '../type-utilities';

-import { useUser, fetchUser } from '../data/user';

-import { pushAlert } from '../common/alert-service';

-import { extractStatusCode, extractErrorCode } from '../data/common';

-import {

-  TimelineServiceTemplate,

-  TimelineInfo,

-  TimelineChangePropertyRequest,

-} from '../data/timeline';

-

-import { TimelinePostInfoEx, TimelineDeleteCallback } from './Timeline';

-import { TimelineMemberDialog } from './TimelineMember';

-import TimelinePropertyChangeDialog from './TimelinePropertyChangeDialog';

-import { TimelinePageTemplateUIProps } from './TimelinePageTemplateUI';

-import { TimelinePostSendCallback } from './TimelinePostEdit';

-import { UiLogicError } from '../common';

-

-export interface TimelinePageTemplateProps<

-  TManageItem,

-  TTimeline extends TimelineInfo

-> {

-  name: string;

-  onManage: (item: TManageItem) => void;

-  service: TimelineServiceTemplate<TTimeline, TimelineChangePropertyRequest>;

-  UiComponent: React.ComponentType<

-    ExcludeKey<

-      TimelinePageTemplateUIProps<TTimeline, TManageItem>,

-      'CardComponent'

-    >

-  >;

-  dataVersion?: number;

-  notFoundI18nKey: string;

-}

-

-export default function TimelinePageTemplate<

-  TManageItem,

-  TTimeline extends TimelineInfo

->(

-  props: TimelinePageTemplateProps<TManageItem, TTimeline>

-): React.ReactElement | null {

-  const { t } = useTranslation();

-

-  const { name } = props;

-

-  const user = useUser();

-

-  const [dialog, setDialog] = React.useState<null | 'property' | 'member'>(

-    null

-  );

-  const [timeline, setTimeline] = React.useState<TTimeline | undefined>(

-    undefined

-  );

-  const [posts, setPosts] = React.useState<

-    TimelinePostInfoEx[] | 'forbid' | undefined

-  >(undefined);

-  const [error, setError] = React.useState<string | undefined>(undefined);

-

-  const service = props.service;

-

-  React.useEffect(() => {

-    let subscribe = true;

-    service.fetch(name).then(

-      (ti) => {

-        if (subscribe) {

-          setTimeline(ti);

-          if (!service.hasReadPermission(user, ti)) {

-            setPosts('forbid');

-          } else {

-            service.fetchPosts(name).then(

-              (data) => {

-                if (subscribe) {

-                  setPosts(

-                    data.map((post) => ({

-                      ...post,

-                      deletable: service.hasModifyPostPermission(

-                        user,

-                        ti,

-                        post

-                      ),

-                    }))

-                  );

-                }

-              },

-              (error) => {

-                if (subscribe) {

-                  setError(`${error as string}`);

-                }

-              }

-            );

-          }

-        }

-      },

-      (error: AxiosError) => {

-        if (subscribe) {

-          if (

-            extractStatusCode(error) === 404 ||

-            extractErrorCode(error) === 11020101

-          ) {

-            setError(t(props.notFoundI18nKey));

-          } else {

-            setError(error.toString());

-          }

-        }

-      }

-    );

-    return () => {

-      subscribe = false;

-    };

-  }, [name, service, user, t, props.dataVersion, props.notFoundI18nKey]);

-

-  const closeDialog = React.useCallback((): void => {

-    setDialog(null);

-  }, []);

-

-  let dialogElement: React.ReactElement | undefined;

-

-  if (dialog === 'property') {

-    if (timeline == null) {

-      throw new UiLogicError(

-        'Timeline is null but attempt to open change property dialog.'

-      );

-    }

-

-    dialogElement = (

-      <TimelinePropertyChangeDialog

-        open

-        close={closeDialog}

-        oldInfo={{

-          visibility: timeline.visibility,

-          description: timeline.description,

-        }}

-        onProcess={(req) => {

-          return service.changeProperty(name, req).then((newTimeline) => {

-            setTimeline(newTimeline);

-          });

-        }}

-      />

-    );

-  } else if (dialog === 'member') {

-    if (timeline == null) {

-      throw new UiLogicError(

-        'Timeline is null but attempt to open change property dialog.'

-      );

-    }

-

-    dialogElement = (

-      <TimelineMemberDialog

-        open

-        onClose={closeDialog}

-        members={[timeline.owner, ...timeline.members]}

-        edit={

-          service.hasManagePermission(user, timeline)

-            ? {

-                onCheckUser: (u) => {

-                  return fetchUser(u).catch((e) => {

-                    if (

-                      extractStatusCode(e) === 404 ||

-                      extractErrorCode(e) === 11020101

-                    ) {

-                      return Promise.resolve(null);

-                    } else {

-                      return Promise.reject(e);

-                    }

-                  });

-                },

-                onAddUser: (u) => {

-                  return service.addMember(name, u.username).then((_) => {

-                    setTimeline({

-                      ...timeline,

-                      members: concat(timeline.members, u),

-                    });

-                  });

-                },

-                onRemoveUser: (u) => {

-                  void service.removeMember(name, u).then((_) => {

-                    setTimeline({

-                      ...timeline,

-                      members: without(

-                        timeline.members,

-                        timeline.members.find((m) => m.username === u)

-                      ),

-                    });

-                  });

-                },

-              }

-            : null

-        }

-      />

-    );

-  }

-

-  const { UiComponent } = props;

-

-  const onDelete: TimelineDeleteCallback = React.useCallback(

-    (index, id) => {

-      service.deletePost(name, id).then(

-        (_) => {

-          setPosts((oldPosts) =>

-            without(

-              oldPosts as TimelinePostInfoEx[],

-              (oldPosts as TimelinePostInfoEx[])[index]

-            )

-          );

-        },

-        () => {

-          pushAlert({

-            type: 'danger',

-            message: t('timeline.deletePostFailed'),

-          });

-        }

-      );

-    },

-    [service, name, t]

-  );

-

-  const onPost: TimelinePostSendCallback = React.useCallback(

-    (req) => {

-      return service.createPost(name, req).then((newPost) => {

-        setPosts((oldPosts) =>

-          concat(oldPosts as TimelinePostInfoEx[], {

-            ...newPost,

-            deletable: true,

-          })

-        );

-      });

-    },

-    [service, name]

-  );

-

-  const onManageProp = props.onManage;

-

-  const onManage = React.useCallback(

-    (item: 'property' | TManageItem) => {

-      if (item === 'property') {

-        setDialog(item);

-      } else {

-        onManageProp(item);

-      }

-    },

-    [onManageProp]

-  );

-

-  const onMember = React.useCallback(() => {

-    setDialog('member');

-  }, []);

-

-  return (

-    <>

-      <UiComponent

-        error={error}

-        timeline={timeline}

-        posts={posts}

-        onDelete={onDelete}

-        onPost={

-          timeline != null && service.hasPostPermission(user, timeline)

-            ? onPost

-            : undefined

-        }

-        onManage={

-          timeline != null && service.hasManagePermission(user, timeline)

-            ? onManage

-            : undefined

-        }

-        onMember={onMember}

-      />

-      {dialogElement}

-    </>

-  );

-}

+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { AxiosError } from 'axios';
+import concat from 'lodash/concat';
+import without from 'lodash/without';
+
+import { ExcludeKey } from '../type-utilities';
+import { useUser, fetchUser } from '../data/user';
+import { pushAlert } from '../common/alert-service';
+import { extractStatusCode, extractErrorCode } from '../data/common';
+import {
+  TimelineServiceTemplate,
+  TimelineInfo,
+  TimelineChangePropertyRequest,
+} from '../data/timeline';
+
+import { TimelinePostInfoEx, TimelineDeleteCallback } from './Timeline';
+import { TimelineMemberDialog } from './TimelineMember';
+import TimelinePropertyChangeDialog from './TimelinePropertyChangeDialog';
+import { TimelinePageTemplateUIProps } from './TimelinePageTemplateUI';
+import { TimelinePostSendCallback } from './TimelinePostEdit';
+import { UiLogicError } from '../common';
+
+export interface TimelinePageTemplateProps<
+  TManageItem,
+  TTimeline extends TimelineInfo
+> {
+  name: string;
+  onManage: (item: TManageItem) => void;
+  service: TimelineServiceTemplate<TTimeline, TimelineChangePropertyRequest>;
+  UiComponent: React.ComponentType<
+    ExcludeKey<
+      TimelinePageTemplateUIProps<TTimeline, TManageItem>,
+      'CardComponent'
+    >
+  >;
+  dataVersion?: number;
+  notFoundI18nKey: string;
+}
+
+export default function TimelinePageTemplate<
+  TManageItem,
+  TTimeline extends TimelineInfo
+>(
+  props: TimelinePageTemplateProps<TManageItem, TTimeline>
+): React.ReactElement | null {
+  const { t } = useTranslation();
+
+  const { name } = props;
+
+  const user = useUser();
+
+  const [dialog, setDialog] = React.useState<null | 'property' | 'member'>(
+    null
+  );
+  const [timeline, setTimeline] = React.useState<TTimeline | undefined>(
+    undefined
+  );
+  const [posts, setPosts] = React.useState<
+    TimelinePostInfoEx[] | 'forbid' | undefined
+  >(undefined);
+  const [error, setError] = React.useState<string | undefined>(undefined);
+
+  const service = props.service;
+
+  React.useEffect(() => {
+    let subscribe = true;
+    service.fetch(name).then(
+      (ti) => {
+        if (subscribe) {
+          setTimeline(ti);
+          if (!service.hasReadPermission(user, ti)) {
+            setPosts('forbid');
+          } else {
+            service.fetchPosts(name).then(
+              (data) => {
+                if (subscribe) {
+                  setPosts(
+                    data.map((post) => ({
+                      ...post,
+                      deletable: service.hasModifyPostPermission(
+                        user,
+                        ti,
+                        post
+                      ),
+                    }))
+                  );
+                }
+              },
+              (error) => {
+                if (subscribe) {
+                  setError(`${error as string}`);
+                }
+              }
+            );
+          }
+        }
+      },
+      (error: AxiosError) => {
+        if (subscribe) {
+          if (
+            extractStatusCode(error) === 404 ||
+            extractErrorCode(error) === 11020101
+          ) {
+            setError(t(props.notFoundI18nKey));
+          } else {
+            setError(error.toString());
+          }
+        }
+      }
+    );
+    return () => {
+      subscribe = false;
+    };
+  }, [name, service, user, t, props.dataVersion, props.notFoundI18nKey]);
+
+  const closeDialog = React.useCallback((): void => {
+    setDialog(null);
+  }, []);
+
+  let dialogElement: React.ReactElement | undefined;
+
+  if (dialog === 'property') {
+    if (timeline == null) {
+      throw new UiLogicError(
+        'Timeline is null but attempt to open change property dialog.'
+      );
+    }
+
+    dialogElement = (
+      <TimelinePropertyChangeDialog
+        open
+        close={closeDialog}
+        oldInfo={{
+          visibility: timeline.visibility,
+          description: timeline.description,
+        }}
+        onProcess={(req) => {
+          return service.changeProperty(name, req).then((newTimeline) => {
+            setTimeline(newTimeline);
+          });
+        }}
+      />
+    );
+  } else if (dialog === 'member') {
+    if (timeline == null) {
+      throw new UiLogicError(
+        'Timeline is null but attempt to open change property dialog.'
+      );
+    }
+
+    dialogElement = (
+      <TimelineMemberDialog
+        open
+        onClose={closeDialog}
+        members={[timeline.owner, ...timeline.members]}
+        edit={
+          service.hasManagePermission(user, timeline)
+            ? {
+                onCheckUser: (u) => {
+                  return fetchUser(u).catch((e) => {
+                    if (
+                      extractStatusCode(e) === 404 ||
+                      extractErrorCode(e) === 11020101
+                    ) {
+                      return Promise.resolve(null);
+                    } else {
+                      return Promise.reject(e);
+                    }
+                  });
+                },
+                onAddUser: (u) => {
+                  return service.addMember(name, u.username).then((_) => {
+                    setTimeline({
+                      ...timeline,
+                      members: concat(timeline.members, u),
+                    });
+                  });
+                },
+                onRemoveUser: (u) => {
+                  void service.removeMember(name, u).then((_) => {
+                    setTimeline({
+                      ...timeline,
+                      members: without(
+                        timeline.members,
+                        timeline.members.find((m) => m.username === u)
+                      ),
+                    });
+                  });
+                },
+              }
+            : null
+        }
+      />
+    );
+  }
+
+  const { UiComponent } = props;
+
+  const onDelete: TimelineDeleteCallback = React.useCallback(
+    (index, id) => {
+      service.deletePost(name, id).then(
+        (_) => {
+          setPosts((oldPosts) =>
+            without(
+              oldPosts as TimelinePostInfoEx[],
+              (oldPosts as TimelinePostInfoEx[])[index]
+            )
+          );
+        },
+        () => {
+          pushAlert({
+            type: 'danger',
+            message: t('timeline.deletePostFailed'),
+          });
+        }
+      );
+    },
+    [service, name, t]
+  );
+
+  const onPost: TimelinePostSendCallback = React.useCallback(
+    (req) => {
+      return service.createPost(name, req).then((newPost) => {
+        setPosts((oldPosts) =>
+          concat(oldPosts as TimelinePostInfoEx[], {
+            ...newPost,
+            deletable: true,
+          })
+        );
+      });
+    },
+    [service, name]
+  );
+
+  const onManageProp = props.onManage;
+
+  const onManage = React.useCallback(
+    (item: 'property' | TManageItem) => {
+      if (item === 'property') {
+        setDialog(item);
+      } else {
+        onManageProp(item);
+      }
+    },
+    [onManageProp]
+  );
+
+  const onMember = React.useCallback(() => {
+    setDialog('member');
+  }, []);
+
+  return (
+    <>
+      <UiComponent
+        error={error}
+        timeline={timeline}
+        posts={posts}
+        onDelete={onDelete}
+        onPost={
+          timeline != null && service.hasPostPermission(user, timeline)
+            ? onPost
+            : undefined
+        }
+        onManage={
+          timeline != null && service.hasManagePermission(user, timeline)
+            ? onManage
+            : undefined
+        }
+        onMember={onMember}
+      />
+      {dialogElement}
+    </>
+  );
+}
diff --git a/Timeline/ClientApp/src/timeline/TimelinePageTemplateUI.tsx b/Timeline/ClientApp/src/app/timeline/TimelinePageTemplateUI.tsx
index cc5bf509..d74fffc4 100644
--- a/Timeline/ClientApp/src/timeline/TimelinePageTemplateUI.tsx
+++ b/Timeline/ClientApp/src/app/timeline/TimelinePageTemplateUI.tsx
@@ -1,212 +1,212 @@
-import React from 'react';

-import { Spinner } from 'reactstrap';

-import { useTranslation } from 'react-i18next';

-import { Subject, fromEvent } from 'rxjs';

-

-import { getAlertHost } from '../common/alert-service';

-

-import Timeline, {

-  TimelinePostInfoEx,

-  TimelineDeleteCallback,

-} from './Timeline';

-import AppBar from '../common/AppBar';

-import TimelinePostEdit, { TimelinePostSendCallback } from './TimelinePostEdit';

-import CollapseButton from '../common/CollapseButton';

-

-export interface TimelineCardComponentProps<TTimeline, TManageItems> {

-  timeline: TTimeline;

-  onManage?: (item: TManageItems | 'property') => void;

-  onMember: () => void;

-  className?: string;

-  onHeight?: (height: number) => void;

-}

-

-export interface TimelinePageTemplateUIProps<

-  TTimeline extends { name: string },

-  TManageItems

-> {

-  avatarKey?: string | number;

-  timeline?: TTimeline;

-  posts?: TimelinePostInfoEx[] | 'forbid';

-  CardComponent: React.ComponentType<

-    TimelineCardComponentProps<TTimeline, TManageItems>

-  >;

-  onMember: () => void;

-  onManage?: (item: TManageItems | 'property') => void;

-  onPost?: TimelinePostSendCallback;

-  onDelete: TimelineDeleteCallback;

-  error?: string;

-}

-

-export default function TimelinePageTemplateUI<

-  TTimeline extends { name: string },

-  TEditItems

->(

-  props: TimelinePageTemplateUIProps<TTimeline, TEditItems>

-): React.ReactElement | null {

-  const { timeline } = props;

-

-  const { t } = useTranslation();

-

-  const bottomSpaceRef = React.useRef<HTMLDivElement | null>(null);

-

-  const onPostEditHeightChange = React.useCallback((height: number): void => {

-    const { current: bottomSpaceDiv } = bottomSpaceRef;

-    if (bottomSpaceDiv != null) {

-      bottomSpaceDiv.style.height = `${height}px`;

-    }

-    if (height === 0) {

-      const alertHost = getAlertHost();

-      if (alertHost != null) {

-        alertHost.style.removeProperty('margin-bottom');

-      }

-    } else {

-      const alertHost = getAlertHost();

-      if (alertHost != null) {

-        alertHost.style.marginBottom = `${height}px`;

-      }

-    }

-  }, []);

-

-  const resizeSubject = React.useMemo(() => new Subject(), []);

-  const triggerResizeEvent = React.useCallback(() => {

-    resizeSubject.next(null);

-  }, [resizeSubject]);

-

-  React.useEffect(() => {

-    let scrollToBottom = true;

-    const disableScrollToBottom = (): void => {

-      scrollToBottom = false;

-    };

-

-    const subscriptions = [

-      fromEvent(window, 'wheel').subscribe(disableScrollToBottom),

-      fromEvent(window, 'pointerdown').subscribe(disableScrollToBottom),

-      fromEvent(window, 'keydown').subscribe(disableScrollToBottom),

-      resizeSubject.subscribe(() => {

-        if (scrollToBottom) {

-          window.scrollTo(0, document.body.scrollHeight);

-        }

-      }),

-    ];

-

-    return () => {

-      subscriptions.forEach((s) => s.unsubscribe());

-    };

-  }, [resizeSubject, timeline, props.posts]);

-

-  const [cardHeight, setCardHeight] = React.useState<number>(0);

-

-  const onCardHeightChange = React.useCallback((height: number) => {

-    setCardHeight(height);

-  }, []);

-

-  const genCardCollapseLocalStorageKey = (timelineName: string): string =>

-    `timeline.${timelineName}.cardCollapse`;

-

-  const cardCollapseLocalStorageKey =

-    timeline != null ? genCardCollapseLocalStorageKey(timeline.name) : null;

-

-  const [infoCardCollapse, setInfoCardCollapse] = React.useState<boolean>(true);

-  React.useEffect(() => {

-    if (cardCollapseLocalStorageKey != null) {

-      const savedCollapse =

-        window.localStorage.getItem(cardCollapseLocalStorageKey) === 'true';

-      setInfoCardCollapse(savedCollapse);

-    }

-  }, [cardCollapseLocalStorageKey]);

-

-  let body: React.ReactElement;

-

-  if (props.error != null) {

-    body = <p className="text-danger">{t(props.error)}</p>;

-  } else {

-    if (timeline != null) {

-      let timelineBody: React.ReactElement;

-      if (props.posts != null) {

-        if (props.posts === 'forbid') {

-          timelineBody = (

-            <p className="text-danger">{t('timeline.messageCantSee')}</p>

-          );

-        } else {

-          timelineBody = (

-            <Timeline

-              posts={props.posts}

-              onDelete={props.onDelete}

-              onResize={triggerResizeEvent}

-            />

-          );

-          if (props.onPost != null) {

-            timelineBody = (

-              <>

-                {timelineBody}

-                <div ref={bottomSpaceRef} className="flex-fix-length" />

-                <TimelinePostEdit

-                  onPost={props.onPost}

-                  onHeightChange={onPostEditHeightChange}

-                  timelineName={timeline.name}

-                />

-              </>

-            );

-          }

-        }

-      } else {

-        timelineBody = (

-          <div className="full-viewport-center-child">

-            <Spinner color="primary" type="grow" />

-          </div>

-        );

-      }

-      const { CardComponent } = props;

-

-      body = (

-        <>

-          <div

-            className="fixed-top mt-appbar info-card-container"

-            data-collapse={infoCardCollapse ? 'true' : 'false'}

-          >

-            <CollapseButton

-              collapse={infoCardCollapse}

-              onClick={() => {

-                const newState = !infoCardCollapse;

-                setInfoCardCollapse(newState);

-                window.localStorage.setItem(

-                  genCardCollapseLocalStorageKey(timeline.name),

-                  newState.toString()

-                );

-              }}

-              className="float-right m-1 info-card-collapse-button text-orange"

-            />

-            <CardComponent

-              timeline={timeline}

-              onManage={props.onManage}

-              onMember={props.onMember}

-              onHeight={onCardHeightChange}

-              className="info-card-content"

-            />

-          </div>

-          {timelineBody}

-        </>

-      );

-    } else {

-      body = (

-        <div className="full-viewport-center-child">

-          <Spinner color="primary" type="grow" />

-        </div>

-      );

-    }

-  }

-

-  return (

-    <>

-      <AppBar />

-      <div>

-        <div

-          style={{ height: 56 + cardHeight }}

-          className="timeline-page-top-space flex-fix-length"

-        />

-        {body}

-      </div>

-    </>

-  );

-}

+import React from 'react';
+import { Spinner } from 'reactstrap';
+import { useTranslation } from 'react-i18next';
+import { Subject, fromEvent } from 'rxjs';
+
+import { getAlertHost } from '../common/alert-service';
+
+import Timeline, {
+  TimelinePostInfoEx,
+  TimelineDeleteCallback,
+} from './Timeline';
+import AppBar from '../common/AppBar';
+import TimelinePostEdit, { TimelinePostSendCallback } from './TimelinePostEdit';
+import CollapseButton from '../common/CollapseButton';
+
+export interface TimelineCardComponentProps<TTimeline, TManageItems> {
+  timeline: TTimeline;
+  onManage?: (item: TManageItems | 'property') => void;
+  onMember: () => void;
+  className?: string;
+  onHeight?: (height: number) => void;
+}
+
+export interface TimelinePageTemplateUIProps<
+  TTimeline extends { name: string },
+  TManageItems
+> {
+  avatarKey?: string | number;
+  timeline?: TTimeline;
+  posts?: TimelinePostInfoEx[] | 'forbid';
+  CardComponent: React.ComponentType<
+    TimelineCardComponentProps<TTimeline, TManageItems>
+  >;
+  onMember: () => void;
+  onManage?: (item: TManageItems | 'property') => void;
+  onPost?: TimelinePostSendCallback;
+  onDelete: TimelineDeleteCallback;
+  error?: string;
+}
+
+export default function TimelinePageTemplateUI<
+  TTimeline extends { name: string },
+  TEditItems
+>(
+  props: TimelinePageTemplateUIProps<TTimeline, TEditItems>
+): React.ReactElement | null {
+  const { timeline } = props;
+
+  const { t } = useTranslation();
+
+  const bottomSpaceRef = React.useRef<HTMLDivElement | null>(null);
+
+  const onPostEditHeightChange = React.useCallback((height: number): void => {
+    const { current: bottomSpaceDiv } = bottomSpaceRef;
+    if (bottomSpaceDiv != null) {
+      bottomSpaceDiv.style.height = `${height}px`;
+    }
+    if (height === 0) {
+      const alertHost = getAlertHost();
+      if (alertHost != null) {
+        alertHost.style.removeProperty('margin-bottom');
+      }
+    } else {
+      const alertHost = getAlertHost();
+      if (alertHost != null) {
+        alertHost.style.marginBottom = `${height}px`;
+      }
+    }
+  }, []);
+
+  const resizeSubject = React.useMemo(() => new Subject(), []);
+  const triggerResizeEvent = React.useCallback(() => {
+    resizeSubject.next(null);
+  }, [resizeSubject]);
+
+  React.useEffect(() => {
+    let scrollToBottom = true;
+    const disableScrollToBottom = (): void => {
+      scrollToBottom = false;
+    };
+
+    const subscriptions = [
+      fromEvent(window, 'wheel').subscribe(disableScrollToBottom),
+      fromEvent(window, 'pointerdown').subscribe(disableScrollToBottom),
+      fromEvent(window, 'keydown').subscribe(disableScrollToBottom),
+      resizeSubject.subscribe(() => {
+        if (scrollToBottom) {
+          window.scrollTo(0, document.body.scrollHeight);
+        }
+      }),
+    ];
+
+    return () => {
+      subscriptions.forEach((s) => s.unsubscribe());
+    };
+  }, [resizeSubject, timeline, props.posts]);
+
+  const [cardHeight, setCardHeight] = React.useState<number>(0);
+
+  const onCardHeightChange = React.useCallback((height: number) => {
+    setCardHeight(height);
+  }, []);
+
+  const genCardCollapseLocalStorageKey = (timelineName: string): string =>
+    `timeline.${timelineName}.cardCollapse`;
+
+  const cardCollapseLocalStorageKey =
+    timeline != null ? genCardCollapseLocalStorageKey(timeline.name) : null;
+
+  const [infoCardCollapse, setInfoCardCollapse] = React.useState<boolean>(true);
+  React.useEffect(() => {
+    if (cardCollapseLocalStorageKey != null) {
+      const savedCollapse =
+        window.localStorage.getItem(cardCollapseLocalStorageKey) === 'true';
+      setInfoCardCollapse(savedCollapse);
+    }
+  }, [cardCollapseLocalStorageKey]);
+
+  let body: React.ReactElement;
+
+  if (props.error != null) {
+    body = <p className="text-danger">{t(props.error)}</p>;
+  } else {
+    if (timeline != null) {
+      let timelineBody: React.ReactElement;
+      if (props.posts != null) {
+        if (props.posts === 'forbid') {
+          timelineBody = (
+            <p className="text-danger">{t('timeline.messageCantSee')}</p>
+          );
+        } else {
+          timelineBody = (
+            <Timeline
+              posts={props.posts}
+              onDelete={props.onDelete}
+              onResize={triggerResizeEvent}
+            />
+          );
+          if (props.onPost != null) {
+            timelineBody = (
+              <>
+                {timelineBody}
+                <div ref={bottomSpaceRef} className="flex-fix-length" />
+                <TimelinePostEdit
+                  onPost={props.onPost}
+                  onHeightChange={onPostEditHeightChange}
+                  timelineName={timeline.name}
+                />
+              </>
+            );
+          }
+        }
+      } else {
+        timelineBody = (
+          <div className="full-viewport-center-child">
+            <Spinner color="primary" type="grow" />
+          </div>
+        );
+      }
+      const { CardComponent } = props;
+
+      body = (
+        <>
+          <div
+            className="fixed-top mt-appbar info-card-container"
+            data-collapse={infoCardCollapse ? 'true' : 'false'}
+          >
+            <CollapseButton
+              collapse={infoCardCollapse}
+              onClick={() => {
+                const newState = !infoCardCollapse;
+                setInfoCardCollapse(newState);
+                window.localStorage.setItem(
+                  genCardCollapseLocalStorageKey(timeline.name),
+                  newState.toString()
+                );
+              }}
+              className="float-right m-1 info-card-collapse-button text-orange"
+            />
+            <CardComponent
+              timeline={timeline}
+              onManage={props.onManage}
+              onMember={props.onMember}
+              onHeight={onCardHeightChange}
+              className="info-card-content"
+            />
+          </div>
+          {timelineBody}
+        </>
+      );
+    } else {
+      body = (
+        <div className="full-viewport-center-child">
+          <Spinner color="primary" type="grow" />
+        </div>
+      );
+    }
+  }
+
+  return (
+    <>
+      <AppBar />
+      <div>
+        <div
+          style={{ height: 56 + cardHeight }}
+          className="timeline-page-top-space flex-fix-length"
+        />
+        {body}
+      </div>
+    </>
+  );
+}
diff --git a/Timeline/ClientApp/src/timeline/TimelinePageUI.tsx b/Timeline/ClientApp/src/app/timeline/TimelinePageUI.tsx
index 01a230af..d7e9d81b 100644
--- a/Timeline/ClientApp/src/timeline/TimelinePageUI.tsx
+++ b/Timeline/ClientApp/src/app/timeline/TimelinePageUI.tsx
@@ -1,22 +1,22 @@
-import React from 'react';

-

-import { ExcludeKey } from '../type-utilities';

-import { TimelineInfo } from '../data/timeline';

-

-import TimelinePageTemplateUI, {

-  TimelinePageTemplateUIProps

-} from './TimelinePageTemplateUI';

-import TimelineInfoCard, {

-  OrdinaryTimelineManageItem

-} from './TimelineInfoCard';

-

-export type TimelinePageUIProps = ExcludeKey<

-  TimelinePageTemplateUIProps<TimelineInfo, OrdinaryTimelineManageItem>,

-  'CardComponent'

->;

-

-const TimelinePageUI: React.FC<TimelinePageUIProps> = props => {

-  return <TimelinePageTemplateUI {...props} CardComponent={TimelineInfoCard} />;

-};

-

-export default TimelinePageUI;

+import React from 'react';
+
+import { ExcludeKey } from '../type-utilities';
+import { TimelineInfo } from '../data/timeline';
+
+import TimelinePageTemplateUI, {
+  TimelinePageTemplateUIProps
+} from './TimelinePageTemplateUI';
+import TimelineInfoCard, {
+  OrdinaryTimelineManageItem
+} from './TimelineInfoCard';
+
+export type TimelinePageUIProps = ExcludeKey<
+  TimelinePageTemplateUIProps<TimelineInfo, OrdinaryTimelineManageItem>,
+  'CardComponent'
+>;
+
+const TimelinePageUI: React.FC<TimelinePageUIProps> = props => {
+  return <TimelinePageTemplateUI {...props} CardComponent={TimelineInfoCard} />;
+};
+
+export default TimelinePageUI;
diff --git a/Timeline/ClientApp/src/timeline/TimelinePostEdit.tsx b/Timeline/ClientApp/src/app/timeline/TimelinePostEdit.tsx
index d266bd8d..f12b6892 100644
--- a/Timeline/ClientApp/src/timeline/TimelinePostEdit.tsx
+++ b/Timeline/ClientApp/src/app/timeline/TimelinePostEdit.tsx
@@ -1,224 +1,224 @@
-import React from 'react';

-import clsx from 'clsx';

-import { Button, Spinner, Row, Col } from 'reactstrap';

-import { useTranslation } from 'react-i18next';

-

-import { pushAlert } from '../common/alert-service';

-import { CreatePostRequest } from '../data/timeline';

-

-import FileInput from '../common/FileInput';

-import { UiLogicError } from '../common';

-

-interface TimelinePostEditImageProps {

-  onSelect: (blob: Blob | null) => void;

-}

-

-const TimelinePostEditImage: React.FC<TimelinePostEditImageProps> = (props) => {

-  const { onSelect } = props;

-  const { t } = useTranslation();

-

-  const [file, setFile] = React.useState<File | null>(null);

-  const [fileUrl, setFileUrl] = React.useState<string | null>(null);

-  const [error, setError] = React.useState<string | null>(null);

-

-  React.useEffect(() => {

-    if (file != null) {

-      const url = URL.createObjectURL(file);

-      setFileUrl(url);

-      return () => {

-        URL.revokeObjectURL(url);

-      };

-    }

-  }, [file]);

-

-  const onInputChange: React.ChangeEventHandler<HTMLInputElement> = React.useCallback(

-    (e) => {

-      const files = e.target.files;

-      if (files == null || files.length === 0) {

-        setFile(null);

-        setFileUrl(null);

-      } else {

-        setFile(files[0]);

-      }

-      onSelect(null);

-      setError(null);

-    },

-    [onSelect]

-  );

-

-  const onImgLoad = React.useCallback(() => {

-    onSelect(file);

-  }, [onSelect, file]);

-

-  const onImgError = React.useCallback(() => {

-    setError('loadImageError');

-  }, []);

-

-  return (

-    <>

-      <FileInput

-        labelText={t('chooseImage')}

-        onChange={onInputChange}

-        accept="image/*"

-        className="mx-3 my-1"

-      />

-      {fileUrl && error == null && (

-        <img

-          src={fileUrl}

-          className="timeline-post-edit-image"

-          onLoad={onImgLoad}

-          onError={onImgError}

-        />

-      )}

-      {error != null && <div className="text-danger">{t(error)}</div>}

-    </>

-  );

-};

-

-export type TimelinePostSendCallback = (

-  content: CreatePostRequest

-) => Promise<void>;

-

-export interface TimelinePostEditProps {

-  className?: string;

-  onPost: TimelinePostSendCallback;

-  onHeightChange?: (height: number) => void;

-  timelineName: string;

-}

-

-const TimelinePostEdit: React.FC<TimelinePostEditProps> = (props) => {

-  const { onPost } = props;

-

-  const { t } = useTranslation();

-

-  const [state, setState] = React.useState<'input' | 'process'>('input');

-  const [kind, setKind] = React.useState<'text' | 'image'>('text');

-  const [text, setText] = React.useState<string>('');

-  const [imageBlob, setImageBlob] = React.useState<Blob | null>(null);

-

-  const draftLocalStorageKey = `timeline.${props.timelineName}.postDraft`;

-

-  React.useEffect(() => {

-    setText(window.localStorage.getItem(draftLocalStorageKey) ?? '');

-  }, [draftLocalStorageKey]);

-

-  const canSend = kind === 'text' || (kind === 'image' && imageBlob != null);

-

-  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion

-  const containerRef = React.useRef<HTMLDivElement>(null!);

-

-  React.useEffect(() => {

-    if (props.onHeightChange) {

-      props.onHeightChange(containerRef.current.clientHeight);

-    }

-    return () => {

-      if (props.onHeightChange) {

-        props.onHeightChange(0);

-      }

-    };

-  });

-

-  const toggleKind = React.useCallback(() => {

-    setKind((oldKind) => (oldKind === 'text' ? 'image' : 'text'));

-    setImageBlob(null);

-  }, []);

-

-  const onSend = React.useCallback(() => {

-    setState('process');

-

-    const req: CreatePostRequest = (() => {

-      switch (kind) {

-        case 'text':

-          return {

-            content: {

-              type: 'text',

-              text: text,

-            },

-          } as CreatePostRequest;

-        case 'image':

-          if (imageBlob == null) {

-            throw new UiLogicError(

-              'Content type is image but image blob is null.'

-            );

-          }

-          return {

-            content: {

-              type: 'image',

-              data: imageBlob,

-            },

-          } as CreatePostRequest;

-        default:

-          throw new UiLogicError('Unknown content type.');

-      }

-    })();

-

-    onPost(req).then(

-      (_) => {

-        if (kind === 'text') {

-          setText('');

-          window.localStorage.removeItem(draftLocalStorageKey);

-        }

-        setState('input');

-        setKind('text');

-      },

-      (_) => {

-        pushAlert({

-          type: 'danger',

-          message: t('timeline.sendPostFailed'),

-        });

-        setState('input');

-      }

-    );

-  }, [onPost, kind, text, imageBlob, t, draftLocalStorageKey]);

-

-  const onImageSelect = React.useCallback((blob: Blob | null) => {

-    setImageBlob(blob);

-  }, []);

-

-  return (

-    <div ref={containerRef} className="container-fluid fixed-bottom bg-light">

-      <Row>

-        <Col className="px-1 py-1">

-          {kind === 'text' ? (

-            <textarea

-              className="w-100 h-100 timeline-post-edit"

-              value={text}

-              disabled={state === 'process'}

-              onChange={(event: React.ChangeEvent<HTMLTextAreaElement>) => {

-                const value = event.currentTarget.value;

-                setText(value);

-                window.localStorage.setItem(draftLocalStorageKey, value);

-              }}

-            />

-          ) : (

-            <TimelinePostEditImage onSelect={onImageSelect} />

-          )}

-        </Col>

-        <Col sm="col-auto align-self-end m-1">

-          {(() => {

-            if (state === 'input') {

-              return (

-                <>

-                  <i

-                    className={clsx(

-                      'fas d-block text-center large-icon mt-1 mb-2',

-                      kind === 'text' ? 'fa-image' : 'fa-font'

-                    )}

-                    onClick={toggleKind}

-                  />

-                  <Button color="primary" onClick={onSend} disabled={!canSend}>

-                    {t('timeline.send')}

-                  </Button>

-                </>

-              );

-            } else {

-              return <Spinner />;

-            }

-          })()}

-        </Col>

-      </Row>

-    </div>

-  );

-};

-

-export default TimelinePostEdit;

+import React from 'react';
+import clsx from 'clsx';
+import { Button, Spinner, Row, Col } from 'reactstrap';
+import { useTranslation } from 'react-i18next';
+
+import { pushAlert } from '../common/alert-service';
+import { CreatePostRequest } from '../data/timeline';
+
+import FileInput from '../common/FileInput';
+import { UiLogicError } from '../common';
+
+interface TimelinePostEditImageProps {
+  onSelect: (blob: Blob | null) => void;
+}
+
+const TimelinePostEditImage: React.FC<TimelinePostEditImageProps> = (props) => {
+  const { onSelect } = props;
+  const { t } = useTranslation();
+
+  const [file, setFile] = React.useState<File | null>(null);
+  const [fileUrl, setFileUrl] = React.useState<string | null>(null);
+  const [error, setError] = React.useState<string | null>(null);
+
+  React.useEffect(() => {
+    if (file != null) {
+      const url = URL.createObjectURL(file);
+      setFileUrl(url);
+      return () => {
+        URL.revokeObjectURL(url);
+      };
+    }
+  }, [file]);
+
+  const onInputChange: React.ChangeEventHandler<HTMLInputElement> = React.useCallback(
+    (e) => {
+      const files = e.target.files;
+      if (files == null || files.length === 0) {
+        setFile(null);
+        setFileUrl(null);
+      } else {
+        setFile(files[0]);
+      }
+      onSelect(null);
+      setError(null);
+    },
+    [onSelect]
+  );
+
+  const onImgLoad = React.useCallback(() => {
+    onSelect(file);
+  }, [onSelect, file]);
+
+  const onImgError = React.useCallback(() => {
+    setError('loadImageError');
+  }, []);
+
+  return (
+    <>
+      <FileInput
+        labelText={t('chooseImage')}
+        onChange={onInputChange}
+        accept="image/*"
+        className="mx-3 my-1"
+      />
+      {fileUrl && error == null && (
+        <img
+          src={fileUrl}
+          className="timeline-post-edit-image"
+          onLoad={onImgLoad}
+          onError={onImgError}
+        />
+      )}
+      {error != null && <div className="text-danger">{t(error)}</div>}
+    </>
+  );
+};
+
+export type TimelinePostSendCallback = (
+  content: CreatePostRequest
+) => Promise<void>;
+
+export interface TimelinePostEditProps {
+  className?: string;
+  onPost: TimelinePostSendCallback;
+  onHeightChange?: (height: number) => void;
+  timelineName: string;
+}
+
+const TimelinePostEdit: React.FC<TimelinePostEditProps> = (props) => {
+  const { onPost } = props;
+
+  const { t } = useTranslation();
+
+  const [state, setState] = React.useState<'input' | 'process'>('input');
+  const [kind, setKind] = React.useState<'text' | 'image'>('text');
+  const [text, setText] = React.useState<string>('');
+  const [imageBlob, setImageBlob] = React.useState<Blob | null>(null);
+
+  const draftLocalStorageKey = `timeline.${props.timelineName}.postDraft`;
+
+  React.useEffect(() => {
+    setText(window.localStorage.getItem(draftLocalStorageKey) ?? '');
+  }, [draftLocalStorageKey]);
+
+  const canSend = kind === 'text' || (kind === 'image' && imageBlob != null);
+
+  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+  const containerRef = React.useRef<HTMLDivElement>(null!);
+
+  React.useEffect(() => {
+    if (props.onHeightChange) {
+      props.onHeightChange(containerRef.current.clientHeight);
+    }
+    return () => {
+      if (props.onHeightChange) {
+        props.onHeightChange(0);
+      }
+    };
+  });
+
+  const toggleKind = React.useCallback(() => {
+    setKind((oldKind) => (oldKind === 'text' ? 'image' : 'text'));
+    setImageBlob(null);
+  }, []);
+
+  const onSend = React.useCallback(() => {
+    setState('process');
+
+    const req: CreatePostRequest = (() => {
+      switch (kind) {
+        case 'text':
+          return {
+            content: {
+              type: 'text',
+              text: text,
+            },
+          } as CreatePostRequest;
+        case 'image':
+          if (imageBlob == null) {
+            throw new UiLogicError(
+              'Content type is image but image blob is null.'
+            );
+          }
+          return {
+            content: {
+              type: 'image',
+              data: imageBlob,
+            },
+          } as CreatePostRequest;
+        default:
+          throw new UiLogicError('Unknown content type.');
+      }
+    })();
+
+    onPost(req).then(
+      (_) => {
+        if (kind === 'text') {
+          setText('');
+          window.localStorage.removeItem(draftLocalStorageKey);
+        }
+        setState('input');
+        setKind('text');
+      },
+      (_) => {
+        pushAlert({
+          type: 'danger',
+          message: t('timeline.sendPostFailed'),
+        });
+        setState('input');
+      }
+    );
+  }, [onPost, kind, text, imageBlob, t, draftLocalStorageKey]);
+
+  const onImageSelect = React.useCallback((blob: Blob | null) => {
+    setImageBlob(blob);
+  }, []);
+
+  return (
+    <div ref={containerRef} className="container-fluid fixed-bottom bg-light">
+      <Row>
+        <Col className="px-1 py-1">
+          {kind === 'text' ? (
+            <textarea
+              className="w-100 h-100 timeline-post-edit"
+              value={text}
+              disabled={state === 'process'}
+              onChange={(event: React.ChangeEvent<HTMLTextAreaElement>) => {
+                const value = event.currentTarget.value;
+                setText(value);
+                window.localStorage.setItem(draftLocalStorageKey, value);
+              }}
+            />
+          ) : (
+            <TimelinePostEditImage onSelect={onImageSelect} />
+          )}
+        </Col>
+        <Col sm="col-auto align-self-end m-1">
+          {(() => {
+            if (state === 'input') {
+              return (
+                <>
+                  <i
+                    className={clsx(
+                      'fas d-block text-center large-icon mt-1 mb-2',
+                      kind === 'text' ? 'fa-image' : 'fa-font'
+                    )}
+                    onClick={toggleKind}
+                  />
+                  <Button color="primary" onClick={onSend} disabled={!canSend}>
+                    {t('timeline.send')}
+                  </Button>
+                </>
+              );
+            } else {
+              return <Spinner />;
+            }
+          })()}
+        </Col>
+      </Row>
+    </div>
+  );
+};
+
+export default TimelinePostEdit;
diff --git a/Timeline/ClientApp/src/timeline/TimelinePropertyChangeDialog.tsx b/Timeline/ClientApp/src/app/timeline/TimelinePropertyChangeDialog.tsx
index 9ab725a6..ca1be31c 100644
--- a/Timeline/ClientApp/src/timeline/TimelinePropertyChangeDialog.tsx
+++ b/Timeline/ClientApp/src/app/timeline/TimelinePropertyChangeDialog.tsx
@@ -1,70 +1,70 @@
-import React from 'react';

-

-import {

-  TimelineVisibility,

-  kTimelineVisibilities,

-  PersonalTimelineChangePropertyRequest

-} from '../data/timeline';

-

-import OperationDialog, {

-  OperationSelectInputInfoOption

-} from '../common/OperationDialog';

-

-export interface TimelinePropertyInfo {

-  visibility: TimelineVisibility;

-  description: string;

-}

-

-export interface TimelinePropertyChangeDialogProps {

-  open: boolean;

-  close: () => void;

-  oldInfo: TimelinePropertyInfo;

-  onProcess: (request: PersonalTimelineChangePropertyRequest) => Promise<void>;

-}

-

-const labelMap: { [key in TimelineVisibility]: string } = {

-  Private: 'timeline.visibility.private',

-  Public: 'timeline.visibility.public',

-  Register: 'timeline.visibility.register'

-};

-

-const TimelinePropertyChangeDialog: React.FC<TimelinePropertyChangeDialogProps> = props => {

-  return (

-    <OperationDialog

-      title={'timeline.dialogChangeProperty.title'}

-      titleColor="default"

-      inputScheme={[

-        {

-          type: 'select',

-          label: 'timeline.dialogChangeProperty.visibility',

-          options: kTimelineVisibilities.map<OperationSelectInputInfoOption>(

-            v => ({

-              label: labelMap[v],

-              value: v

-            })

-          ),

-          initValue: props.oldInfo.visibility

-        },

-        {

-          type: 'text',

-          label: 'timeline.dialogChangeProperty.description',

-          initValue: props.oldInfo.description

-        }

-      ]}

-      open={props.open}

-      close={props.close}

-      onProcess={([newVisibility, newDescription]) => {

-        const req: PersonalTimelineChangePropertyRequest = {};

-        if (newVisibility !== props.oldInfo.visibility) {

-          req.visibility = newVisibility as TimelineVisibility;

-        }

-        if (newDescription !== props.oldInfo.description) {

-          req.description = newDescription as string;

-        }

-        return props.onProcess(req);

-      }}

-    />

-  );

-};

-

-export default TimelinePropertyChangeDialog;

+import React from 'react';
+
+import {
+  TimelineVisibility,
+  kTimelineVisibilities,
+  PersonalTimelineChangePropertyRequest
+} from '../data/timeline';
+
+import OperationDialog, {
+  OperationSelectInputInfoOption
+} from '../common/OperationDialog';
+
+export interface TimelinePropertyInfo {
+  visibility: TimelineVisibility;
+  description: string;
+}
+
+export interface TimelinePropertyChangeDialogProps {
+  open: boolean;
+  close: () => void;
+  oldInfo: TimelinePropertyInfo;
+  onProcess: (request: PersonalTimelineChangePropertyRequest) => Promise<void>;
+}
+
+const labelMap: { [key in TimelineVisibility]: string } = {
+  Private: 'timeline.visibility.private',
+  Public: 'timeline.visibility.public',
+  Register: 'timeline.visibility.register'
+};
+
+const TimelinePropertyChangeDialog: React.FC<TimelinePropertyChangeDialogProps> = props => {
+  return (
+    <OperationDialog
+      title={'timeline.dialogChangeProperty.title'}
+      titleColor="default"
+      inputScheme={[
+        {
+          type: 'select',
+          label: 'timeline.dialogChangeProperty.visibility',
+          options: kTimelineVisibilities.map<OperationSelectInputInfoOption>(
+            v => ({
+              label: labelMap[v],
+              value: v
+            })
+          ),
+          initValue: props.oldInfo.visibility
+        },
+        {
+          type: 'text',
+          label: 'timeline.dialogChangeProperty.description',
+          initValue: props.oldInfo.description
+        }
+      ]}
+      open={props.open}
+      close={props.close}
+      onProcess={([newVisibility, newDescription]) => {
+        const req: PersonalTimelineChangePropertyRequest = {};
+        if (newVisibility !== props.oldInfo.visibility) {
+          req.visibility = newVisibility as TimelineVisibility;
+        }
+        if (newDescription !== props.oldInfo.description) {
+          req.description = newDescription as string;
+        }
+        return props.onProcess(req);
+      }}
+    />
+  );
+};
+
+export default TimelinePropertyChangeDialog;
diff --git a/Timeline/ClientApp/src/timeline/timeline-ui.sass b/Timeline/ClientApp/src/app/timeline/timeline-ui.sass
index b92327bd..c3616caf 100644
--- a/Timeline/ClientApp/src/timeline/timeline-ui.sass
+++ b/Timeline/ClientApp/src/app/timeline/timeline-ui.sass
@@ -1,18 +1,18 @@
-.info-card-container

-  .info-card-collapse-button

-    z-index: 1

-    position: relative

-

-  .info-card-content

-    width: 100%

-    position: absolute

-    transform-origin: right top

-    transition: transform 0.5s

-

-  &[data-collapse='true']

-    .info-card-content

-      transform: scale(0)

-

-.timeline-page-top-space

-  transition: height 0.5s

-

+.info-card-container
+  .info-card-collapse-button
+    z-index: 1
+    position: relative
+
+  .info-card-content
+    width: 100%
+    position: absolute
+    transform-origin: right top
+    transition: transform 0.5s
+
+  &[data-collapse='true']
+    .info-card-content
+      transform: scale(0)
+
+.timeline-page-top-space
+  transition: height 0.5s
+
diff --git a/Timeline/ClientApp/src/timeline/timeline.sass b/Timeline/ClientApp/src/app/timeline/timeline.sass
index 4f69295b..0b0e73b5 100644
--- a/Timeline/ClientApp/src/timeline/timeline.sass
+++ b/Timeline/ClientApp/src/app/timeline/timeline.sass
@@ -1,125 +1,125 @@
-@use 'sass:color'

-

-@keyframes timeline-enter-animation-mask-animation

-  to

-    height: 0

-

-.timeline-enter-animation-mask

-  position: absolute

-  left: 0

-  top: 0

-  height: calc(100% + 300px)

-  width: 100%

-  background: linear-gradient(to top, #ffffff00 0, 200px, white 300px, white)

-  z-index: 100

-  animation: timeline-enter-animation-mask-animation 5s 0.3s forwards // Give it 0.3s to load, which I think is reasonable

-

-$timeline-line-width: 7px

-$timeline-line-node-radius: 18px

-$timeline-line-color: $primary

-$timeline-line-color-current: #36c2e6

-

-@keyframes timeline-line-node-noncurrent

-  from

-    background: $timeline-line-color

-

-  to

-    background: color.adjust($timeline-line-color, $lightness: +10%)

-    box-shadow: 0 0 20px 3px color.adjust($timeline-line-color, $lightness: +10%, $alpha: -0.1)

-

-

-@keyframes timeline-line-node-current

-  from

-    background: $timeline-line-color-current

-

-  to

-    background: color.adjust($timeline-line-color-current, $lightness: +10%)

-    box-shadow: 0 0 20px 3px color.adjust($timeline-line-color-current, $lightness: +10%, $alpha: -0.1)

-

-.timeline-line

-  &-area

-    display: flex

-    flex-direction: column

-    align-items: center

-    flex: 0 0 auto

-    width: 60px

-

-  &-segment

-    width: $timeline-line-width

-    background: $timeline-line-color

-

-    &.start

-      height: 20px

-      flex: 0 0 auto

-

-    &.end

-      flex: 1 1 auto

-

-    &.current-end

-      height: 20px

-      flex: 0 0 auto

-      background: linear-gradient($timeline-line-color-current, transparent)

-

-  &-node-container

-    flex: 0 0 auto

-    position: relative

-    width: $timeline-line-node-radius

-    height: $timeline-line-node-radius

-

-  &-node

-    width: $timeline-line-node-radius + 2

-    height: $timeline-line-node-radius + 2

-    position: absolute

-    left: -1px

-    top: -1px

-    border-radius: 50%

-    box-sizing: border-box

-    z-index: 1

-    animation: 1s infinite alternate

-    animation-name: timeline-line-node-noncurrent

-

-

-.current

-  .timeline-line

-    &-segment

-

-      &.start

-        background: linear-gradient($timeline-line-color, $timeline-line-color-current)

-

-      &.end

-        background: $timeline-line-color-current

-

-    &-node

-      animation-name: timeline-line-node-current

-

-.timeline-pt-start

-  padding-top: 18px

-

-.timeline-item-delete-button

-  position: absolute

-  right: 0

-  bottom: 0

-

-.timeline-content

-  white-space: pre-line

-

-.timeline-content-image

-  max-width: 60%

-  max-height: 200px

-

-

-.timeline-post-edit-image

-  max-width: 100px

-  max-height: 100px

-

-.mask

-  background: change-color($color: white, $alpha: 0.8)

-  z-index: 100

-

-textarea.timeline-post-edit

-  @extend .border-primary

-  @extend .rounded

-

-  &:focus

-    outline: none

-    box-shadow: 0 0 5px 0 $primary

+@use 'sass:color'
+
+@keyframes timeline-enter-animation-mask-animation
+  to
+    height: 0
+
+.timeline-enter-animation-mask
+  position: absolute
+  left: 0
+  top: 0
+  height: calc(100% + 300px)
+  width: 100%
+  background: linear-gradient(to top, #ffffff00 0, 200px, white 300px, white)
+  z-index: 100
+  animation: timeline-enter-animation-mask-animation 5s 0.3s forwards // Give it 0.3s to load, which I think is reasonable
+
+$timeline-line-width: 7px
+$timeline-line-node-radius: 18px
+$timeline-line-color: $primary
+$timeline-line-color-current: #36c2e6
+
+@keyframes timeline-line-node-noncurrent
+  from
+    background: $timeline-line-color
+
+  to
+    background: color.adjust($timeline-line-color, $lightness: +10%)
+    box-shadow: 0 0 20px 3px color.adjust($timeline-line-color, $lightness: +10%, $alpha: -0.1)
+
+
+@keyframes timeline-line-node-current
+  from
+    background: $timeline-line-color-current
+
+  to
+    background: color.adjust($timeline-line-color-current, $lightness: +10%)
+    box-shadow: 0 0 20px 3px color.adjust($timeline-line-color-current, $lightness: +10%, $alpha: -0.1)
+
+.timeline-line
+  &-area
+    display: flex
+    flex-direction: column
+    align-items: center
+    flex: 0 0 auto
+    width: 60px
+
+  &-segment
+    width: $timeline-line-width
+    background: $timeline-line-color
+
+    &.start
+      height: 20px
+      flex: 0 0 auto
+
+    &.end
+      flex: 1 1 auto
+
+    &.current-end
+      height: 20px
+      flex: 0 0 auto
+      background: linear-gradient($timeline-line-color-current, transparent)
+
+  &-node-container
+    flex: 0 0 auto
+    position: relative
+    width: $timeline-line-node-radius
+    height: $timeline-line-node-radius
+
+  &-node
+    width: $timeline-line-node-radius + 2
+    height: $timeline-line-node-radius + 2
+    position: absolute
+    left: -1px
+    top: -1px
+    border-radius: 50%
+    box-sizing: border-box
+    z-index: 1
+    animation: 1s infinite alternate
+    animation-name: timeline-line-node-noncurrent
+
+
+.current
+  .timeline-line
+    &-segment
+
+      &.start
+        background: linear-gradient($timeline-line-color, $timeline-line-color-current)
+
+      &.end
+        background: $timeline-line-color-current
+
+    &-node
+      animation-name: timeline-line-node-current
+
+.timeline-pt-start
+  padding-top: 18px
+
+.timeline-item-delete-button
+  position: absolute
+  right: 0
+  bottom: 0
+
+.timeline-content
+  white-space: pre-line
+
+.timeline-content-image
+  max-width: 60%
+  max-height: 200px
+
+
+.timeline-post-edit-image
+  max-width: 100px
+  max-height: 100px
+
+.mask
+  background: change-color($color: white, $alpha: 0.8)
+  z-index: 100
+
+textarea.timeline-post-edit
+  @extend .border-primary
+  @extend .rounded
+
+  &:focus
+    outline: none
+    box-shadow: 0 0 5px 0 $primary
diff --git a/Timeline/ClientApp/src/app/tsconfig.json b/Timeline/ClientApp/src/app/tsconfig.json
new file mode 100644
index 00000000..14e6327f
--- /dev/null
+++ b/Timeline/ClientApp/src/app/tsconfig.json
@@ -0,0 +1,13 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ]
+  },
+  "include": [
+    "."
+  ]
+}
diff --git a/Timeline/ClientApp/src/type-utilities.ts b/Timeline/ClientApp/src/app/type-utilities.ts
index 307e5825..8df9bf0f 100644
--- a/Timeline/ClientApp/src/type-utilities.ts
+++ b/Timeline/ClientApp/src/app/type-utilities.ts
@@ -1 +1 @@
-export type ExcludeKey<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>;

+export type ExcludeKey<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>;
diff --git a/Timeline/ClientApp/src/typings.d.ts b/Timeline/ClientApp/src/app/typings.d.ts
index 521d38e4..426fb214 100644
--- a/Timeline/ClientApp/src/typings.d.ts
+++ b/Timeline/ClientApp/src/app/typings.d.ts
@@ -1,24 +1,24 @@
-declare module '*.png' {

-  const content: string;

-  export default content;

-}

-

-declare module '*.jpeg' {

-  const content: string;

-  export default content;

-}

-

-declare module '*.jpg' {

-  const content: string;

-  export default content;

-}

-

-declare module '*.gif' {

-  const content: string;

-  export default content;

-}

-

-declare module '*.svg' {

-  const content: string;

-  export default content;

-}

+declare module '*.png' {
+  const content: string;
+  export default content;
+}
+
+declare module '*.jpeg' {
+  const content: string;
+  export default content;
+}
+
+declare module '*.jpg' {
+  const content: string;
+  export default content;
+}
+
+declare module '*.gif' {
+  const content: string;
+  export default content;
+}
+
+declare module '*.svg' {
+  const content: string;
+  export default content;
+}
diff --git a/Timeline/ClientApp/src/user/ChangeAvatarDialog.tsx b/Timeline/ClientApp/src/app/user/ChangeAvatarDialog.tsx
index f7b25252..a0e56621 100644
--- a/Timeline/ClientApp/src/user/ChangeAvatarDialog.tsx
+++ b/Timeline/ClientApp/src/app/user/ChangeAvatarDialog.tsx
@@ -1,306 +1,306 @@
-import React, { useState, useEffect } from 'react';

-import { useTranslation } from 'react-i18next';

-import {

-  Modal,

-  ModalHeader,

-  Row,

-  Button,

-  ModalBody,

-  ModalFooter,

-} from 'reactstrap';

-import { AxiosError } from 'axios';

-

-import ImageCropper, { Clip, applyClipToImage } from '../common/ImageCropper';

-import { UiLogicError } from '../common';

-

-export interface ChangeAvatarDialogProps {

-  open: boolean;

-  close: () => void;

-  process: (blob: Blob) => Promise<void>;

-}

-

-const ChangeAvatarDialog: React.FC<ChangeAvatarDialogProps> = (props) => {

-  const { t } = useTranslation();

-

-  const [file, setFile] = React.useState<File | null>(null);

-  const [fileUrl, setFileUrl] = React.useState<string | null>(null);

-  const [clip, setClip] = React.useState<Clip | null>(null);

-  const [

-    cropImgElement,

-    setCropImgElement,

-  ] = React.useState<HTMLImageElement | null>(null);

-  const [resultBlob, setResultBlob] = React.useState<Blob | null>(null);

-  const [resultUrl, setResultUrl] = React.useState<string | null>(null);

-

-  const [state, setState] = React.useState<

-    | 'select'

-    | 'crop'

-    | 'processcrop'

-    | 'preview'

-    | 'uploading'

-    | 'success'

-    | 'error'

-  >('select');

-

-  const [message, setMessage] = useState<

-    string | { type: 'custom'; text: string } | null

-  >('userPage.dialogChangeAvatar.prompt.select');

-

-  const trueMessage =

-    message == null

-      ? null

-      : typeof message === 'string'

-      ? t(message)

-      : message.text;

-

-  const closeDialog = props.close;

-

-  const toggle = React.useCallback((): void => {

-    if (!(state === 'uploading')) {

-      closeDialog();

-    }

-  }, [state, closeDialog]);

-

-  useEffect(() => {

-    if (file != null) {

-      const url = URL.createObjectURL(file);

-      setClip(null);

-      setFileUrl(url);

-      setState('crop');

-      return () => {

-        URL.revokeObjectURL(url);

-      };

-    } else {

-      setFileUrl(null);

-      setState('select');

-    }

-  }, [file]);

-

-  React.useEffect(() => {

-    if (resultBlob != null) {

-      const url = URL.createObjectURL(resultBlob);

-      setResultUrl(url);

-      setState('preview');

-      return () => {

-        URL.revokeObjectURL(url);

-      };

-    } else {

-      setResultUrl(null);

-    }

-  }, [resultBlob]);

-

-  const onSelectFile = React.useCallback(

-    (e: React.ChangeEvent<HTMLInputElement>): void => {

-      const files = e.target.files;

-      if (files == null || files.length === 0) {

-        setFile(null);

-      } else {

-        setFile(files[0]);

-      }

-    },

-    []

-  );

-

-  const onCropNext = React.useCallback(() => {

-    if (

-      cropImgElement == null ||

-      clip == null ||

-      clip.width === 0 ||

-      file == null

-    ) {

-      throw new UiLogicError();

-    }

-

-    setState('processcrop');

-    void applyClipToImage(cropImgElement, clip, file.type).then((b) => {

-      setResultBlob(b);

-    });

-  }, [cropImgElement, clip, file]);

-

-  const onCropPrevious = React.useCallback(() => {

-    setFile(null);

-    setState('select');

-  }, []);

-

-  const onPreviewPrevious = React.useCallback(() => {

-    setResultBlob(null);

-    setState('crop');

-  }, []);

-

-  const process = props.process;

-

-  const upload = React.useCallback(() => {

-    if (resultBlob == null) {

-      throw new UiLogicError();

-    }

-

-    setState('uploading');

-    process(resultBlob).then(

-      () => {

-        setState('success');

-      },

-      (e: unknown) => {

-        setState('error');

-        setMessage({ type: 'custom', text: (e as AxiosError).message });

-      }

-    );

-  }, [resultBlob, process]);

-

-  const createPreviewRow = (): React.ReactElement => {

-    if (resultUrl == null) {

-      throw new UiLogicError();

-    }

-    return (

-      <Row className="justify-content-center">

-        <img

-          className="change-avatar-img"

-          src={resultUrl}

-          alt={t('userPage.dialogChangeAvatar.previewImgAlt')}

-        />

-      </Row>

-    );

-  };

-

-  return (

-    <Modal isOpen={props.open} toggle={toggle}>

-      <ModalHeader> {t('userPage.dialogChangeAvatar.title')}</ModalHeader>

-      {(() => {

-        if (state === 'select') {

-          return (

-            <>

-              <ModalBody className="container">

-                <Row>{t('userPage.dialogChangeAvatar.prompt.select')}</Row>

-                <Row>

-                  <input type="file" accept="image/*" onChange={onSelectFile} />

-                </Row>

-              </ModalBody>

-              <ModalFooter>

-                <Button color="secondary" onClick={toggle}>

-                  {t('operationDialog.cancel')}

-                </Button>

-              </ModalFooter>

-            </>

-          );

-        } else if (state === 'crop') {

-          if (fileUrl == null) {

-            throw new UiLogicError();

-          }

-          return (

-            <>

-              <ModalBody className="container">

-                <Row className="justify-content-center">

-                  <ImageCropper

-                    clip={clip}

-                    onChange={setClip}

-                    imageUrl={fileUrl}

-                    imageElementCallback={setCropImgElement}

-                  />

-                </Row>

-                <Row>{t('userPage.dialogChangeAvatar.prompt.crop')}</Row>

-              </ModalBody>

-              <ModalFooter>

-                <Button color="secondary" onClick={toggle}>

-                  {t('operationDialog.cancel')}

-                </Button>

-                <Button color="secondary" onClick={onCropPrevious}>

-                  {t('operationDialog.previousStep')}

-                </Button>

-                <Button

-                  color="primary"

-                  onClick={onCropNext}

-                  disabled={

-                    cropImgElement == null || clip == null || clip.width === 0

-                  }

-                >

-                  {t('operationDialog.nextStep')}

-                </Button>

-              </ModalFooter>

-            </>

-          );

-        } else if (state === 'processcrop') {

-          return (

-            <>

-              <ModalBody className="container">

-                <Row>

-                  {t('userPage.dialogChangeAvatar.prompt.processingCrop')}

-                </Row>

-              </ModalBody>

-              <ModalFooter>

-                <Button color="secondary" onClick={toggle}>

-                  {t('operationDialog.cancel')}

-                </Button>

-                <Button color="secondary" onClick={onPreviewPrevious}>

-                  {t('operationDialog.previousStep')}

-                </Button>

-              </ModalFooter>

-            </>

-          );

-        } else if (state === 'preview') {

-          return (

-            <>

-              <ModalBody className="container">

-                {createPreviewRow()}

-                <Row>{t('userPage.dialogChangeAvatar.prompt.preview')}</Row>

-              </ModalBody>

-              <ModalFooter>

-                <Button color="secondary" onClick={toggle}>

-                  {t('operationDialog.cancel')}

-                </Button>

-                <Button color="secondary" onClick={onPreviewPrevious}>

-                  {t('operationDialog.previousStep')}

-                </Button>

-                <Button color="primary" onClick={upload}>

-                  {t('userPage.dialogChangeAvatar.upload')}

-                </Button>

-              </ModalFooter>

-            </>

-          );

-        } else if (state === 'uploading') {

-          return (

-            <>

-              <ModalBody className="container">

-                {createPreviewRow()}

-                <Row>{t('userPage.dialogChangeAvatar.prompt.uploading')}</Row>

-              </ModalBody>

-              <ModalFooter></ModalFooter>

-            </>

-          );

-        } else if (state === 'success') {

-          return (

-            <>

-              <ModalBody className="container">

-                <Row className="p-4 text-success">

-                  {t('operationDialog.success')}

-                </Row>

-              </ModalBody>

-              <ModalFooter>

-                <Button color="success" onClick={toggle}>

-                  {t('operationDialog.ok')}

-                </Button>

-              </ModalFooter>

-            </>

-          );

-        } else {

-          return (

-            <>

-              <ModalBody className="container">

-                {createPreviewRow()}

-                <Row className="text-danger">{trueMessage}</Row>

-              </ModalBody>

-              <ModalFooter>

-                <Button color="secondary" onClick={toggle}>

-                  {t('operationDialog.cancel')}

-                </Button>

-                <Button color="primary" onClick={upload}>

-                  {t('operationDialog.retry')}

-                </Button>

-              </ModalFooter>

-            </>

-          );

-        }

-      })()}

-    </Modal>

-  );

-};

-

-export default ChangeAvatarDialog;

+import React, { useState, useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
+import {
+  Modal,
+  ModalHeader,
+  Row,
+  Button,
+  ModalBody,
+  ModalFooter,
+} from 'reactstrap';
+import { AxiosError } from 'axios';
+
+import ImageCropper, { Clip, applyClipToImage } from '../common/ImageCropper';
+import { UiLogicError } from '../common';
+
+export interface ChangeAvatarDialogProps {
+  open: boolean;
+  close: () => void;
+  process: (blob: Blob) => Promise<void>;
+}
+
+const ChangeAvatarDialog: React.FC<ChangeAvatarDialogProps> = (props) => {
+  const { t } = useTranslation();
+
+  const [file, setFile] = React.useState<File | null>(null);
+  const [fileUrl, setFileUrl] = React.useState<string | null>(null);
+  const [clip, setClip] = React.useState<Clip | null>(null);
+  const [
+    cropImgElement,
+    setCropImgElement,
+  ] = React.useState<HTMLImageElement | null>(null);
+  const [resultBlob, setResultBlob] = React.useState<Blob | null>(null);
+  const [resultUrl, setResultUrl] = React.useState<string | null>(null);
+
+  const [state, setState] = React.useState<
+    | 'select'
+    | 'crop'
+    | 'processcrop'
+    | 'preview'
+    | 'uploading'
+    | 'success'
+    | 'error'
+  >('select');
+
+  const [message, setMessage] = useState<
+    string | { type: 'custom'; text: string } | null
+  >('userPage.dialogChangeAvatar.prompt.select');
+
+  const trueMessage =
+    message == null
+      ? null
+      : typeof message === 'string'
+      ? t(message)
+      : message.text;
+
+  const closeDialog = props.close;
+
+  const toggle = React.useCallback((): void => {
+    if (!(state === 'uploading')) {
+      closeDialog();
+    }
+  }, [state, closeDialog]);
+
+  useEffect(() => {
+    if (file != null) {
+      const url = URL.createObjectURL(file);
+      setClip(null);
+      setFileUrl(url);
+      setState('crop');
+      return () => {
+        URL.revokeObjectURL(url);
+      };
+    } else {
+      setFileUrl(null);
+      setState('select');
+    }
+  }, [file]);
+
+  React.useEffect(() => {
+    if (resultBlob != null) {
+      const url = URL.createObjectURL(resultBlob);
+      setResultUrl(url);
+      setState('preview');
+      return () => {
+        URL.revokeObjectURL(url);
+      };
+    } else {
+      setResultUrl(null);
+    }
+  }, [resultBlob]);
+
+  const onSelectFile = React.useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>): void => {
+      const files = e.target.files;
+      if (files == null || files.length === 0) {
+        setFile(null);
+      } else {
+        setFile(files[0]);
+      }
+    },
+    []
+  );
+
+  const onCropNext = React.useCallback(() => {
+    if (
+      cropImgElement == null ||
+      clip == null ||
+      clip.width === 0 ||
+      file == null
+    ) {
+      throw new UiLogicError();
+    }
+
+    setState('processcrop');
+    void applyClipToImage(cropImgElement, clip, file.type).then((b) => {
+      setResultBlob(b);
+    });
+  }, [cropImgElement, clip, file]);
+
+  const onCropPrevious = React.useCallback(() => {
+    setFile(null);
+    setState('select');
+  }, []);
+
+  const onPreviewPrevious = React.useCallback(() => {
+    setResultBlob(null);
+    setState('crop');
+  }, []);
+
+  const process = props.process;
+
+  const upload = React.useCallback(() => {
+    if (resultBlob == null) {
+      throw new UiLogicError();
+    }
+
+    setState('uploading');
+    process(resultBlob).then(
+      () => {
+        setState('success');
+      },
+      (e: unknown) => {
+        setState('error');
+        setMessage({ type: 'custom', text: (e as AxiosError).message });
+      }
+    );
+  }, [resultBlob, process]);
+
+  const createPreviewRow = (): React.ReactElement => {
+    if (resultUrl == null) {
+      throw new UiLogicError();
+    }
+    return (
+      <Row className="justify-content-center">
+        <img
+          className="change-avatar-img"
+          src={resultUrl}
+          alt={t('userPage.dialogChangeAvatar.previewImgAlt')}
+        />
+      </Row>
+    );
+  };
+
+  return (
+    <Modal isOpen={props.open} toggle={toggle}>
+      <ModalHeader> {t('userPage.dialogChangeAvatar.title')}</ModalHeader>
+      {(() => {
+        if (state === 'select') {
+          return (
+            <>
+              <ModalBody className="container">
+                <Row>{t('userPage.dialogChangeAvatar.prompt.select')}</Row>
+                <Row>
+                  <input type="file" accept="image/*" onChange={onSelectFile} />
+                </Row>
+              </ModalBody>
+              <ModalFooter>
+                <Button color="secondary" onClick={toggle}>
+                  {t('operationDialog.cancel')}
+                </Button>
+              </ModalFooter>
+            </>
+          );
+        } else if (state === 'crop') {
+          if (fileUrl == null) {
+            throw new UiLogicError();
+          }
+          return (
+            <>
+              <ModalBody className="container">
+                <Row className="justify-content-center">
+                  <ImageCropper
+                    clip={clip}
+                    onChange={setClip}
+                    imageUrl={fileUrl}
+                    imageElementCallback={setCropImgElement}
+                  />
+                </Row>
+                <Row>{t('userPage.dialogChangeAvatar.prompt.crop')}</Row>
+              </ModalBody>
+              <ModalFooter>
+                <Button color="secondary" onClick={toggle}>
+                  {t('operationDialog.cancel')}
+                </Button>
+                <Button color="secondary" onClick={onCropPrevious}>
+                  {t('operationDialog.previousStep')}
+                </Button>
+                <Button
+                  color="primary"
+                  onClick={onCropNext}
+                  disabled={
+                    cropImgElement == null || clip == null || clip.width === 0
+                  }
+                >
+                  {t('operationDialog.nextStep')}
+                </Button>
+              </ModalFooter>
+            </>
+          );
+        } else if (state === 'processcrop') {
+          return (
+            <>
+              <ModalBody className="container">
+                <Row>
+                  {t('userPage.dialogChangeAvatar.prompt.processingCrop')}
+                </Row>
+              </ModalBody>
+              <ModalFooter>
+                <Button color="secondary" onClick={toggle}>
+                  {t('operationDialog.cancel')}
+                </Button>
+                <Button color="secondary" onClick={onPreviewPrevious}>
+                  {t('operationDialog.previousStep')}
+                </Button>
+              </ModalFooter>
+            </>
+          );
+        } else if (state === 'preview') {
+          return (
+            <>
+              <ModalBody className="container">
+                {createPreviewRow()}
+                <Row>{t('userPage.dialogChangeAvatar.prompt.preview')}</Row>
+              </ModalBody>
+              <ModalFooter>
+                <Button color="secondary" onClick={toggle}>
+                  {t('operationDialog.cancel')}
+                </Button>
+                <Button color="secondary" onClick={onPreviewPrevious}>
+                  {t('operationDialog.previousStep')}
+                </Button>
+                <Button color="primary" onClick={upload}>
+                  {t('userPage.dialogChangeAvatar.upload')}
+                </Button>
+              </ModalFooter>
+            </>
+          );
+        } else if (state === 'uploading') {
+          return (
+            <>
+              <ModalBody className="container">
+                {createPreviewRow()}
+                <Row>{t('userPage.dialogChangeAvatar.prompt.uploading')}</Row>
+              </ModalBody>
+              <ModalFooter></ModalFooter>
+            </>
+          );
+        } else if (state === 'success') {
+          return (
+            <>
+              <ModalBody className="container">
+                <Row className="p-4 text-success">
+                  {t('operationDialog.success')}
+                </Row>
+              </ModalBody>
+              <ModalFooter>
+                <Button color="success" onClick={toggle}>
+                  {t('operationDialog.ok')}
+                </Button>
+              </ModalFooter>
+            </>
+          );
+        } else {
+          return (
+            <>
+              <ModalBody className="container">
+                {createPreviewRow()}
+                <Row className="text-danger">{trueMessage}</Row>
+              </ModalBody>
+              <ModalFooter>
+                <Button color="secondary" onClick={toggle}>
+                  {t('operationDialog.cancel')}
+                </Button>
+                <Button color="primary" onClick={upload}>
+                  {t('operationDialog.retry')}
+                </Button>
+              </ModalFooter>
+            </>
+          );
+        }
+      })()}
+    </Modal>
+  );
+};
+
+export default ChangeAvatarDialog;
diff --git a/Timeline/ClientApp/src/user/ChangeNicknameDialog.tsx b/Timeline/ClientApp/src/app/user/ChangeNicknameDialog.tsx
index 393d88f6..dbc216e1 100644
--- a/Timeline/ClientApp/src/user/ChangeNicknameDialog.tsx
+++ b/Timeline/ClientApp/src/app/user/ChangeNicknameDialog.tsx
@@ -1,28 +1,28 @@
-import React from 'react';

-

-import OperationDialog from '../common/OperationDialog';

-

-export interface ChangeNicknameDialogProps {

-  open: boolean;

-  close: () => void;

-  onProcess: (newNickname: string) => Promise<void>;

-}

-

-const ChangeNicknameDialog: React.FC<ChangeNicknameDialogProps> = props => {

-  return (

-    <OperationDialog

-      open={props.open}

-      title="userPage.dialogChangeNickname.title"

-      titleColor="default"

-      inputScheme={[

-        { type: 'text', label: 'userPage.dialogChangeNickname.inputLabel' }

-      ]}

-      onProcess={([newNickname]) => {

-        return props.onProcess(newNickname as string);

-      }}

-      close={props.close}

-    />

-  );

-};

-

-export default ChangeNicknameDialog;

+import React from 'react';
+
+import OperationDialog from '../common/OperationDialog';
+
+export interface ChangeNicknameDialogProps {
+  open: boolean;
+  close: () => void;
+  onProcess: (newNickname: string) => Promise<void>;
+}
+
+const ChangeNicknameDialog: React.FC<ChangeNicknameDialogProps> = props => {
+  return (
+    <OperationDialog
+      open={props.open}
+      title="userPage.dialogChangeNickname.title"
+      titleColor="default"
+      inputScheme={[
+        { type: 'text', label: 'userPage.dialogChangeNickname.inputLabel' }
+      ]}
+      onProcess={([newNickname]) => {
+        return props.onProcess(newNickname as string);
+      }}
+      close={props.close}
+    />
+  );
+};
+
+export default ChangeNicknameDialog;
diff --git a/Timeline/ClientApp/src/user/Login.tsx b/Timeline/ClientApp/src/app/user/Login.tsx
index 24cd58d0..f8b3f0e7 100644
--- a/Timeline/ClientApp/src/user/Login.tsx
+++ b/Timeline/ClientApp/src/app/user/Login.tsx
@@ -1,147 +1,147 @@
-import React, { Fragment, useState, useEffect } from 'react';

-import { useHistory } from 'react-router';

-import { useTranslation } from 'react-i18next';

-import { AxiosError } from 'axios';

-

-import AppBar from '../common/AppBar';

-

-import { userLogin, useUser } from '../data/user';

-import {

-  Label,

-  FormGroup,

-  Input,

-  Form,

-  FormFeedback,

-  Spinner,

-  Button,

-} from 'reactstrap';

-

-const Login: React.FC = (_) => {

-  const { t } = useTranslation();

-  const history = useHistory();

-  const [username, setUsername] = useState<string>('');

-  const [usernameDirty, setUsernameDirty] = useState<boolean>(false);

-  const [password, setPassword] = useState<string>('');

-  const [passwordDirty, setPasswordDirty] = useState<boolean>(false);

-  const [rememberMe, setRememberMe] = useState<boolean>(true);

-  const [process, setProcess] = useState<boolean>(false);

-  const [error, setError] = useState<string | null>(null);

-

-  const user = useUser();

-

-  useEffect(() => {

-    if (user != null) {

-      const id = setTimeout(() => history.push('/'), 3000);

-      return () => {

-        clearTimeout(id);

-      };

-    }

-  }, [history, user]);

-

-  if (user != null) {

-    return (

-      <>

-        <AppBar />

-        <p className="mt-appbar">{t('login.alreadyLogin')}</p>

-      </>

-    );

-  }

-

-  function onSubmit(event: React.SyntheticEvent): void {

-    if (username === '' || password === '') {

-      setUsernameDirty(true);

-      setPasswordDirty(true);

-      return;

-    }

-

-    setProcess(true);

-    userLogin(

-      {

-        username: username,

-        password: password,

-      },

-      rememberMe

-    ).then(

-      (_) => {

-        if (history.length === 0) {

-          history.push('/');

-        } else {

-          history.goBack();

-        }

-      },

-      (e: AxiosError | Error) => {

-        setProcess(false);

-        setError(e.message);

-      }

-    );

-    event.preventDefault();

-  }

-

-  return (

-    <Fragment>

-      <AppBar />

-      <div className="container login-container mt-appbar">

-        <h1>{t('welcome')}</h1>

-        <Form>

-          <FormGroup>

-            <Label for="username">{t('user.username')}</Label>

-            <Input

-              id="username"

-              disabled={process}

-              onChange={(e) => {

-                setUsername(e.target.value);

-                setUsernameDirty(true);

-              }}

-              value={username}

-              invalid={usernameDirty && username === ''}

-            />

-            {usernameDirty && username === '' && (

-              <FormFeedback>{t('login.emptyUsername')}</FormFeedback>

-            )}

-          </FormGroup>

-          <FormGroup>

-            <Label for="password">{t('user.password')}</Label>

-            <Input

-              id="password"

-              type="password"

-              disabled={process}

-              onChange={(e) => {

-                setPassword(e.target.value);

-                setPasswordDirty(true);

-              }}

-              value={password}

-              invalid={passwordDirty && password === ''}

-            />

-            {passwordDirty && password === '' && (

-              <FormFeedback>{t('login.emptyPassword')}</FormFeedback>

-            )}

-          </FormGroup>

-          <FormGroup check>

-            <Input

-              id="remember-me"

-              type="checkbox"

-              checked={rememberMe}

-              onChange={(e) => {

-                const v = (e.target as HTMLInputElement).checked;

-                setRememberMe(v);

-              }}

-            />

-            <Label for="remember-me">{t('user.rememberMe')}</Label>

-          </FormGroup>

-          {error ? <p className="text-error">{t(error)}</p> : null}

-          <div>

-            {process ? (

-              <Spinner />

-            ) : (

-              <Button color="primary" onClick={onSubmit}>

-                {t('user.login')}

-              </Button>

-            )}

-          </div>

-        </Form>

-      </div>

-    </Fragment>

-  );

-};

-

-export default Login;

+import React, { Fragment, useState, useEffect } from 'react';
+import { useHistory } from 'react-router';
+import { useTranslation } from 'react-i18next';
+import { AxiosError } from 'axios';
+
+import AppBar from '../common/AppBar';
+
+import { userLogin, useUser } from '../data/user';
+import {
+  Label,
+  FormGroup,
+  Input,
+  Form,
+  FormFeedback,
+  Spinner,
+  Button,
+} from 'reactstrap';
+
+const Login: React.FC = (_) => {
+  const { t } = useTranslation();
+  const history = useHistory();
+  const [username, setUsername] = useState<string>('');
+  const [usernameDirty, setUsernameDirty] = useState<boolean>(false);
+  const [password, setPassword] = useState<string>('');
+  const [passwordDirty, setPasswordDirty] = useState<boolean>(false);
+  const [rememberMe, setRememberMe] = useState<boolean>(true);
+  const [process, setProcess] = useState<boolean>(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const user = useUser();
+
+  useEffect(() => {
+    if (user != null) {
+      const id = setTimeout(() => history.push('/'), 3000);
+      return () => {
+        clearTimeout(id);
+      };
+    }
+  }, [history, user]);
+
+  if (user != null) {
+    return (
+      <>
+        <AppBar />
+        <p className="mt-appbar">{t('login.alreadyLogin')}</p>
+      </>
+    );
+  }
+
+  function onSubmit(event: React.SyntheticEvent): void {
+    if (username === '' || password === '') {
+      setUsernameDirty(true);
+      setPasswordDirty(true);
+      return;
+    }
+
+    setProcess(true);
+    userLogin(
+      {
+        username: username,
+        password: password,
+      },
+      rememberMe
+    ).then(
+      (_) => {
+        if (history.length === 0) {
+          history.push('/');
+        } else {
+          history.goBack();
+        }
+      },
+      (e: AxiosError | Error) => {
+        setProcess(false);
+        setError(e.message);
+      }
+    );
+    event.preventDefault();
+  }
+
+  return (
+    <Fragment>
+      <AppBar />
+      <div className="container login-container mt-appbar">
+        <h1>{t('welcome')}</h1>
+        <Form>
+          <FormGroup>
+            <Label for="username">{t('user.username')}</Label>
+            <Input
+              id="username"
+              disabled={process}
+              onChange={(e) => {
+                setUsername(e.target.value);
+                setUsernameDirty(true);
+              }}
+              value={username}
+              invalid={usernameDirty && username === ''}
+            />
+            {usernameDirty && username === '' && (
+              <FormFeedback>{t('login.emptyUsername')}</FormFeedback>
+            )}
+          </FormGroup>
+          <FormGroup>
+            <Label for="password">{t('user.password')}</Label>
+            <Input
+              id="password"
+              type="password"
+              disabled={process}
+              onChange={(e) => {
+                setPassword(e.target.value);
+                setPasswordDirty(true);
+              }}
+              value={password}
+              invalid={passwordDirty && password === ''}
+            />
+            {passwordDirty && password === '' && (
+              <FormFeedback>{t('login.emptyPassword')}</FormFeedback>
+            )}
+          </FormGroup>
+          <FormGroup check>
+            <Input
+              id="remember-me"
+              type="checkbox"
+              checked={rememberMe}
+              onChange={(e) => {
+                const v = (e.target as HTMLInputElement).checked;
+                setRememberMe(v);
+              }}
+            />
+            <Label for="remember-me">{t('user.rememberMe')}</Label>
+          </FormGroup>
+          {error ? <p className="text-error">{t(error)}</p> : null}
+          <div>
+            {process ? (
+              <Spinner />
+            ) : (
+              <Button color="primary" onClick={onSubmit}>
+                {t('user.login')}
+              </Button>
+            )}
+          </div>
+        </Form>
+      </div>
+    </Fragment>
+  );
+};
+
+export default Login;
diff --git a/Timeline/ClientApp/src/user/User.tsx b/Timeline/ClientApp/src/app/user/User.tsx
index a281be42..0e1977b1 100644
--- a/Timeline/ClientApp/src/user/User.tsx
+++ b/Timeline/ClientApp/src/app/user/User.tsx
@@ -1,79 +1,79 @@
-import React, { useState } from 'react';

-import { useParams } from 'react-router';

-

-import { useUser } from '../data/user';

-import { changeNickname, changeAvatar } from './api';

-import { personalTimelineService } from '../data/timeline';

-

-import UserPage from './UserPage';

-import ChangeNicknameDialog from './ChangeNicknameDialog';

-import ChangeAvatarDialog from './ChangeAvatarDialog';

-import TimelinePageTemplate from '../timeline/TimelinePageTemplate';

-import { PersonalTimelineManageItem } from './UserInfoCard';

-import { UiLogicError } from '../common';

-

-const User: React.FC = (_) => {

-  const { username } = useParams<{ username: string }>();

-

-  const user = useUser();

-

-  const [dialog, setDialog] = useState<null | PersonalTimelineManageItem>(null);

-  const [dataKey, setDataKey] = useState<number>(0);

-

-  let dialogElement: React.ReactElement | undefined;

-

-  const closeDialogHandler = (): void => {

-    setDialog(null);

-  };

-

-  if (dialog === 'nickname') {

-    if (user == null) {

-      throw new UiLogicError('Change nickname without login.');

-    }

-

-    dialogElement = (

-      <ChangeNicknameDialog

-        open

-        close={closeDialogHandler}

-        onProcess={(newNickname) => {

-          const p = changeNickname(user.token, username, newNickname);

-          return p.then((_) => {

-            setDataKey(dataKey + 1);

-          });

-        }}

-      />

-    );

-  } else if (dialog === 'avatar') {

-    if (user == null) {

-      throw new UiLogicError('Change avatar without login.');

-    }

-

-    dialogElement = (

-      <ChangeAvatarDialog

-        open

-        close={closeDialogHandler}

-        process={(file) => changeAvatar(user.token, username, file, file.type)}

-      />

-    );

-  }

-

-  const onManage = React.useCallback((item: PersonalTimelineManageItem) => {

-    setDialog(item);

-  }, []);

-

-  return (

-    <>

-      <TimelinePageTemplate

-        dataVersion={dataKey}

-        name={username}

-        UiComponent={UserPage}

-        onManage={onManage}

-        service={personalTimelineService}

-        notFoundI18nKey="timeline.userNotExist"

-      />

-      {dialogElement}

-    </>

-  );

-};

-

-export default User;

+import React, { useState } from 'react';
+import { useParams } from 'react-router';
+
+import { useUser } from '../data/user';
+import { changeNickname, changeAvatar } from './api';
+import { personalTimelineService } from '../data/timeline';
+
+import UserPage from './UserPage';
+import ChangeNicknameDialog from './ChangeNicknameDialog';
+import ChangeAvatarDialog from './ChangeAvatarDialog';
+import TimelinePageTemplate from '../timeline/TimelinePageTemplate';
+import { PersonalTimelineManageItem } from './UserInfoCard';
+import { UiLogicError } from '../common';
+
+const User: React.FC = (_) => {
+  const { username } = useParams<{ username: string }>();
+
+  const user = useUser();
+
+  const [dialog, setDialog] = useState<null | PersonalTimelineManageItem>(null);
+  const [dataKey, setDataKey] = useState<number>(0);
+
+  let dialogElement: React.ReactElement | undefined;
+
+  const closeDialogHandler = (): void => {
+    setDialog(null);
+  };
+
+  if (dialog === 'nickname') {
+    if (user == null) {
+      throw new UiLogicError('Change nickname without login.');
+    }
+
+    dialogElement = (
+      <ChangeNicknameDialog
+        open
+        close={closeDialogHandler}
+        onProcess={(newNickname) => {
+          const p = changeNickname(user.token, username, newNickname);
+          return p.then((_) => {
+            setDataKey(dataKey + 1);
+          });
+        }}
+      />
+    );
+  } else if (dialog === 'avatar') {
+    if (user == null) {
+      throw new UiLogicError('Change avatar without login.');
+    }
+
+    dialogElement = (
+      <ChangeAvatarDialog
+        open
+        close={closeDialogHandler}
+        process={(file) => changeAvatar(user.token, username, file, file.type)}
+      />
+    );
+  }
+
+  const onManage = React.useCallback((item: PersonalTimelineManageItem) => {
+    setDialog(item);
+  }, []);
+
+  return (
+    <>
+      <TimelinePageTemplate
+        dataVersion={dataKey}
+        name={username}
+        UiComponent={UserPage}
+        onManage={onManage}
+        service={personalTimelineService}
+        notFoundI18nKey="timeline.userNotExist"
+      />
+      {dialogElement}
+    </>
+  );
+};
+
+export default User;
diff --git a/Timeline/ClientApp/src/user/UserInfoCard.tsx b/Timeline/ClientApp/src/app/user/UserInfoCard.tsx
index 3f812a8b..b4924a5d 100644
--- a/Timeline/ClientApp/src/user/UserInfoCard.tsx
+++ b/Timeline/ClientApp/src/app/user/UserInfoCard.tsx
@@ -1,116 +1,116 @@
-import React from 'react';

-import clsx from 'clsx';

-import {

-  Dropdown,

-  DropdownToggle,

-  DropdownMenu,

-  DropdownItem,

-  Button,

-} from 'reactstrap';

-import { useTranslation } from 'react-i18next';

-import { fromEvent } from 'rxjs';

-

-import {

-  TimelineInfo,

-  timelineVisibilityTooltipTranslationMap,

-} from '../data/timeline';

-import { useAvatarVersion, useAvatarUrlWithGivenVersion } from './api';

-import { useUser } from '../data/user';

-

-import { TimelineCardComponentProps } from '../timeline/TimelinePageTemplateUI';

-

-export type PersonalTimelineManageItem = 'avatar' | 'nickname';

-

-export type UserInfoCardProps = TimelineCardComponentProps<

-  TimelineInfo,

-  PersonalTimelineManageItem

->;

-

-const UserInfoCard: React.FC<UserInfoCardProps> = (props) => {

-  const { onHeight, onManage } = props;

-  const { t } = useTranslation();

-  const user = useUser();

-

-  const avatarVersion = useAvatarVersion();

-  const avatarUrl = useAvatarUrlWithGivenVersion(

-    user != null && user.username === props.timeline.owner.username

-      ? avatarVersion

-      : undefined,

-    props.timeline.owner._links.avatar

-  );

-

-  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion

-  const containerRef = React.useRef<HTMLDivElement>(null!);

-

-  const notifyHeight = React.useCallback((): void => {

-    if (onHeight) {

-      onHeight(containerRef.current.getBoundingClientRect().height);

-    }

-  }, [onHeight]);

-

-  React.useEffect(() => {

-    const subscription = fromEvent(window, 'resize').subscribe(notifyHeight);

-    return () => subscription.unsubscribe();

-  });

-

-  const [manageDropdownOpen, setManageDropdownOpen] = React.useState<boolean>(

-    false

-  );

-  const toggleManageDropdown = React.useCallback(

-    (): void => setManageDropdownOpen((old) => !old),

-    []

-  );

-

-  return (

-    <div

-      ref={containerRef}

-      className={clsx('rounded border bg-light p-2', props.className)}

-      onTransitionEnd={notifyHeight}

-    >

-      <img

-        src={avatarUrl}

-        onLoad={notifyHeight}

-        className="avatar large mr-2 mb-2 rounded-circle float-left"

-      />

-      <div>

-        {props.timeline.owner.nickname}

-        <small className="ml-3 text-secondary">

-          @{props.timeline.owner.username}

-        </small>

-      </div>

-      <p className="mb-0">{props.timeline.description}</p>

-      <small className="mt-1 d-block">

-        {t(timelineVisibilityTooltipTranslationMap[props.timeline.visibility])}

-      </small>

-      <div className="text-right mt-2">

-        {onManage != null ? (

-          <Dropdown isOpen={manageDropdownOpen} toggle={toggleManageDropdown}>

-            <DropdownToggle outline color="primary">

-              {t('timeline.manage')}

-            </DropdownToggle>

-            <DropdownMenu>

-              <DropdownItem onClick={() => onManage('nickname')}>

-                {t('timeline.manageItem.nickname')}

-              </DropdownItem>

-              <DropdownItem onClick={() => onManage('avatar')}>

-                {t('timeline.manageItem.avatar')}

-              </DropdownItem>

-              <DropdownItem onClick={() => onManage('property')}>

-                {t('timeline.manageItem.property')}

-              </DropdownItem>

-              <DropdownItem onClick={props.onMember}>

-                {t('timeline.manageItem.member')}

-              </DropdownItem>

-            </DropdownMenu>

-          </Dropdown>

-        ) : (

-          <Button color="primary" outline onClick={props.onMember}>

-            {t('timeline.memberButton')}

-          </Button>

-        )}

-      </div>

-    </div>

-  );

-};

-

-export default UserInfoCard;

+import React from 'react';
+import clsx from 'clsx';
+import {
+  Dropdown,
+  DropdownToggle,
+  DropdownMenu,
+  DropdownItem,
+  Button,
+} from 'reactstrap';
+import { useTranslation } from 'react-i18next';
+import { fromEvent } from 'rxjs';
+
+import {
+  TimelineInfo,
+  timelineVisibilityTooltipTranslationMap,
+} from '../data/timeline';
+import { useAvatarVersion, useAvatarUrlWithGivenVersion } from './api';
+import { useUser } from '../data/user';
+
+import { TimelineCardComponentProps } from '../timeline/TimelinePageTemplateUI';
+
+export type PersonalTimelineManageItem = 'avatar' | 'nickname';
+
+export type UserInfoCardProps = TimelineCardComponentProps<
+  TimelineInfo,
+  PersonalTimelineManageItem
+>;
+
+const UserInfoCard: React.FC<UserInfoCardProps> = (props) => {
+  const { onHeight, onManage } = props;
+  const { t } = useTranslation();
+  const user = useUser();
+
+  const avatarVersion = useAvatarVersion();
+  const avatarUrl = useAvatarUrlWithGivenVersion(
+    user != null && user.username === props.timeline.owner.username
+      ? avatarVersion
+      : undefined,
+    props.timeline.owner._links.avatar
+  );
+
+  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+  const containerRef = React.useRef<HTMLDivElement>(null!);
+
+  const notifyHeight = React.useCallback((): void => {
+    if (onHeight) {
+      onHeight(containerRef.current.getBoundingClientRect().height);
+    }
+  }, [onHeight]);
+
+  React.useEffect(() => {
+    const subscription = fromEvent(window, 'resize').subscribe(notifyHeight);
+    return () => subscription.unsubscribe();
+  });
+
+  const [manageDropdownOpen, setManageDropdownOpen] = React.useState<boolean>(
+    false
+  );
+  const toggleManageDropdown = React.useCallback(
+    (): void => setManageDropdownOpen((old) => !old),
+    []
+  );
+
+  return (
+    <div
+      ref={containerRef}
+      className={clsx('rounded border bg-light p-2', props.className)}
+      onTransitionEnd={notifyHeight}
+    >
+      <img
+        src={avatarUrl}
+        onLoad={notifyHeight}
+        className="avatar large mr-2 mb-2 rounded-circle float-left"
+      />
+      <div>
+        {props.timeline.owner.nickname}
+        <small className="ml-3 text-secondary">
+          @{props.timeline.owner.username}
+        </small>
+      </div>
+      <p className="mb-0">{props.timeline.description}</p>
+      <small className="mt-1 d-block">
+        {t(timelineVisibilityTooltipTranslationMap[props.timeline.visibility])}
+      </small>
+      <div className="text-right mt-2">
+        {onManage != null ? (
+          <Dropdown isOpen={manageDropdownOpen} toggle={toggleManageDropdown}>
+            <DropdownToggle outline color="primary">
+              {t('timeline.manage')}
+            </DropdownToggle>
+            <DropdownMenu>
+              <DropdownItem onClick={() => onManage('nickname')}>
+                {t('timeline.manageItem.nickname')}
+              </DropdownItem>
+              <DropdownItem onClick={() => onManage('avatar')}>
+                {t('timeline.manageItem.avatar')}
+              </DropdownItem>
+              <DropdownItem onClick={() => onManage('property')}>
+                {t('timeline.manageItem.property')}
+              </DropdownItem>
+              <DropdownItem onClick={props.onMember}>
+                {t('timeline.manageItem.member')}
+              </DropdownItem>
+            </DropdownMenu>
+          </Dropdown>
+        ) : (
+          <Button color="primary" outline onClick={props.onMember}>
+            {t('timeline.memberButton')}
+          </Button>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default UserInfoCard;
diff --git a/Timeline/ClientApp/src/user/UserPage.tsx b/Timeline/ClientApp/src/app/user/UserPage.tsx
index 723415c7..98fd06f8 100644
--- a/Timeline/ClientApp/src/user/UserPage.tsx
+++ b/Timeline/ClientApp/src/app/user/UserPage.tsx
@@ -1,20 +1,20 @@
-import React from 'react';

-

-import { ExcludeKey } from '../type-utilities';

-import { TimelineInfo } from '../data/timeline';

-

-import TimelinePageTemplateUI, {

-  TimelinePageTemplateUIProps

-} from '../timeline/TimelinePageTemplateUI';

-import UserInfoCard, { PersonalTimelineManageItem } from './UserInfoCard';

-

-export type UserPageProps = ExcludeKey<

-  TimelinePageTemplateUIProps<TimelineInfo, PersonalTimelineManageItem>,

-  'CardComponent'

->;

-

-const UserPage: React.FC<UserPageProps> = props => {

-  return <TimelinePageTemplateUI {...props} CardComponent={UserInfoCard} />;

-};

-

-export default UserPage;

+import React from 'react';
+
+import { ExcludeKey } from '../type-utilities';
+import { TimelineInfo } from '../data/timeline';
+
+import TimelinePageTemplateUI, {
+  TimelinePageTemplateUIProps
+} from '../timeline/TimelinePageTemplateUI';
+import UserInfoCard, { PersonalTimelineManageItem } from './UserInfoCard';
+
+export type UserPageProps = ExcludeKey<
+  TimelinePageTemplateUIProps<TimelineInfo, PersonalTimelineManageItem>,
+  'CardComponent'
+>;
+
+const UserPage: React.FC<UserPageProps> = props => {
+  return <TimelinePageTemplateUI {...props} CardComponent={UserInfoCard} />;
+};
+
+export default UserPage;
diff --git a/Timeline/ClientApp/src/user/api.ts b/Timeline/ClientApp/src/app/user/api.ts
index 583370e2..a9855eb0 100644
--- a/Timeline/ClientApp/src/user/api.ts
+++ b/Timeline/ClientApp/src/app/user/api.ts
@@ -1,79 +1,79 @@
-import React from 'react';

-import axios from 'axios';

-import { BehaviorSubject, Observable } from 'rxjs';

-

-import { apiBaseUrl } from '../config';

-import { User } from '../data/user';

-import { updateQueryString } from '../helper';

-

-export function changeNickname(

-  token: string,

-  username: string,

-  newNickname: string

-): Promise<User> {

-  return axios

-    .patch<User>(`${apiBaseUrl}/users/${username}?token=${token}`, {

-      nickname: newNickname,

-    })

-    .then((res) => res.data);

-}

-

-const avatarVersionSubject = new BehaviorSubject<number | undefined>(undefined);

-

-export function changeAvatar(

-  token: string,

-  username: string,

-  data: Blob,

-  type: string

-): Promise<void> {

-  return axios

-    .put(`${apiBaseUrl}/users/${username}/avatar?token=${token}`, data, {

-      headers: {

-        'Content-Type': type,

-      },

-    })

-    .then(() => {

-      avatarVersionSubject.next((avatarVersionSubject.value ?? 0) + 1);

-    });

-}

-

-export const avatarVersion$: Observable<

-  number | undefined

-> = avatarVersionSubject;

-

-export function useAvatarVersion(): number | undefined {

-  const [version, setVersion] = React.useState<number | undefined>();

-  React.useEffect(() => {

-    const subscription = avatarVersion$.subscribe((v) => setVersion(v));

-    return () => subscription.unsubscribe();

-  }, []);

-  return version;

-}

-

-export function useOptionalVersionedAvatarUrl(

-  url: string | undefined

-): string | undefined {

-  const avatarVersion = useAvatarVersion();

-  return React.useMemo(

-    () =>

-      url == null

-        ? undefined

-        : updateQueryString(

-            'v',

-            avatarVersion == null ? null : avatarVersion.toString(),

-            url

-          ),

-    [avatarVersion, url]

-  );

-}

-

-export function useAvatarUrlWithGivenVersion(

-  version: number | null | undefined,

-  url: string

-): string {

-  return React.useMemo(

-    () =>

-      updateQueryString('v', version == null ? null : version.toString(), url),

-    [version, url]

-  );

-}

+import React from 'react';
+import axios from 'axios';
+import { BehaviorSubject, Observable } from 'rxjs';
+
+import { apiBaseUrl } from '../config';
+import { User } from '../data/user';
+import { updateQueryString } from '../helper';
+
+export function changeNickname(
+  token: string,
+  username: string,
+  newNickname: string
+): Promise<User> {
+  return axios
+    .patch<User>(`${apiBaseUrl}/users/${username}?token=${token}`, {
+      nickname: newNickname,
+    })
+    .then((res) => res.data);
+}
+
+const avatarVersionSubject = new BehaviorSubject<number | undefined>(undefined);
+
+export function changeAvatar(
+  token: string,
+  username: string,
+  data: Blob,
+  type: string
+): Promise<void> {
+  return axios
+    .put(`${apiBaseUrl}/users/${username}/avatar?token=${token}`, data, {
+      headers: {
+        'Content-Type': type,
+      },
+    })
+    .then(() => {
+      avatarVersionSubject.next((avatarVersionSubject.value ?? 0) + 1);
+    });
+}
+
+export const avatarVersion$: Observable<
+  number | undefined
+> = avatarVersionSubject;
+
+export function useAvatarVersion(): number | undefined {
+  const [version, setVersion] = React.useState<number | undefined>();
+  React.useEffect(() => {
+    const subscription = avatarVersion$.subscribe((v) => setVersion(v));
+    return () => subscription.unsubscribe();
+  }, []);
+  return version;
+}
+
+export function useOptionalVersionedAvatarUrl(
+  url: string | undefined
+): string | undefined {
+  const avatarVersion = useAvatarVersion();
+  return React.useMemo(
+    () =>
+      url == null
+        ? undefined
+        : updateQueryString(
+            'v',
+            avatarVersion == null ? null : avatarVersion.toString(),
+            url
+          ),
+    [avatarVersion, url]
+  );
+}
+
+export function useAvatarUrlWithGivenVersion(
+  version: number | null | undefined,
+  url: string
+): string {
+  return React.useMemo(
+    () =>
+      updateQueryString('v', version == null ? null : version.toString(), url),
+    [version, url]
+  );
+}
diff --git a/Timeline/ClientApp/src/user/user-page.sass b/Timeline/ClientApp/src/app/user/user-page.sass
index 1e2e802b..fe3ab70b 100644
--- a/Timeline/ClientApp/src/user/user-page.sass
+++ b/Timeline/ClientApp/src/app/user/user-page.sass
@@ -1,11 +1,11 @@
-.login-container

-  max-width: 600px

-

-.change-avatar-cropper-row

-  max-height: 400px

-

-.change-avatar-img

-  min-width: 50%

-  max-width: 100%

-  max-height: 400px

-

+.login-container
+  max-width: 600px
+
+.change-avatar-cropper-row
+  max-height: 400px
+
+.change-avatar-img
+  min-width: 50%
+  max-width: 100%
+  max-height: 400px
+
diff --git a/Timeline/ClientApp/src/sw/sw.ts b/Timeline/ClientApp/src/sw/sw.ts
new file mode 100644
index 00000000..67f5dfd4
--- /dev/null
+++ b/Timeline/ClientApp/src/sw/sw.ts
@@ -0,0 +1,22 @@
+import { precacheAndRoute, matchPrecache } from 'workbox-precaching';
+import { setDefaultHandler } from 'workbox-routing';
+import { NetworkOnly } from 'workbox-strategies';
+
+declare let self: ServiceWorkerGlobalScope;
+
+precacheAndRoute(self.__WB_MANIFEST);
+
+const networkOnly = new NetworkOnly();
+
+setDefaultHandler((options) => {
+  const { request, url } = options;
+  if (url && url.pathname.startsWith('/api/')) {
+    return networkOnly.handle(options);
+  }
+
+  if (request instanceof Request && request.destination === 'document')
+    return matchPrecache('/index.html').then((r) =>
+      r == null ? Response.error() : r
+    );
+  else return networkOnly.handle(options);
+});
diff --git a/Timeline/ClientApp/src/sw/tsconfig.json b/Timeline/ClientApp/src/sw/tsconfig.json
new file mode 100644
index 00000000..aac99e59
--- /dev/null
+++ b/Timeline/ClientApp/src/sw/tsconfig.json
@@ -0,0 +1,12 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "lib": [
+      "esnext",
+      "webworker"
+    ]
+  },
+  "include": [
+    "."
+  ]
+}
diff --git a/Timeline/ClientApp/src/tsconfig.json b/Timeline/ClientApp/src/tsconfig.json
new file mode 100644
index 00000000..ec0a3fad
--- /dev/null
+++ b/Timeline/ClientApp/src/tsconfig.json
@@ -0,0 +1,17 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "allowJs": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react"
+  }
+}