RIFFMASTER: FRONTEND: connect login and register (basic)

Backend/Spring/.idea/workspace.xml

@@ -11,6 +11,14 @@
   <component name="ChangeListManager">
     <list default="true" id="8315de53-8c15-472c-a710-45938463dc02" name="Changes" comment="RIFFMASTER: add frontend files">
       <change beforePath="$PROJECT_DIR$/../../Frontend/RiffMasterFront/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/../../Frontend/RiffMasterFront/.idea/workspace.xml" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/../../Frontend/RiffMasterFront/node_modules/.package-lock.json" beforeDir="false" afterPath="$PROJECT_DIR$/../../Frontend/RiffMasterFront/node_modules/.package-lock.json" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/../../Frontend/RiffMasterFront/package-lock.json" beforeDir="false" afterPath="$PROJECT_DIR$/../../Frontend/RiffMasterFront/package-lock.json" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/../../Frontend/RiffMasterFront/package.json" beforeDir="false" afterPath="$PROJECT_DIR$/../../Frontend/RiffMasterFront/package.json" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/../../Frontend/RiffMasterFront/src/app/Services/auth.service.ts" beforeDir="false" afterPath="$PROJECT_DIR$/../../Frontend/RiffMasterFront/src/app/Services/auth.service.ts" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/../../Frontend/RiffMasterFront/src/app/login-page/login-page.component.html" beforeDir="false" afterPath="$PROJECT_DIR$/../../Frontend/RiffMasterFront/src/app/login-page/login-page.component.html" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/../../Frontend/RiffMasterFront/src/app/login-page/login-page.component.ts" beforeDir="false" afterPath="$PROJECT_DIR$/../../Frontend/RiffMasterFront/src/app/login-page/login-page.component.ts" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/../../Frontend/RiffMasterFront/src/app/register-page/register-page.component.html" beforeDir="false" afterPath="$PROJECT_DIR$/../../Frontend/RiffMasterFront/src/app/register-page/register-page.component.html" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/../../Frontend/RiffMasterFront/src/app/register-page/register-page.component.ts" beforeDir="false" afterPath="$PROJECT_DIR$/../../Frontend/RiffMasterFront/src/app/register-page/register-page.component.ts" afterDir="false" />
     </list>
     <option name="SHOW_DIALOG" value="false" />
     <option name="HIGHLIGHT_CONFLICTS" value="true" />
@@ -218,7 +226,7 @@
       <workItem from="1686986592460" duration="4445000" />
       <workItem from="1687000973157" duration="670000" />
       <workItem from="1687006511411" duration="604000" />
-      <workItem from="1687011079341" duration="14329000" />
+      <workItem from="1687011079341" duration="17053000" />
     </task>
     <task id="LOCAL-00001" summary="add basic hello world and transfering data to server">
       <created>1679575346987</created>

Frontend/RiffMasterFront/.idea/workspace.xml

@@ -6,11 +6,6 @@
   <component name="ChangeListManager">
     <list default="true" id="d91bc08d-d968-4797-8fb3-ef602a37db2a" name="Changes" comment="RIFFMASTER: add frontend business logic (riff, song)">
       <change beforePath="$PROJECT_DIR$/../../Backend/Spring/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/../../Backend/Spring/.idea/workspace.xml" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/../../Backend/Spring/src/main/java/pl/dmcs/jwoszczyk/controller/AuthController.java" beforeDir="false" afterPath="$PROJECT_DIR$/../../Backend/Spring/src/main/java/pl/dmcs/jwoszczyk/controller/AuthController.java" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/../../Backend/Spring/src/main/java/pl/dmcs/jwoszczyk/controller/SecurityController.java" beforeDir="false" afterPath="$PROJECT_DIR$/../../Backend/Spring/src/main/java/pl/dmcs/jwoszczyk/controller/SecurityController.java" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/../../Backend/Spring/src/main/java/pl/dmcs/jwoszczyk/service/AppUserService.java" beforeDir="false" afterPath="$PROJECT_DIR$/../../Backend/Spring/src/main/java/pl/dmcs/jwoszczyk/service/AppUserService.java" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/../../Backend/Spring/target/Spring-1.0-SNAPSHOT/WEB-INF/classes/pl/dmcs/jwoszczyk/controller/SecurityController.class" beforeDir="false" afterPath="$PROJECT_DIR$/../../Backend/Spring/target/Spring-1.0-SNAPSHOT/WEB-INF/classes/pl/dmcs/jwoszczyk/controller/SecurityController.class" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/../../Backend/Spring/target/classes/pl/dmcs/jwoszczyk/controller/SecurityController.class" beforeDir="false" afterPath="$PROJECT_DIR$/../../Backend/Spring/target/classes/pl/dmcs/jwoszczyk/controller/SecurityController.class" afterDir="false" />
     </list>
     <option name="SHOW_DIALOG" value="false" />
     <option name="HIGHLIGHT_CONFLICTS" value="true" />
