Installed Material-Ui; Created Sign up page; General styling

Controllers/AppUsersController.cs

@@ -13,7 +13,7 @@ using TicketManager.Resources;
 
 namespace TicketManager.Controllers
 {
-    [Authorize]
+    // [Authorize]
     [Produces("application/json")]
     [Route("api/v1/users")]
     [ApiController]

Controllers/ProjectsController.cs

@@ -13,7 +13,7 @@ using System;
 namespace TicketManager.Controllers
 {
     // [Authorize(Roles = "Admin")]
-    [Authorize]
+    // [Authorize]
     [Produces("application/json")]
     [Route("api/v1/[controller]")]
     [ApiController]

Controllers/TicketsController.cs

@@ -10,7 +10,7 @@ using TicketManager.Models;
 
 namespace TicketManager.Controllers
 {
-    [Authorize]
+    // [Authorize]
     [Route("api/v1/[controller]")]
     [ApiController]
     public class TicketsController : ControllerBase

Startup.cs

@@ -63,7 +63,7 @@ namespace TicketManager
                     {
                         Name = "Ruidy Nemausat",
                         Email = "ruidy.nemausat@gmail.com",
-                        Url = new Uri("https://ruidywebsite.herokuapp.com/"),
+                        Url = new Uri("https://ruidyportfolio.herokuapp.com/"),
                     }
                 });
                 // Set the comments path for the Swagger JSON and UI.

TicketManager.csproj

@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="utf-8"?>
 <Project Sdk="Microsoft.NET.Sdk.Web">
     <PropertyGroup>
-        <TargetFramework>netcoreapp3.1</TargetFramework>
+        <TargetFramework>netcoreapp3.0</TargetFramework>
     </PropertyGroup>
     <PropertyGroup>
         <LangVersion>8.0</LangVersion>
@@ -13,24 +13,24 @@
     <ItemGroup>
     </ItemGroup>
     <ItemGroup>
-        <PackageReference Include="Microsoft.AspNetCore.Authentication.JwtBearer" Version="3.1.2" />
+        <PackageReference Include="Microsoft.AspNetCore.Authentication.JwtBearer" Version="3.0.2" />
-        <PackageReference Include="Microsoft.AspNetCore.Mvc.NewtonsoftJson" Version="3.1.1" />
+        <PackageReference Include="Microsoft.AspNetCore.Mvc.NewtonsoftJson" Version="3.0.1" />
-        <PackageReference Include="Microsoft.AspNetCore.SpaServices" Version="3.1.1" />
+        <PackageReference Include="Microsoft.AspNetCore.SpaServices" Version="3.0.1" />
-        <PackageReference Include="Microsoft.AspNetCore.SpaServices.Extensions" Version="3.1.1" />
+        <PackageReference Include="Microsoft.AspNetCore.SpaServices.Extensions" Version="3.0.1" />
-        <PackageReference Include="Microsoft.EntityFrameworkCore.Design" Version="3.1.1">
+        <PackageReference Include="Microsoft.EntityFrameworkCore.Design" Version="3.0.1">
             <IncludeAssets>runtime; build; native; contentfiles; analyzers; buildtransitive</IncludeAssets>
             <PrivateAssets>all</PrivateAssets>
         </PackageReference>
-        <PackageReference Include="Microsoft.EntityFrameworkCore.SqlServer" Version="3.1.1" />
+        <PackageReference Include="Microsoft.EntityFrameworkCore.SqlServer" Version="3.0.1" />
-        <PackageReference Include="Microsoft.EntityFrameworkCore.Sqlite" Version="3.1.1" />
+        <PackageReference Include="Microsoft.EntityFrameworkCore.Sqlite" Version="3.0.1" />
-        <PackageReference Include="Microsoft.EntityFrameworkCore.InMemory" Version="3.1.1" />
+        <PackageReference Include="Microsoft.EntityFrameworkCore.InMemory" Version="3.0.1" />
-        <PackageReference Include="Microsoft.VisualStudio.Web.CodeGeneration.Design" Version="3.1.1" />
+        <PackageReference Include="Microsoft.VisualStudio.Web.CodeGeneration.Design" Version="3.0.1" />
         <PackageReference Include="Microsoft.OpenApi" Version="1.1.4" />
         <PackageReference Include="Moq" Version="4.13.1" />
         <PackageReference Include="Swashbuckle.AspNetCore" Version="5.0.0" />
         <PackageReference Include="Swashbuckle.AspNetCore.Newtonsoft" Version="5.0.0" />
         <PackageReference Include="Xunit" Version="2.4.1" />
-        <PackageReference Include="Microsoft.EntityFrameworkCore.Tools" Version="3.1.1">
+        <PackageReference Include="Microsoft.EntityFrameworkCore.Tools" Version="3.0.1">
           <IncludeAssets>runtime; build; native; contentfiles; analyzers; buildtransitive</IncludeAssets>
           <PrivateAssets>all</PrivateAssets>
         </PackageReference>

client/package-lock.json

@@ -1057,6 +1057,11 @@
       "resolved": "https://registry.npmjs.org/@csstools/normalize.css/-/normalize.css-10.1.0.tgz",
       "integrity": "sha512-ij4wRiunFfaJxjB0BdrYHIH8FxBJpOwNPhhAcunlmPdXudL1WQV1qoP9un6JsEBAgQH+7UXyyjh0g7jTxXK6tg=="
     },
