From e05627dc36ea6c5141996fca599a7ff78dca8695 Mon Sep 17 00:00:00 2001 From: janic Date: Sun, 6 Nov 2022 23:40:21 +0100 Subject: [PATCH] UI update --- ui/package-lock.json | 366 ++++++++++++++++++ ui/package.json | 1 + ui/src/app/app-routing.module.ts | 8 + ui/src/app/app.component.ts | 4 + ui/src/app/pages/download/download.page.html | 42 +- ui/src/app/pages/download/download.page.scss | 38 +- ui/src/app/pages/loader/loader.page.html | 6 - ui/src/app/pages/loader/loader.page.scss | 10 - ui/src/app/pages/loader/loader.page.spec.ts | 15 +- ui/src/app/pages/loader/loader.page.ts | 6 +- ui/src/app/pages/login/login.page.html | 40 +- ui/src/app/pages/login/login.page.scss | 3 + .../pages/register/register-routing.module.ts | 17 + ui/src/app/pages/register/register.module.ts | 20 + ui/src/app/pages/register/register.page.html | 52 +++ ui/src/app/pages/register/register.page.scss | 0 .../app/pages/register/register.page.spec.ts | 24 ++ ui/src/app/pages/register/register.page.ts | 15 + ui/src/global.scss | 7 + 19 files changed, 603 insertions(+), 71 deletions(-) create mode 100644 ui/src/app/pages/register/register-routing.module.ts create mode 100644 ui/src/app/pages/register/register.module.ts create mode 100644 ui/src/app/pages/register/register.page.html create mode 100644 ui/src/app/pages/register/register.page.scss create mode 100644 ui/src/app/pages/register/register.page.spec.ts create mode 100644 ui/src/app/pages/register/register.page.ts diff --git a/ui/package-lock.json b/ui/package-lock.json index f5f58ea..e1bad28 100644 --- a/ui/package-lock.json +++ b/ui/package-lock.json @@ -36,6 +36,7 @@ "@angular/language-service": "^14.0.0", "@capacitor/cli": "3.6.0", "@ionic/angular-toolkit": "^6.0.0", + "@ionic/lab": "3.2.15", "@types/jasmine": "~3.6.0", "@types/jasminewd2": "~2.0.3", "@types/node": "^12.11.1", @@ -2875,6 +2876,32 @@ "sourcemap-codec": "^1.4.4" } }, + "node_modules/@ionic/cli-framework": { + "version": "5.1.3", + "resolved": "https://registry.npmjs.org/@ionic/cli-framework/-/cli-framework-5.1.3.tgz", + "integrity": "sha512-T2KN/TurzNoAcc3iDt1KHU6GeEa7x9kXngMnu5xs+DzJv5HhBKjVOoo74b8rgVxdPx+dLOV8aLrorlyvsHR/tQ==", + "dev": true, + "dependencies": { + "@ionic/cli-framework-output": "2.2.5", + "@ionic/utils-array": "2.1.5", + "@ionic/utils-fs": "3.1.6", + "@ionic/utils-object": "2.1.5", + "@ionic/utils-process": "2.1.10", + "@ionic/utils-stream": "3.1.5", + "@ionic/utils-subprocess": "2.1.11", + "@ionic/utils-terminal": "2.3.3", + "chalk": "^4.0.0", + "debug": "^4.0.0", + "lodash": "^4.17.5", + "minimist": "^1.2.0", + "rimraf": "^3.0.0", + "tslib": "^2.0.1", + "write-file-atomic": "^3.0.0" + }, + "engines": { + "node": ">=10.3.0" + } + }, "node_modules/@ionic/cli-framework-output": { "version": "2.2.5", "resolved": "https://registry.npmjs.org/@ionic/cli-framework-output/-/cli-framework-output-2.2.5.tgz", @@ -2889,6 +2916,76 @@ "node": ">=10.3.0" } }, + "node_modules/@ionic/cli-framework/node_modules/ansi-styles": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", + "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", + "dev": true, + "dependencies": { + "color-convert": "^2.0.1" + }, + "engines": { + "node": ">=8" + }, + "funding": { + "url": "https://github.com/chalk/ansi-styles?sponsor=1" + } + }, + "node_modules/@ionic/cli-framework/node_modules/chalk": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", + "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", + "dev": true, + "dependencies": { + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/chalk/chalk?sponsor=1" + } + }, + "node_modules/@ionic/cli-framework/node_modules/color-convert": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", + "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", + "dev": true, + "dependencies": { + "color-name": "~1.1.4" + }, + "engines": { + "node": ">=7.0.0" + } + }, + "node_modules/@ionic/cli-framework/node_modules/color-name": { + "version": "1.1.4", + "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", + "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==", + "dev": true + }, + "node_modules/@ionic/cli-framework/node_modules/has-flag": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz", + "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==", + "dev": true, + "engines": { + "node": ">=8" + } + }, + "node_modules/@ionic/cli-framework/node_modules/supports-color": { + "version": "7.2.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", + "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==", + "dev": true, + "dependencies": { + "has-flag": "^4.0.0" + }, + "engines": { + "node": ">=8" + } + }, "node_modules/@ionic/core": { "version": "6.1.14", "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.1.14.tgz", @@ -2899,6 +2996,95 @@ "tslib": "^2.1.0" } }, + "node_modules/@ionic/lab": { + "version": "3.2.15", + "resolved": "https://registry.npmjs.org/@ionic/lab/-/lab-3.2.15.tgz", + "integrity": "sha512-m6vPnrc5iuLe8CkmAYp/BStsVRkGVQw/IhcN1KMbz/OxB+w9NvGJ3CuF089LyeiWlut1/PWqYRyzIWXr5okc5Q==", + "dev": true, + "dependencies": { + "@ionic/cli-framework": "5.1.3", + "@ionic/utils-fs": "3.1.6", + "chalk": "^4.0.0", + "express": "^4.16.2", + "tslib": "^2.0.1" + }, + "bin": { + "ionic-lab": "bin/ionic-lab" + }, + "engines": { + "node": ">=10.3.0" + } + }, + "node_modules/@ionic/lab/node_modules/ansi-styles": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", + "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", + "dev": true, + "dependencies": { + "color-convert": "^2.0.1" + }, + "engines": { + "node": ">=8" + }, + "funding": { + "url": "https://github.com/chalk/ansi-styles?sponsor=1" + } + }, + "node_modules/@ionic/lab/node_modules/chalk": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", + "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", + "dev": true, + "dependencies": { + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/chalk/chalk?sponsor=1" + } + }, + "node_modules/@ionic/lab/node_modules/color-convert": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", + "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", + "dev": true, + "dependencies": { + "color-name": "~1.1.4" + }, + "engines": { + "node": ">=7.0.0" + } + }, + "node_modules/@ionic/lab/node_modules/color-name": { + "version": "1.1.4", + "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", + "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==", + "dev": true + }, + "node_modules/@ionic/lab/node_modules/has-flag": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz", + "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==", + "dev": true, + "engines": { + "node": ">=8" + } + }, + "node_modules/@ionic/lab/node_modules/supports-color": { + "version": "7.2.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", + "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==", + "dev": true, + "dependencies": { + "has-flag": "^4.0.0" + }, + "engines": { + "node": ">=8" + } + }, "node_modules/@ionic/utils-array": { "version": "2.1.5", "resolved": "https://registry.npmjs.org/@ionic/utils-array/-/utils-array-2.1.5.tgz", @@ -15939,6 +16125,15 @@ "integrity": "sha512-KNNZtayBCtmnNmbo5mG47p1XsCyrx6iVqomjcZnec/1Y5GGARaxPs6r49RnSPeUP3YjNYiU9sQHAtY4BBvnZwg==", "dev": true }, + "node_modules/typedarray-to-buffer": { + "version": "3.1.5", + "resolved": "https://registry.npmjs.org/typedarray-to-buffer/-/typedarray-to-buffer-3.1.5.tgz", + "integrity": "sha512-zdu8XMNEDepKKR+XYOXAVPtWui0ly0NtohUscw+UmaHiAWT8hrV1rr//H6V+0DvJ3OQ19S979M0laLfX8rm82Q==", + "dev": true, + "dependencies": { + "is-typedarray": "^1.0.0" + } + }, "node_modules/typescript": { "version": "4.7.4", "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.7.4.tgz", @@ -16832,6 +17027,18 @@ "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==", "dev": true }, + "node_modules/write-file-atomic": { + "version": "3.0.3", + "resolved": "https://registry.npmjs.org/write-file-atomic/-/write-file-atomic-3.0.3.tgz", + "integrity": "sha512-AvHcyZ5JnSfq3ioSyjrBkH9yW4m7Ayk8/9My/DD9onKeu/94fwrMocemO2QAJFAlnnDN+ZDS+ZjAR5ua1/PV/Q==", + "dev": true, + "dependencies": { + "imurmurhash": "^0.1.4", + "is-typedarray": "^1.0.0", + "signal-exit": "^3.0.2", + "typedarray-to-buffer": "^3.1.5" + } + }, "node_modules/ws": { "version": "8.2.3", "resolved": "https://registry.npmjs.org/ws/-/ws-8.2.3.tgz", @@ -18919,6 +19126,80 @@ } } }, + "@ionic/cli-framework": { + "version": "5.1.3", + "resolved": "https://registry.npmjs.org/@ionic/cli-framework/-/cli-framework-5.1.3.tgz", + "integrity": "sha512-T2KN/TurzNoAcc3iDt1KHU6GeEa7x9kXngMnu5xs+DzJv5HhBKjVOoo74b8rgVxdPx+dLOV8aLrorlyvsHR/tQ==", + "dev": true, + "requires": { + "@ionic/cli-framework-output": "2.2.5", + "@ionic/utils-array": "2.1.5", + "@ionic/utils-fs": "3.1.6", + "@ionic/utils-object": "2.1.5", + "@ionic/utils-process": "2.1.10", + "@ionic/utils-stream": "3.1.5", + "@ionic/utils-subprocess": "2.1.11", + "@ionic/utils-terminal": "2.3.3", + "chalk": "^4.0.0", + "debug": "^4.0.0", + "lodash": "^4.17.5", + "minimist": "^1.2.0", + "rimraf": "^3.0.0", + "tslib": "^2.0.1", + "write-file-atomic": "^3.0.0" + }, + "dependencies": { + "ansi-styles": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", + "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", + "dev": true, + "requires": { + "color-convert": "^2.0.1" + } + }, + "chalk": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", + "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", + "dev": true, + "requires": { + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + } + }, + "color-convert": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", + "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", + "dev": true, + "requires": { + "color-name": "~1.1.4" + } + }, + "color-name": { + "version": "1.1.4", + "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", + "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==", + "dev": true + }, + "has-flag": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz", + "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==", + "dev": true + }, + "supports-color": { + "version": "7.2.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", + "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==", + "dev": true, + "requires": { + "has-flag": "^4.0.0" + } + } + } + }, "@ionic/cli-framework-output": { "version": "2.2.5", "resolved": "https://registry.npmjs.org/@ionic/cli-framework-output/-/cli-framework-output-2.2.5.tgz", @@ -18940,6 +19221,70 @@ "tslib": "^2.1.0" } }, + "@ionic/lab": { + "version": "3.2.15", + "resolved": "https://registry.npmjs.org/@ionic/lab/-/lab-3.2.15.tgz", + "integrity": "sha512-m6vPnrc5iuLe8CkmAYp/BStsVRkGVQw/IhcN1KMbz/OxB+w9NvGJ3CuF089LyeiWlut1/PWqYRyzIWXr5okc5Q==", + "dev": true, + "requires": { + "@ionic/cli-framework": "5.1.3", + "@ionic/utils-fs": "3.1.6", + "chalk": "^4.0.0", + "express": "^4.16.2", + "tslib": "^2.0.1" + }, + "dependencies": { + "ansi-styles": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", + "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", + "dev": true, + "requires": { + "color-convert": "^2.0.1" + } + }, + "chalk": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", + "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", + "dev": true, + "requires": { + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + } + }, + "color-convert": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", + "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", + "dev": true, + "requires": { + "color-name": "~1.1.4" + } + }, + "color-name": { + "version": "1.1.4", + "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", + "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==", + "dev": true + }, + "has-flag": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz", + "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==", + "dev": true + }, + "supports-color": { + "version": "7.2.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", + "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==", + "dev": true, + "requires": { + "has-flag": "^4.0.0" + } + } + } + }, "@ionic/utils-array": { "version": "2.1.5", "resolved": "https://registry.npmjs.org/@ionic/utils-array/-/utils-array-2.1.5.tgz", @@ -28725,6 +29070,15 @@ "integrity": "sha512-KNNZtayBCtmnNmbo5mG47p1XsCyrx6iVqomjcZnec/1Y5GGARaxPs6r49RnSPeUP3YjNYiU9sQHAtY4BBvnZwg==", "dev": true }, + "typedarray-to-buffer": { + "version": "3.1.5", + "resolved": "https://registry.npmjs.org/typedarray-to-buffer/-/typedarray-to-buffer-3.1.5.tgz", + "integrity": "sha512-zdu8XMNEDepKKR+XYOXAVPtWui0ly0NtohUscw+UmaHiAWT8hrV1rr//H6V+0DvJ3OQ19S979M0laLfX8rm82Q==", + "dev": true, + "requires": { + "is-typedarray": "^1.0.0" + } + }, "typescript": { "version": "4.7.4", "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.7.4.tgz", @@ -29369,6 +29723,18 @@ "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==", "dev": true }, + "write-file-atomic": { + "version": "3.0.3", + "resolved": "https://registry.npmjs.org/write-file-atomic/-/write-file-atomic-3.0.3.tgz", + "integrity": "sha512-AvHcyZ5JnSfq3ioSyjrBkH9yW4m7Ayk8/9My/DD9onKeu/94fwrMocemO2QAJFAlnnDN+ZDS+ZjAR5ua1/PV/Q==", + "dev": true, + "requires": { + "imurmurhash": "^0.1.4", + "is-typedarray": "^1.0.0", + "signal-exit": "^3.0.2", + "typedarray-to-buffer": "^3.1.5" + } + }, "ws": { "version": "8.2.3", "resolved": "https://registry.npmjs.org/ws/-/ws-8.2.3.tgz", diff --git a/ui/package.json b/ui/package.json index dfc813f..32f58a4 100644 --- a/ui/package.json +++ b/ui/package.json @@ -41,6 +41,7 @@ "@angular/language-service": "^14.0.0", "@capacitor/cli": "3.6.0", "@ionic/angular-toolkit": "^6.0.0", + "@ionic/lab": "3.2.15", "@types/jasmine": "~3.6.0", "@types/jasminewd2": "~2.0.3", "@types/node": "^12.11.1", diff --git a/ui/src/app/app-routing.module.ts b/ui/src/app/app-routing.module.ts index 0d56c18..55eff6c 100644 --- a/ui/src/app/app-routing.module.ts +++ b/ui/src/app/app-routing.module.ts @@ -2,6 +2,10 @@ import { NgModule } from '@angular/core'; import { PreloadAllModules, RouterModule, Routes } from '@angular/router'; const routes: Routes = [ + { + path: '', + redirectTo: '/loader', pathMatch: 'full' + }, { path: 'loader', loadChildren: () => import('./pages/loader/loader.module').then( m => m.LoaderPageModule) @@ -17,6 +21,10 @@ const routes: Routes = [ { path: 'all-songs', loadChildren: () => import('./pages/all-songs/all-songs.module').then( m => m.AllSongsPageModule) + }, + { + path: 'register', + loadChildren: () => import('./pages/register/register.module').then( m => m.RegisterPageModule) } ]; diff --git a/ui/src/app/app.component.ts b/ui/src/app/app.component.ts index 86168d3..a71beba 100644 --- a/ui/src/app/app.component.ts +++ b/ui/src/app/app.component.ts @@ -6,6 +6,10 @@ import { Component } from '@angular/core'; }) export class AppComponent { public appPages = [ + { title: 'Login', url: '/login', icon: 'log-in' }, + { title: 'Register', url: '/register', icon: 'key' }, + { title: 'Download', url: '/download', icon: 'cloud-download' }, + { title: 'All Songs', url: '/all-songs', icon: 'musical-notes' }, ]; constructor() {} } diff --git a/ui/src/app/pages/download/download.page.html b/ui/src/app/pages/download/download.page.html index f6939fb..fd97995 100644 --- a/ui/src/app/pages/download/download.page.html +++ b/ui/src/app/pages/download/download.page.html @@ -3,15 +3,39 @@ Download - - -
- -
- Download to my Device - Upload to Music Store +
+ + +
+ + Enter URL + + +
+ Download to Device + + + MP3 - Download to my Device + + + + + MP4 - Download to my Device + + + + + MP3 - Upload to Music Store + + + + + MP4 - Upload to Video Store + + +
+
+
-
- diff --git a/ui/src/app/pages/download/download.page.scss b/ui/src/app/pages/download/download.page.scss index 0733254..26168cf 100644 --- a/ui/src/app/pages/download/download.page.scss +++ b/ui/src/app/pages/download/download.page.scss @@ -1,36 +1,6 @@ -.flex-center { - display: flex; - justify-content: center; - align-items: center; -} - -section { - height: 100%; -} - -ion-button { - min-width: max-content; - flex-grow: 1; -} - -ion-input { - border: solid 0.2em rgba(var(--ion-color-secondary-rgb)); - border-radius: 1em; - margin: 1em; - width: auto; -} - -ion-input:hover { - border-color: rgba(var(--ion-color-primary-rgb)); - transition-duration: 1s; -} - - -.bottom-buttons { - width: 100%; - bottom: 0; - position: absolute; - display: flex; - flex-wrap: wrap; +ion-card { padding: 1em; +} +ion-button { + margin-top: 1em; } \ No newline at end of file diff --git a/ui/src/app/pages/loader/loader.page.html b/ui/src/app/pages/loader/loader.page.html index b43b87e..52de551 100644 --- a/ui/src/app/pages/loader/loader.page.html +++ b/ui/src/app/pages/loader/loader.page.html @@ -1,9 +1,3 @@ - - - loader - - -
diff --git a/ui/src/app/pages/loader/loader.page.scss b/ui/src/app/pages/loader/loader.page.scss index 5bf5e06..e69de29 100644 --- a/ui/src/app/pages/loader/loader.page.scss +++ b/ui/src/app/pages/loader/loader.page.scss @@ -1,10 +0,0 @@ -.flex-center { - display: flex; - justify-content: center; - align-items: center; -} - -div { - width: 100%; - height: 100%; -} \ No newline at end of file diff --git a/ui/src/app/pages/loader/loader.page.spec.ts b/ui/src/app/pages/loader/loader.page.spec.ts index aadd5c5..955d4f7 100644 --- a/ui/src/app/pages/loader/loader.page.spec.ts +++ b/ui/src/app/pages/loader/loader.page.spec.ts @@ -1,24 +1,33 @@ import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing'; +import { Router } from '@angular/router'; import { IonicModule } from '@ionic/angular'; +import { AppRoutingModule } from 'src/app/app-routing.module'; import { LoaderPage } from './loader.page'; describe('LoaderPage', () => { let component: LoaderPage; let fixture: ComponentFixture; + let router: Router; beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ declarations: [ LoaderPage ], - imports: [IonicModule.forRoot()] + imports: [ + IonicModule.forRoot(), + AppRoutingModule + ] }).compileComponents(); fixture = TestBed.createComponent(LoaderPage); + router = TestBed.get(Router); component = fixture.componentInstance; fixture.detectChanges(); })); - it('should create', () => { - expect(component).toBeTruthy(); + it('should go to login page after load', () => { + spyOn(router, 'navigate'); + component.ngOnInit(); + expect(router.navigate).toHaveBeenCalledWith(['login']); }); }); diff --git a/ui/src/app/pages/loader/loader.page.ts b/ui/src/app/pages/loader/loader.page.ts index e2b875d..5e7b181 100644 --- a/ui/src/app/pages/loader/loader.page.ts +++ b/ui/src/app/pages/loader/loader.page.ts @@ -1,4 +1,5 @@ import { Component, OnInit } from '@angular/core'; +import { Router } from '@angular/router' @Component({ selector: 'app-loader', @@ -7,9 +8,10 @@ import { Component, OnInit } from '@angular/core'; }) export class LoaderPage implements OnInit { - constructor() { } + constructor(private router: Router) { } ngOnInit() { + // setTimeout(() => { this.router.navigate(['login']); }, 500); < Could be used if connection would be tested + this.router.navigate(['login']); } - } diff --git a/ui/src/app/pages/login/login.page.html b/ui/src/app/pages/login/login.page.html index cc1535f..8783dcb 100644 --- a/ui/src/app/pages/login/login.page.html +++ b/ui/src/app/pages/login/login.page.html @@ -1,9 +1,35 @@ - - - login - - - - +
+ + + Login + Please sign in with your credentials + + + + Email + + Enter a valid email + Invalid email + Valid email + + + Password + + Choose a secure password + + + Forgot Email/Password + + + Login + + + + Register + + + + +
diff --git a/ui/src/app/pages/login/login.page.scss b/ui/src/app/pages/login/login.page.scss index e69de29..b2c3653 100644 --- a/ui/src/app/pages/login/login.page.scss +++ b/ui/src/app/pages/login/login.page.scss @@ -0,0 +1,3 @@ +ion-button[fill="clear"]{ + text-transform: initial; +} \ No newline at end of file diff --git a/ui/src/app/pages/register/register-routing.module.ts b/ui/src/app/pages/register/register-routing.module.ts new file mode 100644 index 0000000..ec4af6e --- /dev/null +++ b/ui/src/app/pages/register/register-routing.module.ts @@ -0,0 +1,17 @@ +import { NgModule } from '@angular/core'; +import { Routes, RouterModule } from '@angular/router'; + +import { RegisterPage } from './register.page'; + +const routes: Routes = [ + { + path: '', + component: RegisterPage + } +]; + +@NgModule({ + imports: [RouterModule.forChild(routes)], + exports: [RouterModule], +}) +export class RegisterPageRoutingModule {} diff --git a/ui/src/app/pages/register/register.module.ts b/ui/src/app/pages/register/register.module.ts new file mode 100644 index 0000000..0b18f97 --- /dev/null +++ b/ui/src/app/pages/register/register.module.ts @@ -0,0 +1,20 @@ +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { FormsModule } from '@angular/forms'; + +import { IonicModule } from '@ionic/angular'; + +import { RegisterPageRoutingModule } from './register-routing.module'; + +import { RegisterPage } from './register.page'; + +@NgModule({ + imports: [ + CommonModule, + FormsModule, + IonicModule, + RegisterPageRoutingModule + ], + declarations: [RegisterPage] +}) +export class RegisterPageModule {} diff --git a/ui/src/app/pages/register/register.page.html b/ui/src/app/pages/register/register.page.html new file mode 100644 index 0000000..a79548e --- /dev/null +++ b/ui/src/app/pages/register/register.page.html @@ -0,0 +1,52 @@ + + + Register + + + + + +
+ + + Create an Account + Please enter your Information + + + + + First Name + + Last Name + + + + + + Email + + Enter a valid email + Invalid email + Valid email + + + + + Password + + Choose a secure password + Password Confirmation + + + + + + Create Account + + + + +
+ + + diff --git a/ui/src/app/pages/register/register.page.scss b/ui/src/app/pages/register/register.page.scss new file mode 100644 index 0000000..e69de29 diff --git a/ui/src/app/pages/register/register.page.spec.ts b/ui/src/app/pages/register/register.page.spec.ts new file mode 100644 index 0000000..ddf913b --- /dev/null +++ b/ui/src/app/pages/register/register.page.spec.ts @@ -0,0 +1,24 @@ +import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing'; +import { IonicModule } from '@ionic/angular'; + +import { RegisterPage } from './register.page'; + +describe('RegisterPage', () => { + let component: RegisterPage; + let fixture: ComponentFixture; + + beforeEach(waitForAsync(() => { + TestBed.configureTestingModule({ + declarations: [ RegisterPage ], + imports: [IonicModule.forRoot()] + }).compileComponents(); + + fixture = TestBed.createComponent(RegisterPage); + component = fixture.componentInstance; + fixture.detectChanges(); + })); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/ui/src/app/pages/register/register.page.ts b/ui/src/app/pages/register/register.page.ts new file mode 100644 index 0000000..528680f --- /dev/null +++ b/ui/src/app/pages/register/register.page.ts @@ -0,0 +1,15 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-register', + templateUrl: './register.page.html', + styleUrls: ['./register.page.scss'], +}) +export class RegisterPage implements OnInit { + + constructor() { } + + ngOnInit() { + } + +} diff --git a/ui/src/global.scss b/ui/src/global.scss index d854de8..0663bbb 100644 --- a/ui/src/global.scss +++ b/ui/src/global.scss @@ -24,3 +24,10 @@ @import "~@ionic/angular/css/text-alignment.css"; @import "~@ionic/angular/css/text-transformation.css"; @import "~@ionic/angular/css/flex-utils.css"; + +.flex-center { + display: flex; + justify-content: center; + align-items: center; + height: 100%; +} \ No newline at end of file