ui/src/components/user.tsx

   1 import { Component, linkEvent } from 'inferno';
   2 import { Helmet } from 'inferno-helmet';
   3 import { Link } from 'inferno-router';
   4 import { Subscription } from 'rxjs';
   5 import { retryWhen, delay, take } from 'rxjs/operators';
   6 import {
   7   UserOperation,
   8   CommunityUser,
   9   SortType,
  10   ListingType,
  11   UserView,
  12   UserSettingsForm,
  13   LoginResponse,
  14   DeleteAccountForm,
  15   WebSocketJsonResponse,
  16   GetSiteResponse,
  17   UserDetailsView,
  18   UserDetailsResponse,
  19   AddAdminResponse,
  20 } from '../interfaces';
  21 import { WebSocketService, UserService } from '../services';
  22 import {
  23   wsJsonToRes,
  24   fetchLimit,
  25   routeSortTypeToEnum,
  26   capitalizeFirstLetter,
  27   themes,
  28   setTheme,
  29   languages,
  30   showAvatars,
  31   toast,
  32   setupTippy,
  33   getLanguage,
  34   mdToHtml,
  35 } from '../utils';
  36 import { UserListing } from './user-listing';
  37 import { SortSelect } from './sort-select';
  38 import { ListingTypeSelect } from './listing-type-select';
  39 import { MomentTime } from './moment-time';
  40 import { i18n } from '../i18next';
  41 import moment from 'moment';
  42 import { UserDetails } from './user-details';
  43 import { MarkdownTextArea } from './markdown-textarea';
  44
  45 interface UserState {
  46   user: UserView;
  47   user_id: number;
  48   username: string;
  49   follows: Array<CommunityUser>;
  50   moderates: Array<CommunityUser>;
  51   view: UserDetailsView;
  52   sort: SortType;
  53   page: number;
  54   loading: boolean;
  55   avatarLoading: boolean;
  56   userSettingsForm: UserSettingsForm;
  57   userSettingsLoading: boolean;
  58   deleteAccountLoading: boolean;
  59   deleteAccountShowConfirm: boolean;
  60   deleteAccountForm: DeleteAccountForm;
  61   siteRes: GetSiteResponse;
  62 }
  63
  64 interface UserProps {
  65   view: UserDetailsView;
  66   sort: SortType;
  67   page: number;
  68   user_id: number | null;
  69   username: string;
  70 }
  71
  72 interface UrlParams {
  73   view?: string;
  74   sort?: string;
  75   page?: number;
  76 }
  77
  78 export class User extends Component<any, UserState> {
  79   private subscription: Subscription;
  80   private emptyState: UserState = {
  81     user: {
  82       id: null,
  83       name: null,
  84       published: null,
  85       number_of_posts: null,
  86       post_score: null,
  87       number_of_comments: null,
  88       comment_score: null,
  89       banned: null,
  90       avatar: null,
  91       show_avatars: null,
  92       send_notifications_to_email: null,
  93       actor_id: null,
  94       local: null,
  95     },
  96     user_id: null,
  97     username: null,
  98     follows: [],
  99     moderates: [],
 100     loading: true,
 101     avatarLoading: false,
 102     view: User.getViewFromProps(this.props.match.view),
 103     sort: User.getSortTypeFromProps(this.props.match.sort),
 104     page: User.getPageFromProps(this.props.match.page),
 105     userSettingsForm: {
 106       show_nsfw: null,
 107       theme: null,
 108       default_sort_type: null,
 109       default_listing_type: null,
 110       lang: null,
 111       show_avatars: null,
 112       send_notifications_to_email: null,
 113       auth: null,
 114       bio: null,
 115     },
 116     userSettingsLoading: null,
 117     deleteAccountLoading: null,
 118     deleteAccountShowConfirm: false,
 119     deleteAccountForm: {
 120       password: null,
 121     },
 122     siteRes: {
 123       admins: [],
 124       banned: [],
 125       online: undefined,
 126       site: {
 127         id: undefined,
 128         name: undefined,
 129         creator_id: undefined,
 130         published: undefined,
 131         creator_name: undefined,
 132         number_of_users: undefined,
 133         number_of_posts: undefined,
 134         number_of_comments: undefined,
 135         number_of_communities: undefined,
 136         enable_downvotes: undefined,
 137         open_registration: undefined,
 138         enable_nsfw: undefined,
 139       },
 140       version: undefined,
 141     },
 142   };
 143
 144   constructor(props: any, context: any) {
 145     super(props, context);
 146
 147     this.state = this.emptyState;
 148     this.handleSortChange = this.handleSortChange.bind(this);
 149     this.handleUserSettingsSortTypeChange = this.handleUserSettingsSortTypeChange.bind(
 150       this
 151     );
 152     this.handleUserSettingsListingTypeChange = this.handleUserSettingsListingTypeChange.bind(
 153       this
 154     );
 155     this.handleUserSettingsListingTypeChange = this.handleUserSettingsListingTypeChange.bind(
 156       this
 157     );
 158     this.handlePageChange = this.handlePageChange.bind(this);
 159     this.handleUserSettingsBioChange = this.handleUserSettingsBioChange.bind(
 160       this
 161     );
 162
 163     this.state.user_id = Number(this.props.match.params.id) || null;
 164     this.state.username = this.props.match.params.username;
 165
 166     this.subscription = WebSocketService.Instance.subject
 167       .pipe(retryWhen(errors => errors.pipe(delay(3000), take(10))))
 168       .subscribe(
 169         msg => this.parseMessage(msg),
 170         err => console.error(err),
 171         () => console.log('complete')
 172       );
 173
 174     WebSocketService.Instance.getSite();
 175   }
 176
 177   get isCurrentUser() {
 178     return (
 179       UserService.Instance.user &&
 180       UserService.Instance.user.id == this.state.user.id
 181     );
 182   }
 183
 184   static getViewFromProps(view: any): UserDetailsView {
 185     return view
 186       ? UserDetailsView[capitalizeFirstLetter(view)]
 187       : UserDetailsView.Overview;
 188   }
 189
 190   static getSortTypeFromProps(sort: any): SortType {
 191     return sort ? routeSortTypeToEnum(sort) : SortType.New;
 192   }
 193
 194   static getPageFromProps(page: any): number {
 195     return page ? Number(page) : 1;
 196   }
 197
 198   componentWillUnmount() {
 199     this.subscription.unsubscribe();
 200   }
 201
 202   static getDerivedStateFromProps(props: any): UserProps {
 203     return {
 204       view: this.getViewFromProps(props.match.params.view),
 205       sort: this.getSortTypeFromProps(props.match.params.sort),
 206       page: this.getPageFromProps(props.match.params.page),
 207       user_id: Number(props.match.params.id) || null,
 208       username: props.match.params.username,
 209     };
 210   }
 211
 212   componentDidUpdate(lastProps: any, _lastState: UserState, _snapshot: any) {
 213     // Necessary if you are on a post and you click another post (same route)
 214     if (
 215       lastProps.location.pathname.split('/')[2] !==
 216       lastProps.history.location.pathname.split('/')[2]
 217     ) {
 218       // Couldnt get a refresh working. This does for now.
 219       location.reload();
 220     }
 221     setupTippy();
 222   }
 223
 224   get documentTitle(): string {
 225     if (this.state.siteRes.site.name) {
 226       return `@${this.state.username} - ${this.state.siteRes.site.name}`;
 227     } else {
 228       return 'Lemmy';
 229     }
 230   }
 231
 232   render() {
 233     return (
 234       <div class="container">
 235         <Helmet title={this.documentTitle} />
 236         <div class="row">
 237           <div class="col-12 col-md-8">
 238             <h5>
 239               {this.state.user.avatar && showAvatars() && (
 240                 <img
 241                   height="80"
 242                   width="80"
 243                   src={this.state.user.avatar}
 244                   class="rounded-circle mr-2"
 245                 />
 246               )}
 247               <span>@{this.state.username}</span>
 248             </h5>
 249             {this.state.loading ? (
 250               <h5>
 251                 <svg class="icon icon-spinner spin">
 252                   <use xlinkHref="#icon-spinner"></use>
 253                 </svg>
 254               </h5>
 255             ) : (
 256               this.selects()
 257             )}
 258             <UserDetails
 259               user_id={this.state.user_id}
 260               username={this.state.username}
 261               sort={SortType[this.state.sort]}
 262               page={this.state.page}
 263               limit={fetchLimit}
 264               enableDownvotes={this.state.siteRes.site.enable_downvotes}
 265               enableNsfw={this.state.siteRes.site.enable_nsfw}
 266               admins={this.state.siteRes.admins}
 267               view={this.state.view}
 268               onPageChange={this.handlePageChange}
 269             />
 270           </div>
 271
 272           {!this.state.loading && (
 273             <div class="col-12 col-md-4">
 274               {this.userInfo()}
 275               {this.isCurrentUser && this.userSettings()}
 276               {this.moderates()}
 277               {this.follows()}
 278             </div>
 279           )}
 280         </div>
 281       </div>
 282     );
 283   }
 284
 285   viewRadios() {
 286     return (
 287       <div class="btn-group btn-group-toggle flex-wrap mb-2">
 288         <label
 289           className={`btn btn-outline-secondary pointer
 290             ${this.state.view == UserDetailsView.Overview && 'active'}
 291           `}
 292         >
 293           <input
 294             type="radio"
 295             value={UserDetailsView.Overview}
 296             checked={this.state.view === UserDetailsView.Overview}
 297             onChange={linkEvent(this, this.handleViewChange)}
 298           />
 299           {i18n.t('overview')}
 300         </label>
 301         <label
 302           className={`btn btn-outline-secondary pointer
 303             ${this.state.view == UserDetailsView.Comments && 'active'}
 304           `}
 305         >
 306           <input
 307             type="radio"
 308             value={UserDetailsView.Comments}
 309             checked={this.state.view == UserDetailsView.Comments}
 310             onChange={linkEvent(this, this.handleViewChange)}
 311           />
 312           {i18n.t('comments')}
 313         </label>
 314         <label
 315           className={`btn btn-outline-secondary pointer
 316             ${this.state.view == UserDetailsView.Posts && 'active'}
 317           `}
 318         >
 319           <input
 320             type="radio"
 321             value={UserDetailsView.Posts}
 322             checked={this.state.view == UserDetailsView.Posts}
 323             onChange={linkEvent(this, this.handleViewChange)}
 324           />
 325           {i18n.t('posts')}
 326         </label>
 327         <label
 328           className={`btn btn-outline-secondary pointer
 329             ${this.state.view == UserDetailsView.Saved && 'active'}
 330           `}
 331         >
 332           <input
 333             type="radio"
 334             value={UserDetailsView.Saved}
 335             checked={this.state.view == UserDetailsView.Saved}
 336             onChange={linkEvent(this, this.handleViewChange)}
 337           />
 338           {i18n.t('saved')}
 339         </label>
 340       </div>
 341     );
 342   }
 343
 344   selects() {
 345     return (
 346       <div className="mb-2">
 347         <span class="mr-3">{this.viewRadios()}</span>
 348         <SortSelect
 349           sort={this.state.sort}
 350           onChange={this.handleSortChange}
 351           hideHot
 352         />
 353         <a
 354           href={`/feeds/u/${this.state.username}.xml?sort=${
 355             SortType[this.state.sort]
 356           }`}
 357           target="_blank"
 358           rel="noopener"
 359           title="RSS"
 360         >
 361           <svg class="icon mx-2 text-muted small">
 362             <use xlinkHref="#icon-rss">#</use>
 363           </svg>
 364         </a>
 365       </div>
 366     );
 367   }
 368
 369   userInfo() {
 370     let user = this.state.user;
 371     return (
 372       <div>
 373         <div class="card bg-transparent border-secondary mb-3">
 374           <div class="card-body">
 375             <h5>
 376               <ul class="list-inline mb-0">
 377                 <li className="list-inline-item">
 378                   <UserListing user={user} realLink />
 379                 </li>
 380                 {user.banned && (
 381                   <li className="list-inline-item badge badge-danger">
 382                     {i18n.t('banned')}
 383                   </li>
 384                 )}
 385               </ul>
 386             </h5>
 387             {user.bio && (
 388               <div className="d-flex align-items-center mb-2">
 389                 <div
 390                   className="md-div"
 391                   dangerouslySetInnerHTML={mdToHtml(user.bio)}
 392                 />
 393               </div>
 394             )}
 395             <div className="d-flex align-items-center mb-2">
 396               <svg class="icon">
 397                 <use xlinkHref="#icon-cake"></use>
 398               </svg>
 399               <span className="ml-2">
 400                 {i18n.t('cake_day_title')}{' '}
 401                 {moment.utc(user.published).local().format('MMM DD, YYYY')}
 402               </span>
 403             </div>
 404             <div>
 405               {i18n.t('joined')} <MomentTime data={user} showAgo />
 406             </div>
 407             <div class="table-responsive mt-1">
 408               <table class="table table-bordered table-sm mt-2 mb-0">
 409                 {/*
 410                 <tr>
 411                   <td class="text-center" colSpan={2}>
 412                     {i18n.t('number_of_points', {
 413                       count: user.post_score + user.comment_score,
 414                     })}
 415                   </td>
 416                 </tr>
 417                 */}
 418                 <tr>
 419                   {/*
 420                   <td>
 421                     {i18n.t('number_of_points', { count: user.post_score })}
 422                   </td>
 423                   */}
 424                   <td>
 425                     {i18n.t('number_of_posts', { count: user.number_of_posts })}
 426                   </td>
 427                   {/*
 428                 </tr>
 429                 <tr>
 430                   <td>
 431                     {i18n.t('number_of_points', { count: user.comment_score })}
 432                   </td>
 433                   */}
 434                   <td>
 435                     {i18n.t('number_of_comments', {
 436                       count: user.number_of_comments,
 437                     })}
 438                   </td>
 439                 </tr>
 440               </table>
 441             </div>
 442             {this.isCurrentUser ? (
 443               <button
 444                 class="btn btn-block btn-secondary mt-3"
 445                 onClick={linkEvent(this, this.handleLogoutClick)}
 446               >
 447                 {i18n.t('logout')}
 448               </button>
 449             ) : (
 450               <>
 451                 <a
 452                   className={`btn btn-block btn-secondary mt-3 ${
 453                     !this.state.user.matrix_user_id && 'disabled'
 454                   }`}
 455                   target="_blank"
 456                   rel="noopener"
 457                   href={`https://matrix.to/#/${this.state.user.matrix_user_id}`}
 458                 >
 459                   {i18n.t('send_secure_message')}
 460                 </a>
 461                 <Link
 462                   class="btn btn-block btn-secondary mt-3"
 463                   to={`/create_private_message?recipient_id=${this.state.user.id}`}
 464                 >
 465                   {i18n.t('send_message')}
 466                 </Link>
 467               </>
 468             )}
 469           </div>
 470         </div>
 471       </div>
 472     );
 473   }
 474
 475   userSettings() {
 476     return (
 477       <div>
 478         <div class="card bg-transparent border-secondary mb-3">
 479           <div class="card-body">
 480             <h5>{i18n.t('settings')}</h5>
 481             <form onSubmit={linkEvent(this, this.handleUserSettingsSubmit)}>
 482               <div class="form-group">
 483                 <label>{i18n.t('avatar')}</label>
 484                 <form class="d-inline">
 485                   <label
 486                     htmlFor="file-upload"
 487                     class="pointer ml-4 text-muted small font-weight-bold"
 488                   >
 489                     {!this.checkSettingsAvatar ? (
 490                       <span class="btn btn-secondary">
 491                         {i18n.t('upload_avatar')}
 492                       </span>
 493                     ) : (
 494                       <img
 495                         height="80"
 496                         width="80"
 497                         src={this.state.userSettingsForm.avatar}
 498                         class="rounded-circle"
 499                       />
 500                     )}
 501                   </label>
 502                   <input
 503                     id="file-upload"
 504                     type="file"
 505                     accept="image/*,video/*"
 506                     name="file"
 507                     class="d-none"
 508                     disabled={!UserService.Instance.user}
 509                     onChange={linkEvent(this, this.handleImageUpload)}
 510                   />
 511                 </form>
 512               </div>
 513               {this.checkSettingsAvatar && (
 514                 <div class="form-group">
 515                   <button
 516                     class="btn btn-secondary btn-block"
 517                     onClick={linkEvent(this, this.removeAvatar)}
 518                   >
 519                     {`${capitalizeFirstLetter(i18n.t('remove'))} ${i18n.t(
 520                       'avatar'
 521                     )}`}
 522                   </button>
 523                 </div>
 524               )}
 525               <div class="form-group">
 526                 <label>{i18n.t('language')}</label>
 527                 <select
 528                   value={this.state.userSettingsForm.lang}
 529                   onChange={linkEvent(this, this.handleUserSettingsLangChange)}
 530                   class="ml-2 custom-select w-auto"
 531                 >
 532                   <option disabled>{i18n.t('language')}</option>
 533                   <option value="browser">{i18n.t('browser_default')}</option>
 534                   <option disabled>──</option>
 535                   {languages.map(lang => (
 536                     <option value={lang.code}>{lang.name}</option>
 537                   ))}
 538                 </select>
 539               </div>
 540               <div class="form-group">
 541                 <label>{i18n.t('theme')}</label>
 542                 <select
 543                   value={this.state.userSettingsForm.theme}
 544                   onChange={linkEvent(this, this.handleUserSettingsThemeChange)}
 545                   class="ml-2 custom-select w-auto"
 546                 >
 547                   <option disabled>{i18n.t('theme')}</option>
 548                   {themes.map(theme => (
 549                     <option value={theme}>{theme}</option>
 550                   ))}
 551                 </select>
 552               </div>
 553               <form className="form-group">
 554                 <label>
 555                   <div class="mr-2">{i18n.t('sort_type')}</div>
 556                 </label>
 557                 <ListingTypeSelect
 558                   type_={this.state.userSettingsForm.default_listing_type}
 559                   onChange={this.handleUserSettingsListingTypeChange}
 560                 />
 561               </form>
 562               <form className="form-group">
 563                 <label>
 564                   <div class="mr-2">{i18n.t('type')}</div>
 565                 </label>
 566                 <SortSelect
 567                   sort={this.state.userSettingsForm.default_sort_type}
 568                   onChange={this.handleUserSettingsSortTypeChange}
 569                 />
 570               </form>
 571               <div class="form-group row">
 572                 <label class="col-lg-3 col-form-label" htmlFor="user-email">
 573                   {i18n.t('email')}
 574                 </label>
 575                 <div class="col-lg-9">
 576                   <input
 577                     type="email"
 578                     id="user-email"
 579                     class="form-control"
 580                     placeholder={i18n.t('optional')}
 581                     value={this.state.userSettingsForm.email}
 582                     onInput={linkEvent(
 583                       this,
 584                       this.handleUserSettingsEmailChange
 585                     )}
 586                     minLength={3}
 587                   />
 588                 </div>
 589               </div>
 590               <div class="form-group row">
 591                 <label class="col-lg-3 col-form-label" htmlFor="user-bio">
 592                   {i18n.t('bio')}
 593                 </label>
 594                 <div class="col-lg-9">
 595                   <MarkdownTextArea
 596                     initialContent={this.state.userSettingsForm.bio}
 597                     onContentChange={this.handleUserSettingsBioChange}
 598                     maxLength={300}
 599                   />
 600                 </div>
 601               </div>
 602               <div class="form-group row">
 603                 <label class="col-lg-5 col-form-label">
 604                   <a
 605                     href="https://about.riot.im/"
 606                     target="_blank"
 607                     rel="noopener"
 608                   >
 609                     {i18n.t('matrix_user_id')}
 610                   </a>
 611                 </label>
 612                 <div class="col-lg-7">
 613                   <input
 614                     type="text"
 615                     class="form-control"
 616                     placeholder="@user:example.com"
 617                     value={this.state.userSettingsForm.matrix_user_id}
 618                     onInput={linkEvent(
 619                       this,
 620                       this.handleUserSettingsMatrixUserIdChange
 621                     )}
 622                     minLength={3}
 623                   />
 624                 </div>
 625               </div>
 626               <div class="form-group row">
 627                 <label class="col-lg-5 col-form-label" htmlFor="user-password">
 628                   {i18n.t('new_password')}
 629                 </label>
 630                 <div class="col-lg-7">
 631                   <input
 632                     type="password"
 633                     id="user-password"
 634                     class="form-control"
 635                     value={this.state.userSettingsForm.new_password}
 636                     autoComplete="new-password"
 637                     onInput={linkEvent(
 638                       this,
 639                       this.handleUserSettingsNewPasswordChange
 640                     )}
 641                   />
 642                 </div>
 643               </div>
 644               <div class="form-group row">
 645                 <label
 646                   class="col-lg-5 col-form-label"
 647                   htmlFor="user-verify-password"
 648                 >
 649                   {i18n.t('verify_password')}
 650                 </label>
 651                 <div class="col-lg-7">
 652                   <input
 653                     type="password"
 654                     id="user-verify-password"
 655                     class="form-control"
 656                     value={this.state.userSettingsForm.new_password_verify}
 657                     autoComplete="new-password"
 658                     onInput={linkEvent(
 659                       this,
 660                       this.handleUserSettingsNewPasswordVerifyChange
 661                     )}
 662                   />
 663                 </div>
 664               </div>
 665               <div class="form-group row">
 666                 <label
 667                   class="col-lg-5 col-form-label"
 668                   htmlFor="user-old-password"
 669                 >
 670                   {i18n.t('old_password')}
 671                 </label>
 672                 <div class="col-lg-7">
 673                   <input
 674                     type="password"
 675                     id="user-old-password"
 676                     class="form-control"
 677                     value={this.state.userSettingsForm.old_password}
 678                     autoComplete="new-password"
 679                     onInput={linkEvent(
 680                       this,
 681                       this.handleUserSettingsOldPasswordChange
 682                     )}
 683                   />
 684                 </div>
 685               </div>
 686               {this.state.siteRes.site.enable_nsfw && (
 687                 <div class="form-group">
 688                   <div class="form-check">
 689                     <input
 690                       class="form-check-input"
 691                       id="user-show-nsfw"
 692                       type="checkbox"
 693                       checked={this.state.userSettingsForm.show_nsfw}
 694                       onChange={linkEvent(
 695                         this,
 696                         this.handleUserSettingsShowNsfwChange
 697                       )}
 698                     />
 699                     <label class="form-check-label" htmlFor="user-show-nsfw">
 700                       {i18n.t('show_nsfw')}
 701                     </label>
 702                   </div>
 703                 </div>
 704               )}
 705               <div class="form-group">
 706                 <div class="form-check">
 707                   <input
 708                     class="form-check-input"
 709                     id="user-show-avatars"
 710                     type="checkbox"
 711                     checked={this.state.userSettingsForm.show_avatars}
 712                     onChange={linkEvent(
 713                       this,
 714                       this.handleUserSettingsShowAvatarsChange
 715                     )}
 716                   />
 717                   <label class="form-check-label" htmlFor="user-show-avatars">
 718                     {i18n.t('show_avatars')}
 719                   </label>
 720                 </div>
 721               </div>
 722               <div class="form-group">
 723                 <div class="form-check">
 724                   <input
 725                     class="form-check-input"
 726                     id="user-send-notifications-to-email"
 727                     type="checkbox"
 728                     disabled={!this.state.user.email}
 729                     checked={
 730                       this.state.userSettingsForm.send_notifications_to_email
 731                     }
 732                     onChange={linkEvent(
 733                       this,
 734                       this.handleUserSettingsSendNotificationsToEmailChange
 735                     )}
 736                   />
 737                   <label
 738                     class="form-check-label"
 739                     htmlFor="user-send-notifications-to-email"
 740                   >
 741                     {i18n.t('send_notifications_to_email')}
 742                   </label>
 743                 </div>
 744               </div>
 745               <div class="form-group">
 746                 <button type="submit" class="btn btn-block btn-secondary mr-4">
 747                   {this.state.userSettingsLoading ? (
 748                     <svg class="icon icon-spinner spin">
 749                       <use xlinkHref="#icon-spinner"></use>
 750                     </svg>
 751                   ) : (
 752                     capitalizeFirstLetter(i18n.t('save'))
 753                   )}
 754                 </button>
 755               </div>
 756               <hr />
 757               <div class="form-group mb-0">
 758                 <button
 759                   class="btn btn-block btn-danger"
 760                   onClick={linkEvent(
 761                     this,
 762                     this.handleDeleteAccountShowConfirmToggle
 763                   )}
 764                 >
 765                   {i18n.t('delete_account')}
 766                 </button>
 767                 {this.state.deleteAccountShowConfirm && (
 768                   <>
 769                     <div class="my-2 alert alert-danger" role="alert">
 770                       {i18n.t('delete_account_confirm')}
 771                     </div>
 772                     <input
 773                       type="password"
 774                       value={this.state.deleteAccountForm.password}
 775                       autoComplete="new-password"
 776                       onInput={linkEvent(
 777                         this,
 778                         this.handleDeleteAccountPasswordChange
 779                       )}
 780                       class="form-control my-2"
 781                     />
 782                     <button
 783                       class="btn btn-danger mr-4"
 784                       disabled={!this.state.deleteAccountForm.password}
 785                       onClick={linkEvent(this, this.handleDeleteAccount)}
 786                     >
 787                       {this.state.deleteAccountLoading ? (
 788                         <svg class="icon icon-spinner spin">
 789                           <use xlinkHref="#icon-spinner"></use>
 790                         </svg>
 791                       ) : (
 792                         capitalizeFirstLetter(i18n.t('delete'))
 793                       )}
 794                     </button>
 795                     <button
 796                       class="btn btn-secondary"
 797                       onClick={linkEvent(
 798                         this,
 799                         this.handleDeleteAccountShowConfirmToggle
 800                       )}
 801                     >
 802                       {i18n.t('cancel')}
 803                     </button>
 804                   </>
 805                 )}
 806               </div>
 807             </form>
 808           </div>
 809         </div>
 810       </div>
 811     );
 812   }
 813
 814   moderates() {
 815     return (
 816       <div>
 817         {this.state.moderates.length > 0 && (
 818           <div class="card bg-transparent border-secondary mb-3">
 819             <div class="card-body">
 820               <h5>{i18n.t('moderates')}</h5>
 821               <ul class="list-unstyled mb-0">
 822                 {this.state.moderates.map(community => (
 823                   <li>
 824                     <Link to={`/c/${community.community_name}`}>
 825                       {community.community_name}
 826                     </Link>
 827                   </li>
 828                 ))}
 829               </ul>
 830             </div>
 831           </div>
 832         )}
 833       </div>
 834     );
 835   }
 836
 837   follows() {
 838     return (
 839       <div>
 840         {this.state.follows.length > 0 && (
 841           <div class="card bg-transparent border-secondary mb-3">
 842             <div class="card-body">
 843               <h5>{i18n.t('subscribed')}</h5>
 844               <ul class="list-unstyled mb-0">
 845                 {this.state.follows.map(community => (
 846                   <li>
 847                     <Link to={`/c/${community.community_name}`}>
 848                       {community.community_name}
 849                     </Link>
 850                   </li>
 851                 ))}
 852               </ul>
 853             </div>
 854           </div>
 855         )}
 856       </div>
 857     );
 858   }
 859
 860   updateUrl(paramUpdates: UrlParams) {
 861     const page = paramUpdates.page || this.state.page;
 862     const viewStr =
 863       paramUpdates.view || UserDetailsView[this.state.view].toLowerCase();
 864     const sortStr =
 865       paramUpdates.sort || SortType[this.state.sort].toLowerCase();
 866     this.props.history.push(
 867       `/u/${this.state.username}/view/${viewStr}/sort/${sortStr}/page/${page}`
 868     );
 869   }
 870
 871   handlePageChange(page: number) {
 872     this.updateUrl({ page });
 873   }
 874
 875   handleSortChange(val: SortType) {
 876     this.updateUrl({ sort: SortType[val].toLowerCase(), page: 1 });
 877   }
 878
 879   handleViewChange(i: User, event: any) {
 880     i.updateUrl({
 881       view: UserDetailsView[Number(event.target.value)].toLowerCase(),
 882       page: 1,
 883     });
 884   }
 885
 886   handleUserSettingsShowNsfwChange(i: User, event: any) {
 887     i.state.userSettingsForm.show_nsfw = event.target.checked;
 888     i.setState(i.state);
 889   }
 890
 891   handleUserSettingsShowAvatarsChange(i: User, event: any) {
 892     i.state.userSettingsForm.show_avatars = event.target.checked;
 893     UserService.Instance.user.show_avatars = event.target.checked; // Just for instant updates
 894     i.setState(i.state);
 895   }
 896
 897   handleUserSettingsSendNotificationsToEmailChange(i: User, event: any) {
 898     i.state.userSettingsForm.send_notifications_to_email = event.target.checked;
 899     i.setState(i.state);
 900   }
 901
 902   handleUserSettingsThemeChange(i: User, event: any) {
 903     i.state.userSettingsForm.theme = event.target.value;
 904     setTheme(event.target.value, true);
 905     i.setState(i.state);
 906   }
 907
 908   handleUserSettingsLangChange(i: User, event: any) {
 909     i.state.userSettingsForm.lang = event.target.value;
 910     i18n.changeLanguage(getLanguage(i.state.userSettingsForm.lang));
 911     i.setState(i.state);
 912   }
 913
 914   handleUserSettingsSortTypeChange(val: SortType) {
 915     this.state.userSettingsForm.default_sort_type = val;
 916     this.setState(this.state);
 917   }
 918
 919   handleUserSettingsListingTypeChange(val: ListingType) {
 920     this.state.userSettingsForm.default_listing_type = val;
 921     this.setState(this.state);
 922   }
 923
 924   handleUserSettingsEmailChange(i: User, event: any) {
 925     i.state.userSettingsForm.email = event.target.value;
 926     if (i.state.userSettingsForm.email == '' && !i.state.user.email) {
 927       i.state.userSettingsForm.email = undefined;
 928     }
 929     i.setState(i.state);
 930   }
 931
 932   handleUserSettingsBioChange(val: string) {
 933     this.state.userSettingsForm.bio = val;
 934     this.setState(this.state);
 935   }
 936
 937   handleUserSettingsMatrixUserIdChange(i: User, event: any) {
 938     i.state.userSettingsForm.matrix_user_id = event.target.value;
 939     if (
 940       i.state.userSettingsForm.matrix_user_id == '' &&
 941       !i.state.user.matrix_user_id
 942     ) {
 943       i.state.userSettingsForm.matrix_user_id = undefined;
 944     }
 945     i.setState(i.state);
 946   }
 947
 948   handleUserSettingsNewPasswordChange(i: User, event: any) {
 949     i.state.userSettingsForm.new_password = event.target.value;
 950     if (i.state.userSettingsForm.new_password == '') {
 951       i.state.userSettingsForm.new_password = undefined;
 952     }
 953     i.setState(i.state);
 954   }
 955
 956   handleUserSettingsNewPasswordVerifyChange(i: User, event: any) {
 957     i.state.userSettingsForm.new_password_verify = event.target.value;
 958     if (i.state.userSettingsForm.new_password_verify == '') {
 959       i.state.userSettingsForm.new_password_verify = undefined;
 960     }
 961     i.setState(i.state);
 962   }
 963
 964   handleUserSettingsOldPasswordChange(i: User, event: any) {
 965     i.state.userSettingsForm.old_password = event.target.value;
 966     if (i.state.userSettingsForm.old_password == '') {
 967       i.state.userSettingsForm.old_password = undefined;
 968     }
 969     i.setState(i.state);
 970   }
 971
 972   handleImageUpload(i: User, event: any) {
 973     event.preventDefault();
 974     let file = event.target.files[0];
 975     const imageUploadUrl = `/pictrs/image`;
 976     const formData = new FormData();
 977     formData.append('images[]', file);
 978
 979     i.state.avatarLoading = true;
 980     i.setState(i.state);
 981
 982     fetch(imageUploadUrl, {
 983       method: 'POST',
 984       body: formData,
 985     })
 986       .then(res => res.json())
 987       .then(res => {
 988         console.log('pictrs upload:');
 989         console.log(res);
 990         if (res.msg == 'ok') {
 991           let hash = res.files[0].file;
 992           let url = `${window.location.origin}/pictrs/image/${hash}`;
 993           i.state.userSettingsForm.avatar = url;
 994           i.state.avatarLoading = false;
 995           i.setState(i.state);
 996         } else {
 997           i.state.avatarLoading = false;
 998           i.setState(i.state);
 999           toast(JSON.stringify(res), 'danger');
1000         }
1001       })
1002       .catch(error => {
1003         i.state.avatarLoading = false;
1004         i.setState(i.state);
1005         toast(error, 'danger');
1006       });
1007   }
1008
1009   removeAvatar(i: User, event: any) {
1010     event.preventDefault();
1011     i.state.userSettingsLoading = true;
1012     i.state.userSettingsForm.avatar = '';
1013     i.setState(i.state);
1014
1015     WebSocketService.Instance.saveUserSettings(i.state.userSettingsForm);
1016   }
1017
1018   get checkSettingsAvatar(): boolean {
1019     return (
1020       this.state.userSettingsForm.avatar &&
1021       this.state.userSettingsForm.avatar != ''
1022     );
1023   }
1024
1025   handleUserSettingsSubmit(i: User, event: any) {
1026     event.preventDefault();
1027     i.state.userSettingsLoading = true;
1028     i.setState(i.state);
1029
1030     WebSocketService.Instance.saveUserSettings(i.state.userSettingsForm);
1031   }
1032
1033   handleDeleteAccountShowConfirmToggle(i: User, event: any) {
1034     event.preventDefault();
1035     i.state.deleteAccountShowConfirm = !i.state.deleteAccountShowConfirm;
1036     i.setState(i.state);
1037   }
1038
1039   handleDeleteAccountPasswordChange(i: User, event: any) {
1040     i.state.deleteAccountForm.password = event.target.value;
1041     i.setState(i.state);
1042   }
1043
1044   handleLogoutClick(i: User) {
1045     UserService.Instance.logout();
1046     i.context.router.history.push('/');
1047   }
1048
1049   handleDeleteAccount(i: User, event: any) {
1050     event.preventDefault();
1051     i.state.deleteAccountLoading = true;
1052     i.setState(i.state);
1053
1054     WebSocketService.Instance.deleteAccount(i.state.deleteAccountForm);
1055   }
1056
1057   parseMessage(msg: WebSocketJsonResponse) {
1058     console.log(msg);
1059     const res = wsJsonToRes(msg);
1060     if (msg.error) {
1061       toast(i18n.t(msg.error), 'danger');
1062       if (msg.error == 'couldnt_find_that_username_or_email') {
1063         this.context.router.history.push('/');
1064       }
1065       this.setState({
1066         deleteAccountLoading: false,
1067         avatarLoading: false,
1068         userSettingsLoading: false,
1069       });
1070       return;
1071     } else if (res.op == UserOperation.GetUserDetails) {
1072       // Since the UserDetails contains posts/comments as well as some general user info we listen here as well
1073       // and set the parent state if it is not set or differs
1074       const data = res.data as UserDetailsResponse;
1075
1076       if (this.state.user.id !== data.user.id) {
1077         this.state.user = data.user;
1078         this.state.follows = data.follows;
1079         this.state.moderates = data.moderates;
1080
1081         if (this.isCurrentUser) {
1082           this.state.userSettingsForm.show_nsfw =
1083             UserService.Instance.user.show_nsfw;
1084           this.state.userSettingsForm.theme = UserService.Instance.user.theme
1085             ? UserService.Instance.user.theme
1086             : 'darkly';
1087           this.state.userSettingsForm.default_sort_type =
1088             UserService.Instance.user.default_sort_type;
1089           this.state.userSettingsForm.default_listing_type =
1090             UserService.Instance.user.default_listing_type;
1091           this.state.userSettingsForm.lang = UserService.Instance.user.lang;
1092           this.state.userSettingsForm.avatar = UserService.Instance.user.avatar;
1093           this.state.userSettingsForm.email = this.state.user.email;
1094           this.state.userSettingsForm.bio = this.state.user.bio;
1095           this.state.userSettingsForm.send_notifications_to_email = this.state.user.send_notifications_to_email;
1096           this.state.userSettingsForm.show_avatars =
1097             UserService.Instance.user.show_avatars;
1098           this.state.userSettingsForm.matrix_user_id = this.state.user.matrix_user_id;
1099         }
1100         this.state.loading = false;
1101         this.setState(this.state);
1102       }
1103     } else if (res.op == UserOperation.SaveUserSettings) {
1104       const data = res.data as LoginResponse;
1105       UserService.Instance.login(data);
1106       this.state.user.bio = this.state.userSettingsForm.bio;
1107       this.state.userSettingsLoading = false;
1108       this.setState(this.state);
1109
1110       window.scrollTo(0, 0);
1111     } else if (res.op == UserOperation.DeleteAccount) {
1112       this.setState({
1113         deleteAccountLoading: false,
1114         deleteAccountShowConfirm: false,
1115       });
1116       this.context.router.history.push('/');
1117     } else if (res.op == UserOperation.GetSite) {
1118       const data = res.data as GetSiteResponse;
1119       this.state.siteRes = data;
1120       this.setState(this.state);
1121     } else if (res.op == UserOperation.AddAdmin) {
1122       const data = res.data as AddAdminResponse;
1123       this.state.siteRes.admins = data.admins;
1124       this.setState(this.state);
1125     }
1126   }
1127 }