Merge remote-tracking branch 'origin/main'

src/app/app-routing.module.ts

@@ -5,13 +5,16 @@ import {ProfileComponent} from "./profile/profile.component";
 import {SqueakComponent} from "./squeak/squeak.component";
 import {LoginComponent} from "./login/login.component";
 import {RegisterComponent} from "./register/register.component";
+import {ProfileEditComponent} from "./profile-edit/profile-edit.component";
 
 const routes: Routes = [
   { path: '', redirectTo: 'home', pathMatch: 'full'},
   { path: 'home', component: HomeComponent},
   { path: 'profile', component: ProfileComponent},
   { path: 'login', component: LoginComponent},
-  { path: 'register', component: RegisterComponent}
+  { path: 'register', component: RegisterComponent},
+  { path: 'edit', component: ProfileEditComponent}
+
 ];
 
 @NgModule({

src/app/app.module.ts

@@ -15,6 +15,7 @@ import { ProfileComponent } from './profile/profile.component';
 import { HomeComponent } from './home/home.component';
 import { DataService } from "./services/data.service";
 import { RegisterComponent } from './register/register.component';
+import { ProfileEditComponent } from './profile-edit/profile-edit.component';
 
 @NgModule({
   declarations: [
@@ -25,7 +26,8 @@ import { RegisterComponent } from './register/register.component';
     LoginComponent,
     ProfileComponent,
     HomeComponent,
-    RegisterComponent
+    RegisterComponent,
+    ProfileEditComponent
   ],
     imports: [
         BrowserModule,
@@ -36,4 +38,6 @@ import { RegisterComponent } from './register/register.component';
   providers: [SqueakerService, SqueakService, DataService],
   bootstrap: [AppComponent]
 })
+
+
 export class AppModule { }

src/app/home/home.component.html

@@ -24,12 +24,12 @@
     <button class="sidebarButton" routerLink="/home">Home</button>
   </div>
 
-  <div class="sidebarOption">
+  <div class="sidebarOption" *ngIf="currentSqueaker.id==1">
     <span class="material-icons"> login </span>
     <button class="sidebarButton" routerLink="/login">Login</button>
   </div>
 
-  <div class="sidebarOption">
+  <div class="sidebarOption" *ngIf="currentSqueaker.id!=1">
     <span class="material-icons"> perm_identity </span>
     <button class="sidebarButton" routerLink="/profile">Profile</button>
   </div>

src/app/models/squeak.ts

@@ -3,5 +3,8 @@ import {Squeaker} from "./squeaker";
 export interface Squeak {
   id: number;
   content: string;
-  squeaker: Squeaker
+  squeaker: Squeaker;
+  postedAtDate: number;
+  postedAtTime: number;
+  image: string;
 }

src/app/models/squeakDTO.ts

@@ -3,9 +3,11 @@ import {Squeaker} from "./squeaker";
 export class SqueakDTO {
   content: string;
   squeaker: Squeaker;
+  image: string
 
-  constructor(content: string, squeaker: Squeaker) {
+  constructor(content: string, squeaker: Squeaker, image: string) {
     this.content = content;
     this.squeaker = squeaker;
+    this.image = image;
   }
 }

src/app/models/squeaker.ts

@@ -6,4 +6,6 @@ export interface Squeaker {
   lastName: string;
   email: string;
   profilePic: string;
+  joinDate: number;
+
 }

src/app/profile-edit/profile-edit.component.css

@@ -0,0 +1,176 @@
+/* Split the screen in half */
+.split {
+  height: 100%;
+  width: 50%;
+  position: fixed;
+  z-index: 1;
+  top: 0;
+  overflow-x: hidden;
+  padding-top: 20px;
+}
+
+/* Control the left side */
+.left {
+  left: 0;
+  background-color: rgb(219, 203, 253);
+
+}
+img {
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+  width: 70%;
+  position: relative;
+  top: 150px;
+}
+
+/* Control the right side */
+.right {
+  right: 0;
+  background-color: white;
+}
+
+body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6,
+pre, form, fieldset, input, textarea, p, blockquote, th, td {
+  padding:0;
+  margin:0;}
+
+fieldset, img {border:0}
+
+ol, ul, li {list-style:none}
+
+:focus {outline:none}
+
+body,
+input,
+textarea,
+select {
+  font-family: 'Open Sans', sans-serif;
+  font-size: 16px;
+  color: #4c4c4c;
+}
+
+p {
+  font-size: 12px;
+  width: 150px;
+  display: inline-block;
+  margin-left: 18px;
+}
+h1 {
+  font-size: 32px;
+  font-weight: 300;
+  color: #4c4c4c;
+  text-align: center;
+  padding-top: 10px;
+  margin-bottom: 10px;
+}
+
+html{
+  background-color: #ffffff;
+}
+
+.testbox {
+  margin: 20px auto;
+  width: 343px;
+  height: 464px;
+  -webkit-border-radius: 8px/7px;
+  -moz-border-radius: 8px/7px;
+  border-radius: 8px/7px;
+  background-color: #ebebeb;
+  -webkit-box-shadow: 1px 2px 5px rgba(0,0,0,.31);
+  -moz-box-shadow: 1px 2px 5px rgba(0,0,0,.31);
+  box-shadow: 1px 2px 5px rgba(0,0,0,.31);
+  border: solid 1px #cbc9c9;
+  position: relative;
+  top: 150px;
+}
+
+input[type=radio] {
+  visibility: hidden;
+}
+
+form{
+  margin: 0 30px;
+}
+
+hr{
+  color: #a9a9a9;
+  opacity: 0.3;
+}
+
+input[type=text],input[type=password]{
+  width: 200px;
+  height: 39px;
+  -webkit-border-radius: 0px 4px 4px 0px/5px 5px 4px 4px;
+  -moz-border-radius: 0px 4px 4px 0px/0px 0px 4px 4px;
+  border-radius: 0px 4px 4px 0px/5px 5px 4px 4px;
+  background-color: #fff;
+  -webkit-box-shadow: 1px 2px 5px rgba(0,0,0,.09);
+  -moz-box-shadow: 1px 2px 5px rgba(0,0,0,.09);
+  box-shadow: 1px 2px 5px rgba(0,0,0,.09);
+  border: solid 1px #cbc9c9;
+  margin-left: -5px;
+  margin-top: 13px;
+  padding-left: 10px;
+}
+
+input[type=password]{
+  margin-bottom: 25px;
+}
+
+#icon {
+  display: inline-block;
+  width: 50px;
+  background-color: rgb(219, 203, 253);
+  padding: 8px 0px 8px 15px;
+  margin-left: 15px;
+  -webkit-border-radius: 4px 0px 0px 4px;
+  -moz-border-radius: 4px 0px 0px 4px;
+  border-radius: 4px 0px 0px 4px;
+  color: white;
+  -webkit-box-shadow: 1px 2px 5px rgba(0,0,0,.09);
+  -moz-box-shadow: 1px 2px 5px rgba(0,0,0,.09);
+  box-shadow: 1px 2px 5px rgba(0,0,0,.09);
+  border: solid 0px #cbc9c9;
+}
+
+.gender {
+  margin-left: 30px;
+  margin-bottom: 30px;
+}
+
+.accounttype{
+  margin-left: 8px;
+  margin-top: 20px;
+}
+
+a.button {
+  font-size: 14px;
+  font-weight: 600;
+  color: white;
+  padding: 6px 25px 0px 20px;
+  margin: 10px 8px 20px 0px;
+  display: inline-block;
+  float: right;
+  text-decoration: none;
+  width: 90px; height: 27px;
+  -webkit-border-radius: 5px;
+  -moz-border-radius: 5px;
+  border-radius: 5px;
+  background-color: rgb(219, 203, 253);
+  -webkit-box-shadow: 0 3px rgb(219, 203, 253);
+  -moz-box-shadow: 0 3px rgb(219, 203, 253);
+  box-shadow: 0 3px rgb(219, 203, 253);
+  transition: all 0.1s linear 0s;
+  top: 0px;
+  position: relative;
+}
+
+a.button:hover {
+  top: 3px;
+  background-color:#c2a8f7;
+  -webkit-box-shadow: none;
+  -moz-box-shadow: none;
+  box-shadow: none;
+
+}

src/app/profile-edit/profile-edit.component.html

@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Twitter Clone - Final</title>
+  <link rel="stylesheet" href="profile-edit.component.css" />
+  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
+  <link
+    rel="stylesheet"
+    href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
+    integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w=="
+    crossorigin="anonymous"
+  />
+  <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600' rel='stylesheet' type='text/css'>
+  <link href="//netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome.css" rel="stylesheet">
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<div class="split left">
+  <div class="centered">
+
+  </div>
+</div>
+
+<div class="split right">
+  <div class="centered">
+    <div class="testbox">
+      <h1>Edit Profile</h1>
+      <form #gfg = "ngForm">
+
+        <label id="icon" for="name"><i class="icon-envelope"></i></label>
+        <input type="text" name = 'email' ngModel id="name" placeholder="Email"/>
+        <label id="icon" for="name"><i class="icon-user"></i></label>
+        <input type="text" name = 'username' ngModel placeholder="Username"/>
+        <label id="icon" for="name"><i class="icon-user"></i></label>
+        <input type="text" name = 'firstName' ngModel placeholder="First Name">
+        <label id="icon" for="name"><i class="icon-user"></i></label>
+        <input type="text" name = 'lastName' ngModel placeholder="Last Name">
+        <label id="icon" for="name"><i class="icon-shield"></i></label>
+        <input type="password" name = 'password' ngModel placeholder="Password">
+        <label id="icon" for="name"><i class="icon-user"></i></label>
+        <input type="text" name = 'profilePic' ngModel placeholder="Profile Picture URL">
+        <p>Click <a routerLink="/profile">here</a> to return back to your profile page.</p>
+        <a routerLink="/edit" class="button" type="submit" (click)="updateSqueaker(gfg)">Submit</a>
+      </form>
+    </div>
+  </div>
+</div>
+<!-- partial -->
+<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script><script  src="./script.js"></script>
+
+</body>
+</html>

src/app/profile-edit/profile-edit.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ProfileEditComponent } from './profile-edit.component';
+
+describe('ProfileEditComponent', () => {
+  let component: ProfileEditComponent;
+  let fixture: ComponentFixture<ProfileEditComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ ProfileEditComponent ]
+    })
+      .compileComponents();
+
+    fixture = TestBed.createComponent(ProfileEditComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/profile-edit/profile-edit.component.ts

@@ -0,0 +1,38 @@
+import { Component, OnInit } from '@angular/core';
+import {SqueakerService} from "../services/squeaker.service";
+import {NgForm} from "@angular/forms";
+import {SqueakerDTO} from "../models/squeakerDTO";
+import {Squeaker} from "../models/squeaker";
+import {DataService} from "../services/data.service";
+
+@Component({
+  selector: 'app-profile-edit',
+  templateUrl: './profile-edit.component.html',
+  styleUrls: ['./profile-edit.component.css']
+})
+export class ProfileEditComponent implements OnInit {
+  // @ts-ignore
+  currentSqueaker: Squeaker;
+  id=0;
+
+
+
+  constructor(private squeakerService: SqueakerService, private dataService: DataService) { }
+
+  ngOnInit(): void {
+    this.dataService.currentSqueakerId.subscribe(id => {
+      this.squeakerService.findSqueakerById(id).subscribe((data: Squeaker)=>{
+        this.currentSqueaker=data;
+      })
+    })
+  }
+
+
+  updateSqueaker(sendForm: NgForm): void {
+    const squeakerDTO = new SqueakerDTO(sendForm.value.username, sendForm.value.password, sendForm.value.firstName, sendForm.value.lastName, sendForm.value.email, sendForm.value.profilePic)
+    this.squeakerService.update(this.currentSqueaker.id, squeakerDTO).subscribe();
+    console.log(squeakerDTO);
+    sendForm.control.reset()
+  }
+
+}