@@ -106,7 +101,7 @@
       <workItem from="1686937499471" duration="1137000" />
       <workItem from="1686989529474" duration="3659000" />
       <workItem from="1687006518226" duration="3557000" />
-      <workItem from="1687011087000" duration="1232000" />
+      <workItem from="1687011087000" duration="4350000" />
     </task>
     <task id="LOCAL-00001" summary="RIFFMASTER: add frontend project">
       <created>1685976235580</created>

Frontend/RiffMasterFront/node_modules/.package-lock.json

@@ -7581,6 +7581,11 @@
         "node >= 0.2.0"
       ]
     },
+    "node_modules/jwt-decode": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/jwt-decode/-/jwt-decode-3.1.2.tgz",
+      "integrity": "sha512-UfpWE/VZn0iP50d8cz9NrZLM9lSWhcJ+0Gt/nm4by88UL+J1SiKN8/5dkjMmbEzwL2CAe+67GsegCbIKtbp75A=="
+    },
     "node_modules/karma": {
       "version": "6.4.2",
       "resolved": "https://registry.npmjs.org/karma/-/karma-6.4.2.tgz",

Frontend/RiffMasterFront/node_modules/jwt-decode/CHANGELOG.md

@@ -0,0 +1,25 @@
+# Change log
+
+## Version [3.1.2](https://github.com/auth0/jwt-decode/releases/tag/v3.1.2)
+
+[Full Changelog](https://github.com/auth0/jwt-decode/compare/v3.1.1..v3.1.2)
+
+- Add a generic as return type so the user can specify what's expected, this will still be `unknown` by default
+- Export `JwtHeader`and `JwtPayload` that can be used with the generic return type as-is or extended.
+
+## Version [3.1.0](https://github.com/auth0/jwt-decode/releases/tag/v3.1.0)
+
+[Full Changelog](https://github.com/auth0/jwt-decode/compare/v3.0.0..v3.1.0)
+
+- Add TypeScript type definition
+- Fix CJS default export
+
+## Version [3.0.0](https://github.com/auth0/jwt-decode/releases/tag/v3.0.0)
+
+[Full Changelog](https://github.com/auth0/jwt-decode/compare/v2.0.0..v3.0.0)
+
+- Include an ESM build for native JavaScript imports
+
+**Warning: this version has some potentially breaking changes!**
+
+- If you've previously imported the library as `import * as jwt_decode from 'jwt-decode'`, you'll have to change your import to `import jwt_decode from 'jwt-decode';`.

Frontend/RiffMasterFront/node_modules/jwt-decode/LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+ 
+Copyright (c) 2015 Auth0, Inc. <support@auth0.com> (http://auth0.com)
+ 
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+ 
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+ 
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

Frontend/RiffMasterFront/node_modules/jwt-decode/README.md

@@ -0,0 +1,89 @@
+## **jwt-decode** is a small browser library that helps decoding JWTs token which are Base64Url encoded.
+
+**IMPORTANT:** This library doesn't validate the token, any well formed JWT can be decoded. You should validate the token in your server-side logic by using something like [express-jwt](https://github.com/auth0/express-jwt), [koa-jwt](https://github.com/stiang/koa-jwt), [Owin Bearer JWT](https://github.com/michaelnoonan/Auth0-Owin-JwtBearerAuthentication), etc.
+
+---
+
+**Warning: When upgrading from version `2` to `3`, there's a potentially breaking change**
+
+If you've previously imported the library as `import * as jwt_decode from 'jwt-decode'`, you'll have to change your import to `import jwt_decode from 'jwt-decode';`.
+
+---
+
+## Installation
+[![FOSSA Status](https://app.fossa.com/api/projects/git%2Bgithub.com%2Fauth0%2Fjwt-decode.svg?type=shield)](https://app.fossa.com/projects/git%2Bgithub.com%2Fauth0%2Fjwt-decode?ref=badge_shield)
+
+
+Install with NPM or Yarn.
+
+Run `npm install jwt-decode` or `yarn add jwt-decode` to install the library.
+
+## Usage
+
+```javascript
+import jwt_decode from "jwt-decode";
+
+var token = "eyJ0eXAiO.../// jwt token";
+var decoded = jwt_decode(token);
+
+console.log(decoded);
+
+/* prints:
+ * { foo: "bar",
+ *   exp: 1393286893,
+ *   iat: 1393268893  }
+ */
+
+// decode header by passing in options (useful for when you need `kid` to verify a JWT):
+var decodedHeader = jwt_decode(token, { header: true });
+console.log(decodedHeader);
+
+/* prints:
+ * { typ: "JWT",
+ *   alg: "HS256" }
+ */
+```
+
+**Note:** A falsy or malformed token will throw an `InvalidTokenError` error.
+
+## Use as a CommonJS package
+
+```javascript
+const jwt_decode = require('jwt-decode');
+...
+```
+
+## Include with a script tag
+
+Copy the file `jwt-decode.js` from the `build/` folder to your project somewhere, then include like so:
+
+```html
+<script src="jwt-decode.js"></script>
+```
+
+## Older versions
+
+If you want to use the library trough Bower, an HTML import, use [version `v2.2.0`](https://github.com/auth0/jwt-decode/tree/v2.2.0). It has the same functionality.
+
+## Develop
+
+Run `npm run dev`, this will fire up a browser and watch the `/lib` folder.
+
+## Issue Reporting
+
+If you have found a bug or if you have a feature request, please report them at this repository issues section. Please do not report security vulnerabilities on the public GitHub issue tracker. The [Responsible Disclosure Program](https://auth0.com/whitehat) details the procedure for disclosing security issues.
+
+## Author
+
+[Auth0](https://auth0.com)
+
+## License
+
+This project is licensed under the MIT license. See the [LICENSE](LICENSE) file for more info.
+
+[browserify]: http://browserify.org
+[webpack]: http://webpack.github.io/
+
+
+[![FOSSA Status](https://app.fossa.com/api/projects/git%2Bgithub.com%2Fauth0%2Fjwt-decode.svg?type=large)](https://app.fossa.com/projects/git%2Bgithub.com%2Fauth0%2Fjwt-decode?ref=badge_large)
+=======

Frontend/RiffMasterFront/node_modules/jwt-decode/build/jwt-decode.cjs.js

@@ -0,0 +1,2 @@
+"use strict";function e(e){this.message=e}e.prototype=new Error,e.prototype.name="InvalidCharacterError";var r="undefined"!=typeof window&&window.atob&&window.atob.bind(window)||function(r){var t=String(r).replace(/=+$/,"");if(t.length%4==1)throw new e("'atob' failed: The string to be decoded is not correctly encoded.");for(var n,o,a=0,i=0,c="";o=t.charAt(i++);~o&&(n=a%4?64*n+o:o,a++%4)?c+=String.fromCharCode(255&n>>(-2*a&6)):0)o="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=".indexOf(o);return c};function t(e){var t=e.replace(/-/g,"+").replace(/_/g,"/");switch(t.length%4){case 0:break;case 2:t+="==";break;case 3:t+="=";break;default:throw"Illegal base64url string!"}try{return function(e){return decodeURIComponent(r(e).replace(/(.)/g,(function(e,r){var t=r.charCodeAt(0).toString(16).toUpperCase();return t.length<2&&(t="0"+t),"%"+t})))}(t)}catch(e){return r(t)}}function n(e){this.message=e}function o(e,r){if("string"!=typeof e)throw new n("Invalid token specified");var o=!0===(r=r||{}).header?0:1;try{return JSON.parse(t(e.split(".")[o]))}catch(e){throw new n("Invalid token specified: "+e.message)}}n.prototype=new Error,n.prototype.name="InvalidTokenError";const a=o;a.default=o,a.InvalidTokenError=n,module.exports=a;
+//# sourceMappingURL=jwt-decode.cjs.js.map

Frontend/RiffMasterFront/node_modules/jwt-decode/build/jwt-decode.esm.js

@@ -0,0 +1,2 @@
+function e(e){this.message=e}e.prototype=new Error,e.prototype.name="InvalidCharacterError";var r="undefined"!=typeof window&&window.atob&&window.atob.bind(window)||function(r){var t=String(r).replace(/=+$/,"");if(t.length%4==1)throw new e("'atob' failed: The string to be decoded is not correctly encoded.");for(var n,o,a=0,i=0,c="";o=t.charAt(i++);~o&&(n=a%4?64*n+o:o,a++%4)?c+=String.fromCharCode(255&n>>(-2*a&6)):0)o="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=".indexOf(o);return c};function t(e){var t=e.replace(/-/g,"+").replace(/_/g,"/");switch(t.length%4){case 0:break;case 2:t+="==";break;case 3:t+="=";break;default:throw"Illegal base64url string!"}try{return function(e){return decodeURIComponent(r(e).replace(/(.)/g,(function(e,r){var t=r.charCodeAt(0).toString(16).toUpperCase();return t.length<2&&(t="0"+t),"%"+t})))}(t)}catch(e){return r(t)}}function n(e){this.message=e}function o(e,r){if("string"!=typeof e)throw new n("Invalid token specified");var o=!0===(r=r||{}).header?0:1;try{return JSON.parse(t(e.split(".")[o]))}catch(e){throw new n("Invalid token specified: "+e.message)}}n.prototype=new Error,n.prototype.name="InvalidTokenError";export default o;export{n as InvalidTokenError};
+//# sourceMappingURL=jwt-decode.esm.js.map

Frontend/RiffMasterFront/node_modules/jwt-decode/build/jwt-decode.js

@@ -0,0 +1,123 @@
+(function (factory) {
+    typeof define === 'function' && define.amd ? define(factory) :
+    factory();
+}((function () { 'use strict';
+
+    /**
+     * The code was extracted from:
+     * https://github.com/davidchambers/Base64.js
+     */
+
+    var chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=";
+
+    function InvalidCharacterError(message) {
+        this.message = message;
+    }
+
+    InvalidCharacterError.prototype = new Error();
+    InvalidCharacterError.prototype.name = "InvalidCharacterError";
+
+    function polyfill(input) {
+        var str = String(input).replace(/=+$/, "");
+        if (str.length % 4 == 1) {
+            throw new InvalidCharacterError(
+                "'atob' failed: The string to be decoded is not correctly encoded."
+            );
+        }
+        for (
+            // initialize result and counters
+            var bc = 0, bs, buffer, idx = 0, output = "";
+            // get next character
+            (buffer = str.charAt(idx++));
+            // character found in table? initialize bit storage and add its ascii value;
+            ~buffer &&
+            ((bs = bc % 4 ? bs * 64 + buffer : buffer),
+                // and if not first of each 4 characters,
+                // convert the first 8 bits to one ascii character
+                bc++ % 4) ?
+            (output += String.fromCharCode(255 & (bs >> ((-2 * bc) & 6)))) :
+            0
+        ) {
+            // try to find character in table (0-63, not found => -1)
+            buffer = chars.indexOf(buffer);
+        }
+        return output;
+    }
+
+    var atob = (typeof window !== "undefined" &&
+        window.atob &&
+        window.atob.bind(window)) ||
+    polyfill;
+
+    function b64DecodeUnicode(str) {
+        return decodeURIComponent(
+            atob(str).replace(/(.)/g, function(m, p) {
+                var code = p.charCodeAt(0).toString(16).toUpperCase();
+                if (code.length < 2) {
+                    code = "0" + code;
+                }
+                return "%" + code;
+            })
+        );
+    }
+
+    function base64_url_decode(str) {
+        var output = str.replace(/-/g, "+").replace(/_/g, "/");
+        switch (output.length % 4) {
+            case 0:
+                break;
+            case 2:
+                output += "==";
+                break;
+            case 3:
+                output += "=";
+                break;
+            default:
+                throw "Illegal base64url string!";
+        }
+
+        try {
+            return b64DecodeUnicode(output);
+        } catch (err) {
+            return atob(output);
+        }
+    }
+
+    function InvalidTokenError(message) {
+        this.message = message;
+    }
+
+    InvalidTokenError.prototype = new Error();
+    InvalidTokenError.prototype.name = "InvalidTokenError";
+
+    function jwtDecode(token, options) {
+        if (typeof token !== "string") {
+            throw new InvalidTokenError("Invalid token specified");
+        }
+
+        options = options || {};
+        var pos = options.header === true ? 0 : 1;
+        try {
+            return JSON.parse(base64_url_decode(token.split(".")[pos]));
+        } catch (e) {
+            throw new InvalidTokenError("Invalid token specified: " + e.message);
+        }
+    }
+
+    /*
+     * Expose the function on the window object
+     */
+
+    //use amd or just through the window object.
+    if (window) {
+        if (typeof window.define == "function" && window.define.amd) {
+            window.define("jwt_decode", function() {
+                return jwtDecode;
+            });
+        } else if (window) {
+            window.jwt_decode = jwtDecode;
+        }
+    }
+
+})));
+//# sourceMappingURL=jwt-decode.js.map

Frontend/RiffMasterFront/node_modules/jwt-decode/index.d.ts

@@ -0,0 +1,25 @@
+export class InvalidTokenError extends Error {}
+
+export interface JwtDecodeOptions {
+  header?: boolean;
+}
+
+export interface JwtHeader {
+  type?: string;
+  alg?: string;
+}
+
+export interface JwtPayload {
+  iss?: string;
+  sub?: string;
+  aud?: string[] | string;
+  exp?: number;
+  nbf?: number;
+  iat?: number;
+  jti?: string;
+}
+
+export default function jwtDecode<T = unknown>(
+  token: string,
+  options?: JwtDecodeOptions
+): T;

Frontend/RiffMasterFront/node_modules/jwt-decode/package.json

@@ -0,0 +1,46 @@
+{
+    "name": "jwt-decode",
+    "version": "3.1.2",
+    "description": "Decode JWT tokens, mostly useful for browser applications.",
+    "main": "build/jwt-decode.cjs.js",
+    "module": "build/jwt-decode.esm.js",
+    "types": "index.d.ts",
+    "keywords": [
+        "jwt",
+        "browser"
+    ],
+    "repository": {
+        "type": "git",
+        "url": "git://github.com/auth0/jwt-decode"
+    },
+    "url": "https://github.com/auth0/jwt-decode/issues",
+    "homepage": "https://github.com/auth0/jwt-decode#readme",
+    "scripts": {
+        "dev": "rollup -m -c",
+        "build": "rimraf build && rollup -m -c --environment NODE_ENV:production",
+        "test": "mocha"
+    },
+    "author": "Jose F. Romaniello <jfromaniello@gmail.com> (http://joseoncode.com)",
+    "contributors": [
+        "Sam Bellen <sam.bellen@auth0.com>"
+    ],
+    "license": "MIT",
+    "dependencies": {},
+    "devDependencies": {
+        "@rollup/plugin-commonjs": "^15.0.0",
+        "@rollup/plugin-node-resolve": "^9.0.0",
+        "expect.js": "~0.2.0",
+        "mocha": "^8.1.3",
+        "rimraf": "^2.2.8",
+        "rollup": "^2.26.11",
+        "rollup-plugin-livereload": "^2.0.0",
+        "rollup-plugin-serve": "^1.0.4",
+        "rollup-plugin-sourcemaps": "^0.6.2",
+        "rollup-plugin-terser": "^7.0.2",
+        "uglify-js": "^2.8.29"
+    },
+    "files": [
+        "build/",
+        "index.d.ts"
+    ]
+}

Frontend/RiffMasterFront/package-lock.json

@@ -19,6 +19,7 @@
         "@angular/platform-browser-dynamic": "^16.0.0",
         "@angular/router": "^16.0.0",
         "@types/xml2js": "^0.4.11",
+        "jwt-decode": "^3.1.2",
         "rxjs": "~7.8.0",
         "stream": "^0.0.2",
         "timers": "^0.1.1",
@@ -7968,6 +7969,11 @@
         "node >= 0.2.0"
       ]
     },
+    "node_modules/jwt-decode": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/jwt-decode/-/jwt-decode-3.1.2.tgz",
+      "integrity": "sha512-UfpWE/VZn0iP50d8cz9NrZLM9lSWhcJ+0Gt/nm4by88UL+J1SiKN8/5dkjMmbEzwL2CAe+67GsegCbIKtbp75A=="
+    },
     "node_modules/karma": {
       "version": "6.4.2",
       "resolved": "https://registry.npmjs.org/karma/-/karma-6.4.2.tgz",

Frontend/RiffMasterFront/package.json

@@ -21,6 +21,7 @@
     "@angular/platform-browser-dynamic": "^16.0.0",
     "@angular/router": "^16.0.0",
     "@types/xml2js": "^0.4.11",
+    "jwt-decode": "^3.1.2",
     "rxjs": "~7.8.0",
     "stream": "^0.0.2",
     "timers": "^0.1.1",

Frontend/RiffMasterFront/src/app/Services/auth.service.ts

@@ -2,16 +2,71 @@ import { HttpClient, HttpErrorResponse, HttpHeaders } from '@angular/common/http
 import { Injectable } from '@angular/core';
 import { Observable, throwError } from 'rxjs';
 import { catchError, tap } from 'rxjs/operators';
+import jwt_decode from 'jwt-decode';
+import {Router} from "@angular/router";
 
 @Injectable({ providedIn: 'root' })
 export class AuthService {
-  private loginUrl = 'http://localhost:8080/login'; // Replace with your server login URL
 
-  constructor(private http: HttpClient) { }
+  private loginUrl = 'http://localhost:8080/riffmaster/login';
+  private registerUrl = 'http://localhost:8080/register';
 
-  login(username: string, password: string) {
-    const headers = new HttpHeaders({ Authorization: 'Basic ' + btoa(username + ':' + password) });
-    console.log("logged in service");
-    return this.http.post(this.loginUrl, {}, { headers });
+
+  constructor(private http: HttpClient, private router: Router) {
+  }
+
+
+  login(login: string, password: string) {
+    console.log("login" + login + " password: " + password)
+    
+    let loginDto = {
+      "login": login,
+      "password": password
+    }
+    const headers = new HttpHeaders()
+      .set('Content-Type', 'application/json');
+
+    interface Token {
+      "exp": number,
+      "iat": number,
+      "sub": string,
+      "sub_id": string,
+      "sub_role": string
+    }
+
+    this.http.post<any>(this.loginUrl, loginDto, {headers}).subscribe(
+      (response) => {
+        sessionStorage.setItem('jwtToken', response.Authorization)
+
+        let decoded = jwt_decode<Token>(response.Authorization)
+
+        sessionStorage.setItem('login', decoded.sub)
+        sessionStorage.setItem('login_id', decoded.sub_id)
+        sessionStorage.setItem('role', decoded.sub_role)
+
+        window.location.href = "http://localhost:4200/"
+      },
+      (error) => {
+        console.error('Error making POST request:', error);
+      });
+  }
+
+  register(login: string, password: string, email: string) {
+    console.log("register")
+    let registerDto = {
+      "login": login,
+      "password": password,
+      "email": email
+    }
+    const headers = new HttpHeaders()
+      .set('Content-Type', 'application/json');
+
+    this.http.post(this.registerUrl, registerDto, {headers}).subscribe(
+      (response) => {
+        console.log('POST request successful', response);
+      },
+      (error) => {
+        console.error('Error making POST request:', error);
+      });
   }
 }

Frontend/RiffMasterFront/src/app/login-page/login-page.component.html

@@ -13,13 +13,13 @@
       <mat-card-content>
 
         <mat-form-field appearance="fill">
-          <mat-label>Email</mat-label>
-          <input matInput type="email" placeholder="Enter your email" [(ngModel)]="userLogin">
+          <mat-label>Login</mat-label>
+          <input matInput type="login" placeholder="Enter your login" [(ngModel)]="formData.login">
         </mat-form-field>
 
         <mat-form-field appearance="fill">
           <mat-label>Password</mat-label>
-          <input matInput type="password" placeholder="Enter your password" [(ngModel)]="password">
+          <input matInput type="password" placeholder="Enter your password" [(ngModel)]="formData.password">
         </mat-form-field>
 
         <div class="signup-link">

Frontend/RiffMasterFront/src/app/login-page/login-page.component.ts

@@ -10,66 +10,18 @@ import { HttpClient } from '@angular/common/http';
   styleUrls: ['./login-page.component.css']
 })
 export class LoginPageComponent{
-  userLogin: string = '';
-  password: string = '';
-  constructor(private authService: AuthService, private router: Router) {
-  }
+  formData: any = {};
 
-  login() {
-    console.log('logowanie')
-    this.authService.login(this.userLogin, this.password)
-      .subscribe(
-        (response) => {
-          this.router.navigate(['/main']);
-          console.log('logged in successfully')
-        },
-        (error: string) => {
-          // Handle login error, e.g., display an error message
-          console.log('error')
-        }
-      );
+  constructor(private authService: AuthService,
+              private router: Router) {
   }
-  //#######################################################################
-
-  // constructor(
-  //   private router: Router,
-  //   private http: HttpClient
-  // ) { }
-  //
-  //
-  // model: any = {};
-  // sessionId: any = "";
-  //
-  // login() {
-  //
-  //   console.log('login from component');
-  //
-  //   let url = 'http://localhost:8080/login';
-  //   this.http.post<any>(url, {
-  //     username: this.model.username,
-  //     password: this.model.password
-  //   }).subscribe(res => {
-  //     if (res) {
-  //       this.sessionId = res.sessionId;
-  //
-  //       sessionStorage.setItem(
-  //         'token',
-  //         this.sessionId
-  //       );
-  //       this.router.navigate(['']);
-  //     } else {
-  //       alert("Authentication failed.")
-  //     }
-  //   });
-  // }
-
-
-
-
-
-  //#######################################################################
 
+  login() {
+    console.log("login attempt")
+    console.log(this.formData)
 
+    this.authService.login( this.formData.login, this.formData.password)
+  }
 
 
 }

Frontend/RiffMasterFront/src/app/register-page/register-page.component.html

@@ -11,28 +11,32 @@
       </mat-card-header>
 
       <mat-card-content>
+        <mat-form-field appearance="fill">
+          <mat-label>Login</mat-label>
+          <input matInput type="login" placeholder="Enter your login" [(ngModel)]="formData.login">
+        </mat-form-field>
 
         <mat-form-field appearance="fill">
           <mat-label>Email</mat-label>
-          <input matInput type="email" placeholder="Enter your email">
+          <input matInput type="email" placeholder="Enter your email" [(ngModel)]="formData.email">
         </mat-form-field>
 
         <mat-form-field appearance="fill">
           <mat-label>Password</mat-label>
-          <input matInput type="password" placeholder="Enter your password">
+          <input matInput type="password" placeholder="Enter your password" [(ngModel)]="formData.password">
         </mat-form-field>
 
-        <mat-form-field appearance="fill">
-          <mat-label>Confirm Password</mat-label>
-          <input matInput type="password" placeholder="Confirm your password">
-        </mat-form-field>
+<!--        <mat-form-field appearance="fill">-->
+<!--          <mat-label>Confirm Password</mat-label>-->
+<!--          <input matInput type="password" placeholder="Confirm your password">-->
+<!--        </mat-form-field>-->
 
         <div class="signup-link">
           Already have an account? <a [routerLink]="['/login']">Login</a>
         </div>
 
 
-        <button mat-raised-button color="primary" class="login-button">
+        <button mat-raised-button color="primary" class="login-button" (click)="registerUser()">
           Register
         </button>
 

Frontend/RiffMasterFront/src/app/register-page/register-page.component.ts

@@ -1,4 +1,5 @@
 import { Component } from '@angular/core';
+import { AuthService } from '../Services/auth.service';
 
 @Component({
   selector: 'app-register-page',
@@ -6,5 +7,17 @@ import { Component } from '@angular/core';
   styleUrls: ['./register-page.component.css']
 })
 export class RegisterPageComponent {
+  formData: any = {};
 
+  constructor(private authService: AuthService) {
+  }
+
+  registerUser() {
+    console.log("register attempt")
+    console.log(this.formData)
+    
+    this.authService.register( this.formData.login,
+                               this.formData.password,
+                               this.formData.email)
+  }
 }