+    "@emotion/hash": {
+      "version": "0.8.0",
+      "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.8.0.tgz",
+      "integrity": "sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow=="
+    },
     "@hapi/address": {
       "version": "2.1.4",
       "resolved": "https://registry.npmjs.org/@hapi/address/-/address-2.1.4.tgz",
@@ -1282,6 +1287,93 @@
         "@types/yargs": "^13.0.0"
       }
     },
+    "@material-ui/core": {
+      "version": "4.9.8",
+      "resolved": "https://registry.npmjs.org/@material-ui/core/-/core-4.9.8.tgz",
+      "integrity": "sha512-4cslpG6oLoPWUfwPkX+hvbak4hAGiOfgXOu/UIYeeMrtsTEebC0Mirjoby7zhS4ny86YI3rXEFW6EZDmlj5n5w==",
+      "requires": {
+        "@babel/runtime": "^7.4.4",
+        "@material-ui/styles": "^4.9.6",
+        "@material-ui/system": "^4.9.6",
+        "@material-ui/types": "^5.0.0",
+        "@material-ui/utils": "^4.9.6",
+        "@types/react-transition-group": "^4.2.0",
+        "clsx": "^1.0.2",
+        "hoist-non-react-statics": "^3.3.2",
+        "popper.js": "^1.14.1",
+        "prop-types": "^15.7.2",
+        "react-is": "^16.8.0",
+        "react-transition-group": "^4.3.0"
+      }
+    },
+    "@material-ui/icons": {
+      "version": "4.9.1",
+      "resolved": "https://registry.npmjs.org/@material-ui/icons/-/icons-4.9.1.tgz",
+      "integrity": "sha512-GBitL3oBWO0hzBhvA9KxqcowRUsA0qzwKkURyC8nppnC3fw54KPKZ+d4V1Eeg/UnDRSzDaI9nGCdel/eh9AQMg==",
+      "requires": {
+        "@babel/runtime": "^7.4.4"
+      }
+    },
+    "@material-ui/lab": {
+      "version": "4.0.0-alpha.47",
+      "resolved": "https://registry.npmjs.org/@material-ui/lab/-/lab-4.0.0-alpha.47.tgz",
+      "integrity": "sha512-+WC3O0M/769D3nO9Rqupusc+lob7tQMe5/DnOjAhZ0bpXlJbhZb7N84WkEk4JgQLj6ydP8e9Jhqd1lG+mGj+xw==",
+      "requires": {
+        "@babel/runtime": "^7.4.4",
+        "@material-ui/utils": "^4.9.6",
+        "clsx": "^1.0.4",
+        "prop-types": "^15.7.2",
+        "react-is": "^16.8.0"
+      }
+    },
+    "@material-ui/styles": {
+      "version": "4.9.6",
+      "resolved": "https://registry.npmjs.org/@material-ui/styles/-/styles-4.9.6.tgz",
+      "integrity": "sha512-ijgwStEkw1OZ6gCz18hkjycpr/3lKs1hYPi88O/AUn4vMuuGEGAIrqKVFq/lADmZUNF3DOFIk8LDkp7zmjPxtA==",
+      "requires": {
+        "@babel/runtime": "^7.4.4",
+        "@emotion/hash": "^0.8.0",
+        "@material-ui/types": "^5.0.0",
+        "@material-ui/utils": "^4.9.6",
+        "clsx": "^1.0.2",
+        "csstype": "^2.5.2",
+        "hoist-non-react-statics": "^3.3.2",
+        "jss": "^10.0.3",
+        "jss-plugin-camel-case": "^10.0.3",
+        "jss-plugin-default-unit": "^10.0.3",
+        "jss-plugin-global": "^10.0.3",
+        "jss-plugin-nested": "^10.0.3",
+        "jss-plugin-props-sort": "^10.0.3",
+        "jss-plugin-rule-value-function": "^10.0.3",
+        "jss-plugin-vendor-prefixer": "^10.0.3",
+        "prop-types": "^15.7.2"
+      }
+    },
+    "@material-ui/system": {
+      "version": "4.9.6",
+      "resolved": "https://registry.npmjs.org/@material-ui/system/-/system-4.9.6.tgz",
+      "integrity": "sha512-QtfoAePyqXoZ2HUVSwGb1Ro0kucMCvVjbI0CdYIR21t0Opgfm1Oer6ni9P5lfeXA39xSt0wCierw37j+YES48Q==",
+      "requires": {
+        "@babel/runtime": "^7.4.4",
+        "@material-ui/utils": "^4.9.6",
+        "prop-types": "^15.7.2"
+      }
+    },
+    "@material-ui/types": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/@material-ui/types/-/types-5.0.0.tgz",
+      "integrity": "sha512-UeH2BuKkwDndtMSS0qgx1kCzSMw+ydtj0xx/XbFtxNSTlXydKwzs5gVW5ZKsFlAkwoOOQ9TIsyoCC8hq18tOwg=="
+    },
+    "@material-ui/utils": {
+      "version": "4.9.6",
+      "resolved": "https://registry.npmjs.org/@material-ui/utils/-/utils-4.9.6.tgz",
+      "integrity": "sha512-gqlBn0JPPTUZeAktn1rgMcy9Iczrr74ecx31tyZLVGdBGGzsxzM6PP6zeS7FuoLS6vG4hoZP7hWnOoHtkR0Kvw==",
+      "requires": {
+        "@babel/runtime": "^7.4.4",
+        "prop-types": "^15.7.2",
+        "react-is": "^16.8.0"
+      }
+    },
     "@mrmlnc/readdir-enhanced": {
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/@mrmlnc/readdir-enhanced/-/readdir-enhanced-2.2.1.tgz",
@@ -1622,6 +1714,14 @@
         "@types/react-router": "*"
       }
     },
