(chore): various frontend changes

src/app/app.component.ts

@@ -16,6 +16,7 @@ import { ChannelOnboardingService } from "./modules/onboarding/channel/onboardin
 import { BlockListService } from "./common/services/block-list.service";
 import { FeaturesService } from "./services/features.service";
 import { ThemeService } from "./common/services/theme.service";
+import { BannedService } from './modules/report/banned/banned.service';
 
 @Component({
  moduleId: module.id,
@@ -49,6 +50,7 @@ export class Minds {
  public blockListService: BlockListService,
  public featuresService: FeaturesService,
  public themeService: ThemeService,
+ private bannedService: BannedService,
  ) {
  this.name = 'Minds';
  }

src/app/modules/newsfeed/newsfeed.component.ts

@@ -132,7 +132,8 @@ export class NewsfeedComponent {
 
  ngOnDestroy() {
  clearInterval(this.pollingTimer);
- this.paramsSubscription.unsubscribe();
+ if (this.paramsSubscription) 
+ this.paramsSubscription.unsubscribe();
  }
 
  reloadTopFeed(all: boolean = false) {

src/app/modules/report/banned/banned.component.html

+<div class="m-page m-page--wrapped">
+ <div class="m-page__main">
+ <h2>Account Banned</h2>
+ <p>Your account has been banned for {{ reason }}.</p>
+ </div>
+</div>

src/app/modules/report/banned/banned.component.scss

+m-reports__banned {
+ h2 {
+ font-weight: 600;
+ }
+}

src/app/modules/report/banned/banned.component.ts

+import { 
+ Component,
+ ChangeDetectionStrategy,
+ ChangeDetectorRef,
+ ViewChild,
+ ElementRef, 
+} from '@angular/core';
+import { Router } from '@angular/router';
+
+import { Client } from '../../../common/api/client.service';
+import { MindsTitle } from '../../../services/ux/title';
+import { REASONS } from '../../../services/list-options';
+import { JurySessionService } from '../juryduty/session/session.service';
+
+@Component({
+ selector: 'm-reports__banned',
+ templateUrl: 'banned.component.html',
+ changeDetection: ChangeDetectionStrategy.OnPush
+})
+
+export class BannedComponent {
+
+ minds = window.Minds;
+
+ constructor(
+ private sessionService: JurySessionService,
+ ) { } 
+
+ get reason() {
+ const parts = this.minds.user.ban_reason.split('.');
+ const isStrike = parseInt(parts[0]) === 14;
+ const reasonCode = isStrike ? parseInt(parts[1]) : parseInt(parts[0]);
+ const subReasonCode = isStrike ? parseInt(parts[2] || 0) : parseInt(parts[1] || 0);
+
+ let friendlyString = '';
+
+ if (isStrike) {
+ friendlyString = "exceeding 3 strikes for ";
+ }
+
+ return friendlyString + this.sessionService.getReasonString({ reason_code: reasonCode, sub_reason_code: subReasonCode });
+ }
+
+}

src/app/modules/report/banned/banned.service.ts

+import { Inject, Injectable } from '@angular/core';
+import { NavigationStart, Router } from '@angular/router';
+import { Session } from '../../../services/session';
+
+@Injectable()
+export class BannedService {
+
+ constructor(private router: Router, private session: Session) {
+ this.router.events.subscribe((navigationState) => {
+ if (navigationState instanceof NavigationStart) {
+ if (this.session.getLoggedInUser().banned === 'yes'
+ && navigationState.url != '/moderation/banned') {
+ this.router.navigate(['/moderation/banned']);
+ }
+ }
+ });
+ }
+
+}

src/app/modules/report/creator/creator.component.scss

@@ -15,7 +15,7 @@
  display: inline-flex;
  /* width: 100%; */
  @include m-theme() {
- border-bottom: 1px solid themed($m-grey-100);
+ border: 1px solid themed($m-grey-100);
  }
  border-radius: 24px;
  font-weight: 600;
@@ -91,17 +91,16 @@
  font-size: 14px;
  letter-spacing: 2.33px;
  appearance: none;
- padding: 8px 32px;
+ //padding: 8px 32px;
  background: none;
- border-radius: 0;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  text-transform: uppercase;
  cursor: pointer;
  @include m-theme(){
- border: 1px solid themed($m-grey-700);
- color: themed($m-grey-700);
+ // border: 1px solid themed($m-grey-700);
+ // color: themed($m-grey-700);
  }
 
  &[disabled] {

src/app/modules/report/juryduty/session/content.component.scss

@@ -26,4 +26,8 @@
  display: inline;
  padding-left: 8px;
  }
-}
\ No newline at end of file
+}
+
+.m-juryDutySessionContent__options .m-btn {
+ margin: 16px;
+}

src/app/modules/report/juryduty/session/content.component.ts

@@ -22,22 +22,7 @@ export class JuryDutySessionContentComponent {
  }
 
  getReasonString(report) {
- let friendlyString = 'removed';
- 
- switch (report.reason_code) {
- case 1:
- if (report.sub_reason_code) {
- friendlyString = REASONS[0].reasons[report.sub_reason_code-1].label;
- break;
- }
- friendlyString = 'being illegal';
- break;
- case 2:
- friendlyString = REASONS[1].reasons[report.sub_reason_code-1].label;
- break;
- }
-
- return friendlyString;
+ return this.sessionService.getReasonString(report);
  }
 
  getAction(report) {

src/app/modules/report/juryduty/session/session.service.ts

@@ -30,18 +30,16 @@ export class JurySessionService {
  }
 
  getReasonString(report) {
- let friendlyString = 'removed';
- 
- switch (report.reason_code) {
- case 1: 
- friendlyString = 'being illegal (todo)';
- break;
- case 2:
- friendlyString = REASONS[1].reasons[report.sub_reason_code-1].label;
- break;
- }
-
- return friendlyString;
+ return REASONS.filter((item) => {
+ if (item.hasMore && item.reasons) {
+ return item.reasons[report.sub_reason_code].value === report.sub_reason_code;
+ }
+ return item.value === report.reason_code;
+ })
+ .map((item) => {
+ return item.label;
+ })
+ .join(', ');
  }
 
  getAction(report) {
@@ -56,4 +54,4 @@ export class JurySessionService {
  return friendlyString;
  }
 
-}
\ No newline at end of file
+}

src/app/modules/report/marketing/marketing.component.html

@@ -21,6 +21,29 @@
  </div>
  </div>
  </div>
+ 
+ <div class="m-marketing__contents m-reportMarketing__section">
+ <h4>How it works</h4>
+ <ul class="m-reportMarketing__list">
+ <li>
+ <p>Users report content or channels that may violate the Minds Terms of Service.</p>
+ <ul class="m-reportMarketingList__sublist">
+ <li *ngFor="let reason of reasons">
+ {{ reason.label }}
+ </li>
+ </ul>
+ </li>
+ <li>
+ <p>Reports are reviewed by Minds admins (eventually this step could be done by a Minds jury).</p>
+ </li>
+ <li>
+ <p>If an action is taken, the user in violation is properly notified and provided with a chance to appeal the decision.</p>
+ </li>
+ <li>
+ <p>Appeals are reviewed by a Minds jury of 12 unique users. Over 75% of the jury must approve the appeal to reverse a decision.</p>
+ </li>
+ </ul>
+ </div>
 
  <div class="m-marketing__contents m-reportMarketing__stats">
  <h4>Last 30 days</h4>

src/app/modules/report/marketing/marketing.component.scss

@@ -28,7 +28,7 @@
  }
 }
 
-.m-reportMarketing__stats {
+.m-reportMarketing__stats, .m-reportMarketing__section {
 
  padding: 32px !important;
 
@@ -42,8 +42,15 @@
  color: #666;
  }
 
+ .m-layout__row {
+ flex-wrap: wrap;
+ }
+
  .m-layout__cell {
  text-align: center;
+ @media screen and (max-width: 900px) {
+ padding: 32px;
+ }
  }
 
  b {
@@ -64,3 +71,41 @@
  }
 
 }
+
+.m-reportMarketing__list {
+ list-style: decimal;
+ font-size: 24px;
+ font-weight: 800;
+ color: #aaa;
+
+ li {
+ padding: 16px;
+
+ p {
+ font-size: 24px;
+ color: #555;
+ font-weight: 500;
+ }
+ }
+
+}
+
+.m-reportMarketingList__sublist {
+ display: inline-flex;
+ flex-wrap: wrap;
+ max-width: 740px;
+
+ li {
+ width: 50%;
+ color: #888;
+ font-weight: 400;
+ font-size: 16px;
+ line-height: 24px;
+ cursor: default;
+ padding: 0;
+
+ @media screen and (max-width: 890px) {
+ width: 100%;
+ }
+ }
+}

src/app/modules/report/marketing/marketing.component.ts

@@ -9,6 +9,8 @@ import { Router } from '@angular/router';
 
 import { Client } from '../../../common/api/client.service';
 import { MindsTitle } from '../../../services/ux/title';
+import { REASONS as REASONS_LIST } from '../../../services/list-options';
+
 
 @Component({
  selector: 'm-reports__marketing',
@@ -26,6 +28,7 @@ export class ReportsMarketingComponent {
  appealedPct: 0,
  upheldPct: 0,
  };
+ reasons = REASONS_LIST;
 
  constructor(
  private client: Client,

src/app/modules/report/report.module.ts

@@ -15,6 +15,8 @@ import { JuryDutySessionListComponent } from './juryduty/session/list.component'
 import { JurySessionService } from './juryduty/session/session.service';
 import { JuryDutySessionContentComponent } from './juryduty/session/content.component';
 import { StrikesComponent } from './strikes/strikes.component';
+import { BannedService } from './banned/banned.service';
+import { BannedComponent } from './banned/banned.component';
 
 @NgModule({
  imports: [
@@ -29,6 +31,7 @@ import { StrikesComponent } from './strikes/strikes.component';
  //{ path: 'moderation/juryduty', redirectTo: '/moderation/juryduty/appeal' },
  { path: 'moderation/juryduty/:jury', component: JuryDutySessionComponent, },
  { path: 'settings/reported-content/strikes', component: StrikesComponent, },
+ { path: 'moderation/banned', component: BannedComponent },
  ]),
  TokenOnboardingModule,
  ],
@@ -40,6 +43,7 @@ import { StrikesComponent } from './strikes/strikes.component';
  JuryDutySessionListComponent,
  JuryDutySessionContentComponent,
  StrikesComponent,
+ BannedComponent,
  ],
  exports: [
  ReportConsoleComponent
@@ -49,9 +53,11 @@ import { StrikesComponent } from './strikes/strikes.component';
  ReportsMarketingComponent,
  JuryDutySessionComponent,
  StrikesComponent,
+ BannedComponent,
  ],
  providers: [
  JurySessionService,
+ BannedService,
  ]
 })
 

src/app/services/list-options.ts

@@ -34,6 +34,8 @@ export const REASONS : Array<any> = [
  { value: 2, label: 'Paedophilia' },
  { value: 3, label: 'Extortion' },
  { value: 4, label: 'Fraud' },
+ { value: 5, label: 'Revenge Porn' },
+ { value: 6, label: 'Sex trafficking' }, 
  ],
  },
  { 
@@ -45,7 +47,7 @@ export const REASONS : Array<any> = [
  { value: 2, label: 'Pornography' },
  { value: 3, label: 'Profanity' },
  { value: 4, label: 'Violance and Gore' },
- { value: 5, label: 'Race and Religion' },
+ { value: 5, label: 'Race, Religion, Gender' },
  ],
  },
  { 
@@ -55,7 +57,7 @@ export const REASONS : Array<any> = [
  },
  { 
  value: 4,
- label: 'Threatens, harasses or bullies',
+ label: 'Harassment',
  hasMore: false,
  },
  { 
@@ -88,10 +90,20 @@ export const REASONS : Array<any> = [
  label: 'Malware',
  hasMore: false,
  },
- { value: 11,
- label: 'Another reason',
- hasMore: true,
- }, 
+ {
+ value: 15,
+ label: 'Trademark infringement',
+ hasMore: false,
+ },
+ {
+ value: 16,
+ label: 'Token manipulation',
+ hasMore: false,
+ },
+ //{ value: 11,
+ // label: 'Another reason',
+ // hasMore: true,
+ //}, 
 ];
 
 export const READABLE_REASONS : Array<any> = [
@@ -102,11 +114,11 @@ export const READABLE_REASONS : Array<any> = [
  { value: 2, label: 'Ponography' },
  { value: 3, label: 'Profanity' },
  { value: 4, label: 'Violance and Gore' },
- { value: 5, label: 'Race and Religion' },
+ { value: 5, label: 'Race, Religion, Gender, etc' },
  ]
  },
  { value: 3, label: 'Encourages or incites violence' },
- { value: 4, label: 'Threatens, harasses, bullies or encourages others to do so' },
+ { value: 4, label: 'Harassment' },
  { value: 5, label: 'contains personal and confidential info' },
  { value: 6, label: 'Maliciously targets users (@name, links, images or videos)' },
  { value: 7, label: 'Impersonates someone in a misleading or deceptive manner' },
@@ -114,6 +126,9 @@ export const READABLE_REASONS : Array<any> = [
  { value: 10, label: 'is a copyright infringement' },
  { value: 11, label: 'Another reason' },
  { value: 12, label: 'Incorrect use of hashtags' },
+ { value: 13, label: 'Malware' },
+ { value: 15, label: 'Trademark infringement' },
+ { value: 16, label: 'Token manipulation' },
 ];
 
 export const REPORT_ACTIONS = {