ambiser
/
umami
9
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Initial conversion to react-basics.

pull/1683/head
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 { useRef } from 'react';
import { FormattedMessage } from 'react-intl'; import { useMutation } from '@tanstack/react-query';
import { Formik, Form, Field } from 'formik'; import {
import { setItem } from 'next-basics'; Form,
import { useRouter } from 'next/router'; FormInput,
import Button from 'components/common/Button';
import FormLayout, {
FormButtons, FormButtons,
FormError, TextField,
FormMessage, PasswordField,
FormRow, SubmitButton,
} from 'components/layout/FormLayout'; Icon,
import Icon from 'components/common/Icon'; } from 'react-basics';
import useApi from 'hooks/useApi'; import { useRouter } from 'next/router';
import { AUTH_TOKEN } from 'lib/constants'; import { useApi } from 'next-basics';
import { setUser } from 'store/app'; import { setUser } from 'store/app';
import { setAuthToken } from 'lib/client';
import Logo from 'assets/logo.svg'; import Logo from 'assets/logo.svg';
import styles from './LoginForm.module.css'; import styles from './Form.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;
};
export default function LoginForm() { export default function LoginForm() {
const { post } = useApi();
const router = useRouter(); 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 handleSubmit = async data => {
const { ok, status, data } = await post('/auth/login', { mutate(data, {
username, onSuccess: async ({ token, account }) => {
password, 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 ( return (
<FormLayout className={styles.login}> <>
<Formik <div className={styles.header}>
initialValues={{ <Icon size="xl">
username: '', <Logo />
password: '', </Icon>
}} <p>umami</p>
validate={validate} </div>
onSubmit={handleSubmit} <Form ref={ref} className={styles.form} onSubmit={handleSubmit} error={error}>
> <FormInput name="username" label="Username" rules={{ required: 'Required' }}>
{() => ( <TextField autoComplete="off" />
<Form> </FormInput>
<div className={styles.header}> <FormInput name="password" label="Password" rules={{ required: 'Required' }}>
<Icon icon={<Logo />} size="xlarge" className={styles.icon} /> <PasswordField />
<h1 className="center">umami</h1> </FormInput>
</div> <FormButtons>
<FormRow> <SubmitButton variant="primary" className={styles.button} disabled={isLoading}>
<label htmlFor="username"> Log in
<FormattedMessage id="label.username" defaultMessage="Username" /> </SubmitButton>
</label> </FormButtons>
<div> </Form>
<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>
); );
} }

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 cors from 'cors';
import { validate } from 'uuid'; import { validate } from 'uuid';
import { findSession } from 'lib/session'; import { findSession } from 'lib/session';
import { parseShareToken, getAuthToken } from 'lib/auth'; import { getAuthToken, parseShareToken } from 'lib/auth';
import { secret } from 'lib/crypto'; import { secret } from 'lib/crypto';
import redis from 'lib/redis'; import redis from 'lib/redis';
import { getUser } from '../queries'; import { getUser } from '../queries';

30
lib/redis.js
View File

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

8
package.json
View File

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

42
pages/_app.js
View File

@ -1,14 +1,16 @@
import Head from 'next/head'; import Head from 'next/head';
import { useRouter } from 'next/router'; import { useRouter } from 'next/router';
import { IntlProvider } from 'react-intl'; import { IntlProvider } from 'react-intl';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import useLocale from 'hooks/useLocale'; import useLocale from 'hooks/useLocale';
import useConfig from 'hooks/useConfig'; import useConfig from 'hooks/useConfig';
import 'styles/variables.css'; import 'react-basics/dist/styles.css';
import 'styles/bootstrap-grid.css';
import 'styles/index.css'; import 'styles/index.css';
import '@fontsource/inter/400.css'; import '@fontsource/inter/400.css';
import '@fontsource/inter/600.css'; import '@fontsource/inter/600.css';
const client = new QueryClient();
export default function App({ Component, pageProps }) { export default function App({ Component, pageProps }) {
const { locale, messages } = useLocale(); const { locale, messages } = useLocale();
const { basePath } = useRouter(); const { basePath } = useRouter();
@ -22,22 +24,24 @@ export default function App({ Component, pageProps }) {
} }
return ( return (
<IntlProvider locale={locale} messages={messages[locale]} textComponent={Wrapper}> <QueryClientProvider client={client}>
<Head> <IntlProvider locale={locale} messages={messages[locale]} textComponent={Wrapper}>
<link rel="icon" href={`${basePath}/favicon.ico`} /> <Head>
<link rel="apple-touch-icon" sizes="180x180" href={`${basePath}/apple-touch-icon.png`} /> <link rel="icon" href={`${basePath}/favicon.ico`} />
<link rel="icon" type="image/png" sizes="32x32" href={`${basePath}/favicon-32x32.png`} /> <link rel="apple-touch-icon" sizes="180x180" href={`${basePath}/apple-touch-icon.png`} />
<link rel="icon" type="image/png" sizes="16x16" href={`${basePath}/favicon-16x16.png`} /> <link rel="icon" type="image/png" sizes="32x32" href={`${basePath}/favicon-32x32.png`} />
<link rel="manifest" href={`${basePath}/site.webmanifest`} /> <link rel="icon" type="image/png" sizes="16x16" href={`${basePath}/favicon-16x16.png`} />
<link rel="mask-icon" href={`${basePath}/safari-pinned-tab.svg`} color="#5bbad5" /> <link rel="manifest" href={`${basePath}/site.webmanifest`} />
<meta name="msapplication-TileColor" content="#da532c" /> <link rel="mask-icon" href={`${basePath}/safari-pinned-tab.svg`} color="#5bbad5" />
<meta name="theme-color" content="#fafafa" media="(prefers-color-scheme: light)" /> <meta name="msapplication-TileColor" content="#da532c" />
<meta name="theme-color" content="#2f2f2f" media="(prefers-color-scheme: dark)" /> <meta name="theme-color" content="#fafafa" media="(prefers-color-scheme: light)" />
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="theme-color" content="#2f2f2f" media="(prefers-color-scheme: dark)" />
</Head> <meta name="viewport" content="width=device-width, initial-scale=1" />
<div className="container" dir={dir}> </Head>
<Component {...pageProps} /> <div className="container" dir={dir}>
</div> <Component {...pageProps} />
</IntlProvider> </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, 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', Ubuntu, Cantrell, 'Helvetica Neue', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
'Segoe UI Symbol'; 'Segoe UI Symbol';
font-size: 16px;
font-weight: 400; font-weight: 400;
line-height: 1.8; line-height: 1.8;
padding: 0; padding: 0;
@ -12,9 +13,6 @@ body {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
flex: 1; flex: 1;
font-size: var(--font-size-normal);
overflow-y: overlay;
} }
body { body {
@ -70,38 +68,12 @@ h6 {
margin: 0; margin: 0;
} }
button,
input,
select {
font-family: Inter, -apple-system, BlinkMacSystemFont, sans-serif;
}
a, a,
a:active, a:active,
a:visited { a:visited {
color: var(--primary400); 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 { label {
flex: 1; flex: 1;
margin-right: 20px; margin-right: 20px;
@ -141,24 +113,3 @@ svg {
#__modals { #__modals {
z-index: 10; 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, "noEmit": true,
"jsx": "preserve" "jsx": "preserve"
}, },
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "queries/admin/website/getAllWebsites.ts"], "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
"exclude": ["node_modules"] "exclude": ["node_modules"]
} }

972
yarn.lock
View File

File diff suppressed because it is too large Load Diff