+    "@types/react-transition-group": {
+      "version": "4.2.4",
+      "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.2.4.tgz",
+      "integrity": "sha512-8DMUaDqh0S70TjkqU0DxOu80tFUiiaS9rxkWip/nb7gtvAsbqOXm02UCmR8zdcjWujgeYPiPNTVpVpKzUDotwA==",
+      "requires": {
+        "@types/react": "*"
+      }
+    },
     "@types/stack-utils": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/@types/stack-utils/-/stack-utils-1.0.1.tgz",
@@ -3168,6 +3268,11 @@
         "shallow-clone": "^0.1.2"
       }
     },
+    "clsx": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.1.0.tgz",
+      "integrity": "sha512-3avwM37fSK5oP6M5rQ9CNe99lwxhXDOeSWVPAOYF6OazUTgZCMb0yWlJpmdD74REy1gkEaFiub2ULv4fq9GUhA=="
+    },
     "co": {
       "version": "4.6.0",
       "resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz",
@@ -3665,6 +3770,15 @@
       "resolved": "https://registry.npmjs.org/css-unit-converter/-/css-unit-converter-1.1.1.tgz",
       "integrity": "sha1-2bkoGtz9jO2TW9urqDeGiX9k6ZY="
     },
+    "css-vendor": {
+      "version": "2.0.7",
+      "resolved": "https://registry.npmjs.org/css-vendor/-/css-vendor-2.0.7.tgz",
+      "integrity": "sha512-VS9Rjt79+p7M0WkPqcAza4Yq1ZHrsHrwf7hPL/bjQB+c1lwmAI+1FXxYTYt818D/50fFVflw0XKleiBN5RITkg==",
+      "requires": {
+        "@babel/runtime": "^7.6.2",
+        "is-in-browser": "^1.0.2"
+      }
+    },
     "css-what": {
       "version": "3.2.1",
       "resolved": "https://registry.npmjs.org/css-what/-/css-what-3.2.1.tgz",
@@ -4091,6 +4205,30 @@
         "utila": "~0.4"
       }
     },
+    "dom-helpers": {
+      "version": "5.1.4",
+      "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.1.4.tgz",
+      "integrity": "sha512-TjMyeVUvNEnOnhzs6uAn9Ya47GmMo3qq7m+Lr/3ON0Rs5kHvb8I+SQYjLUSYn7qhEm0QjW0yrBkvz9yOrwwz1A==",
+      "requires": {
+        "@babel/runtime": "^7.8.7",
+        "csstype": "^2.6.7"
+      },
+      "dependencies": {
+        "@babel/runtime": {
+          "version": "7.9.2",
+          "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.9.2.tgz",
+          "integrity": "sha512-NE2DtOdufG7R5vnfQUTehdTfNycfUANEtCa9PssN9O/xmTzP4E08UI797ixaei6hBEVL9BI/PsdJS5x7mWoB9Q==",
+          "requires": {
+            "regenerator-runtime": "^0.13.4"
+          }
+        },
+        "regenerator-runtime": {
+          "version": "0.13.5",
+          "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.5.tgz",
+          "integrity": "sha512-ZS5w8CpKFinUzOwW3c83oPeVXoNsrLsaCoLtJvAClH135j/R77RuymhiSErhm2lKcwSCIpmvIWSbDkIfAqKQlA=="
+        }
+      }
+    },
     "dom-serializer": {
       "version": "0.2.2",
       "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-0.2.2.tgz",
@@ -6072,6 +6210,11 @@
       "resolved": "https://registry.npmjs.org/https-browserify/-/https-browserify-1.0.0.tgz",
       "integrity": "sha1-7AbBDgo0wPL68Zn3/X/Hj//QPHM="
     },
+    "hyphenate-style-name": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/hyphenate-style-name/-/hyphenate-style-name-1.0.3.tgz",
+      "integrity": "sha512-EcuixamT82oplpoJ2XU4pDtKGWQ7b00CD9f1ug9IaQ3p1bkHMiKCZ9ut9QDI6qsa6cpUuB+A/I+zLtdNK4n2DQ=="
+    },
     "iconv-lite": {
       "version": "0.4.24",
       "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
@@ -6371,6 +6514,11 @@
         "is-extglob": "^2.1.1"
       }
     },
+    "is-in-browser": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/is-in-browser/-/is-in-browser-1.1.3.tgz",
+      "integrity": "sha1-Vv9NtoOgeMYILrldrX3GLh0E+DU="
+    },
     "is-number": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/is-number/-/is-number-3.0.0.tgz",
@@ -7780,6 +7928,83 @@
         "verror": "1.10.0"
       }
     },
