created setting navigation component

back/frankme/requests.rest

@@ -34,7 +34,7 @@ Content-Type: application/json
 ###2fa
 POST http://localhost:3000/authentication/2fa/generate
 Content-Type: application/json
-Authorization: Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOjEsImVtYWlsIjoidGVzdDFAZ21haWwuY29tIiwiaWF0IjoxNzA5NzYzNzM4LCJleHAiOjE3MDk4NTAxMzgsImF1ZCI6ImxvY2FsaG9zdDozMDAwIiwiaXNzIjoibG9jYWxob3N0OjMwMDAifQ.q99nfMEeBBUetFMR5NrZ6zhVSHfjveuJGt-JgULH-RM
+Authorization: Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOjMsImVtYWlsIjoiYWZsaS5tb2hhbWVkZ2hhaXRoQHRlay11cC5kZSIsImlhdCI6MTcxNTE5ODI0NSwiZXhwIjoxNzE1Mjg0NjQ1LCJhdWQiOiJsb2NhbGhvc3Q6MzAwMCIsImlzcyI6ImxvY2FsaG9zdDozMDAwIn0.hq400pw1gA2ji4VccSTHTcBRuNQab5BTQdFb1caobzo
 
 
 ###refresh token

front/src/app/core/interceptors/auth.interceptor.ts

@@ -16,7 +16,7 @@ export class AuthInterceptor implements HttpInterceptor {
     next: HttpHandler
   ): Observable<HttpEvent<any>> {
     // Get the token from wherever you store it (e.g., localStorage, a service)
-    const token = sessionStorage.getItem('auth-token');
+    const token = localStorage.getItem('auth-token');
     // Clone the request and add the token to the header
     if (token) {
       request = request.clone({

front/src/app/core/services/TokenStorage.service.ts

@@ -10,24 +10,24 @@ export class TokenStorageService {
   constructor() {}
 
   signOut(): void {
-    window.sessionStorage.clear();
+    window.localStorage.clear();
   }
 
   public saveToken(token: string): void {
-    window.sessionStorage.removeItem(TOKEN_KEY);
-    window.sessionStorage.setItem(TOKEN_KEY, token);
+    window.localStorage.removeItem(TOKEN_KEY);
+    window.localStorage.setItem(TOKEN_KEY, token);
   }
 
   public getToken(): string | null {
-    return window.sessionStorage.getItem(TOKEN_KEY);
+    return window.localStorage.getItem(TOKEN_KEY);
   }
 
   public saveRefreshToken(token: string): void {
-    window.sessionStorage.removeItem(REFRESHTOKEN_KEY);
-    window.sessionStorage.setItem(REFRESHTOKEN_KEY, token);
+    window.localStorage.removeItem(REFRESHTOKEN_KEY);
+    window.localStorage.setItem(REFRESHTOKEN_KEY, token);
   }
 
   public getRefreshToken(): string | null {
-    return window.sessionStorage.getItem(REFRESHTOKEN_KEY);
+    return window.localStorage.getItem(REFRESHTOKEN_KEY);
   }
 }

front/src/app/modules/seller/setting/edit-profile/edit-profile.component.html

@@ -0,0 +1 @@
+<p>edit-profile works!</p>

front/src/app/modules/seller/setting/edit-profile/edit-profile.component.spec.ts

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

front/src/app/modules/seller/setting/edit-profile/edit-profile.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-edit-profile',
+  templateUrl: './edit-profile.component.html',
+  styleUrl: './edit-profile.component.css'
+})
+export class EditProfileComponent {
+
+}

front/src/app/modules/seller/setting/security/security.component.html

@@ -0,0 +1 @@
+<p>security works!</p>

front/src/app/modules/seller/setting/security/security.component.spec.ts

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

front/src/app/modules/seller/setting/security/security.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-security',
+  templateUrl: './security.component.html',
+  styleUrl: './security.component.css'
+})
+export class SecurityComponent {
+
+}

front/src/app/modules/seller/setting/setting-nav/setting-nav.component.css

@@ -0,0 +1,32 @@
+.col {
+  padding-top: 17px;
+  padding-bottom: 17px;
+  padding-left: 37px;
+  height: 59px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  border-bottom: 1px solid #999;
+  cursor: pointer;
+}
+
+a {
+  color: #1f2c73;
+  font-family: Poppins;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+  text-decoration: none;
+}
+.col:last-child {
+  border-bottom: none;
+}
+
+.col:hover {
+  background: #e0e6ec;
+}
+
+.active {
+  background: #e0e6ec;
+}

front/src/app/modules/seller/setting/setting-nav/setting-nav.component.html

