From 560f1316c15691f1ba6db57dd0bc91078b186498 Mon Sep 17 00:00:00 2001 From: Mike Cao Date: Sat, 15 Aug 2020 01:17:15 -0700 Subject: [PATCH] Enable public website sharing. --- assets/ellipsis-h.svg | 1 + assets/link.svg | 1 + assets/logo.svg | 2 +- components/ProfileSettings.js | 5 ++- components/WebsiteSettings.js | 32 ++++++++++++--- components/common/Button.js | 7 ++++ components/common/Button.module.css | 1 + components/common/Checkbox.js | 27 +++++++++++++ components/common/Checkbox.module.css | 27 +++++++++++++ components/forms/DeleteForm.js | 2 +- components/forms/ShareUrlForm.js | 30 ++++++++++++++ ...WebsiteCodeForm.js => TrackingCodeForm.js} | 2 +- components/forms/WebsiteEditForm.js | 10 ++++- components/layout/Footer.js | 16 +++++++- components/layout/Footer.module.css | 11 ++++++ components/layout/Header.js | 4 +- lib/crypto.js | 9 +++++ lib/queries.js | 10 +++++ lib/response.js | 14 ++++--- package.json | 6 +-- pages/404.js | 4 +- pages/api/share/[id].js | 18 +++++++++ pages/api/user.js | 13 ------- pages/api/website.js | 20 +++++++--- pages/api/website/[id]/index.js | 6 +-- pages/api/website/[id]/metrics.js | 3 -- pages/api/website/[id]/pageviews.js | 3 -- pages/api/website/[id]/rankings.js | 3 -- pages/share/[...id].js | 39 +++++++++++++++++++ pages/website/[...id].js | 4 +- prisma/schema.mysql.prisma | 1 + prisma/schema.postgresql.prisma | 1 + sql/schema.mysql.sql | 3 +- sql/schema.postgresql.sql | 3 +- styles/index.css | 11 +++++- yarn.lock | 6 +-- 36 files changed, 294 insertions(+), 61 deletions(-) create mode 100644 assets/ellipsis-h.svg create mode 100644 assets/link.svg create mode 100644 components/common/Checkbox.js create mode 100644 components/common/Checkbox.module.css create mode 100644 components/forms/ShareUrlForm.js rename components/forms/{WebsiteCodeForm.js => TrackingCodeForm.js} (93%) create mode 100644 pages/api/share/[id].js delete mode 100644 pages/api/user.js create mode 100644 pages/share/[...id].js diff --git a/assets/ellipsis-h.svg b/assets/ellipsis-h.svg new file mode 100644 index 00000000..5bb08359 --- /dev/null +++ b/assets/ellipsis-h.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/link.svg b/assets/link.svg new file mode 100644 index 00000000..c53d1ada --- /dev/null +++ b/assets/link.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/logo.svg b/assets/logo.svg index 302263d9..eca6048b 100644 --- a/assets/logo.svg +++ b/assets/logo.svg @@ -1 +1 @@ -Asset 2 \ No newline at end of file + \ No newline at end of file diff --git a/components/ProfileSettings.js b/components/ProfileSettings.js index a3b8fdf0..44f54686 100644 --- a/components/ProfileSettings.js +++ b/components/ProfileSettings.js @@ -4,6 +4,7 @@ import PageHeader from 'components/layout/PageHeader'; import Button from 'components/common/Button'; import ChangePasswordForm from './forms/ChangePasswordForm'; import Modal from 'components/common/Modal'; +import Dots from 'assets/ellipsis-h.svg'; export default function ProfileSettings() { const user = useSelector(state => state.user); @@ -14,8 +15,8 @@ export default function ProfileSettings() { <>
Profile
-
diff --git a/components/WebsiteSettings.js b/components/WebsiteSettings.js index 83f3ad5e..afdf5aa0 100644 --- a/components/WebsiteSettings.js +++ b/components/WebsiteSettings.js @@ -5,12 +5,14 @@ import PageHeader from 'components/layout/PageHeader'; import Modal from 'components/common/Modal'; import WebsiteEditForm from './forms/WebsiteEditForm'; import DeleteForm from './forms/DeleteForm'; -import WebsiteCodeForm from './forms/WebsiteCodeForm'; +import TrackingCodeForm from './forms/TrackingCodeForm'; +import ShareUrlForm from './forms/ShareUrlForm'; import EmptyPlaceholder from 'components/common/EmptyPlaceholder'; import Pen from 'assets/pen.svg'; import Trash from 'assets/trash.svg'; import Plus from 'assets/plus.svg'; import Code from 'assets/code.svg'; +import Link from 'assets/link.svg'; import { get } from 'lib/web'; import styles from './WebsiteSettings.module.css'; @@ -20,13 +22,27 @@ export default function WebsiteSettings() { const [deleteWebsite, setDeleteWebsite] = useState(); const [addWebsite, setAddWebsite] = useState(); const [showCode, setShowCode] = useState(); + const [showUrl, setShowUrl] = useState(); const [saved, setSaved] = useState(0); const Buttons = row => ( <> - + {row.share_id && ( + @@ -56,6 +72,7 @@ export default function WebsiteSettings() { setEditWebsite(null); setDeleteWebsite(null); setShowCode(null); + setShowUrl(null); } async function loadData() { @@ -108,7 +125,12 @@ export default function WebsiteSettings() { )} {showCode && ( - + + + )} + {showUrl && ( + + )} diff --git a/components/common/Button.js b/components/common/Button.js index 1f3a1ecb..2bdbee5b 100644 --- a/components/common/Button.js +++ b/components/common/Button.js @@ -1,4 +1,5 @@ import React from 'react'; +import ReactTooltip from 'react-tooltip'; import classNames from 'classnames'; import Icon from './Icon'; import styles from './Button.module.css'; @@ -10,10 +11,15 @@ export default function Button({ variant, children, className, + tooltip, + tooltipId, ...props }) { return ( ); } diff --git a/components/common/Button.module.css b/components/common/Button.module.css index 7554daff..0ea8ddaa 100644 --- a/components/common/Button.module.css +++ b/components/common/Button.module.css @@ -10,6 +10,7 @@ outline: none; cursor: pointer; white-space: nowrap; + position: relative; } .button:hover { diff --git a/components/common/Checkbox.js b/components/common/Checkbox.js new file mode 100644 index 00000000..1a66a258 --- /dev/null +++ b/components/common/Checkbox.js @@ -0,0 +1,27 @@ +import React, { useRef } from 'react'; +import Icon from 'components/common/Icon'; +import Check from 'assets/check.svg'; +import styles from './Checkbox.module.css'; + +export default function Checkbox({ name, value, label, onChange }) { + const ref = useRef(); + + return ( +
+
ref.current.click()}> + {value && } size="small" />} +
+ + +
+ ); +} diff --git a/components/common/Checkbox.module.css b/components/common/Checkbox.module.css new file mode 100644 index 00000000..c0ddde48 --- /dev/null +++ b/components/common/Checkbox.module.css @@ -0,0 +1,27 @@ +.container { + display: flex; + align-items: center; + overflow: hidden; +} + +.checkbox { + display: flex; + justify-content: center; + align-items: center; + width: 20px; + height: 20px; + border: 1px solid var(--gray500); + border-radius: 4px; +} + +.label { + margin-left: 10px; +} + +.input { + position: absolute; + height: 0; + width: 0; + bottom: -1px; + right: -1px; +} diff --git a/components/forms/DeleteForm.js b/components/forms/DeleteForm.js index 7e87d679..650e802f 100644 --- a/components/forms/DeleteForm.js +++ b/components/forms/DeleteForm.js @@ -49,7 +49,7 @@ export default function DeleteForm({ values, onSave, onClose }) { Type DELETE in the box below to confirm.

- + diff --git a/components/forms/ShareUrlForm.js b/components/forms/ShareUrlForm.js new file mode 100644 index 00000000..8ecaed0e --- /dev/null +++ b/components/forms/ShareUrlForm.js @@ -0,0 +1,30 @@ +import React, { useRef } from 'react'; +import Button from 'components/common/Button'; +import FormLayout, { FormButtons, FormRow } from 'components/layout/FormLayout'; +import CopyButton from '../common/CopyButton'; + +export default function TrackingCodeForm({ values, onClose }) { + const ref = useRef(); + const { name, share_id } = values; + + return ( + +

+ This is the public URL for {values.name}. +

+ +