hamcha/strimertul
1
0
Fork 0
mirror of https://git.sr.ht/~ashkeel/strimertul synced 2024-09-20 02:00:49 +00:00
Code Activity Actions

Add field component

Browse source
This commit is contained in:
Ash Keel 2021-09-16 17:10:24 +02:00
parent 0454a96bd5
commit 3cb61a8681
No known key found for this signature in database
GPG key ID: BAD8D93E7314ED3E
3 changed files with 36 additions and 26 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
frontend/src/ui/components/Field.tsx Normal file
View file

@ -0,0 +1,16 @@
import React from 'react';
export interface FieldProps {
name?: string;
}
function Field({ name, children }: React.PropsWithChildren<FieldProps>) {
return (
<div className="field">
{name ? <label className="label">{name}</label> : null}
{children}
</div>
);
}
export default React.memo(Field);

15
frontend/src/ui/pages/twitch/APISettings.tsx
View file

@ -3,6 +3,7 @@ import React from 'react';
import { useDispatch } from 'react-redux'; import { useDispatch } from 'react-redux';
import { useModule } from '../../../lib/react-utils'; import { useModule } from '../../../lib/react-utils';
import apiReducer, { modules } from '../../../store/api/reducer'; import apiReducer, { modules } from '../../../store/api/reducer';
import Field from '../../components/Field';
export default function TwitchBotSettingsPage( export default function TwitchBotSettingsPage(
// eslint-disable-next-line @typescript-eslint/no-unused-vars // eslint-disable-next-line @typescript-eslint/no-unused-vars
@ -18,7 +19,7 @@ export default function TwitchBotSettingsPage(
return ( return (
<> <>
<h1 className="title is-4">Twitch module configuration</h1> <h1 className="title is-4">Twitch module configuration</h1>
<div className="field"> <Field>
<label className="checkbox"> <label className="checkbox">
<input <input
type="checkbox" type="checkbox"
@ -35,7 +36,7 @@ export default function TwitchBotSettingsPage(
/>{' '} />{' '}
Enable twitch integration Enable twitch integration
</label> </label>
</div> </Field>
<div className="copyblock"> <div className="copyblock">
<p>You will need to create an application, here's how:</p> <p>You will need to create an application, here's how:</p>
<p> <p>
@ -54,8 +55,7 @@ export default function TwitchBotSettingsPage(
</dl> </dl>
- Once created, create a <b>New Secret</b>, then copy both fields below! - Once created, create a <b>New Secret</b>, then copy both fields below!
</div> </div>
<div className="field"> <Field name="App Client ID">
<label className="label">App Client ID</label>
<p className="control"> <p className="control">
<input <input
disabled={!active} disabled={!active}
@ -73,9 +73,8 @@ export default function TwitchBotSettingsPage(
} }
/> />
</p> </p>
</div> </Field>
<div className="field"> <Field name="App Client Secret">
<label className="label">App Client Secret</label>
<p className="control"> <p className="control">
<input <input
disabled={!active} disabled={!active}
@ -93,7 +92,7 @@ export default function TwitchBotSettingsPage(
} }
/> />
</p> </p>
</div> </Field>
<button <button
className="button" className="button"
onClick={() => { onClick={() => {

31
frontend/src/ui/pages/twitch/BotSettings.tsx
View file

@ -3,6 +3,7 @@ import React from 'react';
import { useDispatch } from 'react-redux'; import { useDispatch } from 'react-redux';
import { useModule } from '../../../lib/react-utils'; import { useModule } from '../../../lib/react-utils';
import apiReducer, { modules } from '../../../store/api/reducer'; import apiReducer, { modules } from '../../../store/api/reducer';
import Field from '../../components/Field';
export default function TwitchBotSettingsPage( export default function TwitchBotSettingsPage(
// eslint-disable-next-line @typescript-eslint/no-unused-vars // eslint-disable-next-line @typescript-eslint/no-unused-vars
@ -23,7 +24,7 @@ export default function TwitchBotSettingsPage(
return ( return (
<> <>
<h1 className="title is-4">Twitch module configuration</h1> <h1 className="title is-4">Twitch module configuration</h1>
<div className="field"> <Field>
<label className="checkbox"> <label className="checkbox">
<input <input
type="checkbox" type="checkbox"
@ -41,9 +42,8 @@ export default function TwitchBotSettingsPage(
Enable twitch bot Enable twitch bot
{twitchActive ? '' : '(Twitch integration must be enabled for this!)'} {twitchActive ? '' : '(Twitch integration must be enabled for this!)'}
</label> </label>
</div> </Field>
<div className="field"> <Field name="Twitch channel">
<label className="label">Twitch channel</label>
<p className="control"> <p className="control">
<input <input
disabled={!active} disabled={!active}
@ -61,11 +61,8 @@ export default function TwitchBotSettingsPage(
} }
/> />
</p> </p>
</div> </Field>
<div className="field"> <Field name="Bot username (must be a valid Twitch account)">
<label className="label">
Bot username (must be a valid Twitch account)
</label>
<p className="control"> <p className="control">
<input <input
disabled={!active} disabled={!active}
@ -83,9 +80,8 @@ export default function TwitchBotSettingsPage(
} }
/> />
</p> </p>
</div> </Field>
<div className="field"> <Field name="Bot OAuth token">
<label className="label">Bot OAuth token</label>
<p className="control"> <p className="control">
<input <input
disabled={!active} disabled={!active}
@ -107,8 +103,8 @@ export default function TwitchBotSettingsPage(
You can get this by logging in with the bot account and going here:{' '} You can get this by logging in with the bot account and going here:{' '}
<a href="https://twitchapps.com/tmi/">https://twitchapps.com/tmi/</a> <a href="https://twitchapps.com/tmi/">https://twitchapps.com/tmi/</a>
</p> </p>
</div> </Field>
<div className="field"> <Field>
<label className="checkbox"> <label className="checkbox">
<input <input
type="checkbox" type="checkbox"
@ -125,9 +121,8 @@ export default function TwitchBotSettingsPage(
/>{' '} />{' '}
Enable chat keys (for 3rd party chat integration) Enable chat keys (for 3rd party chat integration)
</label> </label>
</div> </Field>
<div className="field"> <Field name="Chat history">
<label className="label">Chat history</label>
<p className="control"> <p className="control">
<input <input
className="input" className="input"
@ -145,7 +140,7 @@ export default function TwitchBotSettingsPage(
} }
/> />
</p> </p>
</div> </Field>
<button <button
className="button" className="button"
onClick={() => { onClick={() => {