1 import { Component, linkEvent } from 'inferno';
2 import { Helmet } from 'inferno-helmet';
3 import { Subscription } from 'rxjs';
4 import { retryWhen, delay, take } from 'rxjs/operators';
10 GetSiteConfigResponse,
11 WebSocketJsonResponse,
12 } from '../interfaces';
13 import { WebSocketService } from '../services';
14 import { wsJsonToRes, capitalizeFirstLetter, toast, randomStr } from '../utils';
15 import autosize from 'autosize';
16 import { SiteForm } from './site-form';
17 import { UserListing } from './user-listing';
18 import { i18n } from '../i18next';
20 interface AdminSettingsState {
21 siteRes: GetSiteResponse;
22 siteConfigRes: GetSiteConfigResponse;
23 siteConfigForm: SiteConfigForm;
25 siteConfigLoading: boolean;
28 export class AdminSettings extends Component<any, AdminSettingsState> {
29 private siteConfigTextAreaId = `site-config-${randomStr()}`;
30 private subscription: Subscription;
31 private emptyState: AdminSettingsState = {
39 number_of_users: null,
40 number_of_posts: null,
41 number_of_comments: null,
42 number_of_communities: null,
43 enable_downvotes: null,
44 open_registration: null,
60 siteConfigLoading: null,
63 constructor(props: any, context: any) {
64 super(props, context);
66 this.state = this.emptyState;
68 this.subscription = WebSocketService.Instance.subject
69 .pipe(retryWhen(errors => errors.pipe(delay(3000), take(10))))
71 msg => this.parseMessage(msg),
72 err => console.error(err),
73 () => console.log('complete')
76 WebSocketService.Instance.getSite();
77 WebSocketService.Instance.getSiteConfig();
80 componentWillUnmount() {
81 this.subscription.unsubscribe();
84 get documentTitle(): string {
85 if (this.state.siteRes.site.name) {
86 return `${i18n.t('admin_settings')} - ${this.state.siteRes.site.name}`;
94 <div class="container">
95 <Helmet title={this.documentTitle} />
96 {this.state.loading ? (
98 <svg class="icon icon-spinner spin">
99 <use xlinkHref="#icon-spinner"></use>
104 <div class="col-12 col-md-6">
105 {this.state.siteRes.site.id && (
106 <SiteForm site={this.state.siteRes.site} />
111 <div class="col-12 col-md-6">{this.adminSettings()}</div>
121 <h5>{capitalizeFirstLetter(i18n.t('admins'))}</h5>
122 <ul class="list-unstyled">
123 {this.state.siteRes.admins.map(admin => (
124 <li class="list-inline-item">
128 preferred_username: admin.preferred_username,
129 avatar: admin.avatar,
132 actor_id: admin.actor_id,
145 <h5>{i18n.t('banned_users')}</h5>
146 <ul class="list-unstyled">
147 {this.state.siteRes.banned.map(banned => (
148 <li class="list-inline-item">
152 preferred_username: banned.preferred_username,
153 avatar: banned.avatar,
156 actor_id: banned.actor_id,
169 <h5>{i18n.t('admin_settings')}</h5>
170 <form onSubmit={linkEvent(this, this.handleSiteConfigSubmit)}>
171 <div class="form-group row">
173 class="col-12 col-form-label"
174 htmlFor={this.siteConfigTextAreaId}
176 {i18n.t('site_config')}
180 id={this.siteConfigTextAreaId}
181 value={this.state.siteConfigForm.config_hjson}
182 onInput={linkEvent(this, this.handleSiteConfigHjsonChange)}
183 class="form-control text-monospace"
188 <div class="form-group row">
190 <button type="submit" class="btn btn-secondary mr-2">
191 {this.state.siteConfigLoading ? (
192 <svg class="icon icon-spinner spin">
193 <use xlinkHref="#icon-spinner"></use>
196 capitalizeFirstLetter(i18n.t('save'))
206 handleSiteConfigSubmit(i: AdminSettings, event: any) {
207 event.preventDefault();
208 i.state.siteConfigLoading = true;
209 WebSocketService.Instance.saveSiteConfig(i.state.siteConfigForm);
213 handleSiteConfigHjsonChange(i: AdminSettings, event: any) {
214 i.state.siteConfigForm.config_hjson = event.target.value;
218 parseMessage(msg: WebSocketJsonResponse) {
220 let res = wsJsonToRes(msg);
222 toast(i18n.t(msg.error), 'danger');
223 this.context.router.history.push('/');
224 this.state.loading = false;
225 this.setState(this.state);
227 } else if (msg.reconnect) {
228 } else if (res.op == UserOperation.GetSite) {
229 let data = res.data as GetSiteResponse;
231 // This means it hasn't been set up yet
233 this.context.router.history.push('/setup');
235 this.state.siteRes = data;
236 this.setState(this.state);
237 } else if (res.op == UserOperation.EditSite) {
238 let data = res.data as SiteResponse;
239 this.state.siteRes.site = data.site;
240 this.setState(this.state);
241 toast(i18n.t('site_saved'));
242 } else if (res.op == UserOperation.GetSiteConfig) {
243 let data = res.data as GetSiteConfigResponse;
244 this.state.siteConfigRes = data;
245 this.state.loading = false;
246 this.state.siteConfigForm.config_hjson = this.state.siteConfigRes.config_hjson;
247 this.setState(this.state);
248 var textarea: any = document.getElementById(this.siteConfigTextAreaId);
250 } else if (res.op == UserOperation.SaveSiteConfig) {
251 let data = res.data as GetSiteConfigResponse;
252 this.state.siteConfigRes = data;
253 this.state.siteConfigForm.config_hjson = this.state.siteConfigRes.config_hjson;
254 this.state.siteConfigLoading = false;
255 toast(i18n.t('site_saved'));
256 this.setState(this.state);