Page MenuHomePhabricator
Differential D238 Diff 845 src/app/profile/profile.component.ts

Changeset View

Standalone View

View Options

src/app/profile/profile.component.ts

import { Component, OnInit, OnDestroy, ViewChild, ChangeDetectorRef } from '@angular/core'; import { Component, OnInit, OnDestroy, ChangeDetectorRef } from '@angular/core';
import { MatDialog, MatDialogRef, MatSnackBar } from '@angular/material'; import { FormControl, FormGroup } from '@angular/forms';
import { MatSnackBar } from '@angular/material';
import { Router, ActivatedRoute } from '@angular/router'; import { Router, ActivatedRoute } from '@angular/router';
import { Subject } from 'rxjs/Subject'; import { Subject } from 'rxjs/Subject';
import { AvatarDialogComponent } from '../_dialogs/avatar.dialog.component';
import { BioDialogComponent } from '../_dialogs/bio.dialog.component';
import { EmailDialogComponent } from '../_dialogs/email.dialog.component';
import { PasswordDialogComponent } from '../_dialogs/password.dialog.component';
import { Account } from '../_models/account'; import { Account } from '../_models/account';
import { Area } from '../_models/area';
import { Author } from '../_models/author'; import { Author } from '../_models/author';
import { Ban } from '../_models/ban'; import { Ban } from '../_models/ban';
import { Choice } from '../_models/choice'; import { Choice } from '../_models/choice';
import * as C from '../_models/constants';
import { Post } from '../_models/post';
import { SuperBan } from '../_models/superBan'; import { SuperBan } from '../_models/superBan';
import { NavBarService } from '../_services/navBar.service';
import { AuthenticationService } from '../_services/authentication.service'; import { AuthenticationService } from '../_services/authentication.service';
import { PostService } from '../_services/post.service';
import { ProfileService } from '../_services/profile.service'; import { ProfileService } from '../_services/profile.service';
import { ReasonService } from '../_services/reason.service'; import { ReasonService } from '../_services/reason.service';
import { RouteService } from '../_services/route.service'; import { RouteService } from '../_services/route.service';
declare const Compressor: any;
@Component({ @Component({
templateUrl: 'profile.component.html' templateUrl: 'profile.component.html',
styleUrls: ['./profile.component.scss']
}) })
export class ProfileComponent implements OnInit, OnDestroy { export class ProfileComponent implements OnInit, OnDestroy {
account: Account; account: Account;
author: Author; author: Author;
backupPosts: { [area: string]: Post[]; } = {};
bans: Ban[] = [];
bioForm: FormGroup;
choices: Choice[]; choices: Choice[];
componentDestroyed: Subject<boolean> = new Subject(); componentDestroyed: Subject<boolean> = new Subject();
currentArea: Area;
data: any; data: any;
editBio = false;
emailForm: FormGroup;
errors: any;
imageArray: { [area: string]: string[]; } = {};
index = 1; index = 1;
limit = 2; limit = 10;
loading = true; loading = true;
model: any = {}; offset = 10;
offset = 2; passwordForm: FormGroup;
url: string;
self: boolean; self: boolean;
bans: Ban[] = []; superPosts: { [area: string]: Post[]; } = {};
totalCount = 0; totalCount = 0;
url: string;
constructor( constructor(
private cdRef: ChangeDetectorRef, private cdRef: ChangeDetectorRef,
private dialog: MatDialog,
private route: ActivatedRoute, private route: ActivatedRoute,
private router: Router, private router: Router,
public snackBar: MatSnackBar, public snackBar: MatSnackBar,
private authenticationService: AuthenticationService, private authenticationService: AuthenticationService,
private navBarService: NavBarService,
private postService: PostService,
private profileService: ProfileService, private profileService: ProfileService,
private reasonService: ReasonService, private reasonService: ReasonService,
private routeService: RouteService private routeService: RouteService
) { } ) { }
private imageInPosts(posts: Post[], area: string) {
this.imageArray[area] = [];
for (let i = 0; i <= posts.length - 1; i++) {
// Find image markdown data in post.text - Guarenteed by Regex
const indexOfStart = posts[i].text.search(C.WF_IMAGE_REGEX);
if (indexOfStart !== -1) {
// Start at index and parse until we find a closing ')' char
for (let j = indexOfStart; j <= posts[i].text.length; j++) {
if (posts[i].text.charAt(j) === ']') {
// Add data to image array in specific area
this.imageArray[area][i] = posts[i].text.slice(indexOfStart, j + 1);
}
}
}
}
this.loading = false;
}
private removeMarkdown(input: string) {
input = input
// Remove horizontal rules (stripListHeaders conflict with this rule, which is why it has been moved to the top)
.replace(/^(-\s*?|\*\s*?|_\s*?){3,}\s*$/gm, '[Horizontal-Rule]')
// Remove horizontal rules
.replace(/^(-\s*?|\*\s*?|_\s*?){3,}\s*$/gm, '')
// Header
.replace(/\n={2,}/g, '\n')
// Strikethrough
.replace(/~~/g, '')
// Fenced codeblocks
.replace(/`{3}.*\n/g, '')
// Remove HTML tags
.replace(/<[^>]*>/g, '')
// Remove setext-style headers
.replace(/^[=\-]{2,}\s*$/g, '')
// Remove footnotes?
.replace(/\[\^.+?\](\: .*?$)?/g, '')
.replace(/\s{0,2}\[.*?\]: .*?$/g, '')
// Remove images
.replace(C.WF_IMAGE_REGEX, '')
// Remove wildfyre images
.replace(/(\[img: \d\])/gm, '')
// Remove inline links
.replace(/\[(.*?)\][\[\(].*?[\]\)]/g, '$1')
// Remove blockquotes
.replace(/^\s{0,3}>\s?/g, '')
// Remove reference-style links?
.replace(/^\s{1,2}\[(.*?)\]: (\S+)( ".*?")?\s*$/g, '')
// Remove atx-style headers
.replace(/^(\n)?\s{0,}#{1,6}\s+| {0,}(\n)?\s{0,}#{0,} {0,}(\n)?\s{0,}$/gm, '$1$2$3')
// Remove emphasis (repeat the line to remove double emphasis)
.replace(/([\*_]{1,3})(\S.*?\S{0,1})\1/g, '$2')
.replace(/([\*_]{1,3})(\S.*?\S{0,1})\1/g, '$2')
// Remove code blocks
.replace(/(`{3,})(.*?)\1/gm, '$2')
// Remove inline code
.replace(/`(.+?)`/g, '$1')
// Replace two or more newlines with exactly two? Not entirely sure this belongs here...
.replace(/\n{2,}/g, '\n\n');
return input;
}
ngOnInit() { ngOnInit() {
this.loading = true;
this.emailForm = new FormGroup({
'email': new FormControl(''),
});
this.bioForm = new FormGroup({
'bio': new FormControl(''),
});
this.passwordForm = new FormGroup({
'oldPassword': new FormControl(''),
'password': new FormControl(''),
'password2': new FormControl(''),
});
this.reasonService.getFlagReasons() this.reasonService.getFlagReasons()
.takeUntil(this.componentDestroyed) .takeUntil(this.componentDestroyed)
.subscribe((choices) => { .subscribe((choices) => {
this.choices = choices; this.choices = choices;
}); });
this.routeService.resetRoutes(); this.routeService.resetRoutes();
this.navBarService.currentArea
.takeUntil(this.componentDestroyed)
.subscribe((currentArea: Area) => {
if (currentArea.name !== '') {
this.currentArea = currentArea;
if (!this.superPosts[currentArea.name]) {
this.superPosts[currentArea.name] = [];
}
if (!this.backupPosts[currentArea.name]) {
this.backupPosts[currentArea.name] = [];
}
const posts: Post[] = [];
this.postService.getOwnPosts(currentArea.name, this.limit, 0)
.takeUntil(this.componentDestroyed)
.subscribe(superPost => {
superPost.results.forEach((obj: any) => {
posts.push(Post.parse(obj));
});
// Removes binding to original 'superPost' variable
this.superPosts[currentArea.name] = JSON.parse(JSON.stringify(posts));
this.backupPosts[currentArea.name] = posts;
this.totalCount = superPost.count;
this.imageInPosts(this.superPosts[currentArea.name], currentArea.name);
for (let i = 0; i <= this.backupPosts[currentArea.name].length - 1; i++) {
this.backupPosts[currentArea.name][i].text = this.removeMarkdown(this.backupPosts[currentArea.name][i].text);
}
this.cdRef.detectChanges();
this.loading = false;
});
}
});
this.route.params this.route.params
.takeUntil(this.componentDestroyed) .takeUntil(this.componentDestroyed)
.subscribe((parms) => { .subscribe((parms) => {
if (parms['id']) { if (parms['id']) {
this.profileService.getUser(parms['id']) this.profileService.getUser(parms['id'])
.takeUntil(this.componentDestroyed) .takeUntil(this.componentDestroyed)
.subscribe((user: Author) => { .subscribe((user: Author) => {
this.self = false; this.self = false;
this.author = user; this.author = user;
if (this.author.bio === '') {
this.author.bio = '*No Bio*';
}
this.loading = false;
this.bioForm.controls.bio.setValue(this.author.bio);
}); });
} else { } else {
this.self = true;
this.profileService.getSelf() this.profileService.getSelf()
.takeUntil(this.componentDestroyed) .takeUntil(this.componentDestroyed)
.subscribe((self: Author) => { .subscribe((self: Author) => {
this.author = self; this.author = self;
this.model.bio = this.author.bio; if (this.author.bio === '') {
this.author.bio = '*No Bio*';
}
this.loading = false;
this.bioForm.controls.bio.setValue(this.author.bio);
}); });
this.profileService.getAccount() this.profileService.getAccount()
.takeUntil(this.componentDestroyed) .takeUntil(this.componentDestroyed)
.subscribe((self: Account) => { .subscribe((self: Account) => {
this.account = self; this.account = self;
this.model.email = this.account.email; if (this.account.email === '') {
this.account.email = '*Please verify your email*';
}
this.self = true;
this.emailForm.controls.email.setValue(this.account.email);
}); });
this.profileService.getBans(this.limit, (this.index * this.limit) - this.limit) this.profileService.getBans(this.limit, (this.index * this.limit) - this.limit)
.takeUntil(this.componentDestroyed) .takeUntil(this.componentDestroyed)
.subscribe((superBan: SuperBan) => { .subscribe((superBan: SuperBan) => {
superBan.results.forEach((obj: any) => { superBan.results.forEach((obj: any) => {
this.bans.push(Ban.parse(obj)); this.bans.push(Ban.parse(obj));
}); });
this.totalCount = superBan.count; this.totalCount = superBan.count;
this.cdRef.detectChanges(); this.cdRef.detectChanges();
}); });
} }
}); });
this.profileService.getAccount()
.takeUntil(this.componentDestroyed)
.subscribe((self: Account) => {
this.account = self;
this.model.email = this.account.email;
this.self = true;
});
this.loading = false;
} }
ngOnDestroy() { ngOnDestroy() {
this.cdRef.detach(); this.cdRef.detach();
this.componentDestroyed.next(true); this.componentDestroyed.next(true);
this.componentDestroyed.complete(); this.componentDestroyed.complete();
} }
changePassword() {
this.loading = true;
if (this.passwordForm.valid) {
this.authenticationService.login(this.account.username, this.passwordForm.controls.oldPassword.value)
.takeUntil(this.componentDestroyed)
.subscribe(result => {
if (!result.getError()) {
if (this.passwordForm.controls.password.value === this.passwordForm.controls.password2.value) {
this.profileService.setPassword(this.passwordForm.controls.password.value)
.takeUntil(this.componentDestroyed)
.subscribe(result2 => {
if (!result2.getError()) {
this.authenticationService.login(this.account.username, this.passwordForm.controls.password.value)
.takeUntil(this.componentDestroyed)
.subscribe(result3 => {
if (!result3.getError()) {
this.loading = false;
this.passwordForm.controls.oldPassword.setValue('')
this.passwordForm.controls.password.setValue('')
this.passwordForm.controls.password2.setValue('')
this.snackBar.open('Password changed successfully', 'Close', {
duration: 3000
});
} else {
this.loading = false;
this.snackBar.open('Error could not set token', 'Close', {
duration: 3000
});
}
});
} else {
this.errors = result2.getError();
this.loading = false;
this.snackBar.open('You did not follow the requirements', 'Close', {
duration: 3000
});
}
});
} else {
this.loading = false;
this.snackBar.open('Your new passwords do not match', 'Close', {
duration: 3000
});
}
} else {
this.errors = result.getError();
this.loading = false;
this.snackBar.open('This is not your current password', 'Close', {
duration: 3000
});
}
});
} else {
this.loading = false;
this.snackBar.open('Your information is incorrect', 'Close', {
duration: 3000
});
}
}
getBans(page: number) { getBans(page: number) {
this.loading = true; this.loading = true;
this.bans = []; this.bans = [];
this.profileService.getBans(this.limit, (this.offset * page) - this.limit) this.profileService.getBans(this.limit, (this.offset * page) - this.limit)
.takeUntil(this.componentDestroyed) .takeUntil(this.componentDestroyed)
.subscribe(superBan => { .subscribe(superBan => {
superBan.results.forEach((obj: any) => { superBan.results.forEach((obj: any) => {
this.bans.push(Ban.parse(obj)); this.bans.push(Ban.parse(obj));
}); });
this.index = page; this.index = page;
this.totalCount = superBan.count; this.totalCount = superBan.count;
this.cdRef.detectChanges(); this.cdRef.detectChanges();
this.loading = false; this.loading = false;
}); });
} }
getPosts(page: any) {
this.loading = true;
const posts: Post[] = [];
this.postService.getOwnPosts(this.currentArea.name, this.limit, (this.offset * page) - this.limit)
.takeUntil(this.componentDestroyed)
.subscribe(superPost => {
superPost.results.forEach((obj: any) => {
posts.push(Post.parse(obj));
});
// Removes binding to original 'superPost' variable
this.superPosts[this.currentArea.name] = JSON.parse(JSON.stringify(posts));
this.backupPosts[this.currentArea.name] = posts;
this.imageInPosts(this.superPosts[this.currentArea.name], this.currentArea.name);
for (let i = 0; i <= this.backupPosts[this.currentArea.name].length - 1; i++) {
this.backupPosts[this.currentArea.name][i].text = this.removeMarkdown(this.backupPosts[this.currentArea.name][i].text);
}
this.index = page;
this.totalCount = superPost.count;
this.cdRef.detectChanges();
this.loading = false;
});
}
goto(postID: string) {
this.routeService.addNextRouteByIndex(this.index);
this.router.navigateByUrl('/areas/' + this.currentArea.name + '/' + postID);
}
getReason(number: number): string { getReason(number: number): string {
if (number !== null) { if (number !== null) {
return this.choices[number].value; return this.choices[number].value;
} else { } else {
return this.choices[3].value; return this.choices[3].value;
} }
} }
openBioDialog() { hideViews() {
const dialogRef = this.dialog.open(BioDialogComponent); document.getElementById('image').style.display = 'none';
dialogRef.componentInstance.model.bio = this.author.bio; document.getElementById('profile').style.display = 'none';
dialogRef.afterClosed() document.getElementById('password').style.display = 'none';
.takeUntil(this.componentDestroyed) this.errors = null;
.subscribe(result => { this.loading = false;
if (result.bool) { }
this.profileService.setBio(this.author, result.bio)
.takeUntil(this.componentDestroyed) info(event: any) {
.subscribe(); event.stopPropagation()
const snackBarRef = this.snackBar.open('Bio changed successfully', 'Close', { this.snackBar.open('Touch the item you want to edit', 'Close', {
duration: 3000 duration: 3000
}); });
} }
infoNo() {
this.snackBar.open('You can not edit this', 'Close', {
duration: 3000
}); });
} }
openEmailDialog() { setBio() {
const dialogRef = this.dialog.open(EmailDialogComponent); this.loading = true;
dialogRef.componentInstance.model.email = this.account.email;
dialogRef.afterClosed() if (this.bioForm.valid) {
this.profileService.setBio(this.author, this.bioForm.controls.bio.value)
.takeUntil(this.componentDestroyed) .takeUntil(this.componentDestroyed)
.subscribe(result => { .subscribe(result => {
if (result.bool) { if (!result.getError()) {
this.profileService.setEmail(result.email) this.author = result;
.takeUntil(this.componentDestroyed) this.snackBar.open('Bio changed successfully', 'Close', {
.subscribe();
const snackBarRef = this.snackBar
.open('We just sent you a verification email, you must verify your email for it to be set', 'Close', {
duration: 3000 duration: 3000
}); });
this.toggleBio();
this.loading = false;
} else {
this.errors = result.getError();
this.loading = false;
} }
}); });
} else {
this.loading = false;
this.snackBar.open('Your information is incorrect', 'Close', {
duration: 3000
});
}
} }
openPasswordDialog() { setEmail() {
const dialogRef = this.dialog.open(PasswordDialogComponent); this.loading = true;
dialogRef.componentInstance.account = this.account; if (this.bioForm.valid) {
dialogRef.componentInstance.author = this.author; this.profileService.setEmail(this.emailForm.controls.email.value)
dialogRef.afterClosed()
.takeUntil(this.componentDestroyed) .takeUntil(this.componentDestroyed)
.subscribe(result => { .subscribe(result => {
if (result.bool) { if (!result.getError()) {
const snackBarRef = this.snackBar.open('Password changed successfully', 'Close', { this.account = result;
this.snackBar.open('We just sent you a verification email, you must verify your email for it to be set', 'Close', {
duration: 3000 duration: 3000
}); });
this.undoEmail()
this.loading = false;
} else {
this.errors = result.getError();
this.loading = false;
} }
}); });
} else {
this.loading = false;
this.snackBar.open('Your information is incorrect', 'Close', {
duration: 3000
});
}
} }
openPictureDialog() { uploadImage() {
const dialogRef = this.dialog.open(AvatarDialogComponent); const self = this;
dialogRef.componentInstance.author = this.author; const file = (<HTMLInputElement>document.getElementById('image-upload')).files[0];
dialogRef.afterClosed() const file2: any = new Compressor(file, {
.takeUntil(this.componentDestroyed) quality: 0.8,
.subscribe(result => { maxWidth: 500,
if (result.bool) { maxHeight: 500,
if (result.profilePicture) { convertSize: 500000,
this.profileService.setProfilePicture(result.profilePicture) success(result: Blob) {
self.uploadImg(result)
}
});
}
uploadImg(r: Blob) {
this.profileService.setProfilePicture(r)
.takeUntil(this.componentDestroyed) .takeUntil(this.componentDestroyed)
.subscribe(result2 => { .subscribe((result2: Author) => {
if (!result2.getError()) { if (!result2.getError()) {
this.author.avatar = result2.avatar; this.author.avatar = result2.avatar;
} else { } else {
const snackBarRef = this.snackBar.open('Your image file must be below 512KiB in size', 'Close', { this.errors = result2.getError();
duration: 3000 this.loading = false;
});
} }
}); });
} else {
const snackBarRef = this.snackBar.open('You did not select a valid image file', 'Close', {
duration: 3000
});
} }
switchView(s: string, event?: any) {
if (event) {
event.stopPropagation();
}
if (s === 'profile') {
this.hideViews();
document.getElementById('profile').style.display = 'flex';
} else if (s === 'image') {
this.hideViews();
document.getElementById('image').style.display = 'flex';
} else if (s === 'password') {
this.hideViews();
document.getElementById('password').style.display = 'flex';
} }
}); }
toggleBio() {
this.editBio = !this.editBio;
if (!this.editBio) {
this.bioForm.controls.bio.setValue(this.author.bio);
}
}
undoEmail() {
this.emailForm.controls.email.setValue(this.account.email);
} }
viewProfile() { viewProfile() {
this.routeService.addNextRoute(this.router.url); this.routeService.addNextRoute(this.router.url);
this.router.navigateByUrl('/user/' + this.author.user); this.router.navigateByUrl('/user/' + this.author.user);
} }
/* Removed as of D114
searchInput() {
if (this.areaService.currentAreaName === 'fun') {
this.searchArray = [];
if (this.model.postText === '') {
this.searching = false;
this.cdRef.detectChanges();
} else {
this.searching = true;
for (let i = 0; i <= this.funPosts.length - 1; i++) {
if (this.funPosts[i].text.toLowerCase().includes(this.model.postText.toLowerCase())) {
this.searchArray.push(this.backupFunPosts[i]);
}
}
this.cdRef.detectChanges();
}
} else {
this.searchArray = [];
if (this.model.postText === '') {
this.searching = false;
this.cdRef.detectChanges();
} else {
this.searching = true;
for (let i = 0; i <= this.infoPosts.length - 1; i++) {
if (this.infoPosts[i].text.toLowerCase().includes(this.model.postText.toLowerCase())) {
this.searchArray.push(this.backupInfoPosts[i]);
}
}
this.cdRef.detectChanges();
}
}
}
*/
} }
Copyright WildFyre · Privacy Policy · Terms and Conditions