From 440606325352a7facdd98e45f8ed32ca2c4cbf99 Mon Sep 17 00:00:00 2001 From: Ruidy Nemausat Date: Wed, 1 Apr 2020 16:37:09 +0200 Subject: [PATCH] Installed Material-Ui; Created Sign up page; General styling --- Controllers/AppUsersController.cs | 2 +- Controllers/ProjectsController.cs | 2 +- Controllers/TicketsController.cs | 2 +- Startup.cs | 2 +- TicketManager.csproj | 22 +- client/package-lock.json | 241 ++++++++++++++++++++++ client/package.json | 3 + client/src/App.tsx | 18 +- client/src/components/Avatar.tsx | 18 -- client/src/components/AvatarList.tsx | 23 +-- client/src/components/ButtonAppBar.tsx | 60 ++++++ client/src/components/FloatingButton.tsx | 38 +++- client/src/components/Footer.tsx | 53 +++++ client/src/components/Header.tsx | 13 +- client/src/components/ProfileSelector.tsx | 7 +- client/src/components/ProgressBar.tsx | 41 +++- client/src/components/SignInSide.tsx | 118 +++++++++++ client/src/components/TicketList.tsx | 6 +- client/src/components/UserAvatar.tsx | 51 +++++ client/src/components/UserHeader.tsx | 4 +- client/src/pages/HomePage.tsx | 32 +-- client/src/pages/Layout.tsx | 44 ++-- client/src/pages/ProjectPage.tsx | 2 +- client/src/utils/router.tsx | 42 ++-- 24 files changed, 708 insertions(+), 136 deletions(-) delete mode 100644 client/src/components/Avatar.tsx create mode 100644 client/src/components/ButtonAppBar.tsx create mode 100644 client/src/components/Footer.tsx create mode 100644 client/src/components/SignInSide.tsx create mode 100644 client/src/components/UserAvatar.tsx diff --git a/Controllers/AppUsersController.cs b/Controllers/AppUsersController.cs index 2c1b759..b8ec990 100644 --- a/Controllers/AppUsersController.cs +++ b/Controllers/AppUsersController.cs @@ -13,7 +13,7 @@ using TicketManager.Resources; namespace TicketManager.Controllers { - [Authorize] + // [Authorize] [Produces("application/json")] [Route("api/v1/users")] [ApiController] diff --git a/Controllers/ProjectsController.cs b/Controllers/ProjectsController.cs index c06bfb0..0bd41d0 100644 --- a/Controllers/ProjectsController.cs +++ b/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] diff --git a/Controllers/TicketsController.cs b/Controllers/TicketsController.cs index 78891dd..efc6132 100644 --- a/Controllers/TicketsController.cs +++ b/Controllers/TicketsController.cs @@ -10,7 +10,7 @@ using TicketManager.Models; namespace TicketManager.Controllers { - [Authorize] + // [Authorize] [Route("api/v1/[controller]")] [ApiController] public class TicketsController : ControllerBase diff --git a/Startup.cs b/Startup.cs index e358b50..271e797 100644 --- a/Startup.cs +++ b/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. diff --git a/TicketManager.csproj b/TicketManager.csproj index d68b951..46c0c2f 100644 --- a/TicketManager.csproj +++ b/TicketManager.csproj @@ -1,7 +1,7 @@ - netcoreapp3.1 + netcoreapp3.0 8.0 @@ -13,24 +13,24 @@ - - - - - + + + + + runtime; build; native; contentfiles; analyzers; buildtransitive all - - - - + + + + - + runtime; build; native; contentfiles; analyzers; buildtransitive all diff --git a/client/package-lock.json b/client/package-lock.json index a8c0141..a7823f3 100644 --- a/client/package-lock.json +++ b/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", diff --git a/client/package.json b/client/package.json index 87298e4..22ccca7 100644 --- a/client/package.json +++ b/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", diff --git a/client/src/App.tsx b/client/src/App.tsx index f71b386..e3b5f69 100644 --- a/client/src/App.tsx +++ b/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 ( -
- -
+ <> + + + + ); -}; - -export default App; +} diff --git a/client/src/components/Avatar.tsx b/client/src/components/Avatar.tsx deleted file mode 100644 index 91dd6e9..0000000 --- a/client/src/components/Avatar.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import React, { FC } from "react"; - -interface IProps { - picture: string; -} -export const Avatar: FC = ({ picture }) => { - return ( - <> - user avatar - - ); -}; diff --git a/client/src/components/AvatarList.tsx b/client/src/components/AvatarList.tsx index 606111f..644c1b1 100644 --- a/client/src/components/AvatarList.tsx +++ b/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 = ({ users }) => { <> ) : ( <> - {users.map((user: User, i: number) => ( - - {user.fullName} - - ))} + + {users.map((user: User, i: number) => ( + + + + ))} + ); }; diff --git a/client/src/components/ButtonAppBar.tsx b/client/src/components/ButtonAppBar.tsx new file mode 100644 index 0000000..bf3e1af --- /dev/null +++ b/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 ( +
+ + + + + + + + + {!isAuthenticated ? ( + + ) : ( + + )} + + +
+ ); +} diff --git a/client/src/components/FloatingButton.tsx b/client/src/components/FloatingButton.tsx index 0031443..9cae4e0 100644 --- a/client/src/components/FloatingButton.tsx +++ b/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?: string; + color?: "inherit" | "primary" | "secondary" | "default" | undefined; onClick?: (e: MouseEvent) => void; + size?: "small" | "medium" | "large" | undefined; + text?: string; } +// export const FloatingButton: FC = ({ +// icon = "add", +// size = "small", +// color = "red", +// onClick +// }) => { +// const iconComponent = {icon}; +// return ( +// +// ); +// }; + export const FloatingButton: FC = ({ - icon = "add", - size = "small", - color = "red", + color, + icon, + size, + text, onClick }) => { - const iconComponent = {icon}; return ( - + + + {text} + ); }; diff --git a/client/src/components/Footer.tsx b/client/src/components/Footer.tsx new file mode 100644 index 0000000..b814495 --- /dev/null +++ b/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 ( + + {"© "} + + BugBuster + {" "} + {new Date().getFullYear()} + {". All Rights Reserved. Made with 🔥"} + + ); +} + +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 ( +
+ + + + Ruidy Nemausat + {" "} + + + +
+ ); +} diff --git a/client/src/components/Header.tsx b/client/src/components/Header.tsx index 863906a..a93d504 100644 --- a/client/src/components/Header.tsx +++ b/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 = ({ title, description }) => { return ( - <> -

{title}

-

{description}

- + + + {title} + + + {description} + + ); }; diff --git a/client/src/components/ProfileSelector.tsx b/client/src/components/ProfileSelector.tsx index f689262..1671585 100644 --- a/client/src/components/ProfileSelector.tsx +++ b/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 = () => {

Select a profile

- +
Demo User
diff --git a/client/src/components/ProgressBar.tsx b/client/src/components/ProgressBar.tsx index bf0ff90..c4ddf8e 100644 --- a/client/src/components/ProgressBar.tsx +++ b/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 = ({ +const useStyles = makeStyles((theme: Theme) => + createStyles({ + root: { + width: "100%", + "& > * + *": { + marginTop: theme.spacing(2) + } + } + }) +); + +export const ProgressBar: FC = ({ value, max = 100, tasksDone, @@ -28,21 +43,29 @@ export const ProgressBar: FC = ({ barColor = "red"; } + const classes = useStyles(); + return ( <>
-
+ +
+ + {/* */} +
+ + {/*
-
-
- playlist_add_check +
*/} + + {tasksDone}/{tasksTotalCount} -
+ Due {remainingDays} days -
-
+ +
); diff --git a/client/src/components/SignInSide.tsx b/client/src/components/SignInSide.tsx new file mode 100644 index 0000000..bb58e38 --- /dev/null +++ b/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 ( + + + + +
+ + + + + Sign in + +
+ + + } + label="Remember me" + /> + + + + + Forgot password? + + + + + {"Don't have an account? Sign Up"} + + + + +
+ + + ); +} diff --git a/client/src/components/TicketList.tsx b/client/src/components/TicketList.tsx index 149eabe..b593f31 100644 --- a/client/src/components/TicketList.tsx +++ b/client/src/components/TicketList.tsx @@ -53,11 +53,7 @@ export const TicketList: FC = ({ />

Tickets

{addButton && ( - + )} = () => { +// return ( +// <> +// 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 = ({ picture, alt }) => { + const classes = useStyles(); + + return ( +
+ +
+ ); +}; diff --git a/client/src/components/UserHeader.tsx b/client/src/components/UserHeader.tsx index 3242e63..b2345d9 100644 --- a/client/src/components/UserHeader.tsx +++ b/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 = ({ fullName, presentation, picture }) => { return (
- +
diff --git a/client/src/pages/HomePage.tsx b/client/src/pages/HomePage.tsx index d6676c9..e6fe164 100644 --- a/client/src/pages/HomePage.tsx +++ b/client/src/pages/HomePage.tsx @@ -1,21 +1,23 @@ import React from "react"; -import { LogInForm } from "../components/LogInForm"; -import { ProfileSelector } from "../components/ProfileSelector"; +// import { LogInForm } from "../components/LogInForm"; +// import { ProfileSelector } from "../components/ProfileSelector"; +import SignInSide from "../components/SignInSide"; export const HomePage: React.FC = () => { return ( -
-
-

Ticket Manager

-
-
- -
-
- -
-
-
-
+ //
+ //
+ //

Ticket Manager

+ //
+ //
+ // + //
+ //
+ // + //
+ //
+ //
+ //
+ ); }; diff --git a/client/src/pages/Layout.tsx b/client/src/pages/Layout.tsx index cf9a792..f7e8a1e 100644 --- a/client/src/pages/Layout.tsx +++ b/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 ( - <> -
- -
- {/* */} - - {/*