UI update

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",

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",

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)
   }
 ];
 

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() {}
 }

ui/src/app/pages/download/download.page.html

@@ -3,15 +3,39 @@
     <ion-title>Download</ion-title>
   </ion-toolbar>
 </ion-header>
-
 <ion-content>
-<!-- Input with placeholder -->
+  <div class="flex-center">
-<section>
+    <ion-card>
-  <ion-input expand="full" pattern="url" placeholder="Enter URL Here"></ion-input>
+      <!-- Input with placeholder -->
+      <section>
+        <ion-item fill="solid">
+          <ion-label position="floating">Enter URL</ion-label>
+          <ion-input type="url" expand="full" pattern="url"></ion-input>
+        </ion-item>
         <div class="bottom-buttons">
-    <ion-button expand="full" color="secondary">Download to my Device</ion-button>
+          <ion-label>Download to Device</ion-label>
-    <ion-button expand="full" color="primary">Upload to Music Store</ion-button>
+          <ion-button expand="full" color="secondary">
+            <ion-icon slot="start" name="musical-note-outline"></ion-icon>
+            MP3 - Download to my Device
+            <ion-icon slot="end" name="download-outline"></ion-icon>
+          </ion-button>
+          <ion-button expand="full" color="secondary">
+            <ion-icon slot="start" name="videocam-outline"></ion-icon>
+            MP4 - Download to my Device
+            <ion-icon slot="end" name="download-outline"></ion-icon>
+          </ion-button>
+          <ion-button expand="full" color="primary">
+            <ion-icon slot="start" name="musical-note-outline"></ion-icon>
+            MP3 - Upload to Music Store
+            <ion-icon slot="end" name="cloud-upload-outline"></ion-icon>
+          </ion-button>
+          <ion-button expand="full" color="primary">
+            <ion-icon slot="start" name="videocam-outline"></ion-icon>
+            MP4 - Upload to Video Store
+            <ion-icon slot="end" name="cloud-upload-outline"></ion-icon>
+          </ion-button>
         </div>
       </section>
+    </ion-card>
+  </div>
 </ion-content>
-

ui/src/app/pages/download/download.page.scss

@@ -1,36 +1,6 @@
-.flex-center {
+ion-card {
-    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;
     padding: 1em;
 }
+ion-button {
+    margin-top: 1em;
+}

ui/src/app/pages/loader/loader.page.html

@@ -1,9 +1,3 @@
-<ion-header>
-  <ion-toolbar>
-    <ion-title>loader</ion-title>
-  </ion-toolbar>
-</ion-header>
-
 <ion-content>
   <div class="flex-center">
     <ion-spinner name="crescent" color="primary"></ion-spinner>

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%;
-}

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<LoaderPage>;
+  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', () => {
+  it('should go to login page after load', () => {
-    expect(component).toBeTruthy();
+    spyOn(router, 'navigate');
+    component.ngOnInit();
+    expect(router.navigate).toHaveBeenCalledWith(['login']);
   });
 });

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']);
   }
-
 }

ui/src/app/pages/login/login.page.html

@@ -1,9 +1,35 @@
-<ion-header>
-  <ion-toolbar>
-    <ion-title>login</ion-title>
-  </ion-toolbar>
-</ion-header>
-
 <ion-content>
-
+  <div class="flex-center">
+    <ion-card>
+      <ion-card-header>
+        <ion-card-title color="primary">Login</ion-card-title>
+        <ion-card-subtitle color="secondary">Please sign in with your credentials</ion-card-subtitle>
+      </ion-card-header>
+      <ion-card-content>
+        <ion-item fill="solid">
+          <ion-label position="floating">Email</ion-label>
+          <ion-input type="email" ngModel email></ion-input>
+          <ion-note slot="helper">Enter a valid email</ion-note>
+          <ion-note slot="error">Invalid email</ion-note>
+          <ion-note slot="success">Valid email</ion-note>
+        </ion-item>
+        <ion-item fill="solid">
+          <ion-label position="floating">Password</ion-label>
+          <ion-input type="Password" ngModel password></ion-input>
+          <ion-note slot="helper">Choose a secure password</ion-note>
+        </ion-item>  
+        <ion-button fill="clear" >
+          Forgot Email/Password
+        </ion-button>
+        <ion-button size="full">
+          Login
+          <ion-icon slot="end" name="log-in-outline"></ion-icon>
+        </ion-button>
+        <ion-button fill="clear" color="secondary" size="full">
+          Register
+          <ion-icon slot="end" name="create-outline"></ion-icon>
+        </ion-button>
+      </ion-card-content>
+    </ion-card>
+  </div>
 </ion-content>

ui/src/app/pages/login/login.page.scss

@@ -0,0 +1,3 @@
+ion-button[fill="clear"]{
+    text-transform: initial;
+}

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 {}

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 {}

ui/src/app/pages/register/register.page.html

@@ -0,0 +1,52 @@
+<ion-header>
+  <ion-toolbar>
+    <ion-title>Register</ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content>
+  <ion-content>
+    <div class="flex-center">
+      <ion-card>
+        <ion-card-header>
+          <ion-card-title color="primary">Create an Account</ion-card-title>
+          <ion-card-subtitle color="secondary">Please enter your Information</ion-card-subtitle>
+        </ion-card-header>
+        <ion-card-content>
+          <!-- First/Last Name Password --> 
+          <ion-item fill="solid">
+            <ion-label position="floating">First Name</ion-label>
+            <ion-input type="text"></ion-input>
+            <ion-label position="floating">Last Name</ion-label>
+            <ion-input type="text"></ion-input>
+            <ion-icon slot="end" name="accessibility-outline"></ion-icon>
+          </ion-item>
+          <!-- Set Email --> 
+          <ion-item fill="solid">
+            <ion-label position="floating">Email</ion-label>
+            <ion-input type="email" ngModel email></ion-input>
+            <ion-note slot="helper">Enter a valid email</ion-note>
+            <ion-note slot="error">Invalid email</ion-note>
+            <ion-note slot="success">Valid email</ion-note>
+            <ion-icon slot="end" name="mail-outline"></ion-icon>
+          </ion-item>
+          <!-- Set Password --> 
+          <ion-item fill="solid">
+            <ion-label position="floating">Password</ion-label>
+            <ion-input type="Password" ngModel password></ion-input>
+            <ion-note slot="helper">Choose a secure password</ion-note>
+            <ion-label position="floating">Password Confirmation</ion-label>
+            <ion-input type="Password" ngModel password></ion-input>
+            <ion-icon slot="end" name="key-outline"></ion-icon>
+          </ion-item>
+          <!-- Create Account Button --> 
+          <ion-button size="full">
+            Create Account
+            <ion-icon slot="end" name="key-outline"></ion-icon>
+          </ion-button>
+        </ion-card-content>
+      </ion-card>
+    </div>
+  </ion-content>
+  
+</ion-content>

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<RegisterPage>;
+
+  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();
+  });
+});

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() {
+  }
+
+}

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%;
+}