m
/
umami
mirror of https://github.com/kremalicious/umami.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Initial conversion to react-basics.

This commit is contained in:
Mike Cao 2022-11-21 22:32:55 -08:00
parent c0a18e13fa
commit 2259ee8d76
10 changed files with 724 additions and 609 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

63
components/forms/Form.module.css Normal file
View File

@ -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(--gray50);
padding: 16px;
color: var(--red400);
border: 1px solid var(--red400);
border-radius: 5px;
text-align: center;
}
.success {
width: 600px;
margin: 60px auto;
background: var(--gray50);
padding: 16px;
color: var(--green400);
border: 1px solid var(--green400);
border-radius: 5px;
text-align: center;
}

149
components/forms/LoginForm.js
View File

@ -1,113 +1,62 @@
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 { useRef } from 'react';
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 = <FormattedMessage id="label.required" defaultMessage="Required" />;
}
if (!password) {
errors.password = <FormattedMessage id="label.required" defaultMessage="Required" />;
}
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 ref = useRef();
const handleSubmit = async ({ username, password }) => {
const { ok, status, data } = await post('/auth/login', {
username,
password,
const handleSubmit = async data => {
mutate(data, {
onSuccess: async ({ token, account }) => {
setAuthToken(token);
setUser(account);
await router.push('/websites');
},
onError: async () => {
ref.current.reset(undefined, { keepDirty: true, keepValues: true });
},
});
if (ok) {
const { user, token } = data;
setItem(AUTH_TOKEN, token);
setUser(user);
await router.push('/');
return null;
} else {
setMessage(
status === 401 ? (
<FormattedMessage
id="message.incorrect-username-password"
defaultMessage="Incorrect username/password."
/>
) : (
data
),
);
}
};
return (
<FormLayout className={styles.login}>
<Formik
initialValues={{
username: '',
password: '',
}}
validate={validate}
onSubmit={handleSubmit}
>
{() => (
<Form>
<div className={styles.header}>
<Icon icon={<Logo />} size="xlarge" className={styles.icon} />
<h1 className="center">umami</h1>
</div>
<FormRow>
<label htmlFor="username">
<FormattedMessage id="label.username" defaultMessage="Username" />
</label>
<div>
<Field name="username" type="text" />
<FormError name="username" />
</div>
</FormRow>
<FormRow>
<label htmlFor="password">
<FormattedMessage id="label.password" defaultMessage="Password" />
</label>
<div>
<Field name="password" type="password" />
<FormError name="password" />
</div>
</FormRow>
<FormButtons>
<Button type="submit" variant="action">
<FormattedMessage id="label.login" defaultMessage="Login" />
</Button>
</FormButtons>
<FormMessage>{message}</FormMessage>
</Form>
)}
</Formik>
</FormLayout>
<>
<div className={styles.header}>
<Icon size="xl">
<Logo />
</Icon>
<p>umami</p>
</div>
<Form ref={ref} className={styles.form} onSubmit={handleSubmit} error={error}>
<FormInput name="username" label="Username" rules={{ required: 'Required' }}>
<TextField autoComplete="off" />
</FormInput>
<FormInput name="password" label="Password" rules={{ required: 'Required' }}>
<PasswordField />
</FormInput>
<FormButtons>
<SubmitButton variant="primary" className={styles.button} disabled={isLoading}>
Log in
</SubmitButton>
</FormButtons>
</Form>
</>
);
}

14
lib/client.ts Normal file
View File

@ -0,0 +1,14 @@
import { getItem, setItem, removeItem } from 'next-basics';
import { AUTH_TOKEN } from './constants';
export function getAuthToken() {
return getItem(AUTH_TOKEN);
}
export function setAuthToken(token) {
setItem(AUTH_TOKEN, token);
}
export function removeAuthToken() {
removeItem(AUTH_TOKEN);
}

2
lib/middleware.js
View File

@ -3,7 +3,7 @@ import debug from 'debug';
import cors from 'cors';
import { validate } from 'uuid';
import { findSession } from 'lib/session';
import { parseShareToken, getAuthToken } from 'lib/auth';
import { getAuthToken, parseShareToken } from 'lib/auth';
import { secret } from 'lib/crypto';
import redis from 'lib/redis';
import { getUser } from '../queries';

30
lib/redis.js
View File

@ -1,39 +1,39 @@
import { createClient } from 'redis';
import debug from 'debug';
import Redis from 'ioredis';
import { REDIS } from 'lib/db';
const log = debug('umami:redis');
export const DELETED = 'deleted';
const REDIS = Symbol();
let redis;
const enabled = Boolean(process.env.REDIS_URL);
function getClient() {
if (!enabled) {
async function getClient() {
if (!process.env.REDIS_URL) {
return null;
}
const redis = new Redis(process.env.REDIS_URL, {
retryStrategy(times) {
log(`Redis reconnecting attempt: ${times}`);
return 5000;
},
});
const client = createClient({ url: process.env.REDIS_URL });
client.on('error', err => log(err));
await client.connect();
if (process.env.NODE_ENV !== 'production') {
global[REDIS] = redis;
global[REDIS] = client;
}
log('Redis initialized');
return redis;
return client;
}
async function get(key) {
await connect();
const data = await redis.get(key);
log({ key, data });
try {
return JSON.parse(await redis.get(key));
return JSON.parse(data);
} catch {
return null;
}
@ -53,7 +53,7 @@ async function del(key) {
async function connect() {
if (!redis && enabled) {
redis = global[REDIS] || getClient();
redis = global[REDIS] || (await getClient());
}
return redis;

8
package.json
View File

@ -57,6 +57,7 @@
"dependencies": {
"@fontsource/inter": "4.5.7",
"@prisma/client": "4.5.0",
"@tanstack/react-query": "^4.16.1",
"chalk": "^4.1.1",
"chart.js": "^2.9.4",
"classnames": "^2.3.1",
@ -74,7 +75,6 @@
"formik": "^2.2.9",
"fs-extra": "^10.0.1",
"immer": "^9.0.12",
"ioredis": "^5.2.3",
"ipaddr.js": "^2.0.1",
"is-ci": "^3.0.1",
"is-docker": "^3.0.0",
@ -88,15 +88,17 @@
"node-fetch": "^3.2.8",
"npm-run-all": "^4.1.5",
"prop-types": "^15.7.2",
"react": "^17.0.0",
"react": "^18.2.0",
"react-basics": "^0.29.0",
"react-beautiful-dnd": "^13.1.0",
"react-dom": "^17.0.0",
"react-dom": "^18.2.0",
"react-intl": "^5.24.7",
"react-simple-maps": "^2.3.0",
"react-spring": "^9.4.4",
"react-tooltip": "^4.2.21",
"react-use-measure": "^2.0.4",
"react-window": "^1.8.6",
"redis": "^4.5.0",
"request-ip": "^3.3.0",
"semver": "^7.3.6",
"thenby": "^1.3.4",

42
pages/_app.js
View File

@ -1,14 +1,16 @@
import Head from 'next/head';
import { useRouter } from 'next/router';
import { IntlProvider } from 'react-intl';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import useLocale from 'hooks/useLocale';
import useConfig from 'hooks/useConfig';
import 'styles/variables.css';
import 'styles/bootstrap-grid.css';
import 'react-basics/dist/styles.css';
import 'styles/index.css';
import '@fontsource/inter/400.css';
import '@fontsource/inter/600.css';
const client = new QueryClient();
export default function App({ Component, pageProps }) {
const { locale, messages } = useLocale();
const { basePath } = useRouter();
@ -22,22 +24,24 @@ export default function App({ Component, pageProps }) {
}
return (
<IntlProvider locale={locale} messages={messages[locale]} textComponent={Wrapper}>
<Head>
<link rel="icon" href={`${basePath}/favicon.ico`} />
<link rel="apple-touch-icon" sizes="180x180" href={`${basePath}/apple-touch-icon.png`} />
<link rel="icon" type="image/png" sizes="32x32" href={`${basePath}/favicon-32x32.png`} />
<link rel="icon" type="image/png" sizes="16x16" href={`${basePath}/favicon-16x16.png`} />
<link rel="manifest" href={`${basePath}/site.webmanifest`} />
<link rel="mask-icon" href={`${basePath}/safari-pinned-tab.svg`} color="#5bbad5" />
<meta name="msapplication-TileColor" content="#da532c" />
<meta name="theme-color" content="#fafafa" media="(prefers-color-scheme: light)" />
<meta name="theme-color" content="#2f2f2f" media="(prefers-color-scheme: dark)" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
</Head>
<div className="container" dir={dir}>
<Component {...pageProps} />
</div>
</IntlProvider>
<QueryClientProvider client={client}>
<IntlProvider locale={locale} messages={messages[locale]} textComponent={Wrapper}>
<Head>
<link rel="icon" href={`${basePath}/favicon.ico`} />
<link rel="apple-touch-icon" sizes="180x180" href={`${basePath}/apple-touch-icon.png`} />
<link rel="icon" type="image/png" sizes="32x32" href={`${basePath}/favicon-32x32.png`} />
<link rel="icon" type="image/png" sizes="16x16" href={`${basePath}/favicon-16x16.png`} />
<link rel="manifest" href={`${basePath}/site.webmanifest`} />
<link rel="mask-icon" href={`${basePath}/safari-pinned-tab.svg`} color="#5bbad5" />
<meta name="msapplication-TileColor" content="#da532c" />
<meta name="theme-color" content="#fafafa" media="(prefers-color-scheme: light)" />
<meta name="theme-color" content="#2f2f2f" media="(prefers-color-scheme: dark)" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
</Head>
<div className="container" dir={dir}>
<Component {...pageProps} />
</div>
</IntlProvider>
</QueryClientProvider>
);
}

51
styles/index.css
View File

@ -3,6 +3,7 @@ body {
font-family: Inter, -apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans,
Ubuntu, Cantrell, 'Helvetica Neue', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
'Segoe UI Symbol';
font-size: 16px;
font-weight: 400;
line-height: 1.8;
padding: 0;
@ -12,9 +13,6 @@ body {
display: flex;
flex-direction: column;
flex: 1;
font-size: var(--font-size-normal);
overflow-y: overlay;
}
body {
@ -70,38 +68,12 @@ h6 {
margin: 0;
}
button,
input,
select {
font-family: Inter, -apple-system, BlinkMacSystemFont, sans-serif;
}
a,
a:active,
a:visited {
color: var(--primary400);
}
input[type='text'],
input[type='password'],
select,
textarea {
color: var(--gray900);
background: var(--gray50);
padding: 4px 8px;
font-size: var(--font-size-normal);
line-height: 1.8;
border: 1px solid var(--gray500);
border-radius: 4px;
outline: none;
resize: none;
flex: 1;
}
input[type='checkbox'] + label {
margin-left: 10px;
}
label {
flex: 1;
margin-right: 20px;
@ -141,24 +113,3 @@ svg {
#__modals {
z-index: 10;
}
.container {
padding: 0;
display: flex;
flex-direction: column;
flex: 1;
}
.row {
margin-right: 0;
margin-left: 0;
}
.row > .col,
.row > [class*='col-'] {
padding-right: 0;
padding-left: 0;
}
.center {
text-align: center;
}

2
tsconfig.json
View File

@ -23,6 +23,6 @@
"noEmit": true,
"jsx": "preserve"
},
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "queries/admin/website/getAllWebsites.ts"],
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
"exclude": ["node_modules"]
}

972
yarn.lock
View File

File diff suppressed because it is too large Load Diff