@@ -0,0 +1,119 @@
+<div class="row">
+  <div class="col" routerLink="edit-profile" routerLinkActive="active">
+    <div class="icon">
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        x="0px"
+        y="0px"
+        width="40"
+        height="40"
+        viewBox="0,0,300,150"
+        style="fill: #0077b8"
+      >
+        <g
+          fill="#0077b8"
+          fill-rule="nonzero"
+          stroke="none"
+          stroke-width="1"
+          stroke-linecap="butt"
+          stroke-linejoin="miter"
+          stroke-miterlimit="10"
+          stroke-dasharray=""
+          stroke-dashoffset="0"
+          font-family="none"
+          font-weight="none"
+          font-size="none"
+          text-anchor="none"
+          style="mix-blend-mode: normal"
+        >
+          <g transform="scale(4,4)">
+            <path
+              d="M32,6c-14.336,0 -26,11.663 -26,26c0,14.337 11.664,26 26,26c14.336,0 26,-11.663 26,-26c0,-14.337 -11.664,-26 -26,-26zM32,10c12.131,0 22,9.869 22,22c0,7.05764 -3.3445,13.34463 -8.52734,17.37305l-5.60547,-2.77539l-0.22266,-3.23437c1.21045,-1.35521 2.3083,-2.94748 3.04492,-4.94727c0.696,-0.46021 2.31055,-1.67689 2.31055,-4.32031c0,-1.55737 -0.5954,-2.50923 -1,-3.05078v-2.54492v-1.64258c0,-2.99132 -0.85352,-7.68576 -3.4082,-7.71289c-0.00923,-0.00968 -0.02003,-0.0177 -0.0293,-0.02734l-1.5625,-5.11719c-13,0 -19,3 -19,13v1.5v2.54492c-0.4046,0.54155 -1,1.49341 -1,3.05078c0,2.64342 1.61455,3.86009 2.31055,4.32031c0.73662,1.99979 1.83447,3.59205 3.04492,4.94727l-0.22266,3.23438l-5.60547,2.77539c-5.18284,-4.02842 -8.52734,-10.3154 -8.52734,-17.37305c0,-12.131 9.869,-22 22,-22zM25,23c0,0 3.143,1 7,1c3.857,0 6,-1 6,-1c3,2.571 3,9 3,9v0.08203l0.39258,0.42969c0,0 0.60742,0.75065 0.60742,1.58398c0,1.5855 -1.16602,2.06055 -1.16602,2.06055l-0.56641,0.2793l-0.19336,0.60156c-0.82749,2.54774 -2.58575,4.6047 -4.2168,6.00586c-0.81552,0.70058 -1.5964,1.23675 -2.17383,1.58203c-0.28872,0.17264 -0.52909,0.298 -0.67773,0.36719c-0.01015,0.0047 -0.0083,0.00361 -0.01758,0.00781h-0.98828h-0.98828c-0.0093,-0.0042 -0.0074,-0.00311 -0.01758,-0.00781c-0.14865,-0.0692 -0.38902,-0.19455 -0.67773,-0.36719c-0.57743,-0.34528 -1.35831,-0.88145 -2.17383,-1.58203c-1.63104,-1.40116 -3.38931,-3.45812 -4.2168,-6.00586l-0.19336,-0.60156l-0.56641,-0.2793c0,0 -1.16602,-0.47505 -1.16602,-2.06055c0,-0.83333 0.60742,-1.58398 0.60742,-1.58398l0.39258,-0.42969v-0.08203c0,0 -0.143,-6.857 2,-9zM27.17773,46.03711c0.55507,0.41495 1.15,0.89443 1.59766,1.16211c0.36246,0.21673 0.67882,0.38406 0.95313,0.51172c0.13715,0.06383 0.2625,0.11749 0.40039,0.16602c0.13789,0.04853 0.20703,0.12305 0.64844,0.12305h1.22266h1.22266c0.44141,0 0.51055,-0.07452 0.64844,-0.12305c0.13789,-0.04853 0.26324,-0.10218 0.40039,-0.16602c0.2743,-0.12766 0.59067,-0.29498 0.95313,-0.51172c0.44766,-0.26768 1.04258,-0.74716 1.59766,-1.16211l0.39844,5.78906c-0.96064,0.47596 -2.69819,1.09961 -5.2207,1.09961c-2.52251,0 -4.26006,-0.62365 -5.2207,-1.09961z"
+            ></path>
+          </g>
+        </g>
+      </svg>
+    </div>
+    <div class="text">
+      <a>Edit profile</a>
+    </div>
+  </div>
+  <div class="col" routerLink="security" routerLinkActive="active">
+    <div class="icon">
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        x="0px"
+        y="0px"
+        width="40"
+        height="40"
+        viewBox="0,0,300,150"
+        style="fill: #0077b8"
+      >
+        <g
+          fill="#0077b8"
+          fill-rule="nonzero"
+          stroke="none"
+          stroke-width="1"
+          stroke-linecap="butt"
+          stroke-linejoin="miter"
+          stroke-miterlimit="10"
+          stroke-dasharray=""
+          stroke-dashoffset="0"
+          font-family="none"
+          font-weight="none"
+          font-size="none"
+          text-anchor="none"
+          style="mix-blend-mode: normal"
+        >
+          <g transform="scale(4,4)">
+            <path
+              d="M32,4c-9.36496,0 -17,7.63504 -17,17v10.03516c-3.12417,3.7987 -5,8.66269 -5,13.96484c0,2.44 0.39086,4.7807 1.13086,6.9707l42.03906,-0.95117c0.54,-1.91 0.83008,-3.92953 0.83008,-6.01953c0,-5.30215 -1.87583,-10.16615 -5,-13.96484v-10.03516c0,-9.36496 -7.63504,-17 -17,-17zM32,8c7.20304,0 13,5.79696 13,13v6.25586c-3.6426,-2.67331 -8.13548,-4.25586 -13,-4.25586c-4.86452,0 -9.3574,1.58255 -13,4.25586v-6.25586c0,-7.20304 5.79696,-13 13,-13zM32,33c2.209,0 4,1.791 4,4c0,1.477 -0.809,2.75231 -2,3.44531v2.55469c0,1.105 -0.895,2 -2,2c-1.105,0 -2,-0.895 -2,-2v-2.55469c-1.191,-0.693 -2,-1.96831 -2,-3.44531c0,-2.209 1.791,-4 4,-4zM11.91992,54c0.81,1.81 1.84961,3.49 3.09961,5h33.96094c1.25,-1.51 2.28961,-3.19 3.09961,-5z"
+            ></path>
+          </g>
+        </g>
+      </svg>
+    </div>
+    <div class="text">
+      <a>Security</a>
+    </div>
+  </div>
+  <div class="col" routerLink="payout-methods" routerLinkActive="active">
+    <div class="icon">
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        x="0px"
+        y="0px"
+        width="40"
+        height="40"
+        viewBox="0,0,300,150"
+        style="fill: #0077b8"
+      >
+        <g
+          fill="#0077b8"
+          fill-rule="nonzero"
+          stroke="none"
+          stroke-width="1"
+          stroke-linecap="butt"
+          stroke-linejoin="miter"
+          stroke-miterlimit="10"
+          stroke-dasharray=""
+          stroke-dashoffset="0"
+          font-family="none"
+          font-weight="none"
+          font-size="none"
+          text-anchor="none"
+          style="mix-blend-mode: normal"
+        >
+          <g transform="scale(4,4)">
+            <path
+              d="M43.82617,3.63281c-0.51745,0.04695 -1.03448,0.19678 -1.52148,0.45703l-33.51953,17.91016h12.73828l27.13867,-14.50195l-0.94336,-1.76562c-0.78075,-1.461 -2.34022,-2.24047 -3.89258,-2.09961zM51.39063,12.60547l-17.58203,9.39453h15.19141c3.86,0 7,3.14 7,7v4.05273l1.38672,-0.74023c1.948,-1.041 2.68263,-3.46411 1.64063,-5.41211zM9,25c-2.209,0 -4,1.791 -4,4v24c0,2.209 1.791,4 4,4h40c2.209,0 4,-1.791 4,-4v-24c0,-2.209 -1.791,-4 -4,-4z"
+            ></path>
+          </g>
+        </g>
+      </svg>
+    </div>
+    <div class="text">
+      <a>Payout methods</a>
+    </div>
+  </div>
+</div>

