angular+C# end of sesstion

Angular/CSharp_Angular/DatingApp/API/Program.cs

@@ -10,13 +10,12 @@
 {
     opt.UseSqlite(builder.Configuration.GetConnectionString("DefaultConnection"));
 });
+builder.Services.AddCors();
 
 var app = builder.Build();
 
 // Configure the HTTP request pipeline.
-app.UseHttpsRedirection();
-
-app.UseAuthorization();
+app.UseCors(builder => builder.AllowAnyHeader().AllowAnyMethod().WithOrigins("https://localhost:4200"));
 
 app.MapControllers();
 

Angular/CSharp_Angular/DatingApp/client/.editorconfig

@@ -4,7 +4,7 @@ root = true
 [*]
 charset = utf-8
 indent_style = space
-indent_size = 2
+indent_size = 4
 insert_final_newline = true
 trim_trailing_whitespace = true
 

Angular/CSharp_Angular/DatingApp/client/angular.json

@@ -25,6 +25,9 @@
               "src/assets"
             ],
             "styles": [
+              "./node_modules/ngx-bootstrap/datepicker/bs-datepicker.css",
+              "./node_modules/bootstrap/dist/css/bootstrap.min.css",
+              "./node_modules/font-awesome/css/font-awesome.min.css",
               "src/styles.css"
             ],
             "scripts": []
@@ -57,6 +60,11 @@
           "defaultConfiguration": "production"
         },
         "serve": {
+          "options": {
+            "ssl": true,
+            "sslCert": "./ssl/localhost.pem",
+            "sslKey": "./ssl/localhost-key.pem"
+          },
           "builder": "@angular-devkit/build-angular:dev-server",
           "configurations": {
             "production": {
@@ -98,4 +106,4 @@
   "cli": {
     "analytics": false
   }
-}
+}

Angular/CSharp_Angular/DatingApp/client/package.json

@@ -18,6 +18,9 @@
     "@angular/platform-browser": "^16.2.0",
     "@angular/platform-browser-dynamic": "^16.2.0",
     "@angular/router": "^16.2.0",
+    "bootstrap": "^5.2.3",
+    "font-awesome": "^4.7.0",
+    "ngx-bootstrap": "^11.0.2",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",
     "zone.js": "~0.13.0"

Angular/CSharp_Angular/DatingApp/client/src/app/app.component.html

@@ -1 +1,7 @@
-<h1>{{title}}</h1>
+<h1>{{title}}</h1>
+
+<ul>
+    <li *ngFor="let user of users">
+        {{user.id}} - {{user.userName}}
+    </li>
+</ul>

Angular/CSharp_Angular/DatingApp/client/src/app/app.component.ts

@@ -1,10 +1,23 @@
-import { Component } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { Component, OnInit } from '@angular/core';
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
 })
-export class AppComponent {
-  title = 'Hello';
+export class AppComponent implements OnInit {
+  title = 'Dating App';
+  users: any;
+
+  constructor(private http: HttpClient) { }
+
+  ngOnInit(): void {
+    this.http.get('https://localhost:5001/api/users').subscribe({
+      next: response => this.users = response,
+      error: error => console.log(error),
+      complete: () => console.log('Resuest has completed')
+
+    })
+  }
 }

Angular/CSharp_Angular/DatingApp/client/src/app/app.module.ts

@@ -4,14 +4,18 @@ import { HttpClientModule } from '@angular/common/http';
 
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
-import { FormsModule } from '@angular/forms';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 
 @NgModule({
-  declarations: [AppComponent],
+  declarations: [
+    AppComponent
+  ],
   imports: [
-    BrowserModule,
+    BrowserModule, 
     AppRoutingModule,
-    HttpClientModule],
+    HttpClientModule,
+    BrowserAnimationsModule
+  ],
   providers: [],
   bootstrap: [AppComponent],
 })

Angular/CSharp_Angular/DatingApp/client/ssl/localhost-key.pem

