+
);
};
diff --git a/cyclops-ui/src/components/pages/Login/Login.tsx b/cyclops-ui/src/components/pages/Login/Login.tsx
new file mode 100644
index 00000000..7567d508
--- /dev/null
+++ b/cyclops-ui/src/components/pages/Login/Login.tsx
@@ -0,0 +1,156 @@
+import React, { useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { Alert, Button, ConfigProvider, Form } from "antd";
+import axios from "axios";
+import { useAuth } from "../../../context/AuthContext";
+import Cookies from "js-cookie";
+import {
+ UserOutlined,
+ EyeInvisibleOutlined,
+ EyeTwoTone,
+} from "@ant-design/icons";
+import { Input } from "antd";
+import styles from "./styles.module.css";
+import { jwtDecode } from "jwt-decode";
+
+interface LoginResponse {
+ error?: string;
+ token?: string;
+}
+
+interface LoginRequest {
+ username: string;
+ password: string;
+}
+
+interface DecodedToken {
+ sub: string;
+ exp: number;
+ iat: number;
+}
+
+interface RoleResponse {
+ roles: string[];
+}
+
+const Login = () => {
+ const navigate = useNavigate();
+ const { login } = useAuth();
+ const [error, setError] = useState({
+ message: "",
+ description: "",
+ });
+
+ const handleSubmit = async (request: LoginRequest) => {
+ try {
+ const response = await axios.post("/api/login", request);
+ if (response.data?.token) {
+ const decodedToken = jwtDecode(response.data.token);
+ Cookies.set("_isAuthenticated", "true");
+ Cookies.set("token", response.data.token);
+ const roleResponse = await axios.get("/api/getrole", {
+ headers: {
+ Authorization: `Bearer ${response.data.token}`,
+ },
+ });
+ const userName = decodedToken.sub;
+ const userRole = roleResponse.data.roles[0];
+ login(userName, userRole);
+ navigate("/");
+ } else {
+ setError({
+ message: "Authentication Failed",
+ description: `${response.data.error}`,
+ });
+ Cookies.set("_isAuthenticated", "false");
+ }
+ } catch (err) {
+ console.error(err);
+ setError({
+ message: "Login Error",
+ description: "An error occurred during login. Please try again.",
+ });
+ }
+ };
+
+ return (
+ ;
+}
+
+interface DecodedToken {
+ sub: string;
+ exp: number;
+ iat: number;
+}
+
+interface RoleResponse {
+ roles: string[];
+}
+
+const AuthContext = createContext(undefined);
+
+export const AuthProvider: React.FC<{ children: ReactNode }> = ({
+ children,
+}) => {
+ const [isAuthenticated, setIsAuthenticated] = useState(false);
+ const [userName, setuserName] = useState(null);
+ const [userRole, setuserRole] = useState(null);
+
+ const checkAuthentication = async () => {
+ const isAuthorizationEnabled =
+ process.env.REACT_APP_CYCLOPS_AUTHORIZATION === "enabled";
+ const token = Cookies.get("token");
+
+ if (!isAuthorizationEnabled) {
+ setIsAuthenticated(true);
+ } else if (token) {
+ try {
+ const decodedToken = jwtDecode(token);
+ if (decodedToken.exp * 1000 > Date.now()) {
+ setIsAuthenticated(true);
+ setuserName(decodedToken.sub);
+ const getuserRole = async () => {
+ try {
+ const roleResponse = await axios.get(
+ "/api/getrole",
+ {
+ headers: {
+ Authorization: `Bearer ${token}`,
+ },
+ },
+ );
+ setuserRole(roleResponse.data.roles[0]);
+ } catch (err) {
+ console.log(err);
+ }
+ };
+ getuserRole();
+ } else {
+ // Token expired
+ logout();
+ }
+ } catch (error) {
+ console.error("Error decoding token:", error);
+ logout();
+ }
+ } else {
+ setIsAuthenticated(false);
+ }
+ };
+
+ useEffect(() => {
+ checkAuthentication();
+ }, []);
+
+ const login = (newuserName: string, newuserRole: string) => {
+ setIsAuthenticated(true);
+ setuserName(newuserName);
+ setuserRole(newuserRole);
+ };
+
+ const logout = () => {
+ Cookies.remove("token");
+ Cookies.set("_isAuthenticated", "false");
+ setIsAuthenticated(false);
+ setuserName(null);
+ window.location.reload();
+ };
+
+ return (
+
+ {children}
+
+ );
+};
+
+export const useAuth = () => {
+ const context = useContext(AuthContext);
+ if (context === undefined) {
+ throw new Error("useAuth must be used within an AuthProvider");
+ }
+ return context;
+};
diff --git a/cyclops-ui/src/index.tsx b/cyclops-ui/src/index.tsx
index 46c6a2e7..f492b1ff 100644
--- a/cyclops-ui/src/index.tsx
+++ b/cyclops-ui/src/index.tsx
@@ -2,6 +2,7 @@ import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import "antd/dist/reset.css";
import App from "./App";
+import { AuthProvider } from "./context/AuthContext";
import reportWebVitals from "./reportWebVitals";
const container = document.getElementById("root");
@@ -9,7 +10,9 @@ const root = createRoot(container!);
root.render(
-
+
,
);
diff --git a/cyclops-ui/yarn.lock b/cyclops-ui/yarn.lock
index 746889e5..5b1eac15 100644
--- a/cyclops-ui/yarn.lock
+++ b/cyclops-ui/yarn.lock
@@ -9449,6 +9449,11 @@ js-cookie@^2.2.1:
resolved "https://registry.yarnpkg.com/js-cookie/-/js-cookie-2.2.1.tgz#69e106dc5d5806894562902aa5baec3744e9b2b8"
integrity sha512-HvdH2LzI/EAZcUwA8+0nKNtWHqS+ZmijLA30RwZA0bo7ToCckjK5MkGhjED9KoRcXO6BaGI3I9UIzSA1FKFPOQ==
+js-cookie@^3.0.5:
+ version "3.0.5"
+ resolved "https://registry.yarnpkg.com/js-cookie/-/js-cookie-3.0.5.tgz#0b7e2fd0c01552c58ba86e0841f94dc2557dcdbc"
+ integrity sha512-cEiJEAEoIbWfCZYKWhVwFuvPX1gETRYPw6LlaTKoxD3s2AkXzkCjnp6h0V77ozyqj0jakteJ4YqDJT830+lVGw==
+
js-logger@^1.6.1:
version "1.6.1"
resolved "https://registry.yarnpkg.com/js-logger/-/js-logger-1.6.1.tgz#8f09671b515e4a6f31dced8fdb8923432e2c60af"
@@ -9619,6 +9624,11 @@ jsonpointer@^5.0.0:
object.assign "^4.1.4"
object.values "^1.1.6"
+jwt-decode@^4.0.0:
+ version "4.0.0"
+ resolved "https://registry.yarnpkg.com/jwt-decode/-/jwt-decode-4.0.0.tgz#2270352425fd413785b2faf11f6e755c5151bd4b"
+ integrity sha512-+KJGIyHgkGuIq3IEBNftfhW/LfWhXUIY6OmyVWjliu5KH1y0fw7VQ8YndE2O4qZdMSd9SqbnC8GOcZEy0Om7sA==
+
kdbush@^3.0.0:
version "3.0.0"
resolved "https://registry.yarnpkg.com/kdbush/-/kdbush-3.0.0.tgz#f8484794d47004cc2d85ed3a79353dbe0abc2bf0"
@@ -13436,16 +13446,7 @@ string-natural-compare@^3.0.1:
resolved "https://registry.yarnpkg.com/string-natural-compare/-/string-natural-compare-3.0.1.tgz#7a42d58474454963759e8e8b7ae63d71c1e7fdf4"
integrity sha512-n3sPwynL1nwKi3WJ6AIsClwBMa0zTi54fn2oLU6ndfTSIO05xaznjSf15PcBZU6FNWbmN5Q6cxT4V5hGvB4taw==
-"string-width-cjs@npm:string-width@^4.2.0":
- version "4.2.3"
- resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
- integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
- dependencies:
- emoji-regex "^8.0.0"
- is-fullwidth-code-point "^3.0.0"
- strip-ansi "^6.0.1"
-
-string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
+"string-width-cjs@npm:string-width@^4.2.0", string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
version "4.2.3"
resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
@@ -13537,7 +13538,7 @@ stringify-object@^3.3.0:
is-obj "^1.0.1"
is-regexp "^1.0.0"
-"strip-ansi-cjs@npm:strip-ansi@^6.0.1":
+"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1:
version "6.0.1"
resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
@@ -13551,13 +13552,6 @@ strip-ansi@^3.0.0:
dependencies:
ansi-regex "^2.0.0"
-strip-ansi@^6.0.0, strip-ansi@^6.0.1:
- version "6.0.1"
- resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
- integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
- dependencies:
- ansi-regex "^5.0.1"
-
strip-ansi@^7.0.1, strip-ansi@^7.1.0:
version "7.1.0"
resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-7.1.0.tgz#d5b6568ca689d8561370b0707685d22434faff45"
@@ -14885,7 +14879,7 @@ workbox-window@6.6.1:
"@types/trusted-types" "^2.0.2"
workbox-core "6.6.1"
-"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0":
+"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0:
version "7.0.0"
resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
@@ -14903,15 +14897,6 @@ wrap-ansi@^6.2.0:
string-width "^4.1.0"
strip-ansi "^6.0.0"
-wrap-ansi@^7.0.0:
- version "7.0.0"
- resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
- integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
- dependencies:
- ansi-styles "^4.0.0"
- string-width "^4.1.0"
- strip-ansi "^6.0.0"
-
wrap-ansi@^8.1.0:
version "8.1.0"
resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-8.1.0.tgz#56dc22368ee570face1b49819975d9b9a5ead214"
diff --git a/install/cyclops-install.yaml b/install/cyclops-install.yaml
index 7a383d17..c25e4cc2 100644
--- a/install/cyclops-install.yaml
+++ b/install/cyclops-install.yaml
@@ -351,6 +351,8 @@ spec:
value: "true"
- name: NODE_ENV
value: production
+ - name: REACT_APP_CYCLOPS_AUTHORIZATION
+ value: disabled
- name: NODE_OPTIONS
value: --openssl-legacy-provider
restartPolicy: Always
@@ -412,6 +414,10 @@ spec:
env:
- name: PORT
value: "8080"
+ - name: CYCLOPS_AUTHORIZATION
+ value: disabled
+ - name: CERBOS_URL
+ value: localhost:3592
livenessProbe:
httpGet:
path: /healthz
@@ -424,6 +430,33 @@ spec:
port: 8082
initialDelaySeconds: 5
periodSeconds: 10
+ - name: cyclops-cerbos
+ image: ghcr.io/cerbos/cerbos:latest
+ imagePullPolicy: IfNotPresent
+ args:
+ - "server"
+ - "--config=/config/config.yaml"
+ - "--log-level=INFO"
+ volumeMounts:
+ - name: sock
+ mountPath: /sock
+ - name: config
+ mountPath: /config
+ readOnly: true
+ - name: policies
+ mountPath: /policies
+ volumes:
+ - name: sock
+ emptyDir: {}
+ - name: config
+ configMap:
+ name: cyclops-cerbos-sidecar-config
+ - name: certs
+ secret:
+ secretName: cyclops-cerbos-sidecar
+ - name: policies
+ configMap:
+ name: cyclops-cerbos-sidecar-policies
---
apiVersion: v1
kind: Service
@@ -463,3 +496,145 @@ spec:
policyTypes:
- Ingress
- Egress
+---
+apiVersion: v1
+kind: ConfigMap
+metadata:
+ name: cyclops-cerbos-sidecar-config
+ namespace: cyclops
+ labels:
+ app.kubernetes.io/name: cyclops-cerbos-sidecar
+ app.kubernetes.io/component: cerbos
+ app.kubernetes.io/version: "0.0.1"
+data:
+ "config.yaml": |-
+ server:
+ httpListenAddr: ":3592"
+ grpcListenAddr: ":3593"
+ storage:
+ driver: disk
+ disk:
+ directory: /policies
+ watchForChanges: true
+---
+apiVersion: v1
+kind: ConfigMap
+metadata:
+ name: cyclops-cerbos-sidecar-policies
+ namespace: cyclops
+ labels:
+ app.kubernetes.io/name: cyclops-cerbos-sidecar
+ app.kubernetes.io/component: cerbos
+ app.kubernetes.io/version: "0.0.1"
+data:
+ "common_roles.yaml": |-
+ apiVersion: "api.cerbos.dev/v1"
+ description: |-
+ Common dynamic roles used within the app
+ derivedRoles:
+ name: common_roles
+ definitions:
+ - name: owner
+ parentRoles: ["user"]
+ condition:
+ match:
+ expr: request.resource.attr.ownerId == request.principal.id
+
+ "resource_module.yaml": |-
+ apiVersion: api.cerbos.dev/v1
+ resourcePolicy:
+ version: default
+ importDerivedRoles:
+ - common_roles
+ resource: module
+ rules:
+ - actions: ["*"]
+ effect: EFFECT_ALLOW
+ roles:
+ - admin
+
+ - actions: ["view", "update", "list"]
+ effect: EFFECT_ALLOW
+ roles:
+ - user
+
+ - actions: ["view", "list"]
+ effect: EFFECT_ALLOW
+ roles:
+ - readonly
+
+ - actions: ["list", "view", "create", "delete"]
+ effect: EFFECT_ALLOW
+ roles:
+ - creator
+
+ - actions: ["list", "view", "edit"]
+ effect: EFFECT_ALLOW
+ roles:
+ - editor
+
+ "resource_template_auth_rules.yaml": |-
+ apiVersion: api.cerbos.dev/v1
+ resourcePolicy:
+ version: default
+ importDerivedRoles:
+ - common_roles
+ resource: templateauthrules
+ rules:
+ - actions: ["*"]
+ effect: EFFECT_ALLOW
+ roles:
+ - admin
+
+ - actions: ["view", "update", "list"]
+ effect: EFFECT_ALLOW
+ roles:
+ - user
+
+ - actions: ["view", "list"]
+ effect: EFFECT_ALLOW
+ roles:
+ - readonly
+
+ - actions: ["list", "view", "create", "delete"]
+ effect: EFFECT_ALLOW
+ roles:
+ - creator
+
+ - actions: ["list", "view", "edit"]
+ effect: EFFECT_ALLOW
+ roles:
+ - editor
+
+ "resource_templatestore.yaml": |-
+ apiVersion: api.cerbos.dev/v1
+ resourcePolicy:
+ version: default
+ importDerivedRoles:
+ - common_roles
+ resource: templatestore
+ rules:
+ - actions: ["*"]
+ effect: EFFECT_ALLOW
+ roles:
+ - admin
+
+ - actions: ["view", "update", "list"]
+ effect: EFFECT_ALLOW
+ roles:
+ - user
+
+ - actions: ["view", "list"]
+ effect: EFFECT_ALLOW
+ roles:
+ - readonly
+
+ - actions: ["list", "view", "create", "delete"]
+ effect: EFFECT_ALLOW
+ roles:
+ - creator
+
+ - actions: ["list", "view", "edit"]
+ effect: EFFECT_ALLOW
+ roles:
+ - editor
+
+ );
+};
+
+export default Login;
diff --git a/cyclops-ui/src/components/pages/Login/cyclops-logo.png b/cyclops-ui/src/components/pages/Login/cyclops-logo.png
new file mode 100644
index 00000000..13077cd6
Binary files /dev/null and b/cyclops-ui/src/components/pages/Login/cyclops-logo.png differ
diff --git a/cyclops-ui/src/components/pages/Login/styles.module.css b/cyclops-ui/src/components/pages/Login/styles.module.css
new file mode 100644
index 00000000..4f6f3eba
--- /dev/null
+++ b/cyclops-ui/src/components/pages/Login/styles.module.css
@@ -0,0 +1,71 @@
+.login_page {
+ display: flex;
+}
+
+.left_banner {
+ background-color: rgb(6, 25, 61);
+ background-image: url("https://cyclops-ui.com/assets/images/yaml_background-cc1699351922ead2cae5da1dbb75cbd8.png");
+ background-position: 0 -10rem;
+ background-repeat: no-repeat;
+ height: 100vh;
+ width: 120%;
+}
+
+.right_banner {
+ height: 100vh;
+ width: 80%;
+}
+
+.cyclops_image_container {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+}
+
+.cyclops_brand_image {
+ width: 50%;
+ position: fixed;
+ bottom: 0;
+}
+
+.login_header {
+ text-align: center;
+}
+
+.cyclops_login_header_login {
+ width: 80%;
+ margin-bottom: 16px;
+}
+
+.login_form {
+ margin-top: 25vh;
+}
+
+.login_container {
+ width: 80%;
+ padding: 0 5%;
+ margin: 0 10%;
+}
+
+.field_container {
+ margin: 1rem 0;
+ width: 100%;
+}
+
+.submit_button {
+ border: none;
+ width: 100%;
+}
+
+.submit_buttom:hover {
+ background-color: rgb(249, 250, 251);
+}
+
+.submit_buttom:focus {
+ outline: 2px solid transparent;
+ outline-offset: 2px;
+}
+
+.submit_buttom:focus-visible {
+ box-shadow: none;
+}
diff --git a/cyclops-ui/src/context/AuthContext.tsx b/cyclops-ui/src/context/AuthContext.tsx
new file mode 100644
index 00000000..5f7c065d
--- /dev/null
+++ b/cyclops-ui/src/context/AuthContext.tsx
@@ -0,0 +1,122 @@
+import React, {
+ createContext,
+ useContext,
+ useState,
+ useEffect,
+ ReactNode,
+} from "react";
+import Cookies from "js-cookie";
+import { jwtDecode } from "jwt-decode";
+import axios from "axios";
+
+interface AuthContextType {
+ isAuthenticated: boolean;
+ userName: string | null;
+ userRole: string | null;
+ login: (userName: string, userRole: string) => void;
+ logout: () => void;
+ checkAuthentication: () => Promise
+
+
+ 
+
+
+
+
+
+
+
+
+