Differential D238 Diff 839 src/app/profile/profile.component.html

Changeset View

Standalone View

src/app/profile/profile.component.html

		<!-- Profile Component -->
		<div id="profile" fxLayout="column" fxLayoutAlign="center center">
		<div class="profile-image">
		<img *ngIf="author?.avatar" [src]="author?.avatar" alt="Avatar of {{author?.name}}" style="object-fit: cover;" />
		<img *ngIf="!author?.avatar" src="/assets/logo.png" alt="Avatar of {{author?.name}}" style="object-fit: cover;" />
		</div>
		<div fxLayout="column" class="profile-container">
		<div fxLayout="row" fxFlexOffset="2rem" fxLayoutAlign="space-between start" (click)="switchView('image')" style="width: 100%;height: 30vh;cursor: pointer;">
		<i class="material-icons" style="font-size: 40px;">keyboard_arrow_left</i>
		<div>
		<h2 class="profile-subtitle" (click)="switchView('password', $event)">Password</h2>
		<h2 fxLayout="row" class="profile-subtitle" fxFlexOffset="1rem" (click)="info($event)">Info</h2>
		</div>
		</div>

		<div fxLayout="column" style="height: 50vh;">
		<div fxLayout="row" fxLayoutAlign="start center">
		<h1 class="profile-title" (click)="infoNo()">{{author?.name}}</h1>
		<p class="profile-title" fxFlexOffset="1rem" style="margin: 0;"><ng-container *ngIf="currentArea">{{currentArea.spread}}</ng-container> spread</p>
		</div>

		<div fxLayout="row" fxFlexOffset="0.5rem" class="profile-input" [formGroup]="emailForm">
		<input matInput placeholder="Email" class="profile-input" style="font-size: 2rem;font-weight: 300;" type="email" autocomplete="current-email" formControlName="email" required />
		</div>

		<div *ngIf="editBio" fxLayout="row" fxFlexOffset="1rem" class="profile-input" [formGroup]="bioForm">
		<textarea matInput placeholder="Bio" class="profile-input" style="font-size: 100%;height: 35vh;overflow-y: scroll;" type="text" formControlName="bio" required></textarea>
		</div>
		<div *ngIf="!editBio" fxLayout="column" fxFlexOffset="1rem" class="profile-input">
		<p [innerHTML]="author?.bio \| marked" style="height: 25vh;" (click)="toggleBio()"></p>
		</div>
		<div *ngIf="errors && errors.non_field_errors" fxLayout="column" fxFlexOffset="2rem" class="alert alert-danger">
		<div *ngFor="let err of errors.non_field_errors">
		<p>{{err}}</p>
		</div>
		</div>
		</div>

		<div *ngIf="(emailForm.controls.email && account?.email !== emailForm.controls.email.value) \|\| editBio" fxLayout="column" class="profile-button-group">
		<div *ngIf="emailForm.controls.email && account?.email !== emailForm.controls.email.value" fxLayout="row" class="profile-button" fxFlexOffset="1rem">
		<button mat-flat-button class="profile-button" style="background: #EA6C40;" [disabled]="loading \|\| editBio" (click)="setEmail()">Send Email</button>
		</div>
		<div *ngIf="emailForm.controls.email && account?.email !== emailForm.controls.email.value" fxLayout="row" class="profile-button" fxFlexOffset="1rem">
		<button mat-stroked-button class="profile-button" [disabled]="loading \|\| editBio" (click)="undoEmail()">Undo</button>
		</div>

		<div *ngIf="editBio" fxLayout="row" class="profile-button" fxFlexOffset="1rem">
		<button mat-flat-button class="profile-button" style="background: #EA6C40;" [disabled]="loading \|\| (emailForm.controls.email && account?.email !== emailForm.controls.email.value)" (click)="setBio()">Save Bio</button>
		</div>
		<div *ngIf="editBio" fxLayout="row" class="profile-button" fxFlexOffset="1rem">
		<button mat-stroked-button class="profile-button" [disabled]="loading \|\| (emailForm.controls.email && account?.email !== emailForm.controls.email.value)" (click)="toggleBio()">Undo</button>
		</div>
		</div>

		<div fxLayout="row" fxLayoutAlign="start center">
		<h1 class="profile-title" (click)="infoNo()">My Posts</h1>
		<p class="profile-title" fxFlexOffset="1rem" style="margin: 0;"><ng-container *ngIf="currentArea">{{currentArea.displayname}}</ng-container></p>
		</div>
		<div fxLayout="column" class="profile-post-group" fxFlexOffset="1rem">
		<div *ngIf="currentArea" fxLayout="row" class="profile-post-row">
		<div class="profile-post-card" [style.background]="post.active ? 'linear-gradient(0deg, #A2A2A2, #A2A2A2), linear-gradient(180deg, #A2A2A2 0%, #d3d3d3 99.99%)' : '#d3d3d3'" (click)="goto(post.id)" fxLayout="column" *ngFor="let post of backupPosts[currentArea.name] \| paginate: { id: 'server', itemsPerPage: limit, currentPage: index, totalItems: totalCount }; let i = index">
		<div fxLayout="row" fxLayoutAlign="end center" class="profile-post-row-icons">
		<i class="material-icons" style="width: 24px;zoom: 0.7;" fxFlexOffset="1rem" *ngIf="imageArray[currentArea.name][i] \|\| post.image">image</i>
		<i class="material-icons" style="width: 24px;zoom: 0.7;" fxFlexOffset="1rem" *ngIf="post.active">hourglass_full</i>
		<i class="material-icons" style="width: 24px;zoom: 0.7;" fxFlexOffset="1rem" *ngIf="!post.active">hourglass_empty</i>
		<i class="material-icons" style="width: 24px;zoom: 0.7;" fxFlexOffset="1rem" *ngIf="!post.anonym">visibility_on</i>
		<i class="material-icons" style="width: 24px;zoom: 0.7;" fxFlexOffset="1rem" *ngIf="post.anonym">visibility_off</i>
		<i class="material-icons" style="width: 24px;zoom: 0.7;" fxFlexOffset="1rem">filter_none</i>
		<h5 style="color: #333333" fxFlexOffset="0.5rem">{{post.comments.length}}</h5>
		</div>
		<p class="marked" innerHTML="{{post.text \| slice:0:200 \| marked: post}}"></p>
		<ng-container *ngIf="post.text.length > 200">...</ng-container>
		</div>
		</div>
		</div>
		<pagination-controls fxFlexOffset="1rem" *ngIf="totalCount !== 0 && !loading" (pageChange)="getPosts($event)" id="server"></pagination-controls>
		<div *ngIf="loading" fxLayoutAlign="center center" fxFlexOffset="1rem">
		<mat-progress-spinner></mat-progress-spinner>
		</div>
		</div>
		</div>

		<!-- Image Component -->
		<div id="image">
		<div fxLayout="column" class="image-container">
		<div fxLayout="row" fxFlexOffset="2rem" fxLayoutAlign="space-between start" style="width: 100%;">
		<i class="material-icons" style="font-size: 40px;" (click)="switchView('profile')">keyboard_arrow_left</i>
		</div>
		<div class="image-image">
		<img *ngIf="author?.avatar" [src]="author?.avatar" alt="Avatar of {{author?.name}}" style="border-radius: 50%;background: #d3d3d3;" />
		<img *ngIf="!author?.avatar" src="/assets/logo.png" alt="Avatar of {{author?.name}}" style="border-radius: 50%;background: #d3d3d3;" />
		</div>
		<div fxLayout="row" class="profile-button" fxFlexOffset="2rem">
		<button mat-flat-button class="profile-button" style="background: #EA6C40;" [disabled]="loading">Upload new avatar</button>
		<input id="image-upload" type="file" accept="image/jpg, image/jpeg, image/png" (change)="uploadImage()" hidden/>
		</div>
		<div *ngIf="editBio" fxLayout="row" class="profile-button" fxFlexOffset="2rem">
		<button mat-flat-button class="profile-button" style="background: #EA6C40;" [disabled]="loading" (click)="toggleBio()">Save</button>
		</div>

		<div *ngIf="loading" fxLayoutAlign="center center" fxFlexOffset="2rem">
		<mat-progress-spinner></mat-progress-spinner>
		</div>
		</div>
		</div>

		<!-- Password Component -->
		<div id="password">
		<div fxLayout="column" class="image-container">
		<div fxLayout="row" fxFlexOffset="2rem" style="width: 100%;margin-left: -1rem;" (click)="switchView('profile')">
		<i class="material-icons" style="font-size: 40px;">keyboard_arrow_left</i>
		</div>
		<div fxLayout="row" fxFlexOffset="2rem">
		<h1 class="profile-title">Change Password</h1>
		</div>
		<div fxLayout="column" fxFlexOffset="2rem" class="alert alert-danger">
		<p>Passwords must contain at least 8 characters and be alphanumeric (At least 1 letter and 1 number)</p>
		</div>
		<div fxLayout="column" fxLayoutAlign="start center" *ngIf="passwordForm" [formGroup]="passwordForm">
		<div *ngIf="errors && errors.non_field_errors" fxLayout="row" fxFlexOffset="2rem" class="alert alert-danger">
		<div *ngFor="let err of errors.non_field_errors">
		<p>{{err}}</p>
		</div>
		</div>
		<div *ngIf="!loading" fxLayout="row" fxFlexOffset="2rem" class="profile-input">
		<input matInput placeholder="Old password" class="profile-input profile-title" style="font-size: 4rem;" type="password" autocomplete="current-password" formControlName="oldPassword" required />
		</div>
		<div *ngIf="submitted && !passwordForm.controls.oldPassword.valid">
		<p>Password is required</p>
		</div>
		<div *ngIf="errors && errors.token" fxLayout="column" fxFlexOffset="2rem" class="alert alert-danger">
		<div *ngFor="let err of errors.token">
		<p>{{err}}</p>
		</div>
		</div>

		<div *ngIf="!loading" fxLayout="row" fxFlexOffset="2rem" class="profile-input">
		<input matInput placeholder="Password" class="profile-input profile-title" style="font-size: 4rem;" type="password" autocomplete="current-password" formControlName="password" required />
		</div>
		<div *ngIf="submitted && !passwordForm.controls.password.valid">
		<p>Password is required</p>
		</div>
		<div *ngIf="errors && errors.newPassword1" fxLayout="column" fxFlexOffset="2rem" class="alert alert-danger">
		<div *ngFor="let err of errors.newPassword1">
		<p>{{err}}</p>
		</div>
		</div>

		<div *ngIf="!loading" fxLayout="row" fxFlexOffset="2rem" class="profile-input">
		<input matInput placeholder="Password again" class="profile-input profile-title" style="font-size: 4rem;" type="password" autocomplete="current-password" formControlName="password2" required />
		</div>
		<div *ngIf="submitted && !passwordForm.controls.password2.valid">
		<p>Password is required</p>
		</div>
		<div *ngIf="errors && errors.newPassword2" fxLayout="column" fxFlexOffset="2rem" class="alert alert-danger">
		<div *ngFor="let err of errors.newPassword2">
		<p>{{err}}</p>
		</div>
		</div>

		<div fxLayout="row" class="profile-button" fxFlexOffset="2rem">
		<button mat-flat-button class="profile-button" style="background: #EA6C40;" (click)="changePassword()">Change Password</button>
		</div>
		<div *ngIf="loading" fxLayoutAlign="center center" fxFlexOffset="2rem">
		<mat-progress-spinner></mat-progress-spinner>
		</div>
		</div>
		</div>
		</div>

		<!--
