} from "../../utils";
import { HtmlTags } from "../common/html-tags";
import { Spinner } from "../common/icon";
+import Tabs from "../common/tabs";
import { PersonListing } from "../person/person-listing";
import { EmojiForm } from "./emojis-form";
+import RateLimitForm from "./rate-limit-form";
import { SiteForm } from "./site-form";
import { TaglineForm } from "./tagline-form";
banned: PersonView[];
loading: boolean;
leaveAdminTeamLoading: boolean;
- currentTab: string;
}
export class AdminSettings extends Component<any, AdminSettingsState> {
banned: [],
loading: true,
leaveAdminTeamLoading: false,
- currentTab: "site",
};
constructor(props: any, context: any) {
render() {
return (
<div className="container-lg">
+ <HtmlTags
+ title={this.documentTitle}
+ path={this.context.router.route.match.url}
+ />
{this.state.loading ? (
<h5>
<Spinner large />
</h5>
) : (
- <div>
- <HtmlTags
- title={this.documentTitle}
- path={this.context.router.route.match.url}
- />
- <ul className="nav nav-tabs mb-2">
- <li className="nav-item">
- <button
- className={`nav-link btn ${
- this.state.currentTab == "site" && "active"
- }`}
- onClick={linkEvent(
- { ctx: this, tab: "site" },
- this.handleSwitchTab
- )}
- >
- {i18n.t("site")}
- </button>
- </li>
- <li className="nav-item">
- <button
- className={`nav-link btn ${
- this.state.currentTab == "taglines" && "active"
- }`}
- onClick={linkEvent(
- { ctx: this, tab: "taglines" },
- this.handleSwitchTab
- )}
- >
- {i18n.t("taglines")}
- </button>
- </li>
- <li className="nav-item">
- <button
- className={`nav-link btn ${
- this.state.currentTab == "emojis" && "active"
- }`}
- onClick={linkEvent(
- { ctx: this, tab: "emojis" },
- this.handleSwitchTab
- )}
- >
- {i18n.t("emojis")}
- </button>
- </li>
- </ul>
- {this.state.currentTab == "site" && (
- <div className="row">
- <div className="col-12 col-md-6">
- <SiteForm
- siteRes={this.state.siteRes}
- instancesRes={this.state.instancesRes}
- showLocal={showLocal(this.isoData)}
+ <Tabs
+ tabs={[
+ {
+ key: "site",
+ label: i18n.t("site"),
+ getNode: () => (
+ <div className="row">
+ <div className="col-12 col-md-6">
+ <SiteForm
+ siteRes={this.state.siteRes}
+ instancesRes={this.state.instancesRes}
+ showLocal={showLocal(this.isoData)}
+ />
+ </div>
+ <div className="col-12 col-md-6">
+ {this.admins()}
+ {this.bannedUsers()}
+ </div>
+ </div>
+ ),
+ },
+ {
+ key: "rate_limiting",
+ label: "Rate Limiting",
+ getNode: () => (
+ <RateLimitForm
+ localSiteRateLimit={
+ this.state.siteRes.site_view.local_site_rate_limit
+ }
+ applicationQuestion={
+ this.state.siteRes.site_view.local_site
+ .application_question
+ }
/>
- </div>
- <div className="col-12 col-md-6">
- {this.admins()}
- {this.bannedUsers()}
- </div>
- </div>
- )}
- {this.state.currentTab == "taglines" && (
- <div className="row">
- <TaglineForm siteRes={this.state.siteRes}></TaglineForm>
- </div>
- )}
- {this.state.currentTab == "emojis" && (
- <div className="row">
- <EmojiForm></EmojiForm>
- </div>
- )}
- </div>
+ ),
+ },
+ {
+ key: "taglines",
+ label: i18n.t("taglines"),
+ getNode: () => (
+ <div className="row">
+ <TaglineForm siteRes={this.state.siteRes} />
+ </div>
+ ),
+ },
+ {
+ key: "emojis",
+ label: i18n.t("emojis"),
+ getNode: () => (
+ <div className="row">
+ <EmojiForm />
+ </div>
+ ),
+ },
+ ]}
+ />
)}
</div>
);
);
}
- handleSwitchTab(i: { ctx: AdminSettings; tab: string }) {
- i.ctx.setState({ currentTab: i.tab });
- }
-
handleLeaveAdminTeam(i: AdminSettings) {
let auth = myAuth();
if (auth) {
--- /dev/null
+import { Component, FormEventHandler, linkEvent } from "inferno";
+import { EditSite, LocalSiteRateLimit } from "lemmy-js-client";
+import { i18n } from "../../i18next";
+import { WebSocketService } from "../../services";
+import { capitalizeFirstLetter, myAuth, wsClient } from "../../utils";
+import { Spinner } from "../common/icon";
+import Tabs from "../common/tabs";
+
+const rateLimitTypes = [
+ "message",
+ "post",
+ "image",
+ "comment",
+ "search",
+ "register",
+] as const;
+
+interface RateLimitsProps {
+ handleRateLimit: FormEventHandler<HTMLInputElement>;
+ handleRateLimitPerSecond: FormEventHandler<HTMLInputElement>;
+ rateLimitLabel: string;
+ rateLimitValue?: number;
+ rateLimitPerSecondValue?: number;
+}
+
+interface RateLimitFormProps {
+ localSiteRateLimit: LocalSiteRateLimit;
+ applicationQuestion?: string;
+}
+
+interface RateLimitFormState {
+ form: {
+ message?: number;
+ message_per_second?: number;
+ post?: number;
+ post_per_second?: number;
+ comment?: number;
+ comment_per_second?: number;
+ image?: number;
+ image_per_second?: number;
+ search?: number;
+ search_per_second?: number;
+ register?: number;
+ register_per_second?: number;
+ };
+ loading: boolean;
+}
+
+function RateLimits({
+ handleRateLimit,
+ handleRateLimitPerSecond,
+ rateLimitLabel,
+ rateLimitPerSecondValue,
+ rateLimitValue,
+}: RateLimitsProps) {
+ return (
+ <div className="form-group row">
+ <label className="col-12 col-form-label" htmlFor="rate-limit">
+ {rateLimitLabel}
+ </label>
+ <input
+ type="number"
+ id="rate-limit"
+ className="form-control col-12"
+ min={0}
+ value={rateLimitValue}
+ onInput={handleRateLimit}
+ />
+ <label className="col-12 col-form-label" htmlFor="rate-limit-per-second">
+ {i18n.t("per_second")}
+ </label>
+ <input
+ type="number"
+ id="rate-limit-per-second"
+ className="form-control col-12"
+ min={0}
+ value={rateLimitPerSecondValue}
+ onInput={handleRateLimitPerSecond}
+ />
+ </div>
+ );
+}
+
+function handleRateLimitChange(
+ { rateLimitType, ctx }: { rateLimitType: string; ctx: RateLimitsForm },
+ event: any
+) {
+ ctx.setState(prev => ({
+ ...prev,
+ form: {
+ ...prev.form,
+ [rateLimitType]: Number(event.target.value),
+ },
+ }));
+}
+
+function handlePerSecondChange(
+ { rateLimitType, ctx }: { rateLimitType: string; ctx: RateLimitsForm },
+ event: any
+) {
+ ctx.setState(prev => ({
+ ...prev,
+ form: {
+ ...prev.form,
+ [`${rateLimitType}_per_second`]: Number(event.target.value),
+ },
+ }));
+}
+
+function submitRateLimitForm(i: RateLimitsForm, event: any) {
+ event.preventDefault();
+ const auth = myAuth() ?? "TODO";
+ const form: EditSite = Object.entries(i.state.form).reduce(
+ (acc, [key, val]) => {
+ acc[`rate_limit_${key}`] = val;
+ return acc;
+ },
+ { auth, application_question: i.props.applicationQuestion }
+ );
+
+ i.setState({ loading: true });
+
+ WebSocketService.Instance.send(wsClient.editSite(form));
+}
+
+export default class RateLimitsForm extends Component<
+ RateLimitFormProps,
+ RateLimitFormState
+> {
+ state: RateLimitFormState = {
+ loading: false,
+ form: {},
+ };
+ constructor(props: RateLimitFormProps, context) {
+ super(props, context);
+
+ const {
+ comment,
+ comment_per_second,
+ image,
+ image_per_second,
+ message,
+ message_per_second,
+ post,
+ post_per_second,
+ register,
+ register_per_second,
+ search,
+ search_per_second,
+ } = props.localSiteRateLimit;
+
+ this.state = {
+ ...this.state,
+ form: {
+ comment,
+ comment_per_second,
+ image,
+ image_per_second,
+ message,
+ message_per_second,
+ post,
+ post_per_second,
+ register,
+ register_per_second,
+ search,
+ search_per_second,
+ },
+ };
+ }
+
+ render() {
+ return (
+ <form onSubmit={linkEvent(this, submitRateLimitForm)}>
+ <h5>Rate Limit Options</h5>
+ <Tabs
+ tabs={rateLimitTypes.map(rateLimitType => ({
+ key: rateLimitType,
+ label: rateLimitType,
+ getNode: () => (
+ <RateLimits
+ handleRateLimit={linkEvent(
+ { rateLimitType, ctx: this },
+ handleRateLimitChange
+ )}
+ handleRateLimitPerSecond={linkEvent(
+ { rateLimitType, ctx: this },
+ handlePerSecondChange
+ )}
+ rateLimitLabel={i18n.t(`rate_limit_${rateLimitType}`)}
+ rateLimitValue={this.state.form[rateLimitType]}
+ rateLimitPerSecondValue={
+ this.state.form[`${rateLimitType}_per_second`]
+ }
+ />
+ ),
+ }))}
+ />
+ <div className="form-group row">
+ <div className="col-12">
+ <button
+ type="submit"
+ className="btn btn-secondary mr-2"
+ disabled={this.state.loading}
+ >
+ {this.state.loading ? (
+ <Spinner />
+ ) : (
+ capitalizeFirstLetter(i18n.t("save"))
+ )}
+ </button>
+ </div>
+ </div>
+ </form>
+ );
+ }
+
+ componentDidUpdate({ localSiteRateLimit }: RateLimitFormProps) {
+ if (
+ this.state.loading &&
+ Object.entries(localSiteRateLimit).some(
+ ([key, val]) => this.state.form[key] !== val
+ )
+ ) {
+ this.setState({ loading: false });
+ }
+ }
+}
let site = this.props.siteRes.site_view.site;
let ls = this.props.siteRes.site_view.local_site;
- let lsrl = this.props.siteRes.site_view.local_site_rate_limit;
this.state = {
...this.state,
siteForm: {
discussion_languages: this.props.siteRes.discussion_languages,
slur_filter_regex: ls.slur_filter_regex,
actor_name_max_length: ls.actor_name_max_length,
- rate_limit_message: lsrl.message,
- rate_limit_message_per_second: lsrl.message_per_second,
- rate_limit_comment: lsrl.comment,
- rate_limit_comment_per_second: lsrl.comment_per_second,
- rate_limit_image: lsrl.image,
- rate_limit_image_per_second: lsrl.image_per_second,
- rate_limit_post: lsrl.post,
- rate_limit_post_per_second: lsrl.post_per_second,
- rate_limit_register: lsrl.register,
- rate_limit_register_per_second: lsrl.register_per_second,
- rate_limit_search: lsrl.search,
- rate_limit_search_per_second: lsrl.search_per_second,
federation_enabled: ls.federation_enabled,
federation_debug: ls.federation_debug,
federation_worker_count: ls.federation_worker_count,
</div>
</div>
)}
- <div className="form-group row">
- <label
- className="col-12 col-form-label"
- htmlFor="create-site-rate-limit-message"
- >
- {i18n.t("rate_limit_message")}
- </label>
- <div className="col-12">
- <input
- type="number"
- id="create-site-rate-limit-message"
- className="form-control"
- min={0}
- value={this.state.siteForm.rate_limit_message}
- onInput={linkEvent(this, this.handleSiteRateLimitMessage)}
- />
- </div>
- </div>
- <div className="form-group row">
- <label
- className="col-12 col-form-label"
- htmlFor="create-site-rate-limit-message-per-second"
- >
- {i18n.t("per_second")}
- </label>
- <div className="col-12">
- <input
- type="number"
- id="create-site-rate-limit-message-per-second"
- className="form-control"
- min={0}
- value={this.state.siteForm.rate_limit_message_per_second}
- onInput={linkEvent(
- this,
- this.handleSiteRateLimitMessagePerSecond
- )}
- />
- </div>
- </div>
- <div className="form-group row">
- <label
- className="col-12 col-form-label"
- htmlFor="create-site-rate-limit-post"
- >
- {i18n.t("rate_limit_post")}
- </label>
- <div className="col-12">
- <input
- type="number"
- id="create-site-rate-limit-post"
- className="form-control"
- min={0}
- value={this.state.siteForm.rate_limit_post}
- onInput={linkEvent(this, this.handleSiteRateLimitPost)}
- />
- </div>
- </div>
- <div className="form-group row">
- <label
- className="col-12 col-form-label"
- htmlFor="create-site-rate-limit-post-per-second"
- >
- {i18n.t("per_second")}
- </label>
- <div className="col-12">
- <input
- type="number"
- id="create-site-rate-limit-post-per-second"
- className="form-control"
- min={0}
- value={this.state.siteForm.rate_limit_post_per_second}
- onInput={linkEvent(this, this.handleSiteRateLimitPostPerSecond)}
- />
- </div>
- </div>
- <div className="form-group row">
- <label
- className="col-12 col-form-label"
- htmlFor="create-site-rate-limit-register"
- >
- {i18n.t("rate_limit_register")}
- </label>
- <div className="col-12">
- <input
- type="number"
- id="create-site-rate-limit-register"
- className="form-control"
- min={0}
- value={this.state.siteForm.rate_limit_register}
- onInput={linkEvent(this, this.handleSiteRateLimitRegister)}
- />
- </div>
- </div>
- <div className="form-group row">
- <label
- className="col-12 col-form-label"
- htmlFor="create-site-rate-limit-register-per-second"
- >
- {i18n.t("per_second")}
- </label>
- <div className="col-12">
- <input
- type="number"
- id="create-site-rate-limit-register-per-second"
- className="form-control"
- min={0}
- value={this.state.siteForm.rate_limit_register_per_second}
- onInput={linkEvent(
- this,
- this.handleSiteRateLimitRegisterPerSecond
- )}
- />
- </div>
- </div>
- <div className="form-group row">
- <label
- className="col-12 col-form-label"
- htmlFor="create-site-rate-limit-image"
- >
- {i18n.t("rate_limit_image")}
- </label>
- <div className="col-12">
- <input
- type="number"
- id="create-site-rate-limit-image"
- className="form-control"
- min={0}
- value={this.state.siteForm.rate_limit_image}
- onInput={linkEvent(this, this.handleSiteRateLimitImage)}
- />
- </div>
- </div>
- <div className="form-group row">
- <label
- className="col-12 col-form-label"
- htmlFor="create-site-rate-limit-image-per-second"
- >
- {i18n.t("per_second")}
- </label>
- <div className="col-12">
- <input
- type="number"
- id="create-site-rate-limit-image-per-second"
- className="form-control"
- min={0}
- value={this.state.siteForm.rate_limit_image_per_second}
- onInput={linkEvent(
- this,
- this.handleSiteRateLimitImagePerSecond
- )}
- />
- </div>
- </div>
- <div className="form-group row">
- <label
- className="col-12 col-form-label"
- htmlFor="create-site-rate-limit-comment"
- >
- {i18n.t("rate_limit_comment")}
- </label>
- <div className="col-12">
- <input
- type="number"
- id="create-site-rate-limit-comment"
- className="form-control"
- min={0}
- value={this.state.siteForm.rate_limit_comment}
- onInput={linkEvent(this, this.handleSiteRateLimitComment)}
- />
- </div>
- </div>
- <div className="form-group row">
- <label
- className="col-12 col-form-label"
- htmlFor="create-site-rate-limit-comment-per-second"
- >
- {i18n.t("per_second")}
- </label>
- <div className="col-12">
- <input
- type="number"
- id="create-site-rate-limit-comment-per-second"
- className="form-control"
- min={0}
- value={this.state.siteForm.rate_limit_comment_per_second}
- onInput={linkEvent(
- this,
- this.handleSiteRateLimitCommentPerSecond
- )}
- />
- </div>
- </div>
- <div className="form-group row">
- <label
- className="col-12 col-form-label"
- htmlFor="create-site-rate-limit-search"
- >
- {i18n.t("rate_limit_search")}
- </label>
- <div className="col-12">
- <input
- type="number"
- id="create-site-rate-limit-search"
- className="form-control"
- min={0}
- value={this.state.siteForm.rate_limit_search}
- onInput={linkEvent(this, this.handleSiteRateLimitSearch)}
- />
- </div>
- </div>
- <div className="form-group row">
- <label
- className="col-12 col-form-label"
- htmlFor="create-site-rate-limit-search-per-second"
- >
- {i18n.t("per_second")}
- </label>
- <div className="col-12">
- <input
- type="number"
- id="create-site-rate-limit-search-per-second"
- className="form-control"
- min={0}
- value={this.state.siteForm.rate_limit_search_per_second}
- onInput={linkEvent(
- this,
- this.handleSiteRateLimitSearchPerSecond
- )}
- />
- </div>
- </div>
-
<div className="form-group row">
<div className="col-12">
<button
legal_information: sForm.legal_information,
slur_filter_regex: sForm.slur_filter_regex,
actor_name_max_length: sForm.actor_name_max_length,
- rate_limit_message: sForm.rate_limit_message,
- rate_limit_message_per_second: sForm.rate_limit_message_per_second,
- rate_limit_comment: sForm.rate_limit_comment,
- rate_limit_comment_per_second: sForm.rate_limit_comment_per_second,
- rate_limit_image: sForm.rate_limit_image,
- rate_limit_image_per_second: sForm.rate_limit_image_per_second,
- rate_limit_post: sForm.rate_limit_post,
- rate_limit_post_per_second: sForm.rate_limit_post_per_second,
- rate_limit_register: sForm.rate_limit_register,
- rate_limit_register_per_second: sForm.rate_limit_register_per_second,
- rate_limit_search: sForm.rate_limit_search,
- rate_limit_search_per_second: sForm.rate_limit_search_per_second,
federation_enabled: sForm.federation_enabled,
federation_debug: sForm.federation_debug,
federation_worker_count: sForm.federation_worker_count,
);
}
- handleSiteRateLimitMessage(i: SiteForm, event: any) {
- i.setState(
- s => ((s.siteForm.rate_limit_message = Number(event.target.value)), s)
- );
- }
-
- handleSiteRateLimitMessagePerSecond(i: SiteForm, event: any) {
- i.setState(
- s => (
- (s.siteForm.rate_limit_message_per_second = Number(event.target.value)),
- s
- )
- );
- }
-
- handleSiteRateLimitPost(i: SiteForm, event: any) {
- i.setState(
- s => ((s.siteForm.rate_limit_post = Number(event.target.value)), s)
- );
- }
-
- handleSiteRateLimitPostPerSecond(i: SiteForm, event: any) {
- i.setState(
- s => (
- (s.siteForm.rate_limit_post_per_second = Number(event.target.value)), s
- )
- );
- }
-
- handleSiteRateLimitImage(i: SiteForm, event: any) {
- i.setState(
- s => ((s.siteForm.rate_limit_image = Number(event.target.value)), s)
- );
- }
-
- handleSiteRateLimitImagePerSecond(i: SiteForm, event: any) {
- i.setState(
- s => (
- (s.siteForm.rate_limit_image_per_second = Number(event.target.value)), s
- )
- );
- }
-
- handleSiteRateLimitComment(i: SiteForm, event: any) {
- i.setState(
- s => ((s.siteForm.rate_limit_comment = Number(event.target.value)), s)
- );
- }
-
- handleSiteRateLimitCommentPerSecond(i: SiteForm, event: any) {
- i.setState(
- s => (
- (s.siteForm.rate_limit_comment_per_second = Number(event.target.value)),
- s
- )
- );
- }
-
- handleSiteRateLimitSearch(i: SiteForm, event: any) {
- i.setState(
- s => ((s.siteForm.rate_limit_search = Number(event.target.value)), s)
- );
- }
-
- handleSiteRateLimitSearchPerSecond(i: SiteForm, event: any) {
- i.setState(
- s => (
- (s.siteForm.rate_limit_search_per_second = Number(event.target.value)),
- s
- )
- );
- }
-
- handleSiteRateLimitRegister(i: SiteForm, event: any) {
- i.setState(
- s => ((s.siteForm.rate_limit_register = Number(event.target.value)), s)
- );
- }
-
- handleSiteRateLimitRegisterPerSecond(i: SiteForm, event: any) {
- i.setState(
- s => (
- (s.siteForm.rate_limit_register_per_second = Number(
- event.target.value
- )),
- s
- )
- );
- }
-
handleSiteFederationEnabled(i: SiteForm, event: any) {
i.state.siteForm.federation_enabled = event.target.checked;
i.setState(i.state);
import { MarkdownTextArea } from "../common/markdown-textarea";
import { SearchableSelect } from "../common/searchable-select";
import { SortSelect } from "../common/sort-select";
+import Tabs from "../common/tabs";
import { CommunityLink } from "../community/community-link";
import { PersonListing } from "./person-listing";
this.handleBannerUpload = this.handleBannerUpload.bind(this);
this.handleBannerRemove = this.handleBannerRemove.bind(this);
+ this.userSettings = this.userSettings.bind(this);
+ this.blockCards = this.blockCards.bind(this);
this.parseMessage = this.parseMessage.bind(this);
this.subscription = wsSubscribe(this.parseMessage);
render() {
return (
<div className="container-lg">
- <>
- <HtmlTags
- title={this.documentTitle}
- path={this.context.router.route.match.url}
- description={this.documentTitle}
- image={this.state.saveUserSettingsForm.avatar}
- />
- <ul className="nav nav-tabs mb-2">
- <li className="nav-item">
- <button
- className={`nav-link btn ${
- this.state.currentTab == "settings" && "active"
- }`}
- onClick={linkEvent(
- { ctx: this, tab: "settings" },
- this.handleSwitchTab
- )}
- >
- {i18n.t("settings")}
- </button>
- </li>
- <li className="nav-item">
- <button
- className={`nav-link btn ${
- this.state.currentTab == "blocks" && "active"
- }`}
- onClick={linkEvent(
- { ctx: this, tab: "blocks" },
- this.handleSwitchTab
- )}
- >
- {i18n.t("blocks")}
- </button>
- </li>
- </ul>
- {this.state.currentTab == "settings" && this.userSettings()}
- {this.state.currentTab == "blocks" && this.blockCards()}
- </>
+ <HtmlTags
+ title={this.documentTitle}
+ path={this.context.router.route.match.url}
+ description={this.documentTitle}
+ image={this.state.saveUserSettingsForm.avatar}
+ />
+ <Tabs
+ tabs={[
+ {
+ key: "settings",
+ label: i18n.t("settings"),
+ getNode: this.userSettings,
+ },
+ {
+ key: "blocks",
+ label: i18n.t("blocks"),
+ getNode: this.blockCards,
+ },
+ ]}
+ />
</div>
);
}
projects / lemmy-ui.git / commitdiff