mirror of
https://git.sr.ht/~ashkeel/strimertul
synced 2024-09-20 02:00:49 +00:00
Add field component
This commit is contained in:
parent
0454a96bd5
commit
3cb61a8681
3 changed files with 36 additions and 26 deletions
16
frontend/src/ui/components/Field.tsx
Normal file
16
frontend/src/ui/components/Field.tsx
Normal 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);
|
|
@ -3,6 +3,7 @@ import React from 'react';
|
|||
import { useDispatch } from 'react-redux';
|
||||
import { useModule } from '../../../lib/react-utils';
|
||||
import apiReducer, { modules } from '../../../store/api/reducer';
|
||||
import Field from '../../components/Field';
|
||||
|
||||
export default function TwitchBotSettingsPage(
|
||||
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
||||
|
@ -18,7 +19,7 @@ export default function TwitchBotSettingsPage(
|
|||
return (
|
||||
<>
|
||||
<h1 className="title is-4">Twitch module configuration</h1>
|
||||
<div className="field">
|
||||
<Field>
|
||||
<label className="checkbox">
|
||||
<input
|
||||
type="checkbox"
|
||||
|
@ -35,7 +36,7 @@ export default function TwitchBotSettingsPage(
|
|||
/>{' '}
|
||||
Enable twitch integration
|
||||
</label>
|
||||
</div>
|
||||
</Field>
|
||||
<div className="copyblock">
|
||||
<p>You will need to create an application, here's how:</p>
|
||||
<p>
|
||||
|
@ -54,8 +55,7 @@ export default function TwitchBotSettingsPage(
|
|||
</dl>
|
||||
- Once created, create a <b>New Secret</b>, then copy both fields below!
|
||||
</div>
|
||||
<div className="field">
|
||||
<label className="label">App Client ID</label>
|
||||
<Field name="App Client ID">
|
||||
<p className="control">
|
||||
<input
|
||||
disabled={!active}
|
||||
|
@ -73,9 +73,8 @@ export default function TwitchBotSettingsPage(
|
|||
}
|
||||
/>
|
||||
</p>
|
||||
</div>
|
||||
<div className="field">
|
||||
<label className="label">App Client Secret</label>
|
||||
</Field>
|
||||
<Field name="App Client Secret">
|
||||
<p className="control">
|
||||
<input
|
||||
disabled={!active}
|
||||
|
@ -93,7 +92,7 @@ export default function TwitchBotSettingsPage(
|
|||
}
|
||||
/>
|
||||
</p>
|
||||
</div>
|
||||
</Field>
|
||||
<button
|
||||
className="button"
|
||||
onClick={() => {
|
||||
|
|
|
@ -3,6 +3,7 @@ import React from 'react';
|
|||
import { useDispatch } from 'react-redux';
|
||||
import { useModule } from '../../../lib/react-utils';
|
||||
import apiReducer, { modules } from '../../../store/api/reducer';
|
||||
import Field from '../../components/Field';
|
||||
|
||||
export default function TwitchBotSettingsPage(
|
||||
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
||||
|
@ -23,7 +24,7 @@ export default function TwitchBotSettingsPage(
|
|||
return (
|
||||
<>
|
||||
<h1 className="title is-4">Twitch module configuration</h1>
|
||||
<div className="field">
|
||||
<Field>
|
||||
<label className="checkbox">
|
||||
<input
|
||||
type="checkbox"
|
||||
|
@ -41,9 +42,8 @@ export default function TwitchBotSettingsPage(
|
|||
Enable twitch bot
|
||||
{twitchActive ? '' : '(Twitch integration must be enabled for this!)'}
|
||||
</label>
|
||||
</div>
|
||||
<div className="field">
|
||||
<label className="label">Twitch channel</label>
|
||||
</Field>
|
||||
<Field name="Twitch channel">
|
||||
<p className="control">
|
||||
<input
|
||||
disabled={!active}
|
||||
|
@ -61,11 +61,8 @@ export default function TwitchBotSettingsPage(
|
|||
}
|
||||
/>
|
||||
</p>
|
||||
</div>
|
||||
<div className="field">
|
||||
<label className="label">
|
||||
Bot username (must be a valid Twitch account)
|
||||
</label>
|
||||
</Field>
|
||||
<Field name="Bot username (must be a valid Twitch account)">
|
||||
<p className="control">
|
||||
<input
|
||||
disabled={!active}
|
||||
|
@ -83,9 +80,8 @@ export default function TwitchBotSettingsPage(
|
|||
}
|
||||
/>
|
||||
</p>
|
||||
</div>
|
||||
<div className="field">
|
||||
<label className="label">Bot OAuth token</label>
|
||||
</Field>
|
||||
<Field name="Bot OAuth token">
|
||||
<p className="control">
|
||||
<input
|
||||
disabled={!active}
|
||||
|
@ -107,8 +103,8 @@ export default function TwitchBotSettingsPage(
|
|||
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>
|
||||
</p>
|
||||
</div>
|
||||
<div className="field">
|
||||
</Field>
|
||||
<Field>
|
||||
<label className="checkbox">
|
||||
<input
|
||||
type="checkbox"
|
||||
|
@ -125,9 +121,8 @@ export default function TwitchBotSettingsPage(
|
|||
/>{' '}
|
||||
Enable chat keys (for 3rd party chat integration)
|
||||
</label>
|
||||
</div>
|
||||
<div className="field">
|
||||
<label className="label">Chat history</label>
|
||||
</Field>
|
||||
<Field name="Chat history">
|
||||
<p className="control">
|
||||
<input
|
||||
className="input"
|
||||
|
@ -145,7 +140,7 @@ export default function TwitchBotSettingsPage(
|
|||
}
|
||||
/>
|
||||
</p>
|
||||
</div>
|
||||
</Field>
|
||||
<button
|
||||
className="button"
|
||||
onClick={() => {
|
||||
|
|
Loading…
Reference in a new issue