@@ -0,0 +1,28 @@
+-----BEGIN PRIVATE KEY-----
+MIIEvgIBADANBgkqhkiG9w0BAQEFAASCBKgwggSkAgEAAoIBAQDBy/AW+pQVbBgl
+l6oF6XSIYF4MCfHmVMsv07rsUogIJ0a5T+z4IGgIezwOEp81OV04hS+TsCWJNMwa
+2RJTBabatKlFzFNLy/xYxnjw2rTB97ZNleuhtc2zB6N5fSpUGX2/Cp3YHWyiZuzb
+A0yYpOEjDuY39GxTC0YjNCKP9AikLw3sNF94gg5DuI2+hqk/sdLqSIg7XRvmNfgZ
+GKXrgS7sbMsFDoD95FkTBxXRyFwEwQnUkqiyGoSLocYx9UP+SHiBbA15eNZdftrT
+LRDFp7tuK2qlSXiRtskSPi+Z7KOYXT6L4AZt88cXE8mnrY35Nr4Hf3nTlv+SegZ6
+Lpt28CwTAgMBAAECggEAUDjUnR6DWE7TvBQJLMNUGvQRWlhvi1JEffreoN8VMpLX
+ovRj+t6nUgN5e7XXs9eYMEJpzHAZSa/SYbbD8Bwh0t0ASUVoobLCNhmKjOFr+/NH
+wtwxm1I/4UFjOXJHqGKY/BEv//tGMf/7QjoeZf2yuKl9QWJryQCcuwvk1sRFI3ki
+Ouls5jgzTiOkctp4ycwfxapDbsw8GVmTPKBT6EozlWLxkGooA8ER9pgr2HAMh2fr
+RcDYc4HcwjWV4WTgmtRCUMQNXn+Ei4L6r9ChQ9V33xdc/AzLPXCtmrCYEn8l3HHy
+NmP3+r4S3h6k4avFw8qofTLmUo6kI53nu0uheTBS+QKBgQDRGfL+P9eR824MyHjg
+tuuQIXY7FgGnVTb6cNZXotPGKEk84noH7meYgiKCWuFvzHmLIXTHBdLaIhCXauyG
+PxNQK+Q9AQ92iIj5okBJaX+tgE5RJ+srME+bX3EQsYC+/es+QBNcKm3r3wTTXgUd
+R5iiyDhZak8G3mWDSh++uHpMpwKBgQDtQzsujR7qlYuUvp2imPCYu6+JZ/s5VB/8
+AQWYrx4s5WgaBrnzQNRVhc3Ica9JOuhl4CfQ7fHi5eEDh9mukQb3DC2NznQo5JUK
+nmv/3sSlDqS8OdWMGhyhbEWRs2fcOkV5WjncDYvS5O2roiff5+a1GXs9KN5fJHxu
+pI5vYyV2tQKBgDoVqD9iQqKjaXWZlqJtjaAa+3nMUidGb6BACfqMG6HW/QkxrE5Z
+tmNR+v4U+ryQo063u3Wxs3GutscpB4z/JoFFwAAGNGJr6QjXPl5mNPZgRuEaYqQ7
+plF1wLWvaSEk7dz79aTLkH9OE0wXuPn6Mnc9gRGti0hQLQi8ZXcYTbjPAoGBAKhn
+oPkgt4IAFWvFhHPlpFh0V1rrUDjXyj//pa5DFeL+Dc7zWUcci9oMOAz/DFCpHE07
+NmeojJjlW7o60bqDO/NcVHUjxfVEkblQyw15XBBf/XOQhU+FNS8qf5K0SZLaVXeW
+IB1eDBHr5fp+BVl665k9dejqOjRD3IJYELVlJTFFAoGBAJ6cfYKN3J77h59e3vwM
+urPnIVUHJSaqsbFQ+hK6QjxWaSWJXZULzDrI7USda/ktrSy+VkVWl5vhBXpmKCZv
+k+KOPM/cHw0m13skxUa47L41pobo1KRLiAV8mjro0TYf/SDGyzbMgB3Xsac0JkHe
+/BIb806nvIQ34Pl6iWcNYKX2
+-----END PRIVATE KEY-----

Angular/CSharp_Angular/DatingApp/client/ssl/localhost.pem

