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 avatar: admin.avatar,
131 actor_id: admin.actor_id,
144 <h5>{i18n.t('banned_users')}</h5>
145 <ul class="list-unstyled">
146 {this.state.siteRes.banned.map(banned => (
147 <li class="list-inline-item">
151 avatar: banned.avatar,
154 actor_id: banned.actor_id,
167 <h5>{i18n.t('admin_settings')}</h5>
168 <form onSubmit={linkEvent(this, this.handleSiteConfigSubmit)}>
169 <div class="form-group row">
171 class="col-12 col-form-label"
172 htmlFor={this.siteConfigTextAreaId}
174 {i18n.t('site_config')}
178 id={this.siteConfigTextAreaId}
179 value={this.state.siteConfigForm.config_hjson}
180 onInput={linkEvent(this, this.handleSiteConfigHjsonChange)}
181 class="form-control text-monospace"
186 <div class="form-group row">
188 <button type="submit" class="btn btn-secondary mr-2">
189 {this.state.siteConfigLoading ? (
190 <svg class="icon icon-spinner spin">
191 <use xlinkHref="#icon-spinner"></use>
194 capitalizeFirstLetter(i18n.t('save'))
204 handleSiteConfigSubmit(i: AdminSettings, event: any) {
205 event.preventDefault();
206 i.state.siteConfigLoading = true;
207 WebSocketService.Instance.saveSiteConfig(i.state.siteConfigForm);
211 handleSiteConfigHjsonChange(i: AdminSettings, event: any) {
212 i.state.siteConfigForm.config_hjson = event.target.value;
216 parseMessage(msg: WebSocketJsonResponse) {
218 let res = wsJsonToRes(msg);
220 toast(i18n.t(msg.error), 'danger');
221 this.context.router.history.push('/');
222 this.state.loading = false;
223 this.setState(this.state);
225 } else if (msg.reconnect) {
226 } else if (res.op == UserOperation.GetSite) {
227 let data = res.data as GetSiteResponse;
229 // This means it hasn't been set up yet
231 this.context.router.history.push('/setup');
233 this.state.siteRes = data;
234 this.setState(this.state);
235 } else if (res.op == UserOperation.EditSite) {
236 let data = res.data as SiteResponse;
237 this.state.siteRes.site = data.site;
238 this.setState(this.state);
239 toast(i18n.t('site_saved'));
240 } else if (res.op == UserOperation.GetSiteConfig) {
241 let data = res.data as GetSiteConfigResponse;
242 this.state.siteConfigRes = data;
243 this.state.loading = false;
244 this.state.siteConfigForm.config_hjson = this.state.siteConfigRes.config_hjson;
245 this.setState(this.state);
246 var textarea: any = document.getElementById(this.siteConfigTextAreaId);
248 } else if (res.op == UserOperation.SaveSiteConfig) {
249 let data = res.data as GetSiteConfigResponse;
250 this.state.siteConfigRes = data;
251 this.state.siteConfigForm.config_hjson = this.state.siteConfigRes.config_hjson;
252 this.state.siteConfigLoading = false;
253 toast(i18n.t('site_saved'));
254 this.setState(this.state);