diff options
| -rw-r--r-- | src/app/app.module.ts | 4 | ||||
| -rw-r--r-- | src/app/components/admin-panel-page/admin-panel-page.component.html | 154 | ||||
| -rw-r--r-- | src/app/components/comment-page/comment-page.component.html | 19 | ||||
| -rw-r--r-- | src/app/components/feed/feed.component.html | 71 | ||||
| -rw-r--r-- | src/app/components/footer/footer.component.css | 20 | ||||
| -rw-r--r-- | src/app/components/footer/footer.component.html | 12 | ||||
| -rw-r--r-- | src/app/components/footer/footer.component.ts | 18 | ||||
| -rw-r--r-- | src/app/components/login/login.component.html | 40 | ||||
| -rw-r--r-- | src/app/components/not-found/not-found.component.html | 15 | ||||
| -rw-r--r-- | src/app/components/post-page/post-page.component.html | 63 | ||||
| -rw-r--r-- | src/app/components/profile-settings/profile-settings.component.html | 234 | ||||
| -rw-r--r-- | src/app/components/profile/profile.component.html | 67 | ||||
| -rw-r--r-- | src/app/components/register/register.component.html | 134 |
13 files changed, 151 insertions, 700 deletions
diff --git a/src/app/app.module.ts b/src/app/app.module.ts index e331a5d..1bf44ad 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -25,7 +25,6 @@ import { CommentComponent } from './components/comment/comment.component'; import { CommentPageComponent } from './components/comment-page/comment-page.component'; import { PostAttachmentComponent } from './components/post-attachment/post-attachment.component'; import { RouterModule } from '@angular/router'; -import { FooterComponent } from './components/footer/footer.component'; @NgModule({ declarations: [ @@ -44,8 +43,7 @@ import { FooterComponent } from './components/footer/footer.component'; AdminPanelPageComponent, CommentComponent, CommentPageComponent, - PostAttachmentComponent, - FooterComponent + PostAttachmentComponent ], imports: [ BrowserModule.withServerTransition({ appId: 'serverApp' }), diff --git a/src/app/components/admin-panel-page/admin-panel-page.component.html b/src/app/components/admin-panel-page/admin-panel-page.component.html index 0c0954a..31f0849 100644 --- a/src/app/components/admin-panel-page/admin-panel-page.component.html +++ b/src/app/components/admin-panel-page/admin-panel-page.component.html @@ -2,182 +2,84 @@ <main id="content" *ngIf="!dataArrived"> <nav id="navigation"> - <button class="submit-btn" (click)="backToProfile()"> - ᐊ Back to profile - </button> - <button class="submit-btn" (click)="backToFeed()"> - ᐊ Back to feed - </button> + <button class="submit-btn" (click)="backToProfile()">ᐊ Back to profile</button> + <button class="submit-btn" (click)="backToFeed()">ᐊ Back to feed</button> <button class="submit-btn" (click)="logout()">Logout</button> </nav> - <hr /> + <hr> <article class="scroll-standalone"> <app-success-bar></app-success-bar> <app-error-bar></app-error-bar> - <button - type="button" - class="submit-btn edit-btn" - (click)="toggleLanguages()" - > - ▼ Edit Languages ▼ - </button> - <form - [formGroup]="languageForm" - (ngSubmit)="submitLanguages()" - *ngIf="showLanguages" - > + <button type="button" class="submit-btn edit-btn" (click)="toggleLanguages()">▼ Edit Languages ▼</button> + <form [formGroup]="languageForm" (ngSubmit)="submitLanguages()" *ngIf="showLanguages"> <div class="input-selection"> <label>Create language:</label> - <input - type="text" - class="input-field" - formControlName="languageCreate" - placeholder="New language name" - /> + <input type="text" class="input-field" formControlName="languageCreate" placeholder="New language name"> </div> <label>Update language:</label> <div class="flexbox input-selection"> - <input - type="text" - class="input-field" - formControlName="updateLanguageOldName" - placeholder="Old language name" - /> - <input - type="text" - class="input-field" - formControlName="updateLanguageNewName" - placeholder="New language name" - /> + <input type="text" class="input-field" formControlName="updateLanguageOldName" placeholder="Old language name"> + <input type="text" class="input-field" formControlName="updateLanguageNewName" placeholder="New language name"> </div> <label>Delete language:</label> <div class="flexbox input-selection"> - <input - type="text" - class="input-field" - formControlName="deleteLanguageName" - placeholder="Language name" - /> + <input type="text" class="input-field" formControlName="deleteLanguageName" placeholder="Language name"> </div> <button class="submit-btn" type="submit">Modify languages</button> - <hr /> + <hr> Available languages: <div id="all-languages"> - <div - class="user-language" - *ngFor="let lang of availableLanguages" - > + <div class="user-language" *ngFor="let lang of availableLanguages"> {{ lang.name }} </div> </div> - <hr /> + <hr> </form> - <button - type="button" - class="submit-btn edit-btn" - (click)="toggleTechnologies()" - > - ▼ Edit Technologies ▼ - </button> - <form - [formGroup]="technologyForm" - (ngSubmit)="submitTechnologies()" - *ngIf="showTechnologies" - > + <button type="button" class="submit-btn edit-btn" (click)="toggleTechnologies()">▼ Edit Technologies ▼</button> + <form [formGroup]="technologyForm" (ngSubmit)="submitTechnologies()" *ngIf="showTechnologies"> <div class="input-selection"> <label>Create technology:</label> - <input - type="text" - class="input-field" - formControlName="technologyCreate" - placeholder="New technology name" - /> + <input type="text" class="input-field" formControlName="technologyCreate" placeholder="New technology name"> </div> <label>Update technology:</label> <div class="flexbox input-selection"> - <input - type="text" - class="input-field" - formControlName="updateTechnologyOldName" - placeholder="Old technology name" - /> - <input - type="text" - class="input-field" - formControlName="updateTechnologyNewName" - placeholder="New technology name" - /> + <input type="text" class="input-field" formControlName="updateTechnologyOldName" placeholder="Old technology name"> + <input type="text" class="input-field" formControlName="updateTechnologyNewName" placeholder="New technology name"> </div> <label>Delete technology:</label> <div class="flexbox input-selection"> - <input - type="text" - class="input-field" - formControlName="deleteTechnologyName" - placeholder="Technology name" - /> + <input type="text" class="input-field" formControlName="deleteTechnologyName" placeholder="Technology name"> </div> - <button class="submit-btn" type="submit"> - Modify technologies - </button> - <hr /> + <button class="submit-btn" type="submit">Modify technologies</button> + <hr> Available technologies: <div id="all-technologies"> - <div - class="user-technology" - *ngFor="let tech of availableTechnologies" - > + <div class="user-technology" *ngFor="let tech of availableTechnologies"> {{ tech.name }} </div> </div> - <hr /> + <hr> </form> - <button - type="button" - class="submit-btn delete-btn" - (click)="toggleDeletions()" - > - ▼ Deletions ▼ - </button> - <form - [formGroup]="deleteForm" - (ngSubmit)="submitDelete()" - *ngIf="showDeletions" - > + <button type="button" class="submit-btn delete-btn" (click)="toggleDeletions()">▼ Deletions ▼</button> + <form [formGroup]="deleteForm" (ngSubmit)="submitDelete()" *ngIf="showDeletions"> <div class="input-selection"> <label>Delete user by Id:</label> - <input - type="text" - class="input-field" - formControlName="deleteUser" - placeholder="User Id" - /> + <input type="text" class="input-field" formControlName="deleteUser" placeholder="User Id"> </div> <div class="input-selection"> <label>Delete post by Id:</label> - <input - type="text" - class="input-field" - formControlName="deletePost" - placeholder="Post Id" - /> + <input type="text" class="input-field" formControlName="deletePost" placeholder="Post Id"> </div> <div class="input-selection"> <label>Delete comment by Id:</label> - <input - type="text" - class="input-field" - formControlName="deleteComment" - placeholder="Comment Id" - /> + <input type="text" class="input-field" formControlName="deleteComment" placeholder="Comment Id"> </div> <button class="submit-btn" type="submit">Delete</button> - <hr /> + <hr> </form> </article> - <app-footer></app-footer> </main> diff --git a/src/app/components/comment-page/comment-page.component.html b/src/app/components/comment-page/comment-page.component.html index d59c956..ae114da 100644 --- a/src/app/components/comment-page/comment-page.component.html +++ b/src/app/components/comment-page/comment-page.component.html @@ -2,26 +2,15 @@ <main id="content" *ngIf="loaded"> <nav> - <button class="submit-btn" type="submit" (click)="toPost()"> - ᐊ Back to post - </button> + <button class="submit-btn" type="submit" (click)="toPost()">ᐊ Back to post</button> </nav> <app-comment [paramId]="commentId.toString()"></app-comment> <nav class="many-buttons" *ngIf="editable"> <button class="submit-btn" (click)="editComment()">Edit comment</button> - <button class="submit-btn delete-btn" (click)="deleteComment()"> - Delete comment - </button> + <button class="submit-btn delete-btn" (click)="deleteComment()">Delete comment</button> </nav> - <form [formGroup]="editCommentFormGroup" (ngSubmit)="editComment()"> - <input - type="text" - *ngIf="editingComment" - placeholder="New comment message" - class="input-field" - formControlName="newCommentMessage" - /> + <form [formGroup]="editCommentFormGroup" (ngSubmit)="editComment()"> + <input type="text" *ngIf="editingComment" placeholder="New comment message" class="input-field" formControlName="newCommentMessage"> <input type="submit" style="display: none" /> </form> - <app-footer></app-footer> </main> diff --git a/src/app/components/feed/feed.component.html b/src/app/components/feed/feed.component.html index 7f3cb68..230c27b 100644 --- a/src/app/components/feed/feed.component.html +++ b/src/app/components/feed/feed.component.html @@ -3,81 +3,41 @@ <main id="feed-page" *ngIf="dataArrived"> <aside id="profile-bar" class="round-image rounded-border"> <summary id="profile-info" (click)="goToProfile()"> - <img - id="profile-bar-profile-pic" - class="round-image" - [src]="user.profilePictureURL" - alt="" - /> + <img id="profile-bar-profile-pic" class="round-image" [src]="user.profilePictureURL" alt=""/> <div id="profile-bar-name"> {{ user.firstName }} {{ user.lastName }} </div> - <div id="profile-bar-username">@{{ user.userName }}</div> + <div id="profile-bar-username"> + @{{ user.userName }} + </div> </summary> <button class="submit-btn" (click)="goToSettings()">Settings</button> <button class="submit-btn" (click)="logout()">Logout</button> </aside> <section id="feed-content"> <nav id="top-bar"> - <img - id="top-bar-profile-pic" - class="round-image" - [src]="user.profilePictureURL" - alt="" - (click)="goToProfile()" - /> - <form - id="create-post-form" - class="rounded-border" - [formGroup]="createPostFormGroup" - (ngSubmit)="createPost()" - > + <img id="top-bar-profile-pic" class="round-image" [src]="user.profilePictureURL" alt="" (click)="goToProfile()"> + <form id="create-post-form" class="rounded-border" [formGroup]="createPostFormGroup" (ngSubmit)="createPost()"> <section id="form-inputs"> - <input - id="top-bar-create-post" - type="text" - formControlName="newPostMessage" - placeholder="What's on your mind?" - /> - <input type="submit" style="display: none" /> - <!-- You need this element, so when you press enter the request is sent --> - <img - id="attachment-img" - src="assets/images/paper-clip.png" - /> - <input - id="file-upload" - type="file" - formControlName="fileUpload" - (change)="onFileUpload($event)" - multiple - /> + <input id="top-bar-create-post" type="text" formControlName="newPostMessage" placeholder="What's on your mind?"/> + <input type="submit" style="display: none" /> <!-- You need this element, so when you press enter the request is sent --> + <img id="attachment-img" src="assets/images/paper-clip.png"> + <input id="file-upload" type="file" formControlName="fileUpload" (change)="onFileUpload($event)" multiple> </section> <section class="form-attachments"> <div *ngFor="let file of files" class="form-attachment"> - {{ file.name ? file.name : "Attachment" }} - <div - class="remove-form-attachment" - (click)="removeAttachment(file.name)" - > + {{ file.name ? file.name : 'Attachment' }} + <div class="remove-form-attachment" (click)="removeAttachment(file.name)"> ☒ </div> </div> </section> </form> - <img - id="top-bar-open-chat" - src="assets/images/feed/chat-pic.png" - alt="" - /> + <img id="top-bar-open-chat" src="assets/images/feed/chat-pic.png" alt=""/> </nav> - <section - id="posts" - class="scroll-standalone" - (scroll)="onScroll($event)" - > + <section id="posts" class="scroll-standalone" (scroll)="onScroll($event)"> <div id="no-posts-msg" *ngIf="posts.length === 0"> - None of your friends have posted anything yet!<br /> + None of your friends have posted anything yet!<br> Try refreshing your page! </div> <div *ngFor="let friendPost of posts" class="post"> @@ -85,5 +45,4 @@ </div> </section> </section> - <app-footer></app-footer> </main> diff --git a/src/app/components/footer/footer.component.css b/src/app/components/footer/footer.component.css deleted file mode 100644 index b93e1f3..0000000 --- a/src/app/components/footer/footer.component.css +++ /dev/null @@ -1,20 +0,0 @@ -footer { - display: flex; - width: 100%; -} - -footer > * { - flex: 1; -} - -#version { - text-align: left; -} - -#middle-footer-message { - text-align: center; -} - -#license { - text-align: right; -} diff --git a/src/app/components/footer/footer.component.html b/src/app/components/footer/footer.component.html deleted file mode 100644 index d410597..0000000 --- a/src/app/components/footer/footer.component.html +++ /dev/null @@ -1,12 +0,0 @@ -<footer> - <div id="version"> - {{ version }} - </div> - <div id="middle-footer-message"> - Made by - <a href="{{ organizationUrl }}">Team Kaleidoscope</a> - </div> - <div id="license"> - <a href="{{ licenseUrl }}">License</a> - </div> -</footer> diff --git a/src/app/components/footer/footer.component.ts b/src/app/components/footer/footer.component.ts deleted file mode 100644 index e83f840..0000000 --- a/src/app/components/footer/footer.component.ts +++ /dev/null @@ -1,18 +0,0 @@ -import { Component, OnInit } from '@angular/core'; - -@Component({ - selector: 'app-footer', - templateUrl: './footer.component.html', - styleUrls: ['./footer.component.css'] -}) -export class FooterComponent implements OnInit { - public version: string = "v0.1"; - public licenseUrl: string = "https://github.com/Team-Kaleidoscope/DevHive-Angular/blob/main/LICENSE"; - public organizationUrl: string = "https://github.com/Team-Kaleidoscope"; - - constructor() { } - - ngOnInit(): void { - } - -} diff --git a/src/app/components/login/login.component.html b/src/app/components/login/login.component.html index d4f956d..9f74faa 100644 --- a/src/app/components/login/login.component.html +++ b/src/app/components/login/login.component.html @@ -2,55 +2,29 @@ <summary class="title">Login</summary> <form [formGroup]="loginUserFormGroup" (ngSubmit)="onSubmit()"> - <hr /> + <hr> <section class="input-selection"> - <input - type="text" - placeholder="Username" - class="input-field" - formControlName="username" - required - /> + <input type="text" placeholder="Username" class="input-field" formControlName="username" required> <label class="input-field-label">Username</label> <div class="input-errors"> - <label - *ngIf="loginUserFormGroup.get('username')?.errors?.required" - class="error" - >*Required</label - > + <label *ngIf="loginUserFormGroup.get('username')?.errors?.required" class="error">*Required</label> </div> </section> <section class="input-selection"> - <input - type="password" - placeholder="Password" - class="input-field" - formControlName="password" - required - /> + <input type="password" placeholder="Password" class="input-field" formControlName="password" required> <label class="input-field-label">Password</label> <div class="input-errors"> - <label - *ngIf="loginUserFormGroup.get('password')?.errors?.required" - class="error" - >*Required</label - > + <label *ngIf="loginUserFormGroup.get('password')?.errors?.required" class="error">*Required</label> </div> </section> - <hr /> + <hr> <button class="submit-btn" type="submit">Submit</button> <app-error-bar></app-error-bar> </form> - <button - class="submit-btn redirect-to-register" - (click)="onRedirectRegister()" - > - New to DevHive? Register instead - </button> - <app-footer></app-footer> + <button class="submit-btn redirect-to-register" (click)="onRedirectRegister()">New to DevHive? Register instead</button> </main> diff --git a/src/app/components/not-found/not-found.component.html b/src/app/components/not-found/not-found.component.html index 4588d2c..83d73ce 100644 --- a/src/app/components/not-found/not-found.component.html +++ b/src/app/components/not-found/not-found.component.html @@ -1,13 +1,10 @@ <main id="content"> - <summary class="title">Page not found!</summary> - <hr /> + <summary class="title"> + Page not found! + </summary> + <hr> <nav id="back-btns"> - <button class="submit-btn" type="submit" (click)="backToFeed()"> - Back to feed - </button> - <button class="submit-btn" type="submit" (click)="backToLogin()"> - Back to login - </button> + <button class="submit-btn" type="submit" (click)="backToFeed()">Back to feed</button> + <button class="submit-btn" type="submit" (click)="backToLogin()">Back to login</button> </nav> - <app-footer></app-footer> </main> diff --git a/src/app/components/post-page/post-page.component.html b/src/app/components/post-page/post-page.component.html index 9781c18..b8e7e22 100644 --- a/src/app/components/post-page/post-page.component.html +++ b/src/app/components/post-page/post-page.component.html @@ -2,75 +2,36 @@ <main id="content" *ngIf="dataArrived"> <nav> - <div class="many-buttons" *ngIf="loggedIn"> - <button class="submit-btn" type="submit" (click)="backToFeed()"> - ᐊ Back to feed - </button> - <button class="submit-btn" type="submit" (click)="backToProfile()"> - ᐊ Back to profile - </button> + <div class="many-buttons" *ngIf="loggedIn"> + <button class="submit-btn" type="submit" (click)="backToFeed()">ᐊ Back to feed</button> + <button class="submit-btn" type="submit" (click)="backToProfile()">ᐊ Back to profile</button> </div> - <button - class="submit-btn" - type="submit" - (click)="toLogin()" - *ngIf="!loggedIn" - > - Login - </button> + <button class="submit-btn" type="submit" (click)="toLogin()" *ngIf="!loggedIn">Login</button> </nav> <app-post [paramId]="postId.toString()"></app-post> <div class="many-buttons" *ngIf="editable"> <button class="submit-btn" (click)="editPost()">Edit post</button> - <button class="submit-btn delete-btn" (click)="deletePost()"> - Delete post - </button> + <button class="submit-btn delete-btn" (click)="deletePost()">Delete post</button> </div> - <form - id="editPost" - [formGroup]="editPostFormGroup" - *ngIf="editingPost" - (ngSubmit)="editPost()" - > - <input - id="new-message-input" - type="text" - placeholder="New post message" - class="input-field" - formControlName="newPostMessage" - /> - <img id="attachment-img" src="assets/images/paper-clip.png" /> - <input - id="file-upload" - type="file" - formControlName="fileUpload" - (change)="onFileUpload($event)" - multiple - /> + <form id="editPost" [formGroup]="editPostFormGroup" *ngIf="editingPost" (ngSubmit)="editPost()"> + <input id="new-message-input" type="text" placeholder="New post message" class="input-field" formControlName="newPostMessage"> + <img id="attachment-img" src="assets/images/paper-clip.png"> + <input id="file-upload" type="file" formControlName="fileUpload" (change)="onFileUpload($event)" multiple> <input type="submit" style="display: none" /> </form> <figure class="form-attachments" *ngIf="editingPost"> <div *ngFor="let file of files" class="form-attachment"> - {{ file.name ? file.name : "Attachment" }} - <div - class="remove-form-attachment" - (click)="removeAttachment(file.name)" - > + {{ file.name ? file.name : 'Attachment' }} + <div class="remove-form-attachment" (click)="removeAttachment(file.name)"> ☒ </div> </div> </figure> <form [formGroup]="addCommentFormGroup" (ngSubmit)="addComment()"> - <input - type="text" - placeholder="Add comment" - class="input-field" - formControlName="newComment" - /> + <input type="text" placeholder="Add comment" class="input-field" formControlName="newComment"> <input type="submit" style="display: none" /> </form> <section class="comment" *ngFor="let comm of post?.comments"> <app-comment [paramId]="comm.id.toString()"></app-comment> </section> - <app-footer></app-footer> </main> diff --git a/src/app/components/profile-settings/profile-settings.component.html b/src/app/components/profile-settings/profile-settings.component.html index f5f19bd..502697d 100644 --- a/src/app/components/profile-settings/profile-settings.component.html +++ b/src/app/components/profile-settings/profile-settings.component.html @@ -3,276 +3,114 @@ <div id="content" *ngIf="dataArrived"> <nav id="navigation"> <button class="submit-btn" (click)="goToProfile()">ᐊ Back</button> - <button - class="submit-btn" - (click)="navigateToAdminPanel()" - *ngIf="isAdminUser" - > - Panel - </button> + <button class="submit-btn" (click)="navigateToAdminPanel()" *ngIf="isAdminUser">Panel</button> <button class="submit-btn" (click)="logout()">Logout</button> </nav> - <hr /> + <hr> <div class="scroll-standalone"> - <form - id="update-profile-picture" - [formGroup]="updateProfilePictureFormGroup" - (ngSubmit)="updateProfilePicture()" - > - <img - id="profile-picture" - class="round-image" - [src]="user.profilePictureURL" - /> + <form id="update-profile-picture" [formGroup]="updateProfilePictureFormGroup" (ngSubmit)="updateProfilePicture()"> + <img id="profile-picture" class="round-image" [src]="user.profilePictureURL"> <div id="submit-file"> <div id="upload-file" class="submit-btn"> - <input - type="file" - accept="image/*" - formControlName="fileUpload" - (change)="onFileUpload($event)" - /> + <input type="file" accept="image/*" formControlName="fileUpload" (change)="onFileUpload($event)"> </div> - <button class="submit-btn" type="submit"> - Update profile picture - </button> + <button class="submit-btn" type="submit">Update profile picture</button> </div> </form> - <hr /> - <form - id="update-user" - [formGroup]="updateUserFormGroup" - (ngSubmit)="onSubmit()" - > + <hr> + <form id="update-user" [formGroup]="updateUserFormGroup" (ngSubmit)="onSubmit()"> <div class="input-selection"> - <input - type="text" - class="input-field" - formControlName="firstName" - required - /> + <input type="text" class="input-field" formControlName="firstName" required> <label class="input-field-label">First Name</label> <div class="input-errors"> - <label - *ngIf=" - updateUserFormGroup.get('firstName')?.errors - ?.required - " - class="error" - >*Required</label - > - <label - *ngIf=" - updateUserFormGroup.get('firstName')?.errors - ?.minlength - " - class="error" - >*Minimum 3 characters</label - > + <label *ngIf="updateUserFormGroup.get('firstName')?.errors?.required" class="error">*Required</label> + <label *ngIf="updateUserFormGroup.get('firstName')?.errors?.minlength" class="error">*Minimum 3 characters</label> </div> </div> <div class="input-selection"> - <input - type="text" - class="input-field" - formControlName="lastName" - required - /> + <input type="text" class="input-field" formControlName="lastName" required> <label class="input-field-label">Last Name</label> <div class="input-errors"> - <label - *ngIf=" - updateUserFormGroup.get('lastName')?.errors - ?.required - " - class="error" - >*Required</label - > - <label - *ngIf=" - updateUserFormGroup.get('lastName')?.errors - ?.minlength - " - class="error" - >*Minimum 3 characters</label - > + <label *ngIf="updateUserFormGroup.get('lastName')?.errors?.required" class="error">*Required</label> + <label *ngIf="updateUserFormGroup.get('lastName')?.errors?.minlength" class="error">*Minimum 3 characters</label> </div> </div> <div class="input-selection"> - <input - type="text" - class="input-field" - formControlName="username" - required - /> + <input type="text" class="input-field" formControlName="username" required> <label class="input-field-label">Username</label> <div class="input-errors"> - <label - *ngIf=" - updateUserFormGroup.get('username')?.errors - ?.required - " - class="error" - >*Required</label - > - <label - *ngIf=" - updateUserFormGroup.get('username')?.errors - ?.minlength - " - class="error" - >*Minimum 3 characters</label - > + <label *ngIf="updateUserFormGroup.get('username')?.errors?.required" class="error">*Required</label> + <label *ngIf="updateUserFormGroup.get('username')?.errors?.minlength" class="error">*Minimum 3 characters</label> </div> </div> <div class="input-selection"> - <input - type="text" - class="input-field" - formControlName="email" - required - /> + <input type="text" class="input-field" formControlName="email" required> <label class="input-field-label">Email</label> <div class="input-errors"> - <label - *ngIf=" - updateUserFormGroup.get('email')?.errors?.required - " - class="error" - >*Required</label - > - <label - *ngIf="updateUserFormGroup.get('email')?.errors?.email" - class="error" - >*Invalid email</label - > + <label *ngIf="updateUserFormGroup.get('email')?.errors?.required" class="error">*Required</label> + <label *ngIf="updateUserFormGroup.get('email')?.errors?.email" class="error">*Invalid email</label> </div> </div> <div class="input-selection"> - <input - type="password" - class="input-field" - formControlName="password" - required - /> + <input type="password" class="input-field" formControlName="password" required> <label class="input-field-label">Password</label> <div class="input-errors"> - <label - *ngIf=" - updateUserFormGroup.get('password')?.errors - ?.required - " - class="error" - >*Required</label - > - <label - *ngIf=" - updateUserFormGroup.get('password')?.errors - ?.minlength - " - class="error" - >*Minimum 3 characters</label - > - <label - *ngIf=" - updateUserFormGroup.get('password')?.errors?.pattern - " - class="error" - >*At least 1 number</label - > + <label *ngIf="updateUserFormGroup.get('password')?.errors?.required" class="error">*Required</label> + <label *ngIf="updateUserFormGroup.get('password')?.errors?.minlength" class="error">*Minimum 3 characters</label> + <label *ngIf="updateUserFormGroup.get('password')?.errors?.pattern" class="error">*At least 1 number</label> </div> </div> - <button - type="button" - class="submit-btn edit-btn" - (click)="toggleLanguages()" - > - ▼ Edit Languages ▼ - </button> + <button type="button" class="submit-btn edit-btn" (click)="toggleLanguages()">▼ Edit Languages ▼</button> <div *ngIf="showLanguages"> <div class="input-selection"> - <input - type="text" - class="input-field" - formControlName="languageInput" - required - /> + <input type="text" class="input-field" formControlName="languageInput" required> <div class="input-errors"> - <label class="error" - >Type in your desired languages, separated by a - space</label - > + <label class="error">Type in your desired languages, separated by a space</label> </div> </div> Available languages: <div id="all-languages"> - <div - class="user-language" - *ngFor="let lang of availableLanguages" - > + <div class="user-language" *ngFor="let lang of availableLanguages"> {{ lang.name }} </div> </div> </div> - <button - type="button" - class="submit-btn edit-btn" - (click)="toggleTechnologies()" - > - ▼ Edit Technologies ▼ - </button> + <button type="button" class="submit-btn edit-btn" (click)="toggleTechnologies()">▼ Edit Technologies ▼</button> <div *ngIf="showTechnologies"> <div class="input-selection"> - <input - type="text" - class="input-field" - formControlName="technologyInput" - required - /> + <input type="text" class="input-field" formControlName="technologyInput" required> <div class="input-errors"> - <label class="error" - >Type in your desired technologies, separated by a - space</label - > + <label class="error">Type in your desired technologies, separated by a space</label> </div> </div> Available technologies: <div id="all-technologies"> - <div - class="user-technology" - *ngFor="let tech of availableTechnologies" - > + <div class="user-technology" *ngFor="let tech of availableTechnologies"> {{ tech.name }} </div> </div> </div> - <button id="update-profile-btn" class="submit-btn" type="submit"> - Update profile - </button> + <button id="update-profile-btn" class="submit-btn" type="submit">Update profile</button> <app-success-bar></app-success-bar> <app-error-bar></app-error-bar> </form> - <hr /> + <hr> <div id="confirm-delete" *ngIf="deleteAccountConfirm"> - Are you sure you want to delete your account?<br />This is - permanent! + Are you sure you want to delete your account?<br>This is permanent! </div> - <button class="submit-btn delete-btn" (click)="deleteAccount()"> - Delete account - </button> + <button class="submit-btn delete-btn" (click)="deleteAccount()">Delete account</button> </div> - <app-footer></app-footer> </div> diff --git a/src/app/components/profile/profile.component.html b/src/app/components/profile/profile.component.html index 0d9dc6a..0e5f633 100644 --- a/src/app/components/profile/profile.component.html +++ b/src/app/components/profile/profile.component.html @@ -3,48 +3,25 @@ <div id="content" *ngIf="dataArrived"> <nav id="navigation"> <button class="submit-btn" (click)="goBack()">ᐊ Back</button> - <button - class="submit-btn" - (click)="navigateToSettings()" - *ngIf="isTheLoggedInUser" - > - Settings - </button> - <button - class="submit-btn" - (click)="navigateToAdminPanel()" - *ngIf="isTheLoggedInUser && isAdminUser" - > - Panel - </button> - <button class="submit-btn" (click)="logout()" *ngIf="isTheLoggedInUser"> - Logout - </button> + <button class="submit-btn" (click)="navigateToSettings()" *ngIf="isTheLoggedInUser">Settings</button> + <button class="submit-btn" (click)="navigateToAdminPanel()" *ngIf="isTheLoggedInUser && isAdminUser">Panel</button> + <button class="submit-btn" (click)="logout()" *ngIf="isTheLoggedInUser">Logout</button> </nav> - <hr /> + <hr> <div class="scroll-standalone" (scroll)="onScroll($event)"> <div id="main-info" class="rounded-border"> - <img class="round-image" [src]="user.profilePictureURL" alt="" /> + <img class="round-image" [src]="user.profilePictureURL" alt=""/> <div id="other-main-info"> - <div id="name">{{ user.firstName }} {{ user.lastName }}</div> - <div id="username">@{{ user.userName }}</div> - <form - [formGroup]="updateFrienship" - (ngSubmit)="modifyFriend()" - *ngIf="!isTheLoggedInUser && isUserLoggedIn" - > - <button id="add-friend" type="submit" class="submit-btn"> - {{ friendOfUser ? "Unfriend" : "Add friend" }} - </button> - <br /> - <input - id="loggedin-password" - type="password" - formControlName="password" - class="input-field" - *ngIf="updatingFriendship" - placeholder="Type in password to confirm" - /> + <div id="name"> + {{ user.firstName }} {{ user.lastName }} + </div> + <div id="username"> + @{{ user.userName }} + </div> + <form [formGroup]="updateFrienship" (ngSubmit)="modifyFriend()" *ngIf="!isTheLoggedInUser && isUserLoggedIn"> + <button id="add-friend" type="submit" class="submit-btn">{{ friendOfUser ? 'Unfriend' : 'Add friend' }}</button> + <br> + <input id="loggedin-password" type="password" formControlName="password" class="input-field" *ngIf="updatingFriendship" placeholder="Type in password to confirm"> </form> </div> </div> @@ -55,7 +32,9 @@ {{ lang.name }} </div> </div> - <div *ngIf="user.languages.length === 0"> None</div> + <div *ngIf="user.languages.length === 0"> + None + </div> </div> <div class="secondary-info rounded-border"> Technologies: @@ -64,18 +43,18 @@ {{ tech.name }} </div> </div> - <div *ngIf="user.technologies.length === 0"> None</div> + <div *ngIf="user.technologies.length === 0"> + None + </div> </div> - <hr /> + <hr> <div id="posts"> <div id="no-posts" *ngIf="userPosts.length === 0"> - {{ user.firstName }} {{ user.lastName }} hasn't posted anything - yet! + {{ user.firstName }} {{ user.lastName }} hasn't posted anything yet! </div> <div *ngFor="let userPost of userPosts"> <app-post [paramId]="userPost.postId.toString()"></app-post> </div> </div> </div> - <app-footer></app-footer> </div> diff --git a/src/app/components/register/register.component.html b/src/app/components/register/register.component.html index c521d44..0075b1d 100644 --- a/src/app/components/register/register.component.html +++ b/src/app/components/register/register.component.html @@ -2,160 +2,64 @@ <summary class="title">Register</summary> <form [formGroup]="registerUserFormGroup" (ngSubmit)="onSubmit()"> - <hr /> + <hr> <!-- Value: {{ registerUserFormGroup.value | json }} <hr> --> <section class="input-selection"> - <input - type="text" - placeholder="Goshko, is that u?" - class="input-field" - formControlName="firstName" - required - /> + <input type="text" placeholder="Goshko, is that u?" class="input-field" formControlName="firstName" required> <label class="input-field-label">First Name</label> <div class="input-errors"> - <label - *ngIf=" - registerUserFormGroup.get('firstName')?.errors?.required - " - class="error" - >*Required</label - > - <label - *ngIf=" - registerUserFormGroup.get('firstName')?.errors - ?.minlength - " - class="error" - >*Minimum 3 characters</label - > + <label *ngIf="registerUserFormGroup.get('firstName')?.errors?.required" class="error">*Required</label> + <label *ngIf="registerUserFormGroup.get('firstName')?.errors?.minlength" class="error">*Minimum 3 characters</label> </div> </section> <section class="input-selection"> - <input - type="text" - placeholder="Trapov? Really??" - class="input-field" - formControlName="lastName" - required - /> + <input type="text" placeholder="Trapov? Really??" class="input-field" formControlName="lastName" required> <label class="input-field-label">Last Name</label> <div class="input-errors"> - <label - *ngIf=" - registerUserFormGroup.get('lastName')?.errors?.required - " - class="error" - >*Required</label - > - <label - *ngIf=" - registerUserFormGroup.get('lastName')?.errors?.minlength - " - class="error" - >*Minimum 3 characters</label - > + <label *ngIf="registerUserFormGroup.get('lastName')?.errors?.required" class="error">*Required</label> + <label *ngIf="registerUserFormGroup.get('lastName')?.errors?.minlength" class="error">*Minimum 3 characters</label> </div> </section> <section class="input-selection"> - <input - type="text" - placeholder="Think of something cool to flex on other kids" - class="input-field" - formControlName="username" - required - /> + <input type="text" placeholder="Think of something cool to flex on other kids" class="input-field" formControlName="username" required> <label class="input-field-label">Username</label> <div class="input-errors"> - <label - *ngIf=" - registerUserFormGroup.get('username')?.errors?.required - " - class="error" - >*Required</label - > - <label - *ngIf=" - registerUserFormGroup.get('username')?.errors?.minlength - " - class="error" - >*Minimum 3 characters</label - > + <label *ngIf="registerUserFormGroup.get('username')?.errors?.required" class="error">*Required</label> + <label *ngIf="registerUserFormGroup.get('username')?.errors?.minlength" class="error">*Minimum 3 characters</label> </div> </section> <section class="input-selection"> - <input - type="text" - placeholder="You expect an email joke? I have none, mail me one" - class="input-field" - formControlName="email" - required - /> + <input type="text" placeholder="You expect an email joke? I have none, mail me one" class="input-field" formControlName="email" required> <label class="input-field-label">Email</label> <div class="input-errors"> - <label - *ngIf="registerUserFormGroup.get('email')?.errors?.required" - class="error" - >*Required</label - > - <label - *ngIf="registerUserFormGroup.get('email')?.errors?.email" - class="error" - >*Invalid email</label - > + <label *ngIf="registerUserFormGroup.get('email')?.errors?.required" class="error">*Required</label> + <label *ngIf="registerUserFormGroup.get('email')?.errors?.email" class="error">*Invalid email</label> </div> </section> <section class="input-selection"> - <input - type="password" - placeholder="Make sure it's long & strong (just like my d***)" - class="input-field" - formControlName="password" - required - /> + <input type="password" placeholder="Make sure it's long & strong (just like my d***)" class="input-field" formControlName="password" required> <label class="input-field-label">Password</label> <div class="input-errors"> - <label - *ngIf=" - registerUserFormGroup.get('password')?.errors?.required - " - class="error" - >*Required</label - > - <label - *ngIf=" - registerUserFormGroup.get('password')?.errors?.minlength - " - class="error" - >*Minimum 3 characters</label - > - <label - *ngIf=" - registerUserFormGroup.get('password')?.errors?.pattern - " - class="error" - >*At least 1 number</label - > + <label *ngIf="registerUserFormGroup.get('password')?.errors?.required" class="error">*Required</label> + <label *ngIf="registerUserFormGroup.get('password')?.errors?.minlength" class="error">*Minimum 3 characters</label> + <label *ngIf="registerUserFormGroup.get('password')?.errors?.pattern" class="error">*At least 1 number</label> </div> </section> - <hr /> + <hr> <button class="submit-btn" type="submit">Submit</button> <app-error-bar></app-error-bar> </form> - <button class="submit-btn redirect-to-login" (click)="onRedirectLogin()"> - Already have an account? Login here - </button> - <app-footer></app-footer> + <button class="submit-btn redirect-to-login" (click)="onRedirectLogin()">Already have an account? Login here</button> </main> |