+    "jss": {
+      "version": "10.1.1",
+      "resolved": "https://registry.npmjs.org/jss/-/jss-10.1.1.tgz",
+      "integrity": "sha512-Xz3qgRUFlxbWk1czCZibUJqhVPObrZHxY3FPsjCXhDld4NOj1BgM14Ir5hVm+Qr6OLqVljjGvoMcCdXNOAbdkQ==",
+      "requires": {
+        "@babel/runtime": "^7.3.1",
+        "csstype": "^2.6.5",
+        "is-in-browser": "^1.1.3",
+        "tiny-warning": "^1.0.2"
+      }
+    },
+    "jss-plugin-camel-case": {
+      "version": "10.1.1",
+      "resolved": "https://registry.npmjs.org/jss-plugin-camel-case/-/jss-plugin-camel-case-10.1.1.tgz",
+      "integrity": "sha512-MDIaw8FeD5uFz1seQBKz4pnvDLnj5vIKV5hXSVdMaAVq13xR6SVTVWkIV/keyTs5txxTvzGJ9hXoxgd1WTUlBw==",
+      "requires": {
+        "@babel/runtime": "^7.3.1",
+        "hyphenate-style-name": "^1.0.3",
+        "jss": "10.1.1"
+      }
+    },
+    "jss-plugin-default-unit": {
+      "version": "10.1.1",
+      "resolved": "https://registry.npmjs.org/jss-plugin-default-unit/-/jss-plugin-default-unit-10.1.1.tgz",
+      "integrity": "sha512-UkeVCA/b3QEA4k0nIKS4uWXDCNmV73WLHdh2oDGZZc3GsQtlOCuiH3EkB/qI60v2MiCq356/SYWsDXt21yjwdg==",
+      "requires": {
+        "@babel/runtime": "^7.3.1",
+        "jss": "10.1.1"
+      }
+    },
+    "jss-plugin-global": {
+      "version": "10.1.1",
+      "resolved": "https://registry.npmjs.org/jss-plugin-global/-/jss-plugin-global-10.1.1.tgz",
+      "integrity": "sha512-VBG3wRyi3Z8S4kMhm8rZV6caYBegsk+QnQZSVmrWw6GVOT/Z4FA7eyMu5SdkorDlG/HVpHh91oFN56O4R9m2VA==",
+      "requires": {
+        "@babel/runtime": "^7.3.1",
+        "jss": "10.1.1"
+      }
+    },
+    "jss-plugin-nested": {
+      "version": "10.1.1",
+      "resolved": "https://registry.npmjs.org/jss-plugin-nested/-/jss-plugin-nested-10.1.1.tgz",
+      "integrity": "sha512-ozEu7ZBSVrMYxSDplPX3H82XHNQk2DQEJ9TEyo7OVTPJ1hEieqjDFiOQOxXEj9z3PMqkylnUbvWIZRDKCFYw5Q==",
+      "requires": {
+        "@babel/runtime": "^7.3.1",
+        "jss": "10.1.1",
+        "tiny-warning": "^1.0.2"
+      }
+    },
+    "jss-plugin-props-sort": {
+      "version": "10.1.1",
+      "resolved": "https://registry.npmjs.org/jss-plugin-props-sort/-/jss-plugin-props-sort-10.1.1.tgz",
+      "integrity": "sha512-g/joK3eTDZB4pkqpZB38257yD4LXB0X15jxtZAGbUzcKAVUHPl9Jb47Y7lYmiGsShiV4YmQRqG1p2DHMYoK91g==",
+      "requires": {
+        "@babel/runtime": "^7.3.1",
+        "jss": "10.1.1"
+      }
+    },
+    "jss-plugin-rule-value-function": {
+      "version": "10.1.1",
+      "resolved": "https://registry.npmjs.org/jss-plugin-rule-value-function/-/jss-plugin-rule-value-function-10.1.1.tgz",
+      "integrity": "sha512-ClV1lvJ3laU9la1CUzaDugEcwnpjPTuJ0yGy2YtcU+gG/w9HMInD5vEv7xKAz53Bk4WiJm5uLOElSEshHyhKNw==",
+      "requires": {
+        "@babel/runtime": "^7.3.1",
+        "jss": "10.1.1"
+      }
+    },
+    "jss-plugin-vendor-prefixer": {
+      "version": "10.1.1",
+      "resolved": "https://registry.npmjs.org/jss-plugin-vendor-prefixer/-/jss-plugin-vendor-prefixer-10.1.1.tgz",
+      "integrity": "sha512-09MZpQ6onQrhaVSF6GHC4iYifQ7+4YC/tAP6D4ZWeZotvCMq1mHLqNKRIaqQ2lkgANjlEot2JnVi1ktu4+L4pw==",
+      "requires": {
+        "@babel/runtime": "^7.3.1",
+        "css-vendor": "^2.0.7",
+        "jss": "10.1.1"
+      }
+    },
     "jsx-ast-utils": {
       "version": "2.2.3",
       "resolved": "https://registry.npmjs.org/jsx-ast-utils/-/jsx-ast-utils-2.2.3.tgz",
@@ -9204,6 +9429,11 @@
         "ts-pnp": "^1.1.2"
       }
     },
+    "popper.js": {
+      "version": "1.16.1",
+      "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.16.1.tgz",
+      "integrity": "sha512-Wb4p1J4zyFTbM+u6WuO4XstYx4Ky9Cewe4DWrel7B0w6VVICvPwdOpotjzcf6eD8TsckVnIMNONQyPIUFOUbCQ=="
+    },
     "portfinder": {
       "version": "1.0.25",
       "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.25.tgz",
@@ -10731,6 +10961,17 @@
         "workbox-webpack-plugin": "4.3.1"
       }
     },