@@ -0,0 +1,26 @@
+-----BEGIN CERTIFICATE-----
+MIIEVjCCAr6gAwIBAgIRANE/xeWxImrSkYL2CN+TLfcwDQYJKoZIhvcNAQELBQAw
+gY8xHjAcBgNVBAoTFW1rY2VydCBkZXZlbG9wbWVudCBDQTEyMDAGA1UECwwpTU9I
+QU1NRURcbWRoYXlAbW9oYW1tZWQgKE1vaGFtbWVkIEhheWF0aCkxOTA3BgNVBAMM
+MG1rY2VydCBNT0hBTU1FRFxtZGhheUBtb2hhbW1lZCAoTW9oYW1tZWQgSGF5YXRo
+KTAeFw0yMzA5MDkxODMwMjRaFw0yNTEyMDkxODMwMjRaMF0xJzAlBgNVBAoTHm1r
+Y2VydCBkZXZlbG9wbWVudCBjZXJ0aWZpY2F0ZTEyMDAGA1UECwwpTU9IQU1NRURc
+bWRoYXlAbW9oYW1tZWQgKE1vaGFtbWVkIEhheWF0aCkwggEiMA0GCSqGSIb3DQEB
+AQUAA4IBDwAwggEKAoIBAQDBy/AW+pQVbBgll6oF6XSIYF4MCfHmVMsv07rsUogI
+J0a5T+z4IGgIezwOEp81OV04hS+TsCWJNMwa2RJTBabatKlFzFNLy/xYxnjw2rTB
+97ZNleuhtc2zB6N5fSpUGX2/Cp3YHWyiZuzbA0yYpOEjDuY39GxTC0YjNCKP9Aik
+Lw3sNF94gg5DuI2+hqk/sdLqSIg7XRvmNfgZGKXrgS7sbMsFDoD95FkTBxXRyFwE
+wQnUkqiyGoSLocYx9UP+SHiBbA15eNZdftrTLRDFp7tuK2qlSXiRtskSPi+Z7KOY
+XT6L4AZt88cXE8mnrY35Nr4Hf3nTlv+SegZ6Lpt28CwTAgMBAAGjXjBcMA4GA1Ud
+DwEB/wQEAwIFoDATBgNVHSUEDDAKBggrBgEFBQcDATAfBgNVHSMEGDAWgBR3vrck
+j5l5s0fhaECAHId9KWlqTzAUBgNVHREEDTALgglsb2NhbGhvc3QwDQYJKoZIhvcN
+AQELBQADggGBAAPddHRXlu/VbYsQXxeHyacAPbpByLPD9H/XgLXdnaCiIIxdUXmj
+c9iFiHHHvHQ0uQQkJpGH6W/wjeXViu4otjhzoKj1Xp2wsLvoudd/o8uJ6xKLu/fw
+Je0SEFtyKaY7HsyFUzpUKdev2/opMx2teIwxMUBy+iPVKyZOlYwKWhUa/Phj+3y0
+4kX0YyzMynvuqc8iDauX/BzkkmhVUZESa6idxnW/G1zTYZyBpWLTADdDd70FI4Sa
+TnO4qBBz+XBUYoomVJvsaqhkHelNP8LxD43GjnfQtMIRWGI6FudFtDawNKp1NOso
+lzVfwqecmEsgr7FoK6uBMkwgH1JlNoWglZUdv23HZhq1MFI6UXGd9xJxrTSLINrE
+p7z1pxAtT86G0Y0M1WsvDzUJVCDhYMnVm3uHMpYfTVQbvX1Wlt+6IqcQl6a8R851
+L3O3hgl/Y/L88GebO1CBte7E74+WDaeCQUUIrdjFgHSAqGHXpgcl3WB8He9i05xL
+q+vM/Qg2///Pyg==
+-----END CERTIFICATE-----

Angular/References.txt

@@ -44,11 +44,18 @@ dotnet ef database update
 **********Angualr Commands********************
 npm install -g @angular/cli@16
 ng new client					-> creat new angular application
+ng add ngx-bootstrap			-> angulat bootstrap
+npm install font-awesome		-> also add to angular.json file "./node_module/font-awesome/css/font-awesome.min.css",
 
 **********Other Commands********************
 dotnet new list				-> to get all the list of templates
 dotnet new gitignore
 dotnet new globaljson
 dotnet tool list -g
 
+**********installing the ssl certificate
+Set-ExecutionPolicy Bypass -Scope Process -Force; [System.Net.ServicePointManager]::SecurityProtocol = [System.Net.ServicePointManager]::SecurityProtocol -bor 3072; iex ((New-Object System.Net.WebClient).DownloadString('https://community.chocolatey.org/install.ps1'))
+choco install mkcert
+mkcert -install
+