From 990d76ff454ec6868b99019338ee3f2934238805 Mon Sep 17 00:00:00 2001 From: Mike Cao Date: Thu, 3 Nov 2022 08:52:47 -0700 Subject: [PATCH 01/31] Update docker server url. --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 5fe9dd96..3f457631 100644 --- a/README.md +++ b/README.md @@ -70,12 +70,12 @@ docker compose up Alternatively, to pull just the Umami Docker image with PostgreSQL support: ```bash -docker pull docker.umami.is/umami-software/umami:postgresql-latest +docker pull docker.umami.dev/umami-software/umami:postgresql-latest ``` Or with MySQL support: ```bash -docker pull docker.umami.is/umami-software/umami:mysql-latest +docker pull docker.umami.dev/umami-software/umami:mysql-latest ``` ## Getting updates From 8732d056dd3322abbe76cba1629c39ab705d9a0f Mon Sep 17 00:00:00 2001 From: Brian Cao Date: Mon, 12 Dec 2022 19:45:38 -0800 Subject: [PATCH 02/31] Dev (#1702) * Initial Typescript models. * Re-add realtime data * get distinct sessions for session metrics * Add queries for new schema. * Fix Typo. * Add some api/team endpoints. * Fix destructure error. * Fix getWebsites call. * Ignore typescript build errors. * Fix enum issue. * add clickhouse route to deleteWebsite * Fix Website auth. * Updated lint-staged config. * Add permission checks. * Add user role api. * Fix error when updating website. * Fix isAdmin check. Fix Schema. * Initial conversion to react-basics. * Remove user/team transfer from website update. * delete website in relational query * Fix login secure token creation. * Add event type to event. * Allow user to be added to team with role. * Updated login form. * Add Role to TeamUser. * Add database migration. * Refactored permissions check. Updated redis lib. * Feat/um 114 roles and permissions (#1683) * Auth checkpoint. * Merge branch 'dev' into feat/um-114-roles-and-permissions * Add 02 migration. * Added lib/types. * Updated schema. * Updated roles and permissions logic. * Implement react-basics styles. Fix queries. * Update website details layout. * Add 01 migration. * Fix admin create. * Update react-basics. Co-authored-by: Francis Cao Co-authored-by: Mike Cao Co-authored-by: Mike Cao --- assets/arrow-right.svg | 2 +- assets/arrow-up-right-from-square.svg | 2 +- assets/bars.svg | 2 +- assets/chart-bar.svg | 2 +- assets/check.svg | 2 +- assets/chevron-down.svg | 2 +- assets/code.svg | 2 +- assets/external-link.svg | 2 +- assets/gear.svg | 2 +- assets/logo.svg | 3 +- assets/moon.svg | 2 +- assets/pen.svg | 2 +- assets/sun.svg | 2 +- assets/times.svg | 2 +- assets/user.svg | 2 +- assets/xmark.svg | 2 +- components/common/Button.module.css | 36 +- components/common/ButtonGroup.module.css | 12 +- components/common/Calendar.module.css | 22 +- components/common/Checkbox.module.css | 2 +- components/common/Dot.module.css | 2 +- components/common/Dropdown.module.css | 4 +- components/common/ErrorMessage.module.css | 2 +- components/common/FilterLink.module.css | 4 +- components/common/Link.module.css | 8 +- components/common/Loading.module.css | 6 +- components/common/Menu.module.css | 12 +- components/common/MenuButton.module.css | 6 +- components/common/MobileMenu.module.css | 4 +- components/common/Modal.module.css | 4 +- components/common/NavMenu.module.css | 8 +- components/common/NoData.module.css | 4 +- components/common/Table.module.css | 8 +- components/common/Tag.module.css | 2 +- components/common/Toast.module.css | 2 +- components/common/UpdateNotice.module.css | 2 +- components/declarations.d.ts | 2 + components/forms/DatePickerForm.module.css | 2 +- components/forms/EventDataForm.module.css | 4 +- components/forms/Form.module.css | 63 + components/forms/LoginForm.js | 144 +- components/layout/Footer.module.css | 2 +- components/layout/FormLayout.module.css | 6 +- components/layout/GridLayout.module.css | 6 +- components/layout/GridRow.js | 18 + components/layout/GridRow.module.css | 21 + components/layout/Header.js | 54 +- components/layout/Header.module.css | 7 +- components/layout/Layout.js | 22 +- components/layout/MenuLayout.module.css | 4 +- components/layout/Page.module.css | 3 +- components/metrics/ActiveUsers.module.css | 2 +- components/metrics/ChartTooltip.module.css | 6 +- components/metrics/DataTable.module.css | 10 +- components/metrics/Legend.module.css | 4 +- components/metrics/MetricCard.module.css | 8 +- components/metrics/MetricsTable.module.css | 2 +- components/metrics/RealtimeLog.module.css | 6 +- components/metrics/WebsiteChart.js | 52 +- components/metrics/WebsiteChart.module.css | 17 +- components/metrics/WebsiteHeader.js | 59 +- components/metrics/WebsiteHeader.module.css | 29 +- components/pages/DashboardEdit.module.css | 10 +- components/pages/TestConsole.js | 26 +- components/pages/TestConsole.module.css | 2 +- components/pages/WebsiteDetails.js | 82 +- components/pages/WebsiteDetails.module.css | 15 +- components/pages/WebsiteList.module.css | 2 +- components/settings/SettingsButton.module.css | 4 +- components/settings/UserButton.module.css | 4 +- db/clickhouse/schema.sql | 3 + .../migrations/01_init/migration.sql | 147 + db/postgresql/migrations/migration_lock.toml | 3 + db/postgresql/schema.prisma | 148 +- hooks/useRequireLogin.js | 7 +- interface/auth.d.ts | 5 - interface/base.d.ts | 22 - interface/index.d.ts | 22 - lib/auth.js | 76 - lib/auth.ts | 129 + lib/{cache.js => cache.ts} | 13 +- lib/clickhouse.js | 8 +- lib/client.ts | 14 + lib/{constants.js => constants.ts} | 48 +- lib/middleware.js | 7 +- lib/{prisma.js => prisma.ts} | 74 +- lib/redis.js | 32 +- lib/session.js | 2 +- lib/types.ts | 90 + next-env.d.ts | 10 +- next.config.js | 5 +- package.json | 10 +- pages/_app.js | 29 +- pages/api/auth/{login.js => login.ts} | 23 +- pages/api/auth/{logout.js => logout.ts} | 3 +- pages/api/auth/verify.js | 8 - pages/api/auth/verify.ts | 10 + pages/api/{collect.js => collect.ts} | 34 +- pages/api/{config.js => config.ts} | 11 +- pages/api/heartbeat.js | 5 - pages/api/heartbeat.ts | 6 + pages/api/realtime/{init.js => init.ts} | 11 +- pages/api/realtime/{update.js => update.ts} | 12 +- pages/api/share/{[id].js => [id].ts} | 20 +- pages/api/teams/[id]/index.ts | 61 + pages/api/teams/[id]/users.ts | 70 + pages/api/teams/[id]/websites.ts | 39 + pages/api/teams/index.ts | 47 + pages/api/users/[id]/{index.js => index.ts} | 41 +- .../users/[id]/{password.js => password.ts} | 36 +- pages/api/users/[id]/websites.ts | 57 + pages/api/users/index.js | 42 - pages/api/users/index.ts | 59 + pages/api/websites/[id]/active.js | 24 - pages/api/websites/[id]/active.ts | 36 + pages/api/websites/[id]/eventdata.js | 41 - pages/api/websites/[id]/eventdata.ts | 54 + pages/api/websites/[id]/events.js | 36 - pages/api/websites/[id]/events.ts | 59 + .../api/websites/[id]/{index.js => index.ts} | 45 +- .../websites/[id]/{metrics.js => metrics.ts} | 55 +- .../[id]/{pageviews.js => pageviews.ts} | 72 +- .../api/websites/[id]/{reset.js => reset.ts} | 23 +- .../api/websites/[id]/{stats.js => stats.ts} | 65 +- pages/api/websites/index.js | 33 - pages/api/websites/index.ts | 57 + queries/admin/team.ts | 72 + queries/admin/teamUser.ts | 56 + queries/admin/user.ts | 159 + queries/admin/user/createUser.js | 7 - queries/admin/user/deleteUser.js | 45 - queries/admin/user/getUser.js | 7 - queries/admin/user/getUsers.js | 18 - queries/admin/user/updateUser.js | 8 - queries/admin/website.ts | 110 + queries/admin/website/createWebsite.js | 23 - queries/admin/website/deleteWebsite.js | 24 - queries/admin/website/getAllWebsites.js | 23 - queries/admin/website/getUserWebsites.js | 12 - queries/admin/website/getWebsite.js | 7 - queries/admin/website/resetWebsite.js | 25 - queries/admin/website/updateWebsite.js | 10 - .../{getEventData.js => getEventData.ts} | 59 +- queries/analytics/event/getEventMetrics.js | 68 - queries/analytics/event/getEventMetrics.ts | 105 + queries/analytics/event/saveEvent.js | 62 - queries/analytics/event/saveEvent.ts | 91 + .../analytics/pageview/getPageviewMetrics.js | 59 - .../analytics/pageview/getPageviewMetrics.ts | 81 + .../analytics/pageview/getPageviewParams.js | 41 - .../analytics/pageview/getPageviewStats.js | 78 - .../analytics/pageview/getPageviewStats.ts | 102 + .../{savePageView.js => savePageView.ts} | 38 +- .../{createSession.js => createSession.ts} | 21 +- .../session/{getSession.js => getSession.ts} | 11 +- ...SessionMetrics.js => getSessionMetrics.ts} | 31 +- ...ActiveVisitors.js => getActiveVisitors.ts} | 6 +- ...{getRealtimeData.js => getRealtimeData.ts} | 0 ...{getWebsiteStats.js => getWebsiteStats.ts} | 35 +- queries/index.js | 17 +- styles/bootstrap-grid.css | 3981 ----------------- styles/index.css | 80 +- styles/variables.css | 57 +- tsconfig.json | 28 + yarn.lock | 1001 +++-- 165 files changed, 3370 insertions(+), 6268 deletions(-) create mode 100644 components/declarations.d.ts create mode 100644 components/forms/Form.module.css create mode 100644 components/layout/GridRow.js create mode 100644 components/layout/GridRow.module.css create mode 100644 db/postgresql/migrations/01_init/migration.sql create mode 100644 db/postgresql/migrations/migration_lock.toml delete mode 100644 interface/auth.d.ts delete mode 100644 interface/base.d.ts delete mode 100644 interface/index.d.ts delete mode 100644 lib/auth.js create mode 100644 lib/auth.ts rename lib/{cache.js => cache.ts} (79%) create mode 100644 lib/client.ts rename lib/{constants.js => constants.ts} (86%) rename lib/{prisma.js => prisma.ts} (70%) create mode 100644 lib/types.ts rename pages/api/auth/{login.js => login.ts} (59%) rename pages/api/auth/{logout.js => logout.ts} (74%) delete mode 100644 pages/api/auth/verify.js create mode 100644 pages/api/auth/verify.ts rename pages/api/{collect.js => collect.ts} (73%) rename pages/api/{config.js => config.ts} (57%) delete mode 100644 pages/api/heartbeat.js create mode 100644 pages/api/heartbeat.ts rename pages/api/realtime/{init.js => init.ts} (62%) rename pages/api/realtime/{update.js => update.ts} (66%) rename pages/api/share/{[id].js => [id].ts} (52%) create mode 100644 pages/api/teams/[id]/index.ts create mode 100644 pages/api/teams/[id]/users.ts create mode 100644 pages/api/teams/[id]/websites.ts create mode 100644 pages/api/teams/index.ts rename pages/api/users/[id]/{index.js => index.ts} (68%) rename pages/api/users/[id]/{password.js => password.ts} (51%) create mode 100644 pages/api/users/[id]/websites.ts delete mode 100644 pages/api/users/index.js create mode 100644 pages/api/users/index.ts delete mode 100644 pages/api/websites/[id]/active.js create mode 100644 pages/api/websites/[id]/active.ts delete mode 100644 pages/api/websites/[id]/eventdata.js create mode 100644 pages/api/websites/[id]/eventdata.ts delete mode 100644 pages/api/websites/[id]/events.js create mode 100644 pages/api/websites/[id]/events.ts rename pages/api/websites/[id]/{index.js => index.ts} (50%) rename pages/api/websites/[id]/{metrics.js => metrics.ts} (77%) rename pages/api/websites/[id]/{pageviews.js => pageviews.ts} (54%) rename pages/api/websites/[id]/{reset.js => reset.ts} (50%) rename pages/api/websites/[id]/{stats.js => stats.ts} (58%) delete mode 100644 pages/api/websites/index.js create mode 100644 pages/api/websites/index.ts create mode 100644 queries/admin/team.ts create mode 100644 queries/admin/teamUser.ts create mode 100644 queries/admin/user.ts delete mode 100644 queries/admin/user/createUser.js delete mode 100644 queries/admin/user/deleteUser.js delete mode 100644 queries/admin/user/getUser.js delete mode 100644 queries/admin/user/getUsers.js delete mode 100644 queries/admin/user/updateUser.js create mode 100644 queries/admin/website.ts delete mode 100644 queries/admin/website/createWebsite.js delete mode 100644 queries/admin/website/deleteWebsite.js delete mode 100644 queries/admin/website/getAllWebsites.js delete mode 100644 queries/admin/website/getUserWebsites.js delete mode 100644 queries/admin/website/getWebsite.js delete mode 100644 queries/admin/website/resetWebsite.js delete mode 100644 queries/admin/website/updateWebsite.js rename queries/analytics/event/{getEventData.js => getEventData.ts} (50%) delete mode 100644 queries/analytics/event/getEventMetrics.js create mode 100644 queries/analytics/event/getEventMetrics.ts delete mode 100644 queries/analytics/event/saveEvent.js create mode 100644 queries/analytics/event/saveEvent.ts delete mode 100644 queries/analytics/pageview/getPageviewMetrics.js create mode 100644 queries/analytics/pageview/getPageviewMetrics.ts delete mode 100644 queries/analytics/pageview/getPageviewParams.js delete mode 100644 queries/analytics/pageview/getPageviewStats.js create mode 100644 queries/analytics/pageview/getPageviewStats.ts rename queries/analytics/pageview/{savePageView.js => savePageView.ts} (54%) rename queries/analytics/session/{createSession.js => createSession.ts} (63%) rename queries/analytics/session/{getSession.js => getSession.ts} (64%) rename queries/analytics/session/{getSessionMetrics.js => getSessionMetrics.ts} (60%) rename queries/analytics/stats/{getActiveVisitors.js => getActiveVisitors.ts} (83%) rename queries/analytics/stats/{getRealtimeData.js => getRealtimeData.ts} (100%) rename queries/analytics/stats/{getWebsiteStats.js => getWebsiteStats.ts} (70%) delete mode 100644 styles/bootstrap-grid.css create mode 100644 tsconfig.json diff --git a/assets/arrow-right.svg b/assets/arrow-right.svg index 6fc93909..efc5d74a 100644 --- a/assets/arrow-right.svg +++ b/assets/arrow-right.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/assets/arrow-up-right-from-square.svg b/assets/arrow-up-right-from-square.svg index 90ad457f..8f6de672 100644 --- a/assets/arrow-up-right-from-square.svg +++ b/assets/arrow-up-right-from-square.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/assets/bars.svg b/assets/bars.svg index fdb2d6e4..ba383fa4 100644 --- a/assets/bars.svg +++ b/assets/bars.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/assets/chart-bar.svg b/assets/chart-bar.svg index d1d72fdc..36820b76 100644 --- a/assets/chart-bar.svg +++ b/assets/chart-bar.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/assets/check.svg b/assets/check.svg index 1a7abdce..65810c19 100644 --- a/assets/check.svg +++ b/assets/check.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/assets/chevron-down.svg b/assets/chevron-down.svg index cb9d8fe1..69add632 100644 --- a/assets/chevron-down.svg +++ b/assets/chevron-down.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/assets/code.svg b/assets/code.svg index cd29765e..0f8e0814 100644 --- a/assets/code.svg +++ b/assets/code.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/assets/external-link.svg b/assets/external-link.svg index ed09306f..e24896b0 100644 --- a/assets/external-link.svg +++ b/assets/external-link.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/assets/gear.svg b/assets/gear.svg index ab97a693..47805d46 100644 --- a/assets/gear.svg +++ b/assets/gear.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/assets/logo.svg b/assets/logo.svg index f0e52261..d2c71326 100644 --- a/assets/logo.svg +++ b/assets/logo.svg @@ -1,2 +1 @@ - - + \ No newline at end of file diff --git a/assets/moon.svg b/assets/moon.svg index 6c8955ae..638286fd 100644 --- a/assets/moon.svg +++ b/assets/moon.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/assets/pen.svg b/assets/pen.svg index 426c520c..b2979420 100644 --- a/assets/pen.svg +++ b/assets/pen.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/assets/sun.svg b/assets/sun.svg index ebc20eb2..3e487291 100644 --- a/assets/sun.svg +++ b/assets/sun.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/assets/times.svg b/assets/times.svg index c528bcdd..261bb277 100644 --- a/assets/times.svg +++ b/assets/times.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/assets/user.svg b/assets/user.svg index c0094666..62df2c42 100644 --- a/assets/user.svg +++ b/assets/user.svg @@ -1 +1 @@ -Asset 1 \ No newline at end of file + \ No newline at end of file diff --git a/assets/xmark.svg b/assets/xmark.svg index 340f479e..83bd5740 100644 --- a/assets/xmark.svg +++ b/assets/xmark.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/components/common/Button.module.css b/components/common/Button.module.css index b911095f..b6edc60e 100644 --- a/components/common/Button.module.css +++ b/components/common/Button.module.css @@ -2,9 +2,9 @@ display: flex; justify-content: center; align-items: center; - font-size: var(--font-size-normal); - color: var(--gray900); - background: var(--gray100); + font-size: var(--font-size-md); + color: var(--base900); + background: var(--base100); padding: 8px 16px; border-radius: 4px; border: 0; @@ -14,11 +14,11 @@ } .button:hover { - background: var(--gray200); + background: var(--base200); } .button:active { - color: var(--gray900); + color: var(--base900); } .label { @@ -29,30 +29,30 @@ } .large { - font-size: var(--font-size-large); + font-size: var(--font-size-lg); } .small { - font-size: var(--font-size-small); + font-size: var(--font-size-sm); } .xsmall { - font-size: var(--font-size-xsmall); + font-size: var(--font-size-xs); } .action, .action:active { - color: var(--gray50); - background: var(--gray900); + color: var(--base50); + background: var(--base900); } .action:hover { - background: var(--gray800); + background: var(--base800); } .danger, .danger:active { - color: var(--gray50); + color: var(--base50); background: var(--red500); } @@ -62,7 +62,7 @@ .light, .light:active { - color: var(--gray900); + color: var(--base900); background: transparent; } @@ -85,18 +85,18 @@ .button:disabled { cursor: default; - color: var(--gray500); - background: var(--gray75); + color: var(--base500); + background: var(--base75); } .button:disabled:active { - color: var(--gray500); + color: var(--base500); } .button:disabled:hover { - background: var(--gray75); + background: var(--base75); } .button.light:disabled { - background: var(--gray50); + background: var(--base50); } diff --git a/components/common/ButtonGroup.module.css b/components/common/ButtonGroup.module.css index bc60f8d3..04d33d22 100644 --- a/components/common/ButtonGroup.module.css +++ b/components/common/ButtonGroup.module.css @@ -2,14 +2,14 @@ display: inline-flex; border-radius: 4px; overflow: hidden; - border: 1px solid var(--gray500); + border: 1px solid var(--base500); } .group .button { border-radius: 0; - color: var(--gray800); - background: var(--gray50); - border-left: 1px solid var(--gray500); + color: var(--base800); + background: var(--base50); + border-left: 1px solid var(--base500); padding: 4px 8px; } @@ -18,7 +18,7 @@ } .group .button:hover { - background: var(--gray100); + background: var(--base100); } .group .button + .button { @@ -26,6 +26,6 @@ } .group .button.selected { - color: var(--gray900); + color: var(--base900); font-weight: 600; } diff --git a/components/common/Calendar.module.css b/components/common/Calendar.module.css index 9751cf25..5e50e79a 100644 --- a/components/common/Calendar.module.css +++ b/components/common/Calendar.module.css @@ -1,7 +1,7 @@ .calendar { display: flex; flex-direction: column; - font-size: var(--font-size-small); + font-size: var(--font-size-sm); flex: 1; min-height: 306px; } @@ -12,7 +12,7 @@ } .calendar td { - color: var(--gray800); + color: var(--base800); cursor: pointer; text-align: center; vertical-align: center; @@ -23,17 +23,17 @@ } .calendar td:hover { - border: 1px solid var(--gray300); - background: var(--gray75); + border: 1px solid var(--base300); + background: var(--base75); } .calendar td.faded { - color: var(--gray500); + color: var(--base500); } .calendar td.selected { font-weight: 600; - border: 1px solid var(--gray600); + border: 1px solid var(--base600); } .calendar td.selected:hover { @@ -41,18 +41,18 @@ } .calendar td.disabled { - color: var(--gray400); - background: var(--gray75); + color: var(--base400); + background: var(--base75); } .calendar td.disabled:hover { cursor: default; - background: var(--gray75); + background: var(--base75); border-color: transparent; } .calendar td.faded.disabled { - background: var(--gray100); + background: var(--base100); } .header { @@ -61,7 +61,7 @@ align-items: center; font-weight: 700; line-height: 40px; - font-size: var(--font-size-normal); + font-size: var(--font-size-md); } .body { diff --git a/components/common/Checkbox.module.css b/components/common/Checkbox.module.css index c9a01eac..edd2b776 100644 --- a/components/common/Checkbox.module.css +++ b/components/common/Checkbox.module.css @@ -11,7 +11,7 @@ align-items: center; width: 20px; height: 20px; - border: 1px solid var(--gray500); + border: 1px solid var(--base500); border-radius: 4px; } diff --git a/components/common/Dot.module.css b/components/common/Dot.module.css index 258d6e87..284aa66d 100644 --- a/components/common/Dot.module.css +++ b/components/common/Dot.module.css @@ -1,5 +1,5 @@ .wrapper { - background: var(--gray50); + background: var(--base50); margin-right: 10px; border-radius: 100%; } diff --git a/components/common/Dropdown.module.css b/components/common/Dropdown.module.css index 9738b007..a1877529 100644 --- a/components/common/Dropdown.module.css +++ b/components/common/Dropdown.module.css @@ -3,7 +3,7 @@ display: flex; justify-content: space-between; align-items: center; - border: 1px solid var(--gray500); + border: 1px solid var(--base500); border-radius: 4px; cursor: pointer; } @@ -12,7 +12,7 @@ flex: 1; display: flex; justify-content: space-between; - font-size: var(--font-size-small); + font-size: var(--font-size-sm); flex-wrap: nowrap; white-space: nowrap; padding: 4px 16px; diff --git a/components/common/ErrorMessage.module.css b/components/common/ErrorMessage.module.css index 88769cf5..dd9295d9 100644 --- a/components/common/ErrorMessage.module.css +++ b/components/common/ErrorMessage.module.css @@ -6,7 +6,7 @@ margin: auto; display: flex; z-index: 1; - background-color: var(--gray50); + background-color: var(--base50); padding: 10px; } diff --git a/components/common/FilterLink.module.css b/components/common/FilterLink.module.css index 45b049da..ce3ffa5f 100644 --- a/components/common/FilterLink.module.css +++ b/components/common/FilterLink.module.css @@ -4,11 +4,11 @@ } .row .inactive { - color: var(--gray500); + color: var(--base500); } .row .active { - color: var(--gray900); + color: var(--base900); font-weight: 600; } diff --git a/components/common/Link.module.css b/components/common/Link.module.css index dd2f92f9..0476bd92 100644 --- a/components/common/Link.module.css +++ b/components/common/Link.module.css @@ -2,7 +2,7 @@ a.link, a.link:active, a.link:visited { position: relative; - color: var(--gray900); + color: var(--base900); text-decoration: none; display: inline-flex; align-items: center; @@ -17,15 +17,15 @@ a.link:hover span { } a.link.large { - font-size: var(--font-size-large); + font-size: var(--font-size-lg); } a.link.small { - font-size: var(--font-size-small); + font-size: var(--font-size-sm); } a.link.xsmall { - font-size: var(--font-size-xsmall); + font-size: var(--font-size-xs); } a.link .icon + * { diff --git a/components/common/Loading.module.css b/components/common/Loading.module.css index a69559e3..e2d53243 100644 --- a/components/common/Loading.module.css +++ b/components/common/Loading.module.css @@ -25,7 +25,7 @@ height: 100%; width: 100%; z-index: 10; - background: var(--gray400); + background: var(--base400); opacity: 0.4; } @@ -33,13 +33,13 @@ width: 10px; height: 10px; border-radius: 100%; - background: var(--gray400); + background: var(--base400); animation: blink 1.4s infinite; animation-fill-mode: both; } .loading.overlay div { - background: var(--gray900); + background: var(--base900); } .loading div + div { diff --git a/components/common/Menu.module.css b/components/common/Menu.module.css index d2ad2cc4..63491d40 100644 --- a/components/common/Menu.module.css +++ b/components/common/Menu.module.css @@ -1,22 +1,22 @@ .menu { - background: var(--gray50); - border: 1px solid var(--gray500); + background: var(--base50); + border: 1px solid var(--base500); border-radius: 4px; overflow: hidden; z-index: 100; } .option { - font-size: var(--font-size-small); + font-size: var(--font-size-sm); font-weight: normal; - background: var(--gray50); + background: var(--base50); padding: 4px 16px; cursor: pointer; white-space: nowrap; } .option:hover { - background: var(--gray100); + background: var(--base100); } .float { @@ -43,7 +43,7 @@ } .divider { - border-top: 1px solid var(--gray300); + border-top: 1px solid var(--base300); } .selected { diff --git a/components/common/MenuButton.module.css b/components/common/MenuButton.module.css index 7e9dd7e1..a59ae562 100644 --- a/components/common/MenuButton.module.css +++ b/components/common/MenuButton.module.css @@ -10,11 +10,11 @@ } .text { - font-size: var(--font-size-small); + font-size: var(--font-size-sm); } .open, .open:hover { - background: var(--gray50); - border: 1px solid var(--gray500); + background: var(--base50); + border: 1px solid var(--base500); } diff --git a/components/common/MobileMenu.module.css b/components/common/MobileMenu.module.css index 78a440d9..d1a6f19b 100644 --- a/components/common/MobileMenu.module.css +++ b/components/common/MobileMenu.module.css @@ -8,7 +8,7 @@ z-index: 100; display: flex; flex-direction: column; - background-color: var(--gray50); + background-color: var(--base50); overflow: auto; } @@ -21,7 +21,7 @@ } .item { - font-size: var(--font-size-large); + font-size: var(--font-size-lg); } .item + .item { diff --git a/components/common/Modal.module.css b/components/common/Modal.module.css index bf2491c7..3bba9273 100644 --- a/components/common/Modal.module.css +++ b/components/common/Modal.module.css @@ -25,12 +25,12 @@ top: 50%; left: 50%; transform: translate(-50%, -50%); - background: var(--gray50); + background: var(--base50); min-width: 400px; min-height: 100px; max-width: 100vw; z-index: 1; - border: 1px solid var(--gray300); + border: 1px solid var(--base300); padding: 30px; border-radius: 4px; } diff --git a/components/common/NavMenu.module.css b/components/common/NavMenu.module.css index 7be73973..e0b01945 100644 --- a/components/common/NavMenu.module.css +++ b/components/common/NavMenu.module.css @@ -1,6 +1,6 @@ .menu { - color: var(--gray800); - border: 1px solid var(--gray500); + color: var(--base800); + border: 1px solid var(--base500); border-radius: 4px; overflow: hidden; z-index: 2; @@ -13,10 +13,10 @@ } .option:hover { - background: var(--gray75); + background: var(--base75); } .selected { - color: var(--gray900); + color: var(--base900); font-weight: 600; } diff --git a/components/common/NoData.module.css b/components/common/NoData.module.css index 518fa488..29e9f8eb 100644 --- a/components/common/NoData.module.css +++ b/components/common/NoData.module.css @@ -1,6 +1,6 @@ .container { - color: var(--gray500); - font-size: var(--font-size-normal); + color: var(--base500); + font-size: var(--font-size-md); position: relative; display: flex; align-items: center; diff --git a/components/common/Table.module.css b/components/common/Table.module.css index f92338f8..ba4facc5 100644 --- a/components/common/Table.module.css +++ b/components/common/Table.module.css @@ -5,16 +5,16 @@ .table label { display: none; - font-size: var(--font-size-xsmall); + font-size: var(--font-size-xs); font-weight: bold; } .header { - border-bottom: 1px solid var(--gray300); + border-bottom: 1px solid var(--base300); } .head { - font-size: var(--font-size-small); + font-size: var(--font-size-sm); font-weight: 600; line-height: 40px; } @@ -26,7 +26,7 @@ } .row { - border-bottom: 1px solid var(--gray300); + border-bottom: 1px solid var(--base300); padding: 10px 0; } diff --git a/components/common/Tag.module.css b/components/common/Tag.module.css index 5e145ea1..95023bbf 100644 --- a/components/common/Tag.module.css +++ b/components/common/Tag.module.css @@ -1,6 +1,6 @@ .tag { padding: 2px 4px; - border: 1px solid var(--gray300); + border: 1px solid var(--base300); border-radius: 4px; margin-right: 10px; } diff --git a/components/common/Toast.module.css b/components/common/Toast.module.css index 58677dcb..18b8b44d 100644 --- a/components/common/Toast.module.css +++ b/components/common/Toast.module.css @@ -17,7 +17,7 @@ } .message { - font-size: var(--font-size-normal); + font-size: var(--font-size-md); } .close { diff --git a/components/common/UpdateNotice.module.css b/components/common/UpdateNotice.module.css index 52bac611..5161ea71 100644 --- a/components/common/UpdateNotice.module.css +++ b/components/common/UpdateNotice.module.css @@ -6,7 +6,7 @@ } .message { - font-size: var(--font-size-small); + font-size: var(--font-size-sm); font-weight: 600; flex: 1; text-align: center; diff --git a/components/declarations.d.ts b/components/declarations.d.ts new file mode 100644 index 00000000..31e44ff3 --- /dev/null +++ b/components/declarations.d.ts @@ -0,0 +1,2 @@ +declare module '*.css'; +declare module '*.svg'; diff --git a/components/forms/DatePickerForm.module.css b/components/forms/DatePickerForm.module.css index 96e2d2ec..92e59bb7 100644 --- a/components/forms/DatePickerForm.module.css +++ b/components/forms/DatePickerForm.module.css @@ -16,7 +16,7 @@ .calendars > div + div { margin-left: 20px; padding-left: 20px; - border-left: 1px solid var(--gray300); + border-left: 1px solid var(--base300); } .filter { diff --git a/components/forms/EventDataForm.module.css b/components/forms/EventDataForm.module.css index 19d76f77..fd0ad290 100644 --- a/components/forms/EventDataForm.module.css +++ b/components/forms/EventDataForm.module.css @@ -3,7 +3,7 @@ } .form { - border-right: 1px solid var(--gray300); + border-right: 1px solid var(--base300); width: 420px; } @@ -12,7 +12,7 @@ } .filters + .filters { - border-top: 1px solid var(--gray300); + border-top: 1px solid var(--base300); min-height: 250px; } diff --git a/components/forms/Form.module.css b/components/forms/Form.module.css new file mode 100644 index 00000000..9185da43 --- /dev/null +++ b/components/forms/Form.module.css @@ -0,0 +1,63 @@ +.form { + display: flex; + flex-direction: column; + gap: 30px; + width: 300px; + margin: 0 auto; +} + +.header { + font-size: 24px; + font-weight: 700; + text-align: center; + margin: 30px auto; +} + +.info { + text-align: center; + padding: 30px 0; +} + +.footer { + display: flex; + flex-direction: column; + gap: 20px; + font-size: 14px; + text-align: center; + margin: 30px auto; +} + +.footer a { + font-weight: 600; +} + +.buttons { + justify-content: center; +} + +.button { + flex: 1; + justify-content: center; +} + +.error { + width: 600px; + margin: 0 auto 30px; + background: var(--base50); + padding: 16px; + color: var(--red400); + border: 1px solid var(--red400); + border-radius: 5px; + text-align: center; +} + +.success { + width: 600px; + margin: 60px auto; + background: var(--base50); + padding: 16px; + color: var(--green400); + border: 1px solid var(--green400); + border-radius: 5px; + text-align: center; +} diff --git a/components/forms/LoginForm.js b/components/forms/LoginForm.js index 6a6560f1..aad3f97d 100644 --- a/components/forms/LoginForm.js +++ b/components/forms/LoginForm.js @@ -1,113 +1,57 @@ -import React, { useState } from 'react'; -import { FormattedMessage } from 'react-intl'; -import { Formik, Form, Field } from 'formik'; -import { setItem } from 'next-basics'; -import { useRouter } from 'next/router'; -import Button from 'components/common/Button'; -import FormLayout, { +import { useMutation } from '@tanstack/react-query'; +import { + Form, + FormInput, FormButtons, - FormError, - FormMessage, - FormRow, -} from 'components/layout/FormLayout'; -import Icon from 'components/common/Icon'; -import useApi from 'hooks/useApi'; -import { AUTH_TOKEN } from 'lib/constants'; + TextField, + PasswordField, + SubmitButton, + Icon, +} from 'react-basics'; +import { useRouter } from 'next/router'; +import { useApi } from 'next-basics'; import { setUser } from 'store/app'; +import { setAuthToken } from 'lib/client'; import Logo from 'assets/logo.svg'; -import styles from './LoginForm.module.css'; - -const validate = ({ username, password }) => { - const errors = {}; - - if (!username) { - errors.username = ; - } - if (!password) { - errors.password = ; - } - - return errors; -}; +import styles from './Form.module.css'; export default function LoginForm() { - const { post } = useApi(); const router = useRouter(); - const [message, setMessage] = useState(); + const { post } = useApi(); + const { mutate, error, isLoading } = useMutation(data => post('/auth/login', data)); - const handleSubmit = async ({ username, password }) => { - const { ok, status, data } = await post('/auth/login', { - username, - password, + const handleSubmit = async data => { + mutate(data, { + onSuccess: async ({ token, user }) => { + setAuthToken(token); + setUser(user); + + await router.push('/websites'); + }, }); - - if (ok) { - const { user, token } = data; - - setItem(AUTH_TOKEN, token); - - setUser(user); - - await router.push('/'); - - return null; - } else { - setMessage( - status === 401 ? ( - - ) : ( - data - ), - ); - } }; return ( - - - {() => ( -
-
- } size="xlarge" className={styles.icon} /> -

