feat: profile modal

.stylelintrc

@@ -5,5 +5,16 @@
   "extends": [
     "stylelint-config-recommended",
     "stylelint-config-styled-components"
-  ]
+  ],
+  "rules": {
+    "selector-type-no-unknown": [
+      true,
+      {
+        "ignoreTypes": [
+          "/-styled-mixin/",
+          "$dummyValue"
+        ]
+      }
+    ]
+  }
 }

__tests__/CommentActionButtons.tsx

@@ -60,7 +60,15 @@ const renderComponent = (
 
   return render(
     <MockedProvider addTypename={false} mocks={mocks}>
-      <AuthContext.Provider value={{ user, shouldShowLogin: false, showLogin }}>
+      <AuthContext.Provider
+        value={{
+          user,
+          shouldShowLogin: false,
+          showLogin,
+          showProfile: jest.fn(),
+          logout: jest.fn(),
+        }}
+      >
         <CommentActionButtons {...props} />
       </AuthContext.Provider>
     </MockedProvider>,

__tests__/MainComment.tsx

@@ -50,7 +50,13 @@ const renderLayout = (
   return render(
     <MockedProvider addTypename={false} mocks={[]}>
       <AuthContext.Provider
-        value={{ user, shouldShowLogin: false, showLogin: jest.fn() }}
+        value={{
+          user,
+          shouldShowLogin: false,
+          showLogin: jest.fn(),
+          showProfile: jest.fn(),
+          logout: jest.fn(),
+        }}
       >
         <MainComment {...defaultProps} {...props} />
       </AuthContext.Provider>

__tests__/MainLayout.tsx

@@ -12,7 +12,15 @@ beforeEach(() => {
 
 const renderLayout = (user: LoggedUser = null): RenderResult => {
   return render(
-    <AuthContext.Provider value={{ user, shouldShowLogin: false, showLogin }}>
+    <AuthContext.Provider
+      value={{
+        user,
+        shouldShowLogin: false,
+        showLogin,
+        showProfile: jest.fn(),
+        logout: jest.fn(),
+      }}
+    >
       <MainLayout />
     </AuthContext.Provider>,
   );

__tests__/NewCommentModal.tsx

@@ -49,6 +49,8 @@ const renderComponent = (
           user: { ...defaultUser, ...user },
           shouldShowLogin: false,
           showLogin: jest.fn(),
+          showProfile: jest.fn(),
+          logout: jest.fn(),
         }}
       >
         <NewCommentModal {...defaultProps} {...props} />

__tests__/PostPage.tsx

@@ -105,7 +105,15 @@ const renderPost = (
 
   return render(
     <MockedProvider addTypename={false} mocks={mocks}>
-      <AuthContext.Provider value={{ user, shouldShowLogin: false, showLogin }}>
+      <AuthContext.Provider
+        value={{
+          user,
+          shouldShowLogin: false,
+          showLogin,
+          showProfile: jest.fn(),
+          logout: jest.fn(),
+        }}
+      >
         <PostPage {...defaultProps} {...props} />
       </AuthContext.Provider>
     </MockedProvider>,

__tests__/ConfirmAccountModal.tsx → __tests__/ProfileModal.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { render, RenderResult, screen, waitFor } from '@testing-library/react';
 import { mocked } from 'ts-jest/utils';
-import ConfirmAccountModal, { Props } from '../components/ConfirmAccountModal';
+import ProfileModal, { Props } from '../components/ProfileModal';
 import AuthContext from '../components/AuthContext';
 import { LoggedUser, updateProfile } from '../lib/user';
 
@@ -11,10 +11,10 @@ jest.mock('../lib/user', () => ({
 }));
 
 const profiledUpdated = jest.fn();
+const logout = jest.fn();
 
 beforeEach(() => {
-  mocked(updateProfile).mockReset();
-  profiledUpdated.mockReset();
+  jest.resetAllMocks();
 });
 
 const defaultUser = {
@@ -35,6 +35,7 @@ const renderComponent = (
     isOpen: true,
     profiledUpdated,
     ariaHideApp: false,
+    confirmMode: false,
   };
 
   return render(
@@ -43,29 +44,32 @@ const renderComponent = (
         user: { ...defaultUser, ...user },
         shouldShowLogin: false,
         showLogin: jest.fn(),
+        showProfile: jest.fn(),
+        logout,
       }}
     >
-      <ConfirmAccountModal {...defaultProps} {...props} />
+      <ProfileModal {...defaultProps} {...props} />
     </AuthContext.Provider>,
   );
 };
 
 it('should enable submit when form is valid', () => {
   renderComponent();
-  const el = screen.getByText('Confirm');
+  const el = screen.getByText('Save changes');
   expect(el.getAttribute('disabled')).toBeFalsy();
 });
 
 it('should submit information on button click', async () => {
   renderComponent();
   mocked(updateProfile).mockResolvedValue(defaultUser);
-  screen.getByText('Confirm').click();
+  screen.getByText('Save changes').click();
   await waitFor(() => expect(profiledUpdated).toBeCalledWith(defaultUser));
   expect(updateProfile).toBeCalledWith({
     name: 'Ido Shamun',
     email: 'ido@acme.com',
     company: null,
     title: null,
+    acceptedMarketing: false,
   });
 });
 
@@ -76,15 +80,22 @@ it('should show server error', async () => {
     code: 1,
     message: '',
   });
-  screen.getByText('Confirm').click();
+  screen.getByText('Save changes').click();
   await waitFor(() =>
     expect(updateProfile).toBeCalledWith({
       name: 'Ido Shamun',
       email: 'ido@acme.com',
       company: null,
       title: null,
+      acceptedMarketing: false,
     }),
   );
   expect(profiledUpdated).toBeCalledTimes(0);
   expect(screen.getByRole('alert')).toBeInTheDocument();
 });
+
+it('should logout on button click', async () => {
+  renderComponent();
+  screen.getByText('Logout').click();
+  await waitFor(() => expect(logout).toBeCalledTimes(1));
+});

__tests__/SubComment.tsx

@@ -50,7 +50,13 @@ const renderLayout = (
   return render(
     <MockedProvider addTypename={false} mocks={[]}>
       <AuthContext.Provider
-        value={{ user, shouldShowLogin: false, showLogin: jest.fn() }}
+        value={{
+          user,
+          shouldShowLogin: false,
+          showLogin: jest.fn(),
+          showProfile: jest.fn(),
+          logout: jest.fn(),
+        }}
       >
         <SubComment {...defaultProps} {...props} />
       </AuthContext.Provider>

components/AuthContext.ts

@@ -5,6 +5,8 @@ interface AuthContextData {
   user: LoggedUser;
   shouldShowLogin: boolean;
   showLogin: () => void;
+  showProfile: () => void;
+  logout: () => Promise<void>;
 }
 
 const AuthContext = React.createContext<AuthContextData>(null);

components/LoginModal.tsx

@@ -5,9 +5,11 @@ import DailyDevLogo from './DailyDevLogo';
 import { InvertButton, TextButton } from './Buttons';
 import XIcon from '../icons/x.svg';
 import GitHubIcon from '../icons/github.svg';
-import { typoJr, typoMicro2Base } from '../styles/typography';
+import { typoJr } from '../styles/typography';
 import { CodeChallenge, generateChallenge } from '../lib/auth';
 import { StyledModal, ModalCloseButton, Props } from './StyledModal';
+import { privacyPolicy, termsOfService } from '../lib/constants';
+import { LegalNotice } from './utilities';
 
 const MyModal = styled(StyledModal)`
   .Modal {
@@ -17,6 +19,11 @@ const MyModal = styled(StyledModal)`
       width: 9.25rem;
     }
   }
+
+  ${LegalNotice} {
+    max-width: 17.25rem;
+    margin-top: ${size8};
+  }
 `;
 
 const Buttons = styled.div`
@@ -44,24 +51,6 @@ const Content = styled.div`
   ${typoJr}
 `;
 
-const LegalNotice = styled.div`
-  max-width: 17.25rem;
-  margin-top: ${size8};
-  color: var(--theme-disabled);
-  text-align: center;
-  font-weight: bold;
-  ${typoMicro2Base};
-
-  a {
-    display: inline-block;
-    text-decoration: underline;
-    color: inherit;
-    @supports (display: contents) {
-      display: contents;
-    }
-  }
-`;
-
 export default function LoginModal(props: Props): ReactElement {
   // eslint-disable-next-line react/prop-types
   const { onRequestClose } = props;
@@ -109,19 +98,11 @@ export default function LoginModal(props: Props): ReactElement {
       </Buttons>
       <LegalNotice>
         By signing up I accept the{' '}
-        <a
-          href="https://daily.dev/tos"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
+        <a href={termsOfService} target="_blank" rel="noopener noreferrer">
           Terms of Service
         </a>{' '}
         and the{' '}
-        <a
-          href="https://daily.dev/privacy"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
+        <a href={privacyPolicy} target="_blank" rel="noopener noreferrer">
           Privacy Policy
         </a>
         .

components/MainLayout.tsx

@@ -51,6 +51,7 @@ const ProfileImage = styled.button`
   background: none;
   border: none;
   border-radius: 100%;
+  cursor: pointer;
   ${focusOutline}
 `;
 
@@ -69,7 +70,7 @@ const HomeLink = styled.a`
 `;
 
 export default function MainLayout({ children }: Props): ReactElement {
-  const { user, showLogin } = useContext(AuthContext);
+  const { user, showLogin, showProfile } = useContext(AuthContext);
 
   return (
     <Container>
@@ -79,7 +80,7 @@ export default function MainLayout({ children }: Props): ReactElement {
           <BetaBadge className="badge" />
         </HomeLink>
         {user ? (
-          <ProfileImage>
+          <ProfileImage onClick={showProfile}>
             <LazyImage
               imgSrc={user.image}
               imgAlt="Your profile image"