Feat/um 140 password modal (#1718)

* Change password to modal.

* Close on save.

components/forms/UserPasswordForm.js

@@ -6,7 +6,7 @@ import { getClientAuthToken } from 'lib/client';
 import styles from './UserPasswordForm.module.css';
 import useUser from 'hooks/useUser';
 
-export default function UserPasswordForm({ onSave, userId }) {
+export default function UserPasswordForm({ onSave, onClose, userId }) {
   const {
     user: { id },
   } = useUser();
@@ -68,9 +68,10 @@ export default function UserPasswordForm({ onSave, userId }) {
         <PasswordField autoComplete="off" />
       </FormInput>
       <FormButtons flex>
-        <Button type="submit" disabled={isLoading}>
+        <Button type="submit" variant="primary" disabled={isLoading}>
           Save
         </Button>
+        <Button onClick={onClose}>Close</Button>
       </FormButtons>
     </Form>
   );

components/pages/Dashboard.js

@@ -2,7 +2,7 @@ import { useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import Page from 'components/layout/Page';
 import PageHeader from 'components/layout/PageHeader';
-import WebsiteList from 'components/pages/WebsiteList';
+import WebsiteChartList from 'components/pages/WebsiteChartList';
 import { Button } from 'react-basics';
 import DashboardSettingsButton from 'components/settings/DashboardSettingsButton';
 import useFetch from 'hooks/useFetch';
@@ -37,7 +37,7 @@ export default function Dashboard({ userId }) {
         {!editing && <DashboardSettingsButton />}
       </PageHeader>
       {editing && <DashboardEdit websites={data} />}
-      {!editing && <WebsiteList websites={data} showCharts={showCharts} limit={max} />}
+      {!editing && <WebsiteChartList websites={data} showCharts={showCharts} limit={max} />}
       {max < data.length && (
         <Button className={styles.button} onClick={handleMore}>
           {formatMessage(messages.more)}

components/pages/ProfileSettings.js

@@ -2,15 +2,27 @@ import Page from 'components/layout/Page';
 import PageHeader from 'components/layout/PageHeader';
 import ProfileDetails from 'components/settings/ProfileDetails';
 import { useState } from 'react';
-import { Breadcrumbs, Item, Tabs, useToast } from 'react-basics';
+import { Breadcrumbs, Item, Tabs, useToast, Modal, Button } from 'react-basics';
 import UserPasswordForm from 'components/forms/UserPasswordForm';
+import Icon from './../common/Icon';
+import Pen from 'assets/pen.svg';
 
 export default function ProfileSettings() {
+  const [edit, setEdit] = useState(false);
   const [tab, setTab] = useState('general');
   const { toast, showToast } = useToast();
 
   const handleSave = () => {
     showToast({ message: 'Saved successfully.', variant: 'success' });
+    setEdit(false);
+  };
+
+  const handleAdd = () => {
+    setEdit(true);
+  };
+
+  const handleClose = () => {
+    setEdit(false);
   };
 
   return (
@@ -20,13 +32,22 @@ export default function ProfileSettings() {
         <Breadcrumbs>
           <Item>Profile</Item>
         </Breadcrumbs>
+        <Button onClick={handleAdd}>
+          <Icon>
+            <Pen />
+          </Icon>
+          Change Password
+        </Button>
       </PageHeader>
       <Tabs selectedKey={tab} onSelect={setTab} style={{ marginBottom: 30, fontSize: 14 }}>
         <Item key="general">General</Item>
-        <Item key="password">Password</Item>
       </Tabs>
       {tab === 'general' && <ProfileDetails />}
-      {tab === 'password' && <UserPasswordForm onSave={handleSave} />}
+      {edit && (
+        <Modal title="Add website" onClose={handleClose}>
+          {close => <UserPasswordForm onSave={handleSave} onClose={close} />}
+        </Modal>
+      )}
     </Page>
   );
 }

components/pages/UserSettings.js

@@ -9,9 +9,11 @@ import useApi from 'hooks/useApi';
 import Link from 'next/link';
 import { useRouter } from 'next/router';
 import { useEffect, useState } from 'react';
-import { Breadcrumbs, Item, Tabs, useToast } from 'react-basics';
+import { Breadcrumbs, Item, Icon, Tabs, useToast, Modal, Button } from 'react-basics';
+import Pen from 'assets/pen.svg';
 
 export default function UserSettings({ userId }) {
+  const [edit, setEdit] = useState(false);
   const [values, setValues] = useState(null);
   const [tab, setTab] = useState('general');
   const { get } = useApi(getClientAuthToken());
@@ -32,6 +34,18 @@ export default function UserSettings({ userId }) {
     if (data) {
       setValues(state => ({ ...state, ...data }));
     }
+
+    if (edit) {
+      setEdit(false);
+    }
+  };
+
+  const handleAdd = () => {
+    setEdit(true);
+  };
+
+  const handleClose = () => {
+    setEdit(false);
   };
 
   const handleDelete = async () => {
@@ -55,15 +69,26 @@ export default function UserSettings({ userId }) {
           </Item>
           <Item>{values?.username}</Item>
         </Breadcrumbs>
+        <Button onClick={handleAdd}>
+          <Icon>
+            <Pen />
+          </Icon>
+          Change Password
+        </Button>
       </PageHeader>
       <Tabs selectedKey={tab} onSelect={setTab} style={{ marginBottom: 30, fontSize: 14 }}>
         <Item key="general">General</Item>
-        <Item key="password">Password</Item>
         <Item key="delete">Danger Zone</Item>
       </Tabs>
       {tab === 'general' && <UserEditForm userId={userId} data={values} onSave={handleSave} />}
-      {tab === 'password' && <UserPasswordForm userId={userId} data={values} onSave={handleSave} />}
       {tab === 'delete' && <UserDelete userId={userId} onSave={handleDelete} />}
+      {edit && (
+        <Modal title="Add website" onClose={handleClose}>
+          {close => (
+            <UserPasswordForm userId={userId} data={values} onSave={handleSave} onClose={close} />
+          )}
+        </Modal>
+      )}
     </Page>
   );
 }

components/settings/ProfileDetails.js

@@ -4,7 +4,7 @@ import React from 'react';
 import { FormattedMessage } from 'react-intl';
 import DateRangeSetting from './DateRangeSetting';
 import LanguageSetting from './LanguageSetting';
-import styles from './ProfileSettings.module.css';
+import styles from './ProfileDetails.module.css';
 import ThemeSetting from './ThemeSetting';
 
 export default function ProfileDetails() {