+    "react-transition-group": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.3.0.tgz",
+      "integrity": "sha512-1qRV1ZuVSdxPlPf4O8t7inxUGpdyO5zG9IoNfJxSO0ImU2A1YWkEQvFPuIPZmMLkg5hYs7vv5mMOyfgSkvAwvw==",
+      "requires": {
+        "@babel/runtime": "^7.5.5",
+        "dom-helpers": "^5.0.1",
+        "loose-envify": "^1.4.0",
+        "prop-types": "^15.6.2"
+      }
+    },
     "read-pkg": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-3.0.0.tgz",

client/package.json

@@ -4,6 +4,9 @@
   "private": true,
   "dependencies": {
     "@auth0/auth0-spa-js": "^1.6.4",
+    "@material-ui/core": "^4.9.8",
+    "@material-ui/icons": "^4.9.1",
+    "@material-ui/lab": "^4.0.0-alpha.47",
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.4.0",
     "@testing-library/user-event": "^7.2.1",

client/src/App.tsx

@@ -1,8 +1,12 @@
 import React, { FC } from "react";
+import { Router } from "react-router-dom";
+import * as createHistory from "history";
 import Layout from "./pages/Layout";
 import { useAuth0 } from "./authentication/auth0";
 
-const App: FC = () => {
+export const history = createHistory.createBrowserHistory();
+
+export default function App() {
   const { loading } = useAuth0();
 
   if (loading) {
@@ -10,10 +14,10 @@ const App: FC = () => {
   }
 
   return (
-    <div className="App">
+    <>
-      <Layout />
+      <Router history={history}>
-    </div>
+        <Layout />
+      </Router>
+    </>
   );
-};
+}
-
-export default App;

client/src/components/Avatar.tsx

@@ -1,18 +0,0 @@
-import React, { FC } from "react";
-
-interface IProps {
-  picture: string;
-}
-export const Avatar: FC<IProps> = ({ picture }) => {
-  return (
-    <>
-      <img
-        className="circle"
-        src={picture}
-        height="100vh"
-        width="100vh"
-        alt="user avatar"
-      />
-    </>
-  );
-};

client/src/components/AvatarList.tsx

@@ -1,6 +1,9 @@
 import React, { FC } from "react";
-import { User } from "../types/User";
 import { Link } from "react-router-dom";
+import Avatar from "@material-ui/core/Avatar";
+import AvatarGroup from "@material-ui/lab/AvatarGroup";
+import { User } from "../types/User";
+import { UserAvatar } from "./UserAvatar";
 
 interface AvatarListProps {
   users: User[];
@@ -11,17 +14,13 @@ export const AvatarList: FC<AvatarListProps> = ({ users }) => {
     <></>
   ) : (
     <>
-      {users.map((user: User, i: number) => (
+      <AvatarGroup max={2}>
-        <Link to={`/users/${user.id}`} key={i}>
+        {users.map((user: User, i: number) => (
-          <img
+          <Link to={`/users/${user.id}`} key={i}>
-            className="circle"
+            <Avatar src={user.picture} alt={user.fullName} />
-            src={user.picture}
+          </Link>
-            width="32vh"
+        ))}
-            height="32vh"
+      </AvatarGroup>
-            alt={user.fullName}
-          />
-        </Link>
-      ))}
     </>
   );
 };

client/src/components/ButtonAppBar.tsx

@@ -0,0 +1,60 @@
+import React from "react";
+import { Link } from "react-router-dom";
+import { createStyles, makeStyles, Theme } from "@material-ui/core/styles";
+import AppBar from "@material-ui/core/AppBar";
+import Toolbar from "@material-ui/core/Toolbar";
+import Typography from "@material-ui/core/Typography";
+import Button from "@material-ui/core/Button";
+import IconButton from "@material-ui/core/IconButton";
+import MenuIcon from "@material-ui/icons/Menu";
+import { useAuth0 } from "../authentication/auth0";
+
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    root: {
+      flexGrow: 1
+    },
+    menuButton: {
+      marginRight: theme.spacing(2)
+    },
+    title: {
+      flexGrow: 1
+    }
+  })
+);
+
+export default function ButtonAppBar() {
+  const classes = useStyles();
+  const { isAuthenticated, loginWithRedirect, logout } = useAuth0();
+
+  return (
+    <div className={classes.root}>
+      <AppBar position="static">
+        <Toolbar>
+          <IconButton
+            edge="start"
+            className={classes.menuButton}
+            color="inherit"
+            aria-label="menu"
+          >
+            <MenuIcon />
+          </IconButton>
+          <Typography variant="h6" className={classes.title}>
+            <Button color="inherit" href="/">
+              BugBuster
+            </Button>
+          </Typography>
+          {!isAuthenticated ? (
+            <Button color="inherit" onClick={() => loginWithRedirect({})}>
+              Log in
+            </Button>
+          ) : (
+            <Button color="inherit" onClick={() => logout()}>
+              Log out
+            </Button>
+          )}
+        </Toolbar>
+      </AppBar>
+    </div>
+  );
+}

client/src/components/FloatingButton.tsx

@@ -1,23 +1,43 @@
 import React, { FC, MouseEvent } from "react";
+import { Fab, SvgIconTypeMap } from "@material-ui/core";
+import { OverridableComponent } from "@material-ui/core/OverridableComponent";
+import AddIcon from "@material-ui/icons/Add";
+
 import { Button } from "./Button";
 
 interface IProps {
   icon?: string;
-  size?: string;
+  color?: "inherit" | "primary" | "secondary" | "default" | undefined;
-  color?: string;
   onClick?: (e: MouseEvent) => void;
+  size?: "small" | "medium" | "large" | undefined;
+  text?: string;
 }
 
