Modularize the profile component

src/app/app-routing.module.ts

@@ -1,6 +1,6 @@
 import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
-import { ProfileComponent } from './pages/profile/profile.component';
+import { ProfileComponent } from './user-profile/pages/profile/profile.component';
 import { PrivacyPolicyComponent } from './privacy-policy/pages/privacy-policy/privacy-policy.component';
 import { ImprintComponent } from './imprint/pages/imprint/imprint.component';
 
@@ -17,10 +17,10 @@ const routes: Routes = [
   //   path: 'delivery',
   //   component: DeliveryComponent,
   // },
-  {
-    path: 'profile',
-    component: ProfileComponent, // TODO Place into module.
-  },
+  // {
+  //   path: 'profile',
+  //   component: ProfileComponent,
+  // },
   // {
   //   path: 'about-us',
   //   component: ImprintComponent,

src/app/privacy-policy/pages/privacy-policy/privacy-policy.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component } from '@angular/core';
 
 @Component({
   selector: 'app-privacy-policy',

src/app/pages/profile/profile.component.html → src/app/user-profile/pages/profile/profile.component.html

@@ -1,4 +1,4 @@
-<section class="content-area" role="main">
+<!-- <section class="content-area" role="main">
   <h1>{{ "Profile.Title" | translate }}</h1>
   <hr />
   <div class="row mb-2">
@@ -53,4 +53,10 @@ <h2>{{ "Profile.CreateAnAccount" | translate }}</h2>
       </div>
     </div>
   </div>
-</section>
+</section> -->
+<h3>OK</h3>
+<!-- <vcl-icogram>GOAT</vcl-icogram> -->
+
+<!-- <vcl-icogram>
+  {{ "Profile.Continue" | translate }}
+</vcl-icogram> -->

src/app/pages/profile/profile.component.ts → src/app/user-profile/pages/profile/profile.component.ts

@@ -1,21 +1,18 @@
-import { Component, OnInit } from '@angular/core';
-import { CartService } from 'src/app/services/cart.service';
+import { Component } from '@angular/core';
 import { ScreenService } from 'src/app/services/screen.service';
 
 @Component({
-  selector: 'profile',
+  selector: 'app-profile',
   templateUrl: './profile.component.html',
   styleUrls: ['./profile.component.scss'],
 })
-export class ProfileComponent implements OnInit {
+export class ProfileComponent {
   public password: string = '';
   public email: string = '';
   public remember: boolean = false;
 
   constructor(private displayService: ScreenService) {}
 
-  ngOnInit(): void {}
-
   screenWidth() {
     return this.displayService.getScreenSize();
   }

src/app/user-profile/user-profile.module.ts

@@ -0,0 +1,38 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ProfileComponent } from './pages/profile/profile.component';
+import { RouterModule, Routes } from '@angular/router';
+import {
+  VCLFormControlGroupModule,
+  VCLInputModule,
+  VCLPasswordInputModule,
+  VCLRadioButtonModule,
+} from '@vcl/ng-vcl';
+import { SharedModule } from '../shared/shared.module';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: ProfileComponent,
+  },
+];
+
+const vclModules = [
+  VCLInputModule,
+  VCLPasswordInputModule,
+  VCLRadioButtonModule,
+  VCLFormControlGroupModule,
+  // VCLIconModule,
+  // VCLIcogramModule,
+];
+
+@NgModule({
+  declarations: [ProfileComponent],
+  imports: [
+    CommonModule,
+    ...vclModules,
+    SharedModule,
+    RouterModule.forChild(routes),
+  ],
+})
+export class UserProfileModule {}