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   toast,
  31   setupTippy,
  32   getLanguage,
  33   mdToHtml,
  34   elementUrl,
  35   favIconUrl,
  36 } from '../utils';
  37 import { UserListing } from './user-listing';
  38 import { SortSelect } from './sort-select';
  39 import { ListingTypeSelect } from './listing-type-select';
  40 import { MomentTime } from './moment-time';
  41 import { i18n } from '../i18next';
  42 import moment from 'moment';
  43 import { UserDetails } from './user-details';
  44 import { MarkdownTextArea } from './markdown-textarea';
  45 import { ImageUploadForm } from './image-upload-form';
  46 import { BannerIconHeader } from './banner-icon-header';
  47
  48 interface UserState {
  49   user: UserView;
  50   user_id: number;
  51   username: string;
  52   follows: Array<CommunityUser>;
  53   moderates: Array<CommunityUser>;
  54   view: UserDetailsView;
  55   sort: SortType;
  56   page: number;
  57   loading: boolean;
  58   userSettingsForm: UserSettingsForm;
  59   userSettingsLoading: boolean;
  60   deleteAccountLoading: boolean;
  61   deleteAccountShowConfirm: boolean;
  62   deleteAccountForm: DeleteAccountForm;
  63   siteRes: GetSiteResponse;
  64 }
  65
  66 interface UserProps {
  67   view: UserDetailsView;
  68   sort: SortType;
  69   page: number;
  70   user_id: number | null;
  71   username: string;
  72 }
  73
  74 interface UrlParams {
  75   view?: string;
  76   sort?: string;
  77   page?: number;
  78 }
  79
  80 export class User extends Component<any, UserState> {
  81   private subscription: Subscription;
  82   private emptyState: UserState = {
  83     user: {
  84       id: null,
  85       name: null,
  86       published: null,
  87       number_of_posts: null,
  88       post_score: null,
  89       number_of_comments: null,
  90       comment_score: null,
  91       banned: null,
  92       avatar: null,
  93       actor_id: null,
  94       local: null,
  95     },
  96     user_id: null,
  97     username: null,
  98     follows: [],
  99     moderates: [],
 100     loading: true,
 101     view: User.getViewFromProps(this.props.match.view),
 102     sort: User.getSortTypeFromProps(this.props.match.sort),
 103     page: User.getPageFromProps(this.props.match.page),
 104     userSettingsForm: {
 105       show_nsfw: null,
 106       theme: null,
 107       default_sort_type: null,
 108       default_listing_type: null,
 109       lang: null,
 110       show_avatars: null,
 111       send_notifications_to_email: null,
 112       auth: null,
 113       bio: null,
 114       preferred_username: 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         icon: undefined,
 140         banner: undefined,
 141         creator_preferred_username: undefined,
 142       },
 143       version: undefined,
 144       my_user: undefined,
 145       federated_instances: undefined,
 146     },
 147   };
 148
 149   constructor(props: any, context: any) {
 150     super(props, context);
 151
 152     this.state = this.emptyState;
 153     this.handleSortChange = this.handleSortChange.bind(this);
 154     this.handleUserSettingsSortTypeChange = this.handleUserSettingsSortTypeChange.bind(
 155       this
 156     );
 157     this.handleUserSettingsListingTypeChange = this.handleUserSettingsListingTypeChange.bind(
 158       this
 159     );
 160     this.handlePageChange = this.handlePageChange.bind(this);
 161     this.handleUserSettingsBioChange = this.handleUserSettingsBioChange.bind(
 162       this
 163     );
 164
 165     this.handleAvatarUpload = this.handleAvatarUpload.bind(this);
 166     this.handleAvatarRemove = this.handleAvatarRemove.bind(this);
 167
 168     this.handleBannerUpload = this.handleBannerUpload.bind(this);
 169     this.handleBannerRemove = this.handleBannerRemove.bind(this);
 170
 171     this.state.user_id = Number(this.props.match.params.id) || null;
 172     this.state.username = this.props.match.params.username;
 173
 174     this.subscription = WebSocketService.Instance.subject
 175       .pipe(retryWhen(errors => errors.pipe(delay(3000), take(10))))
 176       .subscribe(
 177         msg => this.parseMessage(msg),
 178         err => console.error(err),
 179         () => console.log('complete')
 180       );
 181
 182     WebSocketService.Instance.getSite();
 183     setupTippy();
 184   }
 185
 186   get isCurrentUser() {
 187     return (
 188       UserService.Instance.user &&
 189       UserService.Instance.user.id == this.state.user.id
 190     );
 191   }
 192
 193   static getViewFromProps(view: any): UserDetailsView {
 194     return view
 195       ? UserDetailsView[capitalizeFirstLetter(view)]
 196       : UserDetailsView.Overview;
 197   }
 198
 199   static getSortTypeFromProps(sort: any): SortType {
 200     return sort ? routeSortTypeToEnum(sort) : SortType.New;
 201   }
 202
 203   static getPageFromProps(page: any): number {
 204     return page ? Number(page) : 1;
 205   }
 206
 207   componentWillUnmount() {
 208     this.subscription.unsubscribe();
 209   }
 210
 211   static getDerivedStateFromProps(props: any): UserProps {
 212     return {
 213       view: this.getViewFromProps(props.match.params.view),
 214       sort: this.getSortTypeFromProps(props.match.params.sort),
 215       page: this.getPageFromProps(props.match.params.page),
 216       user_id: Number(props.match.params.id) || null,
 217       username: props.match.params.username,
 218     };
 219   }
 220
 221   componentDidUpdate(lastProps: any, _lastState: UserState, _snapshot: any) {
 222     // Necessary if you are on a post and you click another post (same route)
 223     if (
 224       lastProps.location.pathname.split('/')[2] !==
 225       lastProps.history.location.pathname.split('/')[2]
 226     ) {
 227       // Couldnt get a refresh working. This does for now.
 228       location.reload();
 229     }
 230   }
 231
 232   get documentTitle(): string {
 233     if (this.state.siteRes.site.name) {
 234       return `@${this.state.username} - ${this.state.siteRes.site.name}`;
 235     } else {
 236       return 'Lemmy';
 237     }
 238   }
 239
 240   get favIcon(): string {
 241     return this.state.siteRes.site.icon
 242       ? this.state.siteRes.site.icon
 243       : favIconUrl;
 244   }
 245
 246   render() {
 247     return (
 248       <div class="container">
 249         <Helmet title={this.documentTitle}>
 250           <link
 251             id="favicon"
 252             rel="icon"
 253             type="image/x-icon"
 254             href={this.favIcon}
 255           />
 256         </Helmet>
 257         <div class="row">
 258           <div class="col-12 col-md-8">
 259             {this.state.loading ? (
 260               <h5>
 261                 <svg class="icon icon-spinner spin">
 262                   <use xlinkHref="#icon-spinner"></use>
 263                 </svg>
 264               </h5>
 265             ) : (
 266               <>
 267                 {this.userInfo()}
 268                 <hr />
 269               </>
 270             )}
 271             {!this.state.loading && this.selects()}
 272             <UserDetails
 273               user_id={this.state.user_id}
 274               username={this.state.username}
 275               sort={SortType[this.state.sort]}
 276               page={this.state.page}
 277               limit={fetchLimit}
 278               enableDownvotes={this.state.siteRes.site.enable_downvotes}
 279               enableNsfw={this.state.siteRes.site.enable_nsfw}
 280               admins={this.state.siteRes.admins}
 281               view={this.state.view}
 282               onPageChange={this.handlePageChange}
 283             />
 284           </div>
 285
 286           {!this.state.loading && (
 287             <div class="col-12 col-md-4">
 288               {this.isCurrentUser && this.userSettings()}
 289               {this.moderates()}
 290               {this.follows()}
 291             </div>
 292           )}
 293         </div>
 294       </div>
 295     );
 296   }
 297
 298   viewRadios() {
 299     return (
 300       <div class="btn-group btn-group-toggle flex-wrap mb-2">
 301         <label
 302           className={`btn btn-outline-secondary pointer
 303             ${this.state.view == UserDetailsView.Overview && 'active'}
 304           `}
 305         >
 306           <input
 307             type="radio"
 308             value={UserDetailsView.Overview}
 309             checked={this.state.view === UserDetailsView.Overview}
 310             onChange={linkEvent(this, this.handleViewChange)}
 311           />
 312           {i18n.t('overview')}
 313         </label>
 314         <label
 315           className={`btn btn-outline-secondary pointer
 316             ${this.state.view == UserDetailsView.Comments && 'active'}
 317           `}
 318         >
 319           <input
 320             type="radio"
 321             value={UserDetailsView.Comments}
 322             checked={this.state.view == UserDetailsView.Comments}
 323             onChange={linkEvent(this, this.handleViewChange)}
 324           />
 325           {i18n.t('comments')}
 326         </label>
 327         <label
 328           className={`btn btn-outline-secondary pointer
 329             ${this.state.view == UserDetailsView.Posts && 'active'}
 330           `}
 331         >
 332           <input
 333             type="radio"
 334             value={UserDetailsView.Posts}
 335             checked={this.state.view == UserDetailsView.Posts}
 336             onChange={linkEvent(this, this.handleViewChange)}
 337           />
 338           {i18n.t('posts')}
 339         </label>
 340         <label
 341           className={`btn btn-outline-secondary pointer
 342             ${this.state.view == UserDetailsView.Saved && 'active'}
 343           `}
 344         >
 345           <input
 346             type="radio"
 347             value={UserDetailsView.Saved}
 348             checked={this.state.view == UserDetailsView.Saved}
 349             onChange={linkEvent(this, this.handleViewChange)}
 350           />
 351           {i18n.t('saved')}
 352         </label>
 353       </div>
 354     );
 355   }
 356
 357   selects() {
 358     return (
 359       <div className="mb-2">
 360         <span class="mr-3">{this.viewRadios()}</span>
 361         <SortSelect
 362           sort={this.state.sort}
 363           onChange={this.handleSortChange}
 364           hideHot
 365         />
 366         <a
 367           href={`/feeds/u/${this.state.username}.xml?sort=${
 368             SortType[this.state.sort]
 369           }`}
 370           target="_blank"
 371           rel="noopener"
 372           title="RSS"
 373         >
 374           <svg class="icon mx-2 text-muted small">
 375             <use xlinkHref="#icon-rss">#</use>
 376           </svg>
 377         </a>
 378       </div>
 379     );
 380   }
 381
 382   userInfo() {
 383     let user = this.state.user;
 384
 385     return (
 386       <div>
 387         <BannerIconHeader
 388           banner={this.state.user.banner}
 389           icon={this.state.user.avatar}
 390         />
 391         <div class="mb-3">
 392           <div class="">
 393             <div class="mb-0 d-flex flex-wrap">
 394               <div>
 395                 {user.preferred_username && (
 396                   <h5 class="mb-0">{user.preferred_username}</h5>
 397                 )}
 398                 <ul class="list-inline mb-2">
 399                   <li className="list-inline-item">
 400                     <UserListing
 401                       user={user}
 402                       realLink
 403                       useApubName
 404                       muted
 405                       hideAvatar
 406                     />
 407                   </li>
 408                   {user.banned && (
 409                     <li className="list-inline-item badge badge-danger">
 410                       {i18n.t('banned')}
 411                     </li>
 412                   )}
 413                 </ul>
 414               </div>
 415               <div className="flex-grow-1 unselectable pointer mx-2"></div>
 416               {this.isCurrentUser ? (
 417                 <button
 418                   class="d-flex align-self-start btn btn-secondary ml-2"
 419                   onClick={linkEvent(this, this.handleLogoutClick)}
 420                 >
 421                   {i18n.t('logout')}
 422                 </button>
 423               ) : (
 424                 <>
 425                   <a
 426                     className={`d-flex align-self-start btn btn-secondary ml-2 ${
 427                       !this.state.user.matrix_user_id && 'invisible'
 428                     }`}
 429                     target="_blank"
 430                     rel="noopener"
 431                     href={`https://matrix.to/#/${this.state.user.matrix_user_id}`}
 432                   >
 433                     {i18n.t('send_secure_message')}
 434                   </a>
 435                   <Link
 436                     class="d-flex align-self-start btn btn-secondary ml-2"
 437                     to={`/create_private_message?recipient_id=${this.state.user.id}`}
 438                   >
 439                     {i18n.t('send_message')}
 440                   </Link>
 441                 </>
 442               )}
 443             </div>
 444             {user.bio && (
 445               <div className="d-flex align-items-center mb-2">
 446                 <div
 447                   className="md-div"
 448                   dangerouslySetInnerHTML={mdToHtml(user.bio)}
 449                 />
 450               </div>
 451             )}
 452             <div>
 453               <ul class="list-inline mb-2">
 454                 <li className="list-inline-item badge badge-light">
 455                   {i18n.t('number_of_posts', { count: user.number_of_posts })}
 456                 </li>
 457                 <li className="list-inline-item badge badge-light">
 458                   {i18n.t('number_of_comments', {
 459                     count: user.number_of_comments,
 460                   })}
 461                 </li>
 462               </ul>
 463             </div>
 464             <div class="text-muted">
 465               {i18n.t('joined')} <MomentTime data={user} showAgo />
 466             </div>
 467             <div className="d-flex align-items-center text-muted mb-2">
 468               <svg class="icon">
 469                 <use xlinkHref="#icon-cake"></use>
 470               </svg>
 471               <span className="ml-2">
 472                 {i18n.t('cake_day_title')}{' '}
 473                 {moment.utc(user.published).local().format('MMM DD, YYYY')}
 474               </span>
 475             </div>
 476           </div>
 477         </div>
 478       </div>
 479     );
 480   }
 481
 482   userSettings() {
 483     return (
 484       <div>
 485         <div class="card bg-transparent border-secondary mb-3">
 486           <div class="card-body">
 487             <h5>{i18n.t('settings')}</h5>
 488             <form onSubmit={linkEvent(this, this.handleUserSettingsSubmit)}>
 489               <div class="form-group">
 490                 <label>{i18n.t('avatar')}</label>
 491                 <ImageUploadForm
 492                   uploadTitle={i18n.t('upload_avatar')}
 493                   imageSrc={this.state.userSettingsForm.avatar}
 494                   onUpload={this.handleAvatarUpload}
 495                   onRemove={this.handleAvatarRemove}
 496                   rounded
 497                 />
 498               </div>
 499               <div class="form-group">
 500                 <label>{i18n.t('banner')}</label>
 501                 <ImageUploadForm
 502                   uploadTitle={i18n.t('upload_banner')}
 503                   imageSrc={this.state.userSettingsForm.banner}
 504                   onUpload={this.handleBannerUpload}
 505                   onRemove={this.handleBannerRemove}
 506                 />
 507               </div>
 508               <div class="form-group">
 509                 <label>{i18n.t('language')}</label>
 510                 <select
 511                   value={this.state.userSettingsForm.lang}
 512                   onChange={linkEvent(this, this.handleUserSettingsLangChange)}
 513                   class="ml-2 custom-select w-auto"
 514                 >
 515                   <option disabled>{i18n.t('language')}</option>
 516                   <option value="browser">{i18n.t('browser_default')}</option>
 517                   <option disabled>──</option>
 518                   {languages.map(lang => (
 519                     <option value={lang.code}>{lang.name}</option>
 520                   ))}
 521                 </select>
 522               </div>
 523               <div class="form-group">
 524                 <label>{i18n.t('theme')}</label>
 525                 <select
 526                   value={this.state.userSettingsForm.theme}
 527                   onChange={linkEvent(this, this.handleUserSettingsThemeChange)}
 528                   class="ml-2 custom-select w-auto"
 529                 >
 530                   <option disabled>{i18n.t('theme')}</option>
 531                   {themes.map(theme => (
 532                     <option value={theme}>{theme}</option>
 533                   ))}
 534                 </select>
 535               </div>
 536               <form className="form-group">
 537                 <label>
 538                   <div class="mr-2">{i18n.t('sort_type')}</div>
 539                 </label>
 540                 <ListingTypeSelect
 541                   type_={this.state.userSettingsForm.default_listing_type}
 542                   onChange={this.handleUserSettingsListingTypeChange}
 543                 />
 544               </form>
 545               <form className="form-group">
 546                 <label>
 547                   <div class="mr-2">{i18n.t('type')}</div>
 548                 </label>
 549                 <SortSelect
 550                   sort={this.state.userSettingsForm.default_sort_type}
 551                   onChange={this.handleUserSettingsSortTypeChange}
 552                 />
 553               </form>
 554               <div class="form-group row">
 555                 <label class="col-lg-5 col-form-label">
 556                   {i18n.t('display_name')}
 557                 </label>
 558                 <div class="col-lg-7">
 559                   <input
 560                     type="text"
 561                     class="form-control"
 562                     placeholder={i18n.t('optional')}
 563                     value={this.state.userSettingsForm.preferred_username}
 564                     onInput={linkEvent(
 565                       this,
 566                       this.handleUserSettingsPreferredUsernameChange
 567                     )}
 568                     pattern="^(?!@)(.+)$"
 569                     minLength={3}
 570                     maxLength={20}
 571                   />
 572                 </div>
 573               </div>
 574               <div class="form-group row">
 575                 <label class="col-lg-3 col-form-label" htmlFor="user-bio">
 576                   {i18n.t('bio')}
 577                 </label>
 578                 <div class="col-lg-9">
 579                   <MarkdownTextArea
 580                     initialContent={this.state.userSettingsForm.bio}
 581                     onContentChange={this.handleUserSettingsBioChange}
 582                     maxLength={300}
 583                     hideNavigationWarnings
 584                   />
 585                 </div>
 586               </div>
 587               <div class="form-group row">
 588                 <label class="col-lg-3 col-form-label" htmlFor="user-email">
 589                   {i18n.t('email')}
 590                 </label>
 591                 <div class="col-lg-9">
 592                   <input
 593                     type="email"
 594                     id="user-email"
 595                     class="form-control"
 596                     placeholder={i18n.t('optional')}
 597                     value={this.state.userSettingsForm.email}
 598                     onInput={linkEvent(
 599                       this,
 600                       this.handleUserSettingsEmailChange
 601                     )}
 602                     minLength={3}
 603                   />
 604                 </div>
 605               </div>
 606               <div class="form-group row">
 607                 <label class="col-lg-5 col-form-label">
 608                   <a href={elementUrl} target="_blank" rel="noopener">
 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.userSettingsForm.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     i.setState(i.state);
 927   }
 928
 929   handleUserSettingsBioChange(val: string) {
 930     this.state.userSettingsForm.bio = val;
 931     this.setState(this.state);
 932   }
 933
 934   handleAvatarUpload(url: string) {
 935     this.state.userSettingsForm.avatar = url;
 936     this.setState(this.state);
 937   }
 938
 939   handleAvatarRemove() {
 940     this.state.userSettingsForm.avatar = '';
 941     this.setState(this.state);
 942   }
 943
 944   handleBannerUpload(url: string) {
 945     this.state.userSettingsForm.banner = url;
 946     this.setState(this.state);
 947   }
 948
 949   handleBannerRemove() {
 950     this.state.userSettingsForm.banner = '';
 951     this.setState(this.state);
 952   }
 953
 954   handleUserSettingsPreferredUsernameChange(i: User, event: any) {
 955     i.state.userSettingsForm.preferred_username = event.target.value;
 956     i.setState(i.state);
 957   }
 958
 959   handleUserSettingsMatrixUserIdChange(i: User, event: any) {
 960     i.state.userSettingsForm.matrix_user_id = event.target.value;
 961     if (
 962       i.state.userSettingsForm.matrix_user_id == '' &&
 963       !i.state.user.matrix_user_id
 964     ) {
 965       i.state.userSettingsForm.matrix_user_id = undefined;
 966     }
 967     i.setState(i.state);
 968   }
 969
 970   handleUserSettingsNewPasswordChange(i: User, event: any) {
 971     i.state.userSettingsForm.new_password = event.target.value;
 972     if (i.state.userSettingsForm.new_password == '') {
 973       i.state.userSettingsForm.new_password = undefined;
 974     }
 975     i.setState(i.state);
 976   }
 977
 978   handleUserSettingsNewPasswordVerifyChange(i: User, event: any) {
 979     i.state.userSettingsForm.new_password_verify = event.target.value;
 980     if (i.state.userSettingsForm.new_password_verify == '') {
 981       i.state.userSettingsForm.new_password_verify = undefined;
 982     }
 983     i.setState(i.state);
 984   }
 985
 986   handleUserSettingsOldPasswordChange(i: User, event: any) {
 987     i.state.userSettingsForm.old_password = event.target.value;
 988     if (i.state.userSettingsForm.old_password == '') {
 989       i.state.userSettingsForm.old_password = undefined;
 990     }
 991     i.setState(i.state);
 992   }
 993
 994   handleUserSettingsSubmit(i: User, event: any) {
 995     event.preventDefault();
 996     i.state.userSettingsLoading = true;
 997     i.setState(i.state);
 998
 999     WebSocketService.Instance.saveUserSettings(i.state.userSettingsForm);
1000   }
1001
1002   handleDeleteAccountShowConfirmToggle(i: User, event: any) {
1003     event.preventDefault();
1004     i.state.deleteAccountShowConfirm = !i.state.deleteAccountShowConfirm;
1005     i.setState(i.state);
1006   }
1007
1008   handleDeleteAccountPasswordChange(i: User, event: any) {
1009     i.state.deleteAccountForm.password = event.target.value;
1010     i.setState(i.state);
1011   }
1012
1013   handleLogoutClick(i: User) {
1014     UserService.Instance.logout();
1015     i.context.router.history.push('/');
1016   }
1017
1018   handleDeleteAccount(i: User, event: any) {
1019     event.preventDefault();
1020     i.state.deleteAccountLoading = true;
1021     i.setState(i.state);
1022
1023     WebSocketService.Instance.deleteAccount(i.state.deleteAccountForm);
1024   }
1025
1026   parseMessage(msg: WebSocketJsonResponse) {
1027     console.log(msg);
1028     const res = wsJsonToRes(msg);
1029     if (msg.error) {
1030       toast(i18n.t(msg.error), 'danger');
1031       if (msg.error == 'couldnt_find_that_username_or_email') {
1032         this.context.router.history.push('/');
1033       }
1034       this.setState({
1035         deleteAccountLoading: false,
1036         userSettingsLoading: false,
1037       });
1038       return;
1039     } else if (res.op == UserOperation.GetUserDetails) {
1040       // Since the UserDetails contains posts/comments as well as some general user info we listen here as well
1041       // and set the parent state if it is not set or differs
1042       const data = res.data as UserDetailsResponse;
1043
1044       if (this.state.user.id !== data.user.id) {
1045         this.state.user = data.user;
1046         this.state.follows = data.follows;
1047         this.state.moderates = data.moderates;
1048
1049         if (this.isCurrentUser) {
1050           this.state.userSettingsForm.show_nsfw =
1051             UserService.Instance.user.show_nsfw;
1052           this.state.userSettingsForm.theme = UserService.Instance.user.theme
1053             ? UserService.Instance.user.theme
1054             : 'darkly';
1055           this.state.userSettingsForm.default_sort_type =
1056             UserService.Instance.user.default_sort_type;
1057           this.state.userSettingsForm.default_listing_type =
1058             UserService.Instance.user.default_listing_type;
1059           this.state.userSettingsForm.lang = UserService.Instance.user.lang;
1060           this.state.userSettingsForm.avatar = UserService.Instance.user.avatar;
1061           this.state.userSettingsForm.banner = UserService.Instance.user.banner;
1062           this.state.userSettingsForm.preferred_username =
1063             UserService.Instance.user.preferred_username;
1064           this.state.userSettingsForm.show_avatars =
1065             UserService.Instance.user.show_avatars;
1066           this.state.userSettingsForm.email = UserService.Instance.user.email;
1067           this.state.userSettingsForm.bio = UserService.Instance.user.bio;
1068           this.state.userSettingsForm.send_notifications_to_email =
1069             UserService.Instance.user.send_notifications_to_email;
1070           this.state.userSettingsForm.matrix_user_id =
1071             UserService.Instance.user.matrix_user_id;
1072         }
1073         this.state.loading = false;
1074         this.setState(this.state);
1075       }
1076     } else if (res.op == UserOperation.SaveUserSettings) {
1077       const data = res.data as LoginResponse;
1078       UserService.Instance.login(data);
1079       this.state.user.bio = this.state.userSettingsForm.bio;
1080       this.state.user.preferred_username = this.state.userSettingsForm.preferred_username;
1081       this.state.user.banner = this.state.userSettingsForm.banner;
1082       this.state.user.avatar = this.state.userSettingsForm.avatar;
1083       this.state.userSettingsLoading = false;
1084       this.setState(this.state);
1085
1086       window.scrollTo(0, 0);
1087     } else if (res.op == UserOperation.DeleteAccount) {
1088       this.setState({
1089         deleteAccountLoading: false,
1090         deleteAccountShowConfirm: false,
1091       });
1092       this.context.router.history.push('/');
1093     } else if (res.op == UserOperation.GetSite) {
1094       const data = res.data as GetSiteResponse;
1095       this.state.siteRes = data;
1096       this.setState(this.state);
1097     } else if (res.op == UserOperation.AddAdmin) {
1098       const data = res.data as AddAdminResponse;
1099       this.state.siteRes.admins = data.admins;
1100       this.setState(this.state);
1101     }
1102   }
1103 }