front/src/app/modules/seller/setting/setting-nav/setting-nav.component.spec.ts

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

front/src/app/modules/seller/setting/setting-nav/setting-nav.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-setting-nav',
+  templateUrl: './setting-nav.component.html',
+  styleUrl: './setting-nav.component.css'
+})
+export class SettingNavComponent {
+
+}

front/src/app/modules/seller/setting/setting-routing.module.ts

@@ -0,0 +1,28 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+import { SettingComponent } from './setting.component';
+import { EditProfileComponent } from './edit-profile/edit-profile.component';
+import { SecurityComponent } from './security/security.component';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: SettingComponent,
+    children: [
+      {
+        path: 'edit-profile',
+        component: EditProfileComponent,
+      },
+      {
+        path: 'security',
+        component: SecurityComponent,
+      },
+    ],
+  },
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class SettingRoutingModule {}

front/src/app/modules/seller/setting/setting.component.css

@@ -0,0 +1,23 @@
+.container {
+  width: 100%;
+  height: auto;
+  flex-shrink: 0;
+  background: #fff;
+  box-shadow: 1px 1px 10px 0px rgba(0, 0, 0, 0.25);
+}
+
+.row {
+  display: flex;
+}
+
+.cl1 {
+  width: 21.6%;
+}
+
+.cl2 {
+  width: calc(100% - 21.6%);
+}
+
+.col {
+  border-right: 1px solid #999;
+}

front/src/app/modules/seller/setting/setting.component.html

@@ -0,0 +1,10 @@
+<div class="container">
+  <div class="row">
+    <div class="col cl1">
+      <app-setting-nav></app-setting-nav>
+    </div>
+    <div class="col cl2">
+      <router-outlet></router-outlet>
+    </div>
+  </div>
+</div>

front/src/app/modules/seller/setting/setting.component.spec.ts

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