Skip to content

Commit e3eb102

Browse files
committed
feat: implement logout
1 parent ccea280 commit e3eb102

File tree

13 files changed

+108
-130
lines changed

13 files changed

+108
-130
lines changed

apps/dashboard/rollup.config.js

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -17,10 +17,7 @@ export default {
1717
babel({ babelHelpers: "bundled" }),
1818
typescript(),
1919
postcss({
20-
plugins: [
21-
tailwindcss({ config: "../../packages/strapi-ui/tailwind.config.js" }),
22-
autoprefixer(),
23-
],
20+
plugins: [tailwindcss(), autoprefixer()],
2421
extract: false,
2522
}),
2623
serve({

apps/dashboard/src/App.tsx

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -28,8 +28,10 @@ const App = () => {
2828
const theme = localStorage.getItem("theme");
2929
if (theme === "dark") {
3030
document.body.classList.add("dark");
31+
} else {
32+
document.body.classList.remove("dark");
3133
}
32-
}, []);
34+
}, [activePath]);
3335

3436
const handleLogin = (username: string, password: string) => {
3537
const newUser = {
@@ -45,6 +47,12 @@ const App = () => {
4547
setActivePath(newPath);
4648
};
4749

50+
const handleLogout = () => {
51+
setUser(null);
52+
document.body.classList.remove("dark");
53+
setActivePath("Welcome");
54+
};
55+
4856
// current patching algorithm requires
4957
// this to make full rerender
5058
return user ? (
@@ -86,7 +94,7 @@ const App = () => {
8694
activePath={activePath}
8795
user={user}
8896
>
89-
<Settings />
97+
<Settings onLogout={handleLogout} />
9098
</DashboardLayout>
9199
) : (
92100
<DashboardLayout
Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
import React from "@marufzak/react";
2+
import { cn } from "@marufzak/strapi-ui/utils";
3+
4+
interface Props extends React.ComponentProps<"header"> {
5+
action?: React.ReactNode;
6+
title: string;
7+
description?: string;
8+
}
9+
10+
const Page = ({
11+
className,
12+
title,
13+
children,
14+
description,
15+
action,
16+
...props
17+
}: Props) => {
18+
return (
19+
<section experimental__patching={true}>
20+
<header
21+
experimental__patching={true}
22+
className={cn(
23+
"flex items-center justify-between mb-14 text-neutral-800",
24+
className,
25+
)}
26+
{...props}
27+
>
28+
<div>
29+
<h2 className="text-[32px] leading-10 font-bold">{title}</h2>
30+
<p className="text-neutral-600">{description}</p>
31+
</div>
32+
{action}
33+
</header>
34+
{children}
35+
</section>
36+
);
37+
};
38+
39+
export default Page;

apps/dashboard/src/components/sidebar.tsx

Lines changed: 3 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -8,14 +8,9 @@ import {
88
import { StrapiIcon } from "@marufzak/strapi-ui/icons/logos";
99
import { cn } from "@marufzak/strapi-ui/utils";
1010
import type { User } from "../App";
11-
import {
12-
generalPages,
13-
pluginsPages,
14-
type GeneralPageType,
15-
type PluginPageType,
16-
} from "../lib/constants";
11+
import { generalPages, type GeneralPageType } from "../lib/constants";
1712

18-
export type PathType = GeneralPageType | PluginPageType | "Welcome";
13+
export type PathType = GeneralPageType | "Welcome";
1914
interface SidebarProps {
2015
isCollapsed: boolean;
2116
handleCollapseChange: () => void;
@@ -74,23 +69,7 @@ const Sidebar = ({
7469
key="divider-2"
7570
className={isCollapsed ? "block my-4" : "hidden"}
7671
/>
77-
<ListTitle key="title-1" className={isCollapsed ? "hidden" : ""}>
78-
plugins
79-
</ListTitle>
80-
{pluginsPages.map((plugin) => {
81-
return (
82-
<ListItem
83-
onClick={() => onPathChange(plugin.title)}
84-
isActive={activePath === plugin.title}
85-
key={plugin.id}
86-
isCollapsed={isCollapsed}
87-
icon={plugin.icon}
88-
href={plugin.href}
89-
>
90-
{plugin.title}
91-
</ListItem>
92-
);
93-
})}
72+
9473
<ListTitle key="title-2" className={isCollapsed ? "hidden" : ""}>
9574
general
9675
</ListTitle>

apps/dashboard/src/globals.css

Lines changed: 1 addition & 78 deletions
Original file line numberDiff line numberDiff line change
@@ -4,61 +4,8 @@
44
@tailwind components;
55
@tailwind utilities;
66

7+
/* TODO: properly extend dark tokens */
78
@layer base {
8-
:root {
9-
--neutral-1000: #181826;
10-
--neutral-900: #212134;
11-
--neutral-800: #32324d;
12-
--neutral-700: #4a4a6a;
13-
--neutral-600: #666687;
14-
--neutral-500: #8e8ea9;
15-
--neutral-400: #a5a5ba;
16-
--neutral-300: #c0c0cf;
17-
--neutral-200: #dcdce4;
18-
--neutral-150: #eaeaef;
19-
--neutral-100: #f6f6f9;
20-
--neutral-0: #ffffff;
21-
22-
--primary-700: #271fe0;
23-
--primary-600: #4945ff;
24-
--primary-500: #7b79ff;
25-
--primary-200: #d9d8ff;
26-
--primary-100: #f0f0ff;
27-
28-
--secondary-700: #006096;
29-
--secondary-600: #0c75af;
30-
--secondary-500: #66b7f1;
31-
--secondary-200: #b8e1ff;
32-
--secondary-100: #eaf5ff;
33-
34-
--success-700: #2f6846;
35-
--success-600: #328048;
36-
--success-500: #5cb176;
37-
--success-200: #c6f0c2;
38-
--success-100: #eafbe7;
39-
40-
--danger-700: #b72b1a;
41-
--danger-600: #d02b20;
42-
--danger-500: #ee5e52;
43-
--danger-200: #f5c0b8;
44-
--danger-100: #fcecea;
45-
46-
--alternative-700: #8312d1;
47-
--alternative-600: #9736e8;
48-
--alternative-500: #ac73e6;
49-
--alternative-200: #e0c1f4;
50-
--alternative-100: #f6ecfc;
51-
52-
--warning-700: #be5d01;
53-
--warning-600: #d9822f;
54-
--warning-500: #f29d41;
55-
--warning-200: #fae7b9;
56-
--warning-100: #fdf4dc;
57-
58-
--shadow-sm: 0px 1px 4px 0px #2121341a;
59-
--shadow-lg: 0px 2px 15px 0px #2121341a;
60-
}
61-
629
.dark {
6310
--neutral-1000: #ffffff;
6411
--neutral-900: #ffffff;
@@ -110,27 +57,3 @@
11057
--warning-100: #181826;
11158
}
11259
}
113-
114-
@layer utilities {
115-
.icon-check-white {
116-
content: url("data:image/svg+xml,%3Csvg width='10' height='8' viewBox='0 0 10 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.55323 0.323243C8.63135 0.242625 8.76051 0.242081 8.83931 0.322038L9.86256 1.36034C9.93893 1.43784 9.93935 1.56217 9.86349 1.64016L4.06401 7.60351C3.9859 7.68382 3.85707 7.68432 3.77834 7.60461L0.13866 3.9196C0.0617798 3.84176 0.0617102 3.71659 0.138504 3.63867L1.16213 2.59999C1.24038 2.52059 1.36843 2.52049 1.4468 2.59975L3.92174 5.10274L8.55323 0.323243Z' fill='white'/%3E%3C/svg%3E");
117-
top: -2px;
118-
}
119-
120-
.icon-check-gray {
121-
content: url("data:image/svg+xml,%3Csvg width='10' height='8' viewBox='0 0 10 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.55323 0.323243C8.63135 0.242625 8.76051 0.242081 8.83931 0.322038L9.86256 1.36034C9.93893 1.43784 9.93935 1.56217 9.86349 1.64016L4.06401 7.60351C3.9859 7.68382 3.85707 7.68432 3.77834 7.60461L0.13866 3.9196C0.0617798 3.84176 0.0617102 3.71659 0.138504 3.63867L1.16213 2.59999C1.24038 2.52059 1.36843 2.52049 1.4468 2.59975L3.92174 5.10274L8.55323 0.323243Z' fill='rgb(102, 102, 135)'/%3E%3C/svg%3E");
122-
top: -2px;
123-
}
124-
}
125-
126-
input {
127-
border: 1px solid var(--neutral-300);
128-
}
129-
130-
/* https://stackoverflow.com/questions/18856246/input-type-search-hide-the-icons */
131-
input[type="search"]::-webkit-search-decoration,
132-
input[type="search"]::-webkit-search-cancel-button,
133-
input[type="search"]::-webkit-search-results-button,
134-
input[type="search"]::-webkit-search-results-decoration {
135-
display: none;
136-
}

apps/dashboard/src/lib/constants.tsx

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -5,16 +5,13 @@ import {
55
GearIcon,
66
} from "@marufzak/strapi-ui/icons";
77

8-
export const pluginsPages = [
8+
export const generalPages = [
99
{
1010
id: Math.random(),
1111
title: "Media Library",
1212
icon: LandscapeIcon,
1313
href: "media",
1414
},
15-
] as const;
16-
17-
export const generalPages = [
1815
{
1916
id: Math.random(),
2017
title: "Marketplace",
@@ -124,4 +121,3 @@ export const marketplaceItems = [
124121
] as const;
125122

126123
export type GeneralPageType = (typeof generalPages)[number]["title"];
127-
export type PluginPageType = (typeof pluginsPages)[number]["title"];

apps/dashboard/src/pages/dashboard/marketplace.tsx

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,9 @@ const Marketplace = () => {
3737
<div experimental__patching={true}>
3838
<header className="flex items-center justify-between mb-12">
3939
<div>
40-
<h2 className="text-[32px] leading-10 font-bold">Strapi Market</h2>
40+
<h2 className="text-[32px] leading-10 font-bold text-neutral-800">
41+
Strapi Market
42+
</h2>
4143
<p className="text-neutral-600">Get more out of Strapi</p>
4244
</div>
4345
<Button
@@ -161,11 +163,15 @@ const Card = ({
161163
>
162164
<StrapiPatternIcon width={64} height={64} />
163165
<div className="flex items-center gap-1 text-xs text-neutral-800">
164-
<GithubIcon width={12} height={12} />
166+
<GithubIcon className="dark:fill-neutral-50" width={12} height={12} />
165167
<StarIcon width={12} height={12} className="fill-warning-500" />
166168
<span>{formatNumber(githubStars)}</span>
167169
<Divider className="w-[1px] h-3 mx-3" />
168-
<DownloadIcon width={10} height={10} className="text-neutral-600" />
170+
<DownloadIcon
171+
width={10}
172+
height={10}
173+
className="dark:fill-neutral-50"
174+
/>
169175
<span>{formatNumber(forks)}</span>
170176
</div>
171177
</header>
@@ -187,7 +193,7 @@ const Card = ({
187193
variant="tertiary"
188194
theme="default"
189195
size="sm"
190-
className="flex gap-2 items-center"
196+
className="flex gap-2 items-center text-neutral-800"
191197
experimental__patching={true}
192198
>
193199
<ExternalLinkIcon

apps/dashboard/src/pages/dashboard/media.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -185,6 +185,7 @@ const MediaCreateModal = ({
185185
variant="tertiary"
186186
theme="default"
187187
size="md"
188+
onClick={onModalClose}
188189
>
189190
Cancel
190191
</Button>

apps/dashboard/src/pages/dashboard/settings.tsx

Lines changed: 35 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,11 @@
11
import React from "@marufzak/react";
2-
import { ToggleInput } from "@marufzak/strapi-ui";
2+
import { Button, ToggleInput } from "@marufzak/strapi-ui";
33

4-
const Settings = () => {
4+
interface Props {
5+
onLogout?: () => void;
6+
}
7+
8+
const Settings = ({ onLogout }: Props) => {
59
const [isDark, setIsDark] = React.useState(() => {
610
return localStorage.getItem("theme") === "dark";
711
});
@@ -21,15 +25,36 @@ const Settings = () => {
2125
setIsDark(newValue);
2226
};
2327

28+
const handleLogout = () => {
29+
localStorage.clear();
30+
onLogout?.();
31+
};
32+
2433
return (
25-
<ToggleInput
26-
hint="Both of them look great!"
27-
label="Dark mode"
28-
offLabel="False"
29-
onLabel="True"
30-
checked={isDark}
31-
onChange={handleToggle}
32-
/>
34+
<section>
35+
<header className="flex items-center justify-between mb-14">
36+
<h2 className="text-[32px] leading-10 font-bold text-neutral-800">
37+
Settings
38+
</h2>
39+
<Button
40+
onClick={handleLogout}
41+
type="submit"
42+
size="md"
43+
theme="danger"
44+
variant="primary"
45+
>
46+
Logout
47+
</Button>
48+
</header>
49+
<ToggleInput
50+
hint="Both of them look great!"
51+
label="Dark mode"
52+
offLabel="False"
53+
onLabel="True"
54+
checked={isDark}
55+
onChange={handleToggle}
56+
/>
57+
</section>
3358
);
3459
};
3560

apps/dashboard/src/pages/login.tsx

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -73,7 +73,10 @@ const Login = ({ onLogin }: Props) => {
7373
name="password"
7474
required={true}
7575
/>
76-
<label className="flex items-center text-sm text-neutral-800 gap-2 my-6">
76+
<label
77+
experimental__patching={true}
78+
className="flex items-center text-sm text-neutral-800 gap-2 my-6"
79+
>
7780
<Checkbox />
7881
Remember me
7982
</label>

0 commit comments

Comments
 (0)