ui/src/components/admin-settings.tsx

   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';
   5 import {
   6   UserOperation,
   7   SiteResponse,
   8   GetSiteResponse,
   9   SiteConfigForm,
  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';
  19
  20 interface AdminSettingsState {
  21   siteRes: GetSiteResponse;
  22   siteConfigRes: GetSiteConfigResponse;
  23   siteConfigForm: SiteConfigForm;
  24   loading: boolean;
  25   siteConfigLoading: boolean;
  26 }
  27
  28 export class AdminSettings extends Component<any, AdminSettingsState> {
  29   private siteConfigTextAreaId = `site-config-${randomStr()}`;
  30   private subscription: Subscription;
  31   private emptyState: AdminSettingsState = {
  32     siteRes: {
  33       site: {
  34         id: null,
  35         name: null,
  36         creator_id: null,
  37         creator_name: null,
  38         published: null,
  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,
  45         enable_nsfw: null,
  46       },
  47       admins: [],
  48       banned: [],
  49       online: null,
  50       version: null,
  51     },
  52     siteConfigForm: {
  53       config_hjson: null,
  54       auth: null,
  55     },
  56     siteConfigRes: {
  57       config_hjson: null,
  58     },
  59     loading: true,
  60     siteConfigLoading: null,
  61   };
  62
  63   constructor(props: any, context: any) {
  64     super(props, context);
  65
  66     this.state = this.emptyState;
  67
  68     this.subscription = WebSocketService.Instance.subject
  69       .pipe(retryWhen(errors => errors.pipe(delay(3000), take(10))))
  70       .subscribe(
  71         msg => this.parseMessage(msg),
  72         err => console.error(err),
  73         () => console.log('complete')
  74       );
  75
  76     WebSocketService.Instance.getSite();
  77     WebSocketService.Instance.getSiteConfig();
  78   }
  79
  80   componentWillUnmount() {
  81     this.subscription.unsubscribe();
  82   }
  83
  84   get documentTitle(): string {
  85     if (this.state.siteRes.site.name) {
  86       return `${i18n.t('admin_settings')} - ${this.state.siteRes.site.name}`;
  87     } else {
  88       return 'Lemmy';
  89     }
  90   }
  91
  92   render() {
  93     return (
  94       <div class="container">
  95         <Helmet title={this.documentTitle} />
  96         {this.state.loading ? (
  97           <h5>
  98             <svg class="icon icon-spinner spin">
  99               <use xlinkHref="#icon-spinner"></use>
 100             </svg>
 101           </h5>
 102         ) : (
 103           <div class="row">
 104             <div class="col-12 col-md-6">
 105               {this.state.siteRes.site.id && (
 106                 <SiteForm site={this.state.siteRes.site} />
 107               )}
 108               {this.admins()}
 109               {this.bannedUsers()}
 110             </div>
 111             <div class="col-12 col-md-6">{this.adminSettings()}</div>
 112           </div>
 113         )}
 114       </div>
 115     );
 116   }
 117
 118   admins() {
 119     return (
 120       <>
 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">
 125               <UserListing
 126                 user={{
 127                   name: admin.name,
 128                   avatar: admin.avatar,
 129                   id: admin.id,
 130                   local: admin.local,
 131                   actor_id: admin.actor_id,
 132                 }}
 133               />
 134             </li>
 135           ))}
 136         </ul>
 137       </>
 138     );
 139   }
 140
 141   bannedUsers() {
 142     return (
 143       <>
 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">
 148               <UserListing
 149                 user={{
 150                   name: banned.name,
 151                   avatar: banned.avatar,
 152                   id: banned.id,
 153                   local: banned.local,
 154                   actor_id: banned.actor_id,
 155                 }}
 156               />
 157             </li>
 158           ))}
 159         </ul>
 160       </>
 161     );
 162   }
 163
 164   adminSettings() {
 165     return (
 166       <div>
 167         <h5>{i18n.t('admin_settings')}</h5>
 168         <form onSubmit={linkEvent(this, this.handleSiteConfigSubmit)}>
 169           <div class="form-group row">
 170             <label
 171               class="col-12 col-form-label"
 172               htmlFor={this.siteConfigTextAreaId}
 173             >
 174               {i18n.t('site_config')}
 175             </label>
 176             <div class="col-12">
 177               <textarea
 178                 id={this.siteConfigTextAreaId}
 179                 value={this.state.siteConfigForm.config_hjson}
 180                 onInput={linkEvent(this, this.handleSiteConfigHjsonChange)}
 181                 class="form-control text-monospace"
 182                 rows={3}
 183               />
 184             </div>
 185           </div>
 186           <div class="form-group row">
 187             <div class="col-12">
 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>
 192                   </svg>
 193                 ) : (
 194                   capitalizeFirstLetter(i18n.t('save'))
 195                 )}
 196               </button>
 197             </div>
 198           </div>
 199         </form>
 200       </div>
 201     );
 202   }
 203
 204   handleSiteConfigSubmit(i: AdminSettings, event: any) {
 205     event.preventDefault();
 206     i.state.siteConfigLoading = true;
 207     WebSocketService.Instance.saveSiteConfig(i.state.siteConfigForm);
 208     i.setState(i.state);
 209   }
 210
 211   handleSiteConfigHjsonChange(i: AdminSettings, event: any) {
 212     i.state.siteConfigForm.config_hjson = event.target.value;
 213     i.setState(i.state);
 214   }
 215
 216   parseMessage(msg: WebSocketJsonResponse) {
 217     console.log(msg);
 218     let res = wsJsonToRes(msg);
 219     if (msg.error) {
 220       toast(i18n.t(msg.error), 'danger');
 221       this.context.router.history.push('/');
 222       this.state.loading = false;
 223       this.setState(this.state);
 224       return;
 225     } else if (msg.reconnect) {
 226     } else if (res.op == UserOperation.GetSite) {
 227       let data = res.data as GetSiteResponse;
 228
 229       // This means it hasn't been set up yet
 230       if (!data.site) {
 231         this.context.router.history.push('/setup');
 232       }
 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);
 247       autosize(textarea);
 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);
 255     }
 256   }
 257 }