mirror of
https://github.com/umami-software/umami.git
synced 2026-02-10 07:37:11 +01:00
Updated login and layout pages.
This commit is contained in:
Mike Cao
parent
9d967fb0fe
commit
4f15c4f146
18 changed files with 103 additions and 106 deletions
|
|
@ -3,8 +3,10 @@ import Head from 'next/head';
|
|||
import Header from 'components/layout/Header';
|
||||
import Footer from 'components/layout/Footer';
|
||||
import useLocale from 'hooks/useLocale';
|
||||
import useRequireLogin from 'hooks/useRequireLogin';
|
||||
|
||||
export default function Layout({ title, children, header = true, footer = true }) {
|
||||
export default function AppLayout({ title, children }) {
|
||||
useRequireLogin();
|
||||
const { dir } = useLocale();
|
||||
|
||||
return (
|
||||
|
|
@ -12,9 +14,9 @@ export default function Layout({ title, children, header = true, footer = true }
|
|||
<Head>
|
||||
<title>{title ? `${title} | umami` : 'umami'}</title>
|
||||
</Head>
|
||||
{header && <Header />}
|
||||
<Header />
|
||||
<main>{children}</main>
|
||||
{footer && <Footer />}
|
||||
<Footer />
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
|
|
@ -5,11 +5,11 @@ import Page from 'components/layout/Page';
|
|||
import PageHeader from 'components/layout/PageHeader';
|
||||
import WebsiteChartList from 'components/pages/websites/WebsiteChartList';
|
||||
import DashboardSettingsButton from 'components/settings/DashboardSettingsButton';
|
||||
import DashboardEdit from 'components/pages/dashboard/DashboardEdit';
|
||||
import styles from 'components/pages/websites/WebsiteList.module.css';
|
||||
import useUser from 'hooks/useUser';
|
||||
import useApi from 'hooks/useApi';
|
||||
import useRequireLogin from 'hooks/useRequireLogin';
|
||||
import useDashboard from 'store/dashboard';
|
||||
import DashboardEdit from './DashboardEdit';
|
||||
import styles from '../websites/WebsiteList.module.css';
|
||||
|
||||
const messages = defineMessages({
|
||||
dashboard: { id: 'label.dashboard', defaultMessage: 'Dashboard' },
|
||||
|
|
@ -17,7 +17,7 @@ const messages = defineMessages({
|
|||
});
|
||||
|
||||
export default function Dashboard({ userId }) {
|
||||
const { user } = useRequireLogin();
|
||||
const { user } = useUser();
|
||||
const dashboard = useDashboard();
|
||||
const { showCharts, limit, editing } = dashboard;
|
||||
const [max, setMax] = useState(limit);
|
||||
|
|
|
|||
|
|
@ -14,6 +14,7 @@ import useApi from 'hooks/useApi';
|
|||
import { setUser } from 'store/app';
|
||||
import { setClientAuthToken } from 'lib/client';
|
||||
import Logo from 'assets/logo.svg';
|
||||
import styles from './LoginForm.module.css';
|
||||
|
||||
export default function LoginForm() {
|
||||
const router = useRouter();
|
||||
|
|
@ -26,20 +27,18 @@ export default function LoginForm() {
|
|||
setClientAuthToken(token);
|
||||
setUser(user);
|
||||
|
||||
await router.push('/websites');
|
||||
await router.push('/dashboard');
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<div>
|
||||
<Icon size="xl">
|
||||
<Logo />
|
||||
</Icon>
|
||||
<p>umami</p>
|
||||
</div>
|
||||
<Form onSubmit={handleSubmit} error={error}>
|
||||
<div className={styles.login}>
|
||||
<Icon className={styles.icon} size="xl">
|
||||
<Logo />
|
||||
</Icon>
|
||||
<div className={styles.title}>umami</div>
|
||||
<Form className={styles.form} onSubmit={handleSubmit} error={error}>
|
||||
<FormRow label="Username">
|
||||
<FormInput name="username" rules={{ required: 'Required' }}>
|
||||
<TextField autoComplete="off" />
|
||||
|
|
@ -51,11 +50,11 @@ export default function LoginForm() {
|
|||
</FormInput>
|
||||
</FormRow>
|
||||
<FormButtons>
|
||||
<SubmitButton variant="primary" disabled={isLoading}>
|
||||
<SubmitButton className={styles.button} variant="primary" disabled={isLoading}>
|
||||
Log in
|
||||
</SubmitButton>
|
||||
</FormButtons>
|
||||
</Form>
|
||||
</>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,23 +1,31 @@
|
|||
.login {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-top: 80px;
|
||||
width: 300px;
|
||||
margin: auto;
|
||||
transform: translateY(-25%);
|
||||
}
|
||||
|
||||
.login form {
|
||||
margin: 0 auto;
|
||||
.form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
text-align: center;
|
||||
margin: 30px 0;
|
||||
}
|
||||
|
||||
.icon {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.icon svg {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
.button {
|
||||
flex: 1;
|
||||
justify-content: center;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.header {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.header h1 {
|
||||
margin: 12px 0;
|
||||
}
|
||||
|
|
|
|||
16
components/pages/login/LoginLayout.js
Normal file
16
components/pages/login/LoginLayout.js
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
import Head from 'next/head';
|
||||
import useLocale from 'hooks/useLocale';
|
||||
import styles from './LoginLayout.module.css';
|
||||
|
||||
export default function LoginLayout({ children }) {
|
||||
const { dir } = useLocale();
|
||||
|
||||
return (
|
||||
<div className={styles.layout} dir={dir}>
|
||||
<Head>
|
||||
<title>{`Login | umami`}</title>
|
||||
</Head>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
7
components/pages/login/LoginLayout.module.css
Normal file
7
components/pages/login/LoginLayout.module.css
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
.layout {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100vh;
|
||||
}
|
||||
|
|
@ -1,23 +1,23 @@
|
|||
import Layout from 'components/layout/Layout';
|
||||
import AppLayout from 'components/layout/AppLayout';
|
||||
import Menu from 'components/nav/Nav';
|
||||
import useRequireLogin from 'hooks/useRequireLogin';
|
||||
import styles from './SettingsLayout.module.css';
|
||||
import useConfig from 'hooks/useConfig';
|
||||
|
||||
export default function SettingsLayout({ children }) {
|
||||
const { user } = useRequireLogin();
|
||||
const { adminDisabled } = useConfig();
|
||||
|
||||
if (!user) {
|
||||
if (adminDisabled) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<Layout>
|
||||
<AppLayout>
|
||||
<div className={styles.dashboard}>
|
||||
<div className={styles.nav}>
|
||||
<Menu />
|
||||
</div>
|
||||
<div className={styles.content}>{children}</div>
|
||||
</div>
|
||||
</Layout>
|
||||
</AppLayout>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,8 +12,10 @@ export default function WebsitesList() {
|
|||
const [edit, setEdit] = useState(false);
|
||||
const { get, useQuery } = useApi();
|
||||
const { user } = useUser();
|
||||
const { data, isLoading, error, refetch } = useQuery(['websites', user.id], () =>
|
||||
get(`/users/${user.id}/websites`),
|
||||
const { data, isLoading, error, refetch } = useQuery(
|
||||
['websites', user?.id],
|
||||
() => get(`/users/${user?.id}/websites`),
|
||||
{ enabled: !!user },
|
||||
);
|
||||
const hasData = data && data.length !== 0;
|
||||
const { toast, showToast } = useToast();
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue