(feat): move appeal to own component and display on banned splash

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

@@ -2,5 +2,14 @@
  <div class="m-page__main">
  <h2>Account Banned</h2>
  <p>Your account has been banned for {{ reason }}.</p>
+
+ <ng-container *ngIf="appeals">
+ <div *ngFor="let appeal of appeals" class="m-banned__appeals">
+ <m-moderation__appeal
+ [appeal]="appeal"
+ >
+ </m-moderation__appeal>
+ </div>
+ </ng-container>
  </div>
 </div>

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

@@ -3,3 +3,7 @@ m-reports__banned {
  font-weight: 600;
  }
 }
+
+.m-banned__appeals {
+ max-width: 720px;
+}

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

@@ -21,11 +21,27 @@ import { JurySessionService } from '../juryduty/session/session.service';
 export class BannedComponent {
 
  minds = window.Minds;
+ appeals = [];
 
  constructor(
+ private client: Client,
  private sessionService: JurySessionService,
+ private cd: ChangeDetectorRef,
  ) { } 
 
+ ngOnInit() {
+ this.loadAppeal();
+ }
+
+ async loadAppeal() {
+ try {
+ let response: any = await this.client.get(`api/v2/moderation/appeals/review`);
+ this.appeals = response.appeals;
+ this.detectChanges();
+ } catch (e) {
+ }
+ }
+
  get reason() {
  const parts = this.minds.user.ban_reason.split('.');
  const isStrike = parseInt(parts[0]) === 14;
@@ -41,4 +57,9 @@ export class BannedComponent {
  return friendlyString + this.sessionService.getReasonString({ reason_code: reasonCode, sub_reason_code: subReasonCode });
  }
 
+ detectChanges() {
+ this.cd.markForCheck();
+ this.cd.detectChanges();
+ }
+
 }

src/app/modules/report/console/appeal.component.html

+<div class="m-moderation__appeal m-border">
+ <div class="m-moderationAppeal__header mdl-color--blue mdl-color-text--white">
+ <b>{{ appeal.time_created * 1000 | date: 'short' }}</b>
+ <p>
+ <span>Should be</span>
+ <b> {{ service.getAction(appeal.report) }} </b>
+ <span>for</span>
+ <b> {{ service.getReasonString(appeal.report) }} </b>
+ </p>
+ </div>
+
+ <div class="m-moderationAppeal__appeal">
+ <div class="m-moderationAppeal__composer" *ngIf="!appeal.note">
+ <textarea
+ #appealContent
+ placeholder="Please type in this box if you wish to appeal this decision, explaining your reasons"
+ i18n="@@REPORT__CONSOLE__APPEAL_COMPOSER_PLACEHOLDER"
+ ></textarea>
+
+ <button class="m-moderationAppeal__button"
+ [disabled]="appeal.inProgress"
+ (click)="sendAppeal(appeal, appealContent.value, i)"
+ i18n="@@REPORT__CONSOLE__APPEAL_ACTION"
+ >
+ Appeal
+ </button>
+ </div>
+ <div class="m-moderationAppeal__appealNote" *ngIf="appeal.note">
+ <p>{{appeal.appeal_note}}</p>
+ </div>
+ </div>
+
+ <minds-card *ngIf="appeal.report.entity && appeal.report.entity.type != 'comment'"
+ class="m-report-console--card"
+ [object]="appeal.report.entity"
+ hostClass="mdl-card"
+ ></minds-card>
+
+ <div *ngIf="appeal.entityObj && appeal.entityObj.type == 'comment'" class="m-comment-wrapper">
+ <div class="m-moderationAppeal__commentNote">
+ <a target="_blank"
+ [routerLink]="['/newsfeed', appeal.entityObj.parent_guid]"
+ i18n="@@M__COMMON__VIEW_PARENT_COMMENT_THREAD"
+ >
+ View parent and its comment thread
+ </a>
+ </div>
+ <minds-card-comment
+ [object]="appeal.entityObj"
+ class="mdl-card"
+ >
+ </minds-card-comment>
+ </div>
+
+ <div *ngIf="!appeal.report.entity" class="m-comment-wrapper">
+ <div class="m-moderationAppeal__commentNote" i18n="@@M__COMMON__POST_NOT_FOUND">
+ Post not found
+ </div>
+ </div>
+</div>

src/app/modules/report/console/appeal.component.scss

+.m-moderation__appeal {
+ margin-bottom: 8px;
+ @include m-theme(){
+ background-color: themed($m-white);
+ }
+
+ .m-moderationAppeal__header {
+ margin: 16px;
+ padding: 16px;
+ font-family: 'Roboto';
+
+ > b {
+ font-size: 13px;
+ }
+
+ p {
+ margin-bottom: 0;
+ font-size: 13px;
+ letter-spacing: 1px;
+ font-weight: 300;
+
+ b {
+ text-transform: lowercase;
+ }
+ }
+ }
+
+ .m-moderationAppeal__meta {
+ display: flex;
+ align-items: center;
+ margin: ($minds-padding * 2) ($minds-padding * 2) 0;
+ font-family: 'Roboto', sans-serif;
+
+ .m-report-console--info {
+ flex-grow: 1;
+
+ p {
+ margin-bottom: 0;
+ font-weight: 300;
+ }
+
+ .m-moderationAppealMeta__time {
+ font-size: 12px;
+ margin-bottom: $minds-padding;
+ @include m-theme(){
+ color: themed($m-grey-300);
+ }
+ }
+
+ .m-moderationAppealMeta__appealNote {
+ margin: $minds-padding 0 0 1em;
+ padding: $minds-padding ($minds-padding * 2);
+ font-style: italic;
+ @include m-theme(){
+ border-left: 2px solid themed($m-grey-200);
+ }
+ }
+
+ .material-icons {
+ font-size: 1.25em;
+ vertical-align: text-top;
+ margin-right: 0.35em;
+ @include m-theme(){
+ color: themed($m-grey-200);
+ }
+ }
+ }
+ }
+
+ .m-comment-wrapper {
+ .m-ribbon {
+ display: none;
+ }
+
+ .m-moderationAppeal__commentNote {
+ padding: 16px;
+ text-align: center;
+ font-family: 'Roboto', sans-serif;
+ font-size: 12px;
+ font-weight: 300;
+
+ a {
+ text-decoration: none;
+ font-weight: inherit;
+ @include m-theme(){
+ color: themed($m-grey-300);
+ }
+ }
+ }
+ }
+}
+
+.m-moderationAppeal__appeal {
+ margin: $minds-padding ($minds-padding * 2) 0;
+
+ .m-moderationAppeal__composer {
+ margin-bottom: $minds-padding;
+
+ textarea {
+ display: block;
+ width: 100%;
+ resize: none;
+ height: 5em;
+ font-weight: 300;
+ font-family: 'Roboto';
+ padding: 16px;
+ font-size: 13px;
+ letter-spacing: 1px;
+ @include m-theme(){
+ border: 1px solid themed($m-grey-50);
+ }
+ }
+
+ button {
+ text-transform: uppercase;
+
+ appearance: none;
+ padding: 12px 16px;
+ font-size: 13px;
+ letter-spacing: 2.5px;
+ background: none;
+ margin: 8px 0;
+ @include m-theme(){
+ border: 1px solid themed($m-grey-100);
+ color: themed($m-grey-400);
+ }
+
+ &:hover{
+ cursor: pointer;
+ }
+ }
+ }
+
+ .m-moderationAppeal__appealNote {
+ padding: 16px;
+ @include m-theme(){
+ border: 1px solid themed($m-grey-50);
+ }
+
+ p {
+ margin: 0;
+ font-family: 'Roboto';
+ font-size: 14px;
+ letter-spacing: 1px;
+ }
+ }
+
+}

src/app/modules/report/console/appeal.component.ts

+import {
+ Component,
+ OnInit,
+ Input,
+} from '@angular/core';
+
+import { Client } from '../../../services/api/client';
+import { REASONS, REPORT_ACTIONS } from '../../../services/list-options';
+import { JurySessionService } from '../juryduty/session/session.service';
+
+@Component({
+ selector: 'm-moderation__appeal',
+ templateUrl: 'appeal.component.html'
+})
+export class ModerationAppealComponent {
+
+ @Input() appeal;
+ note: string;
+
+ constructor(
+ private client: Client,
+ public service: JurySessionService,
+ ) { }
+
+ async sendAppeal() {
+ this.appeal.inProgress = true;
+
+ try {
+ let response: any = await this.client.post(`api/v2/moderation/appeals/${this.appeal.report.urn}`, {
+ note: this.note,
+ });
+
+ this.appeal.note = this.note;
+ } catch (e) {
+ alert((e && e.message) || 'Error sending appeal');
+ }
+ }
+
+ parseAction(action: string) {
+ return typeof REPORT_ACTIONS[action] !== 'undefined' ?
+ REPORT_ACTIONS[action] :
+ action;
+ }
+
+}

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

@@ -6,57 +6,12 @@
  <a routerLink="strikes" class="mdl-tabs__tab" [ngClass]="{ 'is-active': filter == 'strikes' }" i18n="@@M__COMMON__REJECTED">Strikes</a>
 </div>
 
-<div *ngFor="let appeal of appeals; let i = index"
- class="mdl-card mdl-shadow--2dp m-report-console--item"
->
+<div *ngFor="let appeal of appeals; let i = index">
 
- <div class="m-report-console--header mdl-color--blue mdl-color-text--white">
- <b>{{ appeal.time_created * 1000 | date: 'short' }}</b>
- <p>
- <span>Should be</span>
- <b> {{ service.getAction(appeal.report) }} </b>
- <span>for</span>
- <b> {{ service.getReasonString(appeal.report) }} </b>
- </p>
- </div>
-
- <div class="m-report-console--appeal">
- <div class="m-report-console--appeal--composer" *ngIf="filter == 'review'">
- <textarea #appealContent placeholder="Please type in this box if you wish to appeal this decision, explaining your reasons" i18n="@@REPORT__CONSOLE__APPEAL_COMPOSER_PLACEHOLDER"></textarea>
-
- <button class="m-report-console--appeal--button"
- [disabled]="appeal.inProgress"
- (click)="sendAppeal(appeal, appealContent.value, i)"
- i18n="@@REPORT__CONSOLE__APPEAL_ACTION"
- >
- Appeal
- </button>
- </div>
- <div class="m-report-console--appeal-note" *ngIf="appeal.note">
- <p>{{appeal.appeal_note}}</p> 
- </div> 
- </div>
-
-
-
- <minds-card *ngIf="appeal.report.entity && appeal.report.entity.type != 'comment'"
- class="m-report-console--card"
- [object]="appeal.report.entity"
- hostClass="mdl-card"
- ></minds-card>
-
- <div *ngIf="appeal.entityObj && appeal.entityObj.type == 'comment'" class="m-comment-wrapper">
- <div class="m-report-console--comment-note">
- <a target="_blank" [routerLink]="['/newsfeed', appeal.entityObj.parent_guid]" i18n="@@M__COMMON__VIEW_PARENT_COMMENT_THREAD">View parent and its comment thread</a>
- </div>
- <minds-card-comment [object]="appeal.entityObj" class="mdl-card"></minds-card-comment>
- </div>
-
- <div *ngIf="!appeal.entityObj" class="m-comment-wrapper">
- <div class="m-report-console--comment-note" i18n="@@M__COMMON__POST_NOT_FOUND">
- Post not found
- </div>
- </div>
+ <m-moderation__appeal
+ [appeal]="appeal"
+ >
+ </m-moderation__appeal>
 
 </div>
 

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

@@ -17,6 +17,7 @@ import { JuryDutySessionContentComponent } from './juryduty/session/content.comp
 import { StrikesComponent } from './strikes/strikes.component';
 import { BannedService } from './banned/banned.service';
 import { BannedComponent } from './banned/banned.component';
+import { ModerationAppealComponent } from './console/appeal.component';
 
 @NgModule({
  imports: [
@@ -44,6 +45,7 @@ import { BannedComponent } from './banned/banned.component';
  JuryDutySessionContentComponent,
  StrikesComponent,
  BannedComponent,
+ ModerationAppealComponent,
  ],
  exports: [
  ReportConsoleComponent