m/umami
1
0
Fork 0
mirror of https://github.com/kremalicious/umami.git synced 2025-02-14 21:10:34 +01:00
Code Issues Packages Projects Releases Wiki Activity

Updated settings.

Browse Source
This commit is contained in:
Mike Cao 2023-03-23 16:33:10 -07:00
parent be2fc0de8d
commit 9260e5bc33
16 changed files with 62 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
components/layout/SettingsLayout.js
View File

@ -1,23 +1,32 @@
import classNames from 'classnames';
import { useRouter } from 'next/router';
import AppLayout from './AppLayout'; import AppLayout from './AppLayout';
import styles from './SettingsLayout.module.css';
import useMessages from 'hooks/useMessages';
import SideNav from './SideNav'; import SideNav from './SideNav';
import useUser from 'hooks/useUser';
import useMessages from 'hooks/useMessages';
import useConfig from 'hooks/useConfig';
import styles from './SettingsLayout.module.css';
export default function SettingsLayout({ children }) { export default function SettingsLayout({ children }) {
const { user } = useUser();
const { pathname } = useRouter();
const { formatMessage, labels } = useMessages(); const { formatMessage, labels } = useMessages();
const { cloudMode } = useConfig();
const items = [ const items = [
{ label: formatMessage(labels.websites), url: '/settings/websites' }, { key: 'websites', label: formatMessage(labels.websites), url: '/settings/websites' },
{ label: formatMessage(labels.teams), url: '/settings/teams' }, { key: 'teams', label: formatMessage(labels.teams), url: '/settings/teams' },
{ label: formatMessage(labels.users), url: '/settings/users' }, user.isAdmin && { key: 'users', label: formatMessage(labels.users), url: '/settings/users' },
{ label: formatMessage(labels.profile), url: '/settings/profile' }, { key: 'profile', label: formatMessage(labels.profile), url: '/settings/profile' },
]; ].filter(n => n);
const getKey = () => items.find(({ url }) => pathname.startsWith(url))?.key;
return ( return (
<AppLayout> <AppLayout>
<div className={styles.container}> <div className={styles.container}>
<div className={styles.menu}> <div className={classNames(styles.menu, { [styles.hidden]: cloudMode })}>
<SideNav items={items} /> <SideNav items={items} shallow={true} selectedKey={getKey()} />
</div> </div>
<div className={styles.content}>{children}</div> <div className={styles.content}>{children}</div>
</div> </div>

6
components/layout/SettingsLayout.module.css
View File

@ -9,9 +9,15 @@
flex-direction: column; flex-direction: column;
width: 200px; width: 200px;
padding: 40px 0; padding: 40px 0;
margin-right: 20px;
} }
.content { .content {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
.menu.hidden {
visibility: hidden;
width: 0;
}

4
components/layout/SideNav.js
View File

@ -2,9 +2,9 @@ import { Menu, Item } from 'react-basics';
import Link from 'next/link'; import Link from 'next/link';
import styles from './SideNav.module.css'; import styles from './SideNav.module.css';
export default function SideNav({ selectedKey, items, shallow }) { export default function SideNav({ selectedKey, items, shallow, onSelect = () => {} }) {
return ( return (
<Menu items={items} selectedKey={selectedKey} className={styles.menu}> <Menu items={items} selectedKey={selectedKey} className={styles.menu} onSelect={onSelect}>
{({ key, label, url }) => ( {({ key, label, url }) => (
<Item key={key} className={styles.item}> <Item key={key} className={styles.item}>
<Link href={url} shallow={shallow}> <Link href={url} shallow={shallow}>

1
components/layout/SideNav.module.css
View File

@ -11,4 +11,5 @@
.item { .item {
padding: 0; padding: 0;
border-radius: var(--border-radius);
} }

2
components/metrics/WebsiteChart.js
View File

@ -71,7 +71,7 @@ export default function WebsiteChart({
<WebsiteHeader websiteId={websiteId} title={title} domain={domain}> <WebsiteHeader websiteId={websiteId} title={title} domain={domain}>
{showDetailsButton && ( {showDetailsButton && (
<Link href={`/websites/${websiteId}`}> <Link href={`/websites/${websiteId}`}>
<Button> <Button variant="primary">
<Text>{formatMessage(labels.viewDetails)}</Text> <Text>{formatMessage(labels.viewDetails)}</Text>
<Icon> <Icon>
<Icons.ArrowRight /> <Icons.ArrowRight />

4
components/pages/login/LoginForm.module.css
View File

@ -1,5 +1,5 @@
.login { .login {
width: 300px; width: 400px;
margin: auto; margin: auto;
transform: translateY(-25%); transform: translateY(-25%);
} }
@ -7,6 +7,8 @@
.form { .form {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
margin: 0 auto;
width: 300px;
} }
.title { .title {

8
components/pages/settings/profile/ProfileDetails.js
View File

@ -3,12 +3,15 @@ import TimezoneSetting from 'components/pages/settings/profile/TimezoneSetting';
import DateRangeSetting from 'components/pages/settings/profile/DateRangeSetting'; import DateRangeSetting from 'components/pages/settings/profile/DateRangeSetting';
import LanguageSetting from 'components/pages/settings/profile/LanguageSetting'; import LanguageSetting from 'components/pages/settings/profile/LanguageSetting';
import ThemeSetting from 'components/pages/settings/profile/ThemeSetting'; import ThemeSetting from 'components/pages/settings/profile/ThemeSetting';
import PasswordChangeButton from './PasswordChangeButton';
import useUser from 'hooks/useUser'; import useUser from 'hooks/useUser';
import useMessages from 'hooks/useMessages'; import useMessages from 'hooks/useMessages';
import useConfig from 'hooks/useConfig';
export default function ProfileDetails() { export default function ProfileDetails() {
const { user } = useUser(); const { user } = useUser();
const { formatMessage, labels } = useMessages(); const { formatMessage, labels } = useMessages();
const { cloudMode } = useConfig();
if (!user) { if (!user) {
return null; return null;
@ -22,6 +25,11 @@ export default function ProfileDetails() {
<FormRow label={formatMessage(labels.role)}> <FormRow label={formatMessage(labels.role)}>
{formatMessage(labels[role] || labels.unknown)} {formatMessage(labels[role] || labels.unknown)}
</FormRow> </FormRow>
{!cloudMode && (
<FormRow label={formatMessage(labels.password)}>
<PasswordChangeButton />
</FormRow>
)}
<FormRow label={formatMessage(labels.defaultDateRange)}> <FormRow label={formatMessage(labels.defaultDateRange)}>
<DateRangeSetting /> <DateRangeSetting />
</FormRow> </FormRow>

7
components/pages/settings/profile/ProfileSettings.js
View File

@ -1,19 +1,14 @@
import Page from 'components/layout/Page'; import Page from 'components/layout/Page';
import PageHeader from 'components/layout/PageHeader'; import PageHeader from 'components/layout/PageHeader';
import ProfileDetails from './ProfileDetails'; import ProfileDetails from './ProfileDetails';
import PasswordChangeButton from './PasswordChangeButton';
import useConfig from 'hooks/useConfig';
import useMessages from 'hooks/useMessages'; import useMessages from 'hooks/useMessages';
export default function ProfileSettings() { export default function ProfileSettings() {
const { formatMessage, labels } = useMessages(); const { formatMessage, labels } = useMessages();
const { cloudMode } = useConfig();
return ( return (
<Page> <Page>
<PageHeader title={formatMessage(labels.profile)}> <PageHeader title={formatMessage(labels.profile)} />
{!cloudMode && <PasswordChangeButton />}
</PageHeader>
<ProfileDetails /> <ProfileDetails />
</Page> </Page>
); );

2
pages/login.js
View File

@ -16,7 +16,7 @@ export default function LoginPage({ disabled }) {
export async function getServerSideProps() { export async function getServerSideProps() {
return { return {
props: { props: {
disabled: !!process.env.DISABLE_LOGIN, disabled: !!(process.env.DISABLE_LOGIN || process.env.CLOUD_MODE),
}, },
}; };
} }

4
pages/settings/index.js
View File

@ -1,9 +1,11 @@
export default () => null; export default () => null;
export async function getServerSideProps() { export async function getServerSideProps() {
const dest = process.env.CLOUD_MODE ? 'profile' : 'websites';
return { return {
redirect: { redirect: {
destination: '/settings/websites', destination: `/settings/${dest}`,
permanent: true, permanent: true,
}, },
}; };

6
pages/settings/profile/index.js
View File

@ -1,10 +1,10 @@
import AppLayout from 'components/layout/AppLayout'; import SettingsLayout from 'components/layout/SettingsLayout';
import ProfileSettings from 'components/pages/settings/profile/ProfileSettings'; import ProfileSettings from 'components/pages/settings/profile/ProfileSettings';
export default function ProfilePage() { export default function ProfilePage() {
return ( return (
<AppLayout> <SettingsLayout>
<ProfileSettings /> <ProfileSettings />
</AppLayout> </SettingsLayout>
); );
} }

6
pages/settings/teams/[id]/index.js
View File

@ -1,4 +1,4 @@
import AppLayout from 'components/layout/AppLayout'; import SettingsLayout from 'components/layout/SettingsLayout';
import TeamSettings from 'components/pages/settings/teams/TeamSettings'; import TeamSettings from 'components/pages/settings/teams/TeamSettings';
import { useRouter } from 'next/router'; import { useRouter } from 'next/router';
@ -11,9 +11,9 @@ export default function TeamDetailPage({ disabled }) {
} }
return ( return (
<AppLayout> <SettingsLayout>
<TeamSettings teamId={id} /> <TeamSettings teamId={id} />
</AppLayout> </SettingsLayout>
); );
} }

6
pages/settings/teams/index.js
View File

@ -1,4 +1,4 @@
import AppLayout from 'components/layout/AppLayout'; import SettingsLayout from 'components/layout/SettingsLayout';
import TeamsList from 'components/pages/settings/teams/TeamsList'; import TeamsList from 'components/pages/settings/teams/TeamsList';
export default function TeamsPage({ disabled }) { export default function TeamsPage({ disabled }) {
@ -7,9 +7,9 @@ export default function TeamsPage({ disabled }) {
} }
return ( return (
<AppLayout> <SettingsLayout>
<TeamsList /> <TeamsList />
</AppLayout> </SettingsLayout>
); );
} }

6
pages/settings/users/[id]/index.js
View File

@ -1,4 +1,4 @@
import AppLayout from 'components/layout/AppLayout'; import SettingsLayout from 'components/layout/SettingsLayout';
import UserSettings from 'components/pages/settings/users/UserSettings'; import UserSettings from 'components/pages/settings/users/UserSettings';
import { useRouter } from 'next/router'; import { useRouter } from 'next/router';
@ -11,9 +11,9 @@ export default function TeamDetailPage({ disabled }) {
} }
return ( return (
<AppLayout> <SettingsLayout>
<UserSettings userId={id} /> <UserSettings userId={id} />
</AppLayout> </SettingsLayout>
); );
} }

6
pages/settings/users/index.js
View File

@ -1,4 +1,4 @@
import AppLayout from 'components/layout/AppLayout'; import SettingsLayout from 'components/layout/SettingsLayout';
import UsersList from 'components/pages/settings/users/UsersList'; import UsersList from 'components/pages/settings/users/UsersList';
export default function UsersPage({ disabled }) { export default function UsersPage({ disabled }) {
@ -7,9 +7,9 @@ export default function UsersPage({ disabled }) {
} }
return ( return (
<AppLayout> <SettingsLayout>
<UsersList /> <UsersList />
</AppLayout> </SettingsLayout>
); );
} }

6
pages/settings/websites/[id]/index.js
View File

@ -1,6 +1,6 @@
import { useRouter } from 'next/router'; import { useRouter } from 'next/router';
import WebsiteSettings from 'components/pages/settings/websites/WebsiteSettings'; import WebsiteSettings from 'components/pages/settings/websites/WebsiteSettings';
import AppLayout from 'components/layout/AppLayout'; import SettingsLayout from 'components/layout/SettingsLayout';
export default function WebsiteSettingsPage({ disabled }) { export default function WebsiteSettingsPage({ disabled }) {
const router = useRouter(); const router = useRouter();
@ -11,9 +11,9 @@ export default function WebsiteSettingsPage({ disabled }) {
} }
return ( return (
<AppLayout> <SettingsLayout>
<WebsiteSettings websiteId={id} /> <WebsiteSettings websiteId={id} />
</AppLayout> </SettingsLayout>
); );
} }