<mat-menu #appMenu="matMenu">		<mat-menu #appMenu="matMenu">
<button mat-menu-item (click)="viewProfile()"><mat-icon>public</mat-icon>View Public Profile</button>		<button mat-menu-item (click)="viewProfile()"><mat-icon>public</mat-icon>View Public Profile</button>
<button mat-menu-item (click)="openBioDialog()"><mat-icon>mode_edit</mat-icon>Bio</button>		<button mat-menu-item (click)="openBioDialog()"><mat-icon>mode_edit</mat-icon>Bio</button>
<button mat-menu-item (click)="openEmailDialog()"><mat-icon>mode_edit</mat-icon>Email</button>		<button mat-menu-item (click)="openEmailDialog()"><mat-icon>mode_edit</mat-icon>Email</button>
<button mat-menu-item (click)="openPasswordDialog()"><mat-icon>mode_edit</mat-icon>Password</button>		<button mat-menu-item (click)="openPasswordDialog()"><mat-icon>mode_edit</mat-icon>Password</button>
<button mat-menu-item (click)="openPictureDialog()"><mat-icon>mode_edit</mat-icon>Avatar</button>		<button mat-menu-item (click)="openPictureDialog()"><mat-icon>mode_edit</mat-icon>Avatar</button>
</mat-menu>		</mat-menu>
<mat-progress-spinner *ngIf="loading"></mat-progress-spinner>		<mat-progress-spinner *ngIf="loading"></mat-progress-spinner>
Show All 33 Lines	<div class="user">
<span id="email"><a href="mailto:{{account?.email}}">{{account?.email}}</a></span>		<span id="email"><a href="mailto:{{account?.email}}">{{account?.email}}</a></span>
</ng-container>		</ng-container>
</div>		</div>
</div>		</div>
</mat-card>		</mat-card>
<mat-card class="content">		<mat-card class="content">
<span id="bio" [innerHTML]="author?.bio \| marked"></span>		<span id="bio" [innerHTML]="author?.bio \| marked"></span>
</mat-card>		</mat-card>
<div id="userID">ID: {{author?.user}}</div>		<div id="userID">ID: {{author?.user}}</div> -->