profile popup

frontend/.stylelintrc.js

@@ -12,6 +12,11 @@ module.exports = {
         ignore: ['after-comment'],
       },
     ],
+    'comment-empty-line-before': [
+      'always',
+      { except: ['first-nested'], ignore: ['after-comment', 'stylelint-commands'] },
+    ],
+    'value-keyword-case': ['lower', { ignoreProperties: ['composes'] }],
     'selector-pseudo-class-no-unknown': [true, { ignorePseudoClasses: ['global'] }],
     'property-no-unknown': [true, { ignoreProperties: ['composes'] }],
     'mavrin/stylelint-declaration-use-css-custom-properties': {

frontend/app/common/api.ts

@@ -11,13 +11,8 @@ export const getPostComments = (sort: Sorting) => apiFetcher.get<Tree>('/find',
 
 export const getComment = (id: Comment['id']): Promise<Comment> => apiFetcher.get(`/id/${id}`, { url });
 
-export const getUserComments = (
-  userId: User['id'],
-  limit: number
-): Promise<{
-  comments: Comment[];
-  count: number;
-}> => apiFetcher.get('/comments', { user: userId, limit });
+export const getUserComments = (userId: User['id']): Promise<{ comments: Comment[] }> =>
+  apiFetcher.get('/comments', { user: userId, limit: 10 });
 
 export const putCommentVote = ({ id, value }: { id: Comment['id']; value: number }): Promise<void> =>
   apiFetcher.put(`/vote/${id}`, { url, vote: value });

frontend/app/common/settings.ts

@@ -1,4 +1,4 @@
-import { parseQuery } from 'utils/parseQuery';
+import { parseQuery } from 'utils/parse-query';
 
 import type { Theme } from './types';
 import { THEMES, MAX_SHOWN_ROOT_COMMENTS } from './constants';

frontend/app/common/types.ts

@@ -10,7 +10,7 @@ export type User = {
 };
 
 /** data which is used on user-info page */
-export type UserInfo = Pick<User, 'id' | 'name' | 'picture'>;
+export type Profile = Pick<User, 'id' | 'name' | 'picture'> & { current?: '1' };
 
 export interface BlockedUser {
   id: string;
@@ -46,7 +46,7 @@ export interface Comment {
    * if user hasn't voted delta will be 0,
    * -1/+1 for downvote/upvote
    */
-  vote: number;
+  vote: 0 | 1 | -1;
   /** comment controversy, read only */
   controversy?: number;
   /** pointer to have empty default in json response */

frontend/app/components/auth-panel/auth-panel.module.css

@@ -0,0 +1,28 @@
+.user {
+  display: flex;
+  align-items: center;
+  font-size: 14px;
+}
+
+.userButton {
+  display: flex;
+  align-items: center;
+  font-weight: bold;
+  color: rgb(var(--secondary-text-color));
+  transition: color 0.15s;
+
+  &:hover {
+    color: inherit;
+  }
+}
+
+.userLogoutButton {
+  composes: userButton;
+  margin-left: 12px;
+}
+
+.userAvatar {
+  width: 20px;
+  height: 20px;
+  margin-right: 8px;
+}

frontend/app/components/auth-panel/auth-panel.test.tsx

@@ -80,7 +80,7 @@ describe('<AuthPanel />', () => {
 
       const userInfo = authPanelColumn.first();
 
-      expect(userInfo.text()).toEqual(expect.stringContaining('You logged in as John'));
+      expect(userInfo.text()).toEqual(expect.stringContaining('John'));
     });
   });
   describe('For admin user', () => {

frontend/app/components/auth-panel/auth-panel.tsx

@@ -1,27 +1,32 @@
-import { h, Component, Fragment } from 'preact';
+import { h, Component } from 'preact';
 import { useSelector } from 'react-redux';
 import { FormattedMessage, defineMessages, IntlShape, useIntl } from 'react-intl';
 import b from 'bem-react-helper';
+import clsx from 'clsx';
 
 import { User, Sorting, Theme, PostInfo } from 'common/types';
 import { IS_STORAGE_AVAILABLE, IS_THIRD_PARTY } from 'common/constants';
-import { requestDeletion } from 'utils/email';
 import { postMessageToParent } from 'utils/postMessage';
 import { getHandleClickProps } from 'common/accessibility';
 import { StoreState } from 'store';
-import { Dropdown, DropdownItem } from 'components/dropdown';
+import { useTheme } from 'hooks/useTheme';
 import { Button } from 'components/button';
 import { Auth } from 'components/auth';
-import { useTheme } from 'hooks/useTheme';
+import { Avatar } from 'components/avatar';
+import { SignOutIcon } from 'components/icons/signout';
+import { IconButton } from 'components/icon-button/icon-button';
+import { messages } from 'components/auth/auth.messsages';
+
+import styles from './auth-panel.module.css';
 
 interface OwnProps {
   user: User | null;
   hiddenUsers: StoreState['hiddenUsers'];
   isCommentsDisabled: boolean;
   postInfo: PostInfo;
 
+  signout(): Promise<void>;
   onSortChange(s: Sorting): Promise<void>;
-  onSignOut(): Promise<void>;
   onCommentsChangeReadOnlyMode(readOnly: boolean): Promise<void>;
   onBlockedUsersShow(): void;
   onBlockedUsersHide(): void;
@@ -72,46 +77,25 @@ class AuthPanelComponent extends Component<Props, State> {
     this.props.onCommentsChangeReadOnlyMode(!this.props.isCommentsDisabled);
   };
 
-  toggleUserInfoVisibility = () => {
-    const { user } = this.props;
-
-    if (!user) {
-      return;
-    }
-
-    postMessageToParent({ profile: user });
-  };
-
   renderAuthorized = (user: User) => {
-    const { onSignOut, theme } = this.props;
-    const isUserAnonymous = user && user.id.substr(0, 10) === 'anonymous_';
-
     return (
-      <>
-        <FormattedMessage id="authPanel.logged-as" defaultMessage="You logged in as" />{' '}
-        <Dropdown title={user.name} titleClass="auth-panel__user-dropdown-title" theme={theme}>
-          <DropdownItem separator={!isUserAnonymous}>
-            <div
-              id={user.id}
-              className={b('auth-panel__user-id', {}, { theme })}
-              {...getHandleClickProps(this.toggleUserInfoVisibility)}
-            >
-              {user.id}
-            </div>
-          </DropdownItem>
-
-          {!isUserAnonymous && (
-            <DropdownItem>
-              <Button theme={theme} onClick={() => requestDeletion().then(onSignOut)}>
-                <FormattedMessage id="authPanel.request-to-delete-data" defaultMessage="Request my data removal" />
-              </Button>
-            </DropdownItem>
-          )}
-        </Dropdown>{' '}
-        <Button kind="link" theme={theme} onClick={onSignOut}>
-          <FormattedMessage id="authPanel.logout" defaultMessage="Logout?" />
-        </Button>
-      </>
+      <div className={clsx('user', styles.user)}>
+        <button
+          className={clsx('user-profile-button', styles.userButton)}
+          onClick={() => postMessageToParent({ profile: { ...user, current: '1' } })}
+          title={this.props.intl.formatMessage(messages.openProfile)}
+        >
+          <div className={clsx('user-avatar', styles.userAvatar)}>
+            <Avatar url={user.picture} />
+          </div>
+          {user.name}
+        </button>{' '}
+        <div className={clsx('user-logout-button', styles.userLogoutButton)}>
+          <IconButton title={this.props.intl.formatMessage(messages.signout)} onClick={this.props.signout}>
+            <SignOutIcon size="14" />
+          </IconButton>
+        </div>
+      </div>
     );
   };
 
@@ -136,7 +120,9 @@ class AuthPanelComponent extends Component<Props, State> {
   };
 
   renderCookiesWarning = () => {
-    if (IS_STORAGE_AVAILABLE || IS_THIRD_PARTY) return null;
+    if (IS_STORAGE_AVAILABLE || IS_THIRD_PARTY) {
+      return null;
+    }
     return (
       <div className="auth-panel__column">
         <FormattedMessage id="authPanel.enable-cookies" defaultMessage="Allow cookies to login and comment" />

frontend/app/components/auth-panel/index.ts

@@ -1,18 +1,10 @@
 import './auth-panel.css';
 
 import './__readonly-label/auth-panel__readonly-label.css';
-
 import './__column/auth-panel__column.css';
 import './__select/auth-panel__select.css';
 import './__select-label/auth-panel__select-label.css';
 import './__select-label-value/auth-panel__select-label-value.css';
 import './__sort/auth-panel__sort.css';
 
-import './__user-id/auth-panel__user-id.css';
-
-import './_theme/_dark/auth-panel_theme_dark.css';
-import './_theme/_light/auth-panel_theme_light.css';
-
-import './_logged-in/auth-panel_logged-in.css';
-
 export * from './auth-panel';

frontend/app/components/auth/auth.messsages.ts

@@ -57,4 +57,12 @@ export const messages = defineMessages({
     id: 'auth.submit',
     defaultMessage: 'Submit',
   },
+  openProfile: {
+    id: 'auth.open-profile',
+    defaultMessage: 'Open My Profile',
+  },
+  signout: {
+    id: 'auth.signout',
+    defaultMessage: 'Sign Out',
+  },
 });

frontend/app/components/auth/auth.module.css

@@ -25,15 +25,11 @@
   left: 0;
   min-width: 240px;
   padding: 16px;
-  background-color: rgb(var(--white-color));
+  background-color: rgb(var(--primary-background-color));
   box-shadow: 0 10px 15px rgba(var(--black-color), 0.1), 0 -1px 6px rgba(var(--black-color), 0.05);
   border-radius: 6px;
 }
 
-:global(.dark) .dropdown {
-  background-color: var(--color8);
-}
-
 .title {
   margin: 0 0 12px;
   font-size: 12px;
@@ -148,16 +144,14 @@
 
 .closeButton {
   position: relative;
-  display: inline-block;
+  display: inline-flex;
   width: 28px;
   height: 28px;
-  border: 0;
-  padding: 0;
   margin-left: auto;
-  background: unset;
-  cursor: pointer;
   border-radius: 2px;
   color: inherit;
+  justify-content: center;
+  align-items: center;
 
   &:hover {
     background-color: rgba(var(--primary-color), 0.1);
@@ -194,15 +188,6 @@
   font-size: 16px;
 }
 
-.spinner {
-  width: 18px;
-  height: 18px;
-  border-radius: 50%;
-  border: 2px solid rgba(var(--white-color), 0.2);
-  border-right-color: rgb(var(--white-color));
-  animation: spin 1s linear infinite;
-}
-
 .error {
   margin-bottom: 12px;
   padding: 6px 8px;

frontend/app/components/auth/auth.spec.tsx

@@ -1,6 +1,7 @@
 import '@testing-library/jest-dom';
 import { h } from 'preact';
-import { fireEvent, render, waitFor } from '@testing-library/preact';
+import { fireEvent, waitFor } from '@testing-library/preact';
+import { render } from 'tests/utils';
 
 import { OAuthProvider, User } from 'common/types';
 import { StaticStore } from 'common/static-store';