umami

-
- - -
- - -
-
- - -
- - -
-
- - - - {message} -
- )} -
-
+ <> +
+ + + +

umami

+
+
+ + + + + + + + + Log in + + +
+ ); } diff --git a/components/layout/Footer.module.css b/components/layout/Footer.module.css index c484d7f5..b86e9724 100644 --- a/components/layout/Footer.module.css +++ b/components/layout/Footer.module.css @@ -2,7 +2,7 @@ display: flex; justify-content: space-between; align-items: center; - font-size: var(--font-size-small); + font-size: var(--font-size-sm); text-align: center; margin: 30px 0; } diff --git a/components/layout/FormLayout.module.css b/components/layout/FormLayout.module.css index 6d787136..48363f65 100644 --- a/components/layout/FormLayout.module.css +++ b/components/layout/FormLayout.module.css @@ -54,7 +54,7 @@ .msg { color: var(--msgColor); background: var(--red400); - font-size: var(--font-size-small); + font-size: var(--font-size-sm); padding: 4px 8px; border-radius: 4px; white-space: nowrap; @@ -78,8 +78,8 @@ margin: 20px 0; padding: 4px 8px; border-radius: 4px; - color: var(--gray50); - background: var(--gray800); + color: var(--base50); + background: var(--base800); } @media only screen and (max-width: 576px) { diff --git a/components/layout/GridLayout.module.css b/components/layout/GridLayout.module.css index 675fce16..ee7947b6 100644 --- a/components/layout/GridLayout.module.css +++ b/components/layout/GridLayout.module.css @@ -9,12 +9,12 @@ } .row { - border-top: 1px solid var(--gray300); + border-top: 1px solid var(--base300); min-height: 430px; } .row > .col { - border-left: 1px solid var(--gray300); + border-left: 1px solid var(--base300); padding: 20px; } @@ -33,7 +33,7 @@ } .row > .col { - border-top: 1px solid var(--gray300); + border-top: 1px solid var(--base300); border-left: 0; padding: 20px 0; } diff --git a/components/layout/GridRow.js b/components/layout/GridRow.js new file mode 100644 index 00000000..8f840a84 --- /dev/null +++ b/components/layout/GridRow.js @@ -0,0 +1,18 @@ +import { Row, cloneChildren } from 'react-basics'; +import styles from './GridRow.module.css'; +import classNames from 'classnames'; + +export default function GridRow(props) { + const { children, className, ...rowProps } = props; + return ( + + {breakpoint => + cloneChildren(children, () => { + return { + className: classNames(styles.column, styles[breakpoint]), + }; + }) + } + + ); +} diff --git a/components/layout/GridRow.module.css b/components/layout/GridRow.module.css new file mode 100644 index 00000000..dc1e31f8 --- /dev/null +++ b/components/layout/GridRow.module.css @@ -0,0 +1,21 @@ +.column { + padding: 20px; + border-top: 1px solid var(--base200); + border-left: 1px solid var(--base200); +} + +.column:first-child { + padding-left: 0; + border-left: 0; +} + +.column:last-child { + padding-right: 0; +} + +.column.xs, +.column.sm, +.column.md { + border-left: 0; + border-right: 0; +} diff --git a/components/layout/Header.js b/components/layout/Header.js index 13c3954e..a0063cfb 100644 --- a/components/layout/Header.js +++ b/components/layout/Header.js @@ -1,6 +1,6 @@ +import { Row, Column } from 'react-basics'; import { useRouter } from 'next/router'; import { FormattedMessage } from 'react-intl'; -import classNames from 'classnames'; import Link from 'components/common/Link'; import Icon from 'components/common/Icon'; import LanguageButton from 'components/settings/LanguageButton'; @@ -25,31 +25,33 @@ export default function Header() { return ( <> {allowUpdate && } -
-
- } size="large" className={styles.logo} /> - umami -
- - {user && !adminDisabled && ( -
- - - - - - - - - -
- )} -
- - - - {user && !adminDisabled && } -
+
+ + + } size="large" className={styles.logo} /> + umami + + + {user && !adminDisabled && ( +
+ + + + + + + + + +
+ )} + + + + + {user && !adminDisabled && } + +
); diff --git a/components/layout/Header.module.css b/components/layout/Header.module.css index 8882e9de..44bac0c5 100644 --- a/components/layout/Header.module.css +++ b/components/layout/Header.module.css @@ -7,10 +7,10 @@ .title { flex: 1; - font-size: var(--font-size-large); + font-size: var(--font-size-lg); display: flex; align-items: center; - line-height: 1.4; + flex-direction: row; } .logo { @@ -22,7 +22,7 @@ display: flex; justify-content: center; align-items: center; - font-size: var(--font-size-normal); + font-size: var(--font-size-md); font-weight: 600; } @@ -33,6 +33,7 @@ .buttons { flex: 1; display: flex; + flex-direction: row; justify-content: flex-end; align-items: center; } diff --git a/components/layout/Layout.js b/components/layout/Layout.js index 2c097e41..1a8d4887 100644 --- a/components/layout/Layout.js +++ b/components/layout/Layout.js @@ -1,22 +1,32 @@ -import React from 'react'; +import { Container } from 'react-basics'; import Head from 'next/head'; import Header from 'components/layout/Header'; import Footer from 'components/layout/Footer'; import useLocale from 'hooks/useLocale'; +import { useRouter } from 'next/router'; export default function Layout({ title, children, header = true, footer = true }) { const { dir } = useLocale(); + const { basePath } = useRouter(); return ( - <> + - umami{title && ` - ${title}`} + {title ? `${title} | umami` : 'umami'} + + + + + + + + + + - {header &&
}
{children}
{footer &&