diff --git a/README.md b/README.md index e2cbe14..a52adfe 100644 --- a/README.md +++ b/README.md @@ -22,7 +22,7 @@ Kerberos Agent is a cutting edge video surveillance management system made available as Open Source under the MIT License. This means that all the source code is available for you or your company, and you can use, transform and distribute the source code; as long you keep a reference of the original license. Kerberos Agent can be used for commercial usage (which was not the case for v2). Read more [about the license here](LICENSE). -![login-ossag](https://user-images.githubusercontent.com/1546779/172066784-4d9cefc6-9599-4d2e-bc65-e1f2862b7409.png) +![login-agent](./assets/img/agent-login.png) ## Work In Progress @@ -84,7 +84,7 @@ The `web` is a **React** project which is the main entry point for an end user t This will start a webserver and launches the web app on port `3000`. -![signin-to-agent](https://user-images.githubusercontent.com/1546779/111135333-d02d4a00-857c-11eb-8426-e65076ed111c.gif) +![login-agent](./assets/img/agent-login.gif) ### Machinery diff --git a/assets/img/agent-login.gif b/assets/img/agent-login.gif new file mode 100644 index 0000000..6c91c71 Binary files /dev/null and b/assets/img/agent-login.gif differ diff --git a/assets/img/agent-login.png b/assets/img/agent-login.png new file mode 100644 index 0000000..bc27bfe Binary files /dev/null and b/assets/img/agent-login.png differ diff --git a/ui/package.json b/ui/package.json index 143da1d..d7b6aad 100644 --- a/ui/package.json +++ b/ui/package.json @@ -4,7 +4,7 @@ "private": false, "dependencies": { "@giantmachines/redux-websocket": "^1.5.1", - "@kerberos-io/ui": "1.59.0", + "@kerberos-io/ui": "1.60.0", "@material-ui/core": "^4.11.2", "@testing-library/jest-dom": "^5.11.4", "@testing-library/react": "^11.1.0", @@ -30,11 +30,12 @@ "redux-devtools-extension": "^2.13.8", "redux-thunk": "^2.3.0", "typeface-roboto": "^1.1.13", + "vott-ct": "^2.3.2", "web-vitals": "^0.2.4" }, "scripts": { "start": "react-scripts start", - "build": "react-scripts build && mv build ../machinery/www", + "build": "react-scripts build && rm -rf ../machinery/www && mv build ../machinery/www", "test": "react-scripts test", "eject": "react-scripts eject", "lint": "eslint --debug 'src/**/*.{js,jsx,ts,tsx}'", diff --git a/ui/public/index.html b/ui/public/index.html index 6561c8d..536cf0f 100644 --- a/ui/public/index.html +++ b/ui/public/index.html @@ -29,7 +29,7 @@ work correctly both with client-side routing and a non-root public URL. Learn how to configure a non-root public URL by running `npm run build`. --> - Kerberos Agent | Video surveillance + Kerberos Agent | Video surveillance for everyone diff --git a/ui/src/App.jsx b/ui/src/App.jsx index 468617e..6e18dce 100644 --- a/ui/src/App.jsx +++ b/ui/src/App.jsx @@ -39,14 +39,17 @@ class App extends React.Component { - + + - - diff --git a/ui/src/config copy.js b/ui/src/config copy.js deleted file mode 100644 index 8f4786b..0000000 --- a/ui/src/config copy.js +++ /dev/null @@ -1,31 +0,0 @@ -const { hostname } = window.location; -const { protocol } = window.location; -const websocketprotocol = protocol === 'http:' ? 'ws:' : 'wss:'; - -const dev = { - ENV: 'dev', - HOSTNAME: hostname, - API_URL: `${protocol}//${hostname}:8082/`, - WS_URL: `${websocketprotocol}//${hostname}:8082/ws`, -}; - -const prod = { - ENV: 'prod', - HOSTNAME: hostname, - API_URL: - window.env.apiUrl !== '' - ? `${protocol}//${window.env.apiUrl}/` - : `${protocol}//api.${hostname}/`, // "https://staging-api.factory.kerberos.live", // - WS_URL: - window.env.apiUrl !== '' - ? `${websocketprotocol}//${window.env.apiUrl}/ws` - : `${websocketprotocol}//api.${hostname}/ws`, -}; - -const config = process.env.REACT_APP_STAGE === 'production' ? prod : dev; - -export default { - // Add common config values here - // MAX_ATTACHMENT_SIZE: 5000000, - ...config, -}; diff --git a/ui/src/fonts/Inter/Inter-Medium.woff b/ui/src/fonts/Inter/Inter-Medium.woff new file mode 100644 index 0000000..7d55f34 Binary files /dev/null and b/ui/src/fonts/Inter/Inter-Medium.woff differ diff --git a/ui/src/fonts/Inter/Inter-Medium.woff2 b/ui/src/fonts/Inter/Inter-Medium.woff2 new file mode 100644 index 0000000..a916b47 Binary files /dev/null and b/ui/src/fonts/Inter/Inter-Medium.woff2 differ diff --git a/ui/src/fonts/Inter/Inter-Regular.woff b/ui/src/fonts/Inter/Inter-Regular.woff new file mode 100644 index 0000000..7ff51b7 Binary files /dev/null and b/ui/src/fonts/Inter/Inter-Regular.woff differ diff --git a/ui/src/fonts/Inter/Inter-Regular.woff2 b/ui/src/fonts/Inter/Inter-Regular.woff2 new file mode 100644 index 0000000..554aed6 Binary files /dev/null and b/ui/src/fonts/Inter/Inter-Regular.woff2 differ diff --git a/ui/src/fonts/Inter/Inter-SemiBold.woff b/ui/src/fonts/Inter/Inter-SemiBold.woff new file mode 100644 index 0000000..76e507a Binary files /dev/null and b/ui/src/fonts/Inter/Inter-SemiBold.woff differ diff --git a/ui/src/fonts/Inter/Inter-SemiBold.woff2 b/ui/src/fonts/Inter/Inter-SemiBold.woff2 new file mode 100644 index 0000000..9307998 Binary files /dev/null and b/ui/src/fonts/Inter/Inter-SemiBold.woff2 differ diff --git a/ui/src/fonts/Inter/Inter-roman.var.woff2 b/ui/src/fonts/Inter/Inter-roman.var.woff2 new file mode 100644 index 0000000..a6efdc4 Binary files /dev/null and b/ui/src/fonts/Inter/Inter-roman.var.woff2 differ diff --git a/ui/src/index.jsx b/ui/src/index.jsx index fc986d7..7b882eb 100644 --- a/ui/src/index.jsx +++ b/ui/src/index.jsx @@ -12,9 +12,9 @@ import rootReducer from './reducers'; import App from './App'; import './index.scss'; import Login from './pages/Login/Login'; -import Install from './pages/Install/Install'; import Dashboard from './pages/Dashboard/Dashboard'; -import RequireInstall from './containers/RequireInstall'; +import Media from './pages/Media/Media'; +import Settings from './pages/Settings/Settings'; import RequireAuth from './containers/RequireAuth'; import RequireGuest from './containers/RequireGuest'; @@ -58,12 +58,13 @@ ReactDOM.render( - } /> + + diff --git a/ui/src/index.scss b/ui/src/index.scss index e6bd566..e19de51 100644 --- a/ui/src/index.scss +++ b/ui/src/index.scss @@ -88,6 +88,54 @@ */ +@font-face { + font-family: 'Inter'; + font-style: normal; + font-weight: 400; + font-display: swap; + src: url("/fonts/Inter/Inter-Regular.woff2?v=3.18") format("woff2"), + url("/fonts/Inter/Inter-Regular.woff?v=3.18") format("woff"); +} + +@font-face { + font-family: 'Inter'; + font-style: normal; + font-weight: 500; + font-display: swap; + src: url("/fonts/Inter/Inter-Medium.woff2?v=3.18") format("woff2"), + url("/fonts/Inter/Inter-Medium.woff?v=3.18") format("woff"); +} + +@font-face { + font-family: 'Inter'; + font-style: normal; + font-weight: 600; + font-display: swap; + src: url("/fonts/Inter/Inter-SemiBold.woff2?v=3.18") format("woff2"), + url("/fonts/Inter/Inter-SemiBold.woff?v=3.18") format("woff"); +} + +/* ------------------------------------------------------- +Variable font. +Usage: + + body { + font-family: 'Inter', sans-serif; // use regular Inter font by default.. + @supports (font-variation-settings: normal) { + font-family: 'Inter var', sans-serif; // ..but if supported, use variable Inter font instead (all-in-one) + } + } + + +*/ +@font-face { + font-family: 'Inter var'; + font-weight: 100 900; + font-display: swap; + font-style: normal; + font-named-instance: 'Regular'; + src: url("/fonts/Inter/Inter-roman.var.woff2?v=3.18") format("woff2"); +} body { box-sizing: border-box; diff --git a/ui/src/pages/Dashboard/Dashboard.jsx b/ui/src/pages/Dashboard/Dashboard.jsx index 8102c54..ef785e4 100644 --- a/ui/src/pages/Dashboard/Dashboard.jsx +++ b/ui/src/pages/Dashboard/Dashboard.jsx @@ -1,15 +1,26 @@ import React from 'react'; -import styles from './Dashboard.module.scss'; -import Header from '../../components/Header/Header'; -import Warning from '../../components/Warning/Warning'; +import { Breadcrumb } from '@kerberos-io/ui'; +// import { Link } from 'react-router-dom'; +import styles from './Dashboard.scss'; // eslint-disable-next-line react/prefer-stateless-function class Dashboard extends React.Component { render() { return (
-
- + + {/* +
); } diff --git a/ui/src/pages/Dashboard/Dashboard.module.scss b/ui/src/pages/Dashboard/Dashboard.scss similarity index 100% rename from ui/src/pages/Dashboard/Dashboard.module.scss rename to ui/src/pages/Dashboard/Dashboard.scss diff --git a/ui/src/pages/Install/Install.jsx b/ui/src/pages/Install/Install.jsx deleted file mode 100644 index 42f16f6..0000000 --- a/ui/src/pages/Install/Install.jsx +++ /dev/null @@ -1,16 +0,0 @@ -import React from 'react'; -import CssBaseline from '@material-ui/core/CssBaseline'; -import Container from '@material-ui/core/Container'; -// import LoginForm from '../../components/LoginForm/LoginForm'; -import './Install.scss'; - -export default function Install() { - return ( - - - - I've been here. - - - ); -} diff --git a/ui/src/pages/Login/Login.jsx b/ui/src/pages/Login/Login.jsx index b81f77b..0fac69a 100644 --- a/ui/src/pages/Login/Login.jsx +++ b/ui/src/pages/Login/Login.jsx @@ -15,7 +15,7 @@ import { withRouter } from 'react-router-dom'; import { connect } from 'react-redux'; import { login, resetLogin } from '../../actions'; import config from '../../config'; -import './Login.module.scss'; +import './Login.scss'; class Login extends React.Component { constructor() { @@ -52,7 +52,7 @@ class Login extends React.Component {
diff --git a/ui/src/pages/Login/Login.module.scss b/ui/src/pages/Login/Login.module.scss deleted file mode 100644 index e69de29..0000000 diff --git a/ui/src/pages/Login/Login.scss b/ui/src/pages/Login/Login.scss new file mode 100644 index 0000000..34cb78d --- /dev/null +++ b/ui/src/pages/Login/Login.scss @@ -0,0 +1,45 @@ +@import "../../app.variables"; + +.login-body { + display: flex; + justify-content: center; + padding: 0 0 size(10) 0; + + .block-generic { + .block-header { + padding: 5px size(2); + + div { + display: flex; + height: size(3); + align-items: center; + + h4 { + margin: 0 0 0 size(1); + padding: 0; + } + } + + } + + .block-body { + padding: size(2) size(5) size(3) size(5); + + .generic-input { + width: size(26); + cursor: auto; + + &:first-child { + margin: 0 0 size(1) 0; + } + } + } + + .block-footer { + padding: size(1) size(2); + min-height: 0; + + } + } +} + diff --git a/ui/src/pages/Media/Media.jsx b/ui/src/pages/Media/Media.jsx new file mode 100644 index 0000000..afc219e --- /dev/null +++ b/ui/src/pages/Media/Media.jsx @@ -0,0 +1,28 @@ +import React from 'react'; +import { Breadcrumb } from '@kerberos-io/ui'; +// import { Link } from 'react-router-dom'; +import styles from './Media.scss'; + +// eslint-disable-next-line react/prefer-stateless-function +class Media extends React.Component { + render() { + return ( +
+ + {/* +
+ ); + } +} +export default Media; diff --git a/ui/src/pages/Install/Install.scss b/ui/src/pages/Media/Media.scss similarity index 100% rename from ui/src/pages/Install/Install.scss rename to ui/src/pages/Media/Media.scss diff --git a/ui/src/pages/Settings/Settings.jsx b/ui/src/pages/Settings/Settings.jsx new file mode 100644 index 0000000..33806cf --- /dev/null +++ b/ui/src/pages/Settings/Settings.jsx @@ -0,0 +1,24 @@ +import React from 'react'; +import { Breadcrumb } from '@kerberos-io/ui'; +// import { Link } from 'react-router-dom'; +import styles from './Settings.scss'; + +// eslint-disable-next-line react/prefer-stateless-function +class Settings extends React.Component { + render() { + return ( +
+ + {/* +
+ ); + } +} +export default Settings; diff --git a/ui/src/pages/Settings/Settings.scss b/ui/src/pages/Settings/Settings.scss new file mode 100644 index 0000000..b371dd0 --- /dev/null +++ b/ui/src/pages/Settings/Settings.scss @@ -0,0 +1,21 @@ +.install-body { + background-color: #2C3E50; + background-image: linear-gradient(163deg, #0f0101, #b4524e); + color: #606468; + height: 100vh; + width: 100vw; + max-width: 100vw !important; + margin: 0; + padding: 0; +} + +.install-container { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + background: #fff; + border-radius: 20px; + padding: 50px 40px !important; + max-width: 600px; +} diff --git a/ui/yarn.lock b/ui/yarn.lock index 069d71e..2fb17b2 100644 --- a/ui/yarn.lock +++ b/ui/yarn.lock @@ -1525,10 +1525,10 @@ "@jridgewell/resolve-uri" "^3.0.3" "@jridgewell/sourcemap-codec" "^1.4.10" -"@kerberos-io/ui@1.59.0": - version "1.59.0" - resolved "https://registry.yarnpkg.com/@kerberos-io/ui/-/ui-1.59.0.tgz#89370dab3c653a785bb3f54d8a017738ab4ef18b" - integrity sha512-RqCO2jIHg/nIaJSutKGqwRWIeWopOpIGGk8d4Xec3ESpV5jcLgKhn1O09uqsxlvXD81yL9r1NDOtpKphiWmtGg== +"@kerberos-io/ui@1.60.0": + version "1.60.0" + resolved "https://registry.yarnpkg.com/@kerberos-io/ui/-/ui-1.60.0.tgz#36e831859e2a65362e1df3d917a4018c812b607f" + integrity sha512-loVX/5GroFA+ZWRIEZ/P7b9QtPoKuZYmxnIazwiBk1aIoddb6U2AHJuAWlRTjaGPFcbdyP1MiP4SSIad8hxKgg== dependencies: "@svgr/webpack" "^5.5.0" "@types/react-router-dom" "^5.1.7" @@ -4689,6 +4689,11 @@ etag@~1.8.1: resolved "https://registry.yarnpkg.com/etag/-/etag-1.8.1.tgz#41ae2eeb65efa62268aebfea83ac7d79299b0887" integrity sha512-aIL5Fx7mawVa300al2BnEE4iNvo1qETxLrPI/o05L7z6go7fCw1J6EQmbK4FmJ2AS7kgVF/KEZWufBfdClMcPg== +eve@~0.5.1: + version "0.5.4" + resolved "https://registry.yarnpkg.com/eve/-/eve-0.5.4.tgz#67d080b9725291d7e389e34c26860dd97f1debaa" + integrity sha512-aqprQ9MAOh1t66PrHxDFmMXPlgNO6Uv1uqvxmwjprQV50jaQ2RqO7O1neY4PJwC+hMnkyMDphu2AQPOPZdjQog== + eventemitter3@^4.0.0: version "4.0.7" resolved "https://registry.yarnpkg.com/eventemitter3/-/eventemitter3-4.0.7.tgz#2de9b68f6528d5644ef5c59526a1b4a07306169f" @@ -8825,6 +8830,20 @@ slice-ansi@^4.0.0: astral-regex "^2.0.0" is-fullwidth-code-point "^3.0.0" +snapsvg-cjs@0.0.6: + version "0.0.6" + resolved "https://registry.yarnpkg.com/snapsvg-cjs/-/snapsvg-cjs-0.0.6.tgz#3b2f56af2573d3d364c3ed5bf8885745f4d2dde1" + integrity sha512-7NNvoGrc3BQvWz5rWK1DsD5/Vni4STswz5B3JrBADboQWcN8OBVGjYVJFPT5JkUXb2iVnEflZANhufEpEcTHXw== + dependencies: + snapsvg "0.5.1" + +snapsvg@0.5.1: + version "0.5.1" + resolved "https://registry.yarnpkg.com/snapsvg/-/snapsvg-0.5.1.tgz#0caf52c79189a290746fc446cc5e863f6bdddfe3" + integrity sha512-CjwWYsL7+CCk1vCk9BBKGYS4WJVDfJAOMWU+Zhzf8wf6pAm/xT34wnpaMPAgcgCNkxuU6OkQPPd8wGuRCY9aNw== + dependencies: + eve "~0.5.1" + sockjs@^0.3.24: version "0.3.24" resolved "https://registry.yarnpkg.com/sockjs/-/sockjs-0.3.24.tgz#c9bc8995f33a111bea0395ec30aa3206bdb5ccce" @@ -9599,6 +9618,13 @@ vary@~1.1.2: resolved "https://registry.yarnpkg.com/vary/-/vary-1.1.2.tgz#2299f02c6ded30d4a5961b0b9f74524a18f634fc" integrity sha1-IpnwLG3tMNSllhsLn3RSShj2NPw= +vott-ct@^2.3.2: + version "2.3.2" + resolved "https://registry.yarnpkg.com/vott-ct/-/vott-ct-2.3.2.tgz#b26296068e05578048acee7f7f89c6402663e44f" + integrity sha512-58OYwRFmdc12bKVcoCgXo6Uk6vRMEh73bUCjqL4zxJyYa4BAKfL2vh4VHeHCGqmuO8Bj1KbLevSeqgVCuuC3vw== + dependencies: + snapsvg-cjs "0.0.6" + w3c-hr-time@^1.0.2: version "1.0.2" resolved "https://registry.yarnpkg.com/w3c-hr-time/-/w3c-hr-time-1.0.2.tgz#0a89cdf5cc15822df9c360543676963e0cc308cd"