+// export const FloatingButton: FC<IProps> = ({
+//   icon = "add",
+//   size = "small",
+//   color = "red",
+//   onClick
+// }) => {
+//   const iconComponent = <i className="material-icons left">{icon}</i>;
+//   return (
+//     <Button color={color} size={size} shape="btn-floating" onClick={onClick}>
+//       {iconComponent}
+//     </Button>
+//   );
+// };
+
 export const FloatingButton: FC<IProps> = ({
-  icon = "add",
+  color,
-  size = "small",
+  icon,
-  color = "red",
+  size,
+  text,
   onClick
 }) => {
-  const iconComponent = <i className="material-icons left">{icon}</i>;
   return (
-    <Button color={color} size={size} shape="btn-floating" onClick={onClick}>
+    <Fab color={color} aria-label={icon} size={size} onClick={onClick}>
-      {iconComponent}
+      <AddIcon />
-    </Button>
+      {text}
+    </Fab>
   );
 };

client/src/components/Footer.tsx

@@ -0,0 +1,53 @@
+import React from "react";
+import { AppBar } from "@material-ui/core";
+import CssBaseline from "@material-ui/core/CssBaseline";
+import Typography from "@material-ui/core/Typography";
+import { makeStyles } from "@material-ui/core/styles";
+import Container from "@material-ui/core/Container";
+import Link from "@material-ui/core/Link";
+
+function Copyright() {
+  return (
+    <Typography variant="body2" color="textSecondary">
+      {"© "}
+      <Link color="inherit" href="/">
+        BugBuster
+      </Link>{" "}
+      {new Date().getFullYear()}
+      {". All Rights Reserved. Made with 🔥"}
+    </Typography>
+  );
+}
+
+const useStyles = makeStyles(theme => ({
+  footer: {
+    padding: theme.spacing(3, 2),
+    marginTop: "auto",
+    backgroundColor:
+      theme.palette.type === "light"
+        ? theme.palette.grey[200]
+        : theme.palette.grey[800]
+  }
+}));
+
+export default function Footer() {
+  const classes = useStyles();
+
+  return (
+    <footer className={classes.footer}>
+      <Container maxWidth="sm">
+        <Typography variant="body1">
+          <Link
+            color="inherit"
+            href="https://github.com/rjNemo"
+            target="_blank"
+            rel="noopener"
+          >
+            Ruidy Nemausat
+          </Link>{" "}
+        </Typography>
+        <Copyright />
+      </Container>
+    </footer>
+  );
+}

client/src/components/Header.tsx

@@ -1,4 +1,5 @@
 import React, { FC } from "react";
+import { Typography, Box } from "@material-ui/core";
 
 type HeaderProps = {
   title: string;
@@ -7,9 +8,13 @@ type HeaderProps = {
 
 export const Header: FC<HeaderProps> = ({ title, description }) => {
   return (
-    <>
+    <Box>
-      <h1>{title}</h1>
+      <Typography variant="h2" component="h2">
-      <p className="lead">{description}</p>
+        {title}
-    </>
+      </Typography>
+      <Typography variant="subtitle2" component="h3">
+        {description}
+      </Typography>
+    </Box>
   );
 };

client/src/components/ProfileSelector.tsx

@@ -1,6 +1,6 @@
 import React, { FC } from "react";
 import { HorizontalCard } from "./HorizontalCard";
-import { Avatar } from "./Avatar";
+import { UserAvatar } from "./UserAvatar";
 import { Link } from "react-router-dom";
 
 export const ProfileSelector: FC = () => {
@@ -10,7 +10,10 @@ export const ProfileSelector: FC = () => {
         <div className="center ">
           <h4>Select a profile</h4>
           <Link to="/users/cd179eb7-3a54-4060-b22c-3e947bdffcbc">
-            <Avatar picture="https://vignette.wikia.nocookie.net/jamescameronsavatar/images/0/08/Neytiri_Profilbild.jpg/revision/latest/scale-to-width-down/250?cb=20100107164021&path-prefix=de" />
+            <UserAvatar
+              alt=""
+              picture="https://vignette.wikia.nocookie.net/jamescameronsavatar/images/0/08/Neytiri_Profilbild.jpg/revision/latest/scale-to-width-down/250?cb=20100107164021&path-prefix=de"
+            />
           </Link>
           <h5>Demo User</h5>
         </div>

client/src/components/ProgressBar.tsx

@@ -1,6 +1,10 @@
 import React, { FC, CSSProperties } from "react";
+import { makeStyles, Theme, createStyles } from "@material-ui/core/styles";
+import LinearProgress from "@material-ui/core/LinearProgress";
+import { Box } from "@material-ui/core";
+import { PlaylistAddCheck } from "@material-ui/icons";
 
-type ProgressBarProps = {
+type IProps = {
   value: number;
   max?: number;
   tasksTotalCount?: number;
@@ -8,7 +12,18 @@ type ProgressBarProps = {
   remainingDays?: number;
 };
 
-export const ProgressBar: FC<ProgressBarProps> = ({
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    root: {
+      width: "100%",
+      "& > * + *": {
+        marginTop: theme.spacing(2)
+      }
+    }
+  })
+);
+
+export const ProgressBar: FC<IProps> = ({
   value,
   max = 100,
   tasksDone,
@@ -28,21 +43,29 @@ export const ProgressBar: FC<ProgressBarProps> = ({
     barColor = "red";
   }
 
+  const classes = useStyles();
+
   return (
     <>
       <div className="row">
-        <div className="progress">
+        <Box className="row">
+          <div className={classes.root}>
+            <LinearProgress variant="determinate" value={value} />
+            {/* <LinearProgress variant="determinate" value={value} color={barColor} /> */}
+          </div>
+        </Box>
+        {/* <div className="progress">
           <div className={`determinate ${barColor}`} style={styleString}></div>
-        </div>
+        </div> */}
-        <div>
+        <Box>
-          <i className="left material-icons">playlist_add_check</i>
+          <PlaylistAddCheck />
           <span>
             {tasksDone}/{tasksTotalCount}
           </span>
-          <div className="right">
+          <Box className="right">
             <span>Due {remainingDays} days</span>
-          </div>
+          </Box>
-        </div>
+        </Box>
       </div>
     </>
   );

client/src/components/SignInSide.tsx

@@ -0,0 +1,118 @@
+import React from "react";
+import Avatar from "@material-ui/core/Avatar";
+import Button from "@material-ui/core/Button";
+import CssBaseline from "@material-ui/core/CssBaseline";
+import TextField from "@material-ui/core/TextField";
+import FormControlLabel from "@material-ui/core/FormControlLabel";
+import Checkbox from "@material-ui/core/Checkbox";
+import Link from "@material-ui/core/Link";
+import Paper from "@material-ui/core/Paper";
+import Grid from "@material-ui/core/Grid";
+import LockOutlinedIcon from "@material-ui/icons/LockOutlined";
+import Typography from "@material-ui/core/Typography";
+import { makeStyles, createStyles, Theme } from "@material-ui/core/styles";
+
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    root: {
+      height: "100vh"
+    },
+    image: {
+      backgroundImage: "url(https://source.unsplash.com/daily?dev)",
+      backgroundRepeat: "no-repeat",
+      backgroundColor:
+        theme.palette.type === "light"
+          ? theme.palette.grey[50]
+          : theme.palette.grey[900],
+      backgroundSize: "cover",
+      backgroundPosition: "center"
+    },
+    paper: {
+      margin: theme.spacing(8, 4),
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "center"
+    },
+    avatar: {
+      margin: theme.spacing(1),
+      backgroundColor: theme.palette.secondary.main
+    },
+    form: {
+      width: "100%",
+      marginTop: theme.spacing(1)
+    },
+    submit: {
+      margin: theme.spacing(3, 0, 2)
+    }
+  })
+);
+
+export default function SignInSide() {
+  const classes = useStyles();
+
+  return (
+    <Grid container component="main" className={classes.root}>
+      <CssBaseline />
+      <Grid item xs={false} sm={4} md={7} className={classes.image} />
+      <Grid item xs={12} sm={8} md={5} component={Paper} elevation={6} square>
+        <div className={classes.paper}>
+          <Avatar className={classes.avatar}>
+            <LockOutlinedIcon />
+          </Avatar>
+          <Typography component="h1" variant="h5">
+            Sign in
+          </Typography>
+          <form className={classes.form} noValidate>
+            <TextField
+              variant="outlined"
+              margin="normal"
+              required
+              fullWidth
+              id="email"
+              label="Email Address"
+              name="email"
+              autoComplete="email"
+              autoFocus
+            />
+            <TextField
+              variant="outlined"
+              margin="normal"
+              required
+              fullWidth
+              name="password"
+              label="Password"
+              type="password"
+              id="password"
+              autoComplete="current-password"
+            />
+            <FormControlLabel
+              control={<Checkbox value="remember" color="primary" />}
+              label="Remember me"
+            />
+            <Button
+              type="submit"
+              fullWidth
+              variant="contained"
+              color="primary"
+              className={classes.submit}
+            >
+              Sign In
+            </Button>
+            <Grid container>
+              <Grid item xs>
+                <Link href="#" variant="body2">
+                  Forgot password?
+                </Link>
+              </Grid>
+              <Grid item>
+                <Link href="#" variant="body2">
+                  {"Don't have an account? Sign Up"}
+                </Link>
+              </Grid>
+            </Grid>
+          </form>
+        </div>
+      </Grid>
+    </Grid>
+  );
+}

client/src/components/TicketList.tsx

@@ -53,11 +53,7 @@ export const TicketList: FC<TicketListProps> = ({
         />
         <h3>Tickets</h3>
         {addButton && (
-          <FloatingButton
+          <FloatingButton color="primary" size="small" onClick={onClick} />
-            color="indigo lighten-3"
-            size="small"
-            onClick={onClick}
-          />
         )}
         <FilterBar
           filterText={filterText}

client/src/components/UserAvatar.tsx

@@ -0,0 +1,51 @@
+import React, { FC } from "react";
+import { makeStyles, createStyles, Theme } from "@material-ui/core/styles";
+import Avatar from "@material-ui/core/Avatar";
+
+interface IProps {
+  picture: string;
+  alt: string;
+}
+
+// export const Avatar: FC<IProps> = () => {
+//   return (
+//     <>
+//       <img
+//         className="circle"
+//         src={picture}
+//         height="100vh"
+//         width="100vh"
+//         alt="user avatar"
+//       />
+//     </>
+//   );
+// };
+
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    root: {
+      display: "flex",
+      "& > *": {
+        margin: theme.spacing(1)
+      }
+    },
+    small: {
+      width: theme.spacing(3),
+      height: theme.spacing(3)
+    },
+    large: {
+      width: theme.spacing(10),
+      height: theme.spacing(10)
+    }
+  })
+);
+
+export const UserAvatar: FC<IProps> = ({ picture, alt }) => {
+  const classes = useStyles();
+
+  return (
+    <div className={classes.root}>
+      <Avatar alt={alt} src={picture} className={classes.large} />
+    </div>
+  );
+};

client/src/components/UserHeader.tsx

@@ -1,6 +1,6 @@
 import React, { FC } from "react";
 import { Header } from "../components/Header";
-import { Avatar } from "../components/Avatar";
+import { UserAvatar } from "./UserAvatar";
 
 interface IProps {
   fullName: string;
@@ -11,7 +11,7 @@ export const UserHeader: FC<IProps> = ({ fullName, presentation, picture }) => {
   return (
     <div className="row valign-wrapper">
       <div className="col s2">
-        <Avatar picture={picture} />
+        <UserAvatar picture={picture} alt="" />
       </div>
       <div className="col s10">
         <Header title={fullName} description={presentation} />

client/src/pages/HomePage.tsx

@@ -1,21 +1,23 @@
 import React from "react";
-import { LogInForm } from "../components/LogInForm";
+// import { LogInForm } from "../components/LogInForm";
-import { ProfileSelector } from "../components/ProfileSelector";
+// import { ProfileSelector } from "../components/ProfileSelector";
+import SignInSide from "../components/SignInSide";
 
 export const HomePage: React.FC = () => {
   return (
-    <div className="section">
+    // <div className="section">
-      <div className="container center">
+    //   <div className="container center">
-        <h1 className="center">Ticket Manager</h1>
+    //     <h1 className="center">Ticket Manager</h1>
-        <div className="row">
+    //     <div className="row">
-          <div className="col s6">
+    //       <div className="col s6">
-            <ProfileSelector />
+    //         <ProfileSelector />
-          </div>
+    //       </div>
-          <div className="col s6">
+    //       <div className="col s6">
-            <LogInForm />
+    //         <LogInForm />
-          </div>
+    //       </div>
-        </div>
+    //     </div>
-      </div>
+    //   </div>
-    </div>
+    // </div>
+    <SignInSide />
   );
 };

client/src/pages/Layout.tsx

@@ -1,18 +1,36 @@
 import React, { FC } from "react";
+
+import CssBaseline from "@material-ui/core/CssBaseline";
+import { makeStyles } from "@material-ui/core/styles";
 import { AppRouter } from "../utils/router";
-import { NavBar } from "../components/Navbar";
+import ButtonAppBar from "../components/ButtonAppBar";
+import Footer from "../components/Footer";
 
-const Layout: FC = () => {
+const useStyles = makeStyles(theme => ({
+  root: {
+    display: "flex",
+    flexDirection: "column",
+    minHeight: "100vh"
+  },
+  main: {
+    marginTop: theme.spacing(8),
+    marginBottom: theme.spacing(2)
+  }
+}));
+
+export default function Layout() {
+  const classes = useStyles();
   return (
-    <>
+    <div className="grey lighten-3">
-      <header>
+      <div className={classes.root}>
-        <NavBar />
+        <header>
-      </header>
+          <ButtonAppBar />
-      {/* <BreadCrumb /> */}
+        </header>
-      <AppRouter />
+        {/* <BreadCrumb /> */}
-      {/* <Footer /> */}
+        <CssBaseline />
-    </>
+        <AppRouter />
+        <Footer />
+      </div>
+    </div>
   );
-};
+}
-
-export default Layout;

client/src/pages/ProjectPage.tsx

@@ -39,7 +39,7 @@ export const ProjectPage: FC<IProps> = ({ viewModel }) => {
           <AvatarList users={users} />
           <FloatingButton
             icon="add"
-            color="indigo lighten-3"
+            color="default"
             size="small"
             onClick={() => setShowModal(true)}
           />

client/src/utils/router.tsx

@@ -8,38 +8,32 @@ import { TicketController } from "../controllers/TicketController";
 import { NotFoundPage } from "../pages/NotFoundPage";
 // import { TestPage } from "../pages/TestPage";
 
-export const history = creacteHistory.createBrowserHistory();
-
 export const AppRouter = () => {
   return (
-    <Router history={history}>
+    <Switch>
-      <div className="grey lighten-3">
+      {/* <Route exact path="/">
-        <Switch>
-          {/* <Route exact path="/">
             <TestPage />
           </Route> */}
 
-          <Route exact path="/">
+      <Route exact path="/">
-            <HomeController />
+        <HomeController />
-          </Route>
+      </Route>
 
-          <Route path="/users/:id">
+      <Route path="/users/:id">
-            <UserController />
+        <UserController />
-          </Route>
+      </Route>
 
-          <Route path="/projects/:id">
+      <Route path="/projects/:id">
-            <ProjectController />
+        <ProjectController />
-          </Route>
+      </Route>
 
-          <Route path="/tickets/:id">
+      <Route path="/tickets/:id">
-            <TicketController />
+        <TicketController />
-          </Route>
+      </Route>
 
-          <Route path="/404">
+      <Route path="/404">
-            <NotFoundPage />
+        <NotFoundPage />
-          </Route>
+      </Route>
-        </Switch>
+    </Switch>
-      </div>
-    </Router>
   );
 };