Add keycloak (#21)

* Add keycloak * Replace docker start with gh actions services * fix package npm * sso instrucmn * fix * import * fix * fix * Add volumes * add config * Restore localhost * change host * fix * fix * fix * fix * fix * fix * Add keycloak actions * change kc url * kc fix * fix * fix * fix * change server * test * test * fix characters * test * remove env * localhost * fix * fix * fix * fix * fix * curl * fix * test * fix * test * fix * fix * fix * test * backend * test * test * container * test * fix * fix * fix * remove realm * restore matrix * Test * fix * Change print * Set sso by default * Add test with sso * Add container test * fix docker * fix * Remove e2e for containers * Fix app test * remove app test
project-openubl · Dec 29, 2020 · 8dcdeb9 · 8dcdeb9
1 parent 62dbf5d
commit 8dcdeb9
Show file tree

Hide file tree

Showing 36 changed files with 2,861 additions and 299 deletions.
diff --git a/.github/workflows/ci-actions.yml b/.github/workflows/ci-actions.yml
@@ -46,9 +46,28 @@ jobs:
       matrix:
         os: [ubuntu-latest]
         browser: [chrome, firefox]
+    services:
+      backend:
+        image: quay.io/projectopenubl/xsender-server:master
+        ports:
+          - 8080:8080
+      keycloak:
+        image: quay.io/keycloak/keycloak:12.0.1
+        ports:
+          - 8180:8080
+        env:
+          KEYCLOAK_USER: admin
+          KEYCLOAK_PASSWORD: admin
     steps:
       - name: Checkout
         uses: actions/checkout@v2
+      - name: Keycloak Admin CLI
+        uses: carlosthe19916/keycloak-action@master
+        with:
+          server: http://keycloak:8080/auth
+          username: admin
+          password: admin
+          cmd: create realms -f openubl-realm.json
       - run: yarn install
       - run: yarn build:instrumentation
       - uses: haya14busa/action-cond@v1

diff --git a/README.md b/README.md
@@ -2,49 +2,38 @@
 [![codecov](https://codecov.io/gh/project-openubl/xsender-server-ui/branch/master/graph/badge.svg)](https://codecov.io/gh/project-openubl/xsender-server-ui)
 [![xsender-server-ui](https://img.shields.io/endpoint?url=https://dashboard.cypress.io/badge/simple/8fs1cv/master&style=flat&logo=cypress)](https://dashboard.cypress.io/projects/8fs1cv/runs)
 
-# Getting Started with Create React App
+# XSender Server UI
 
-This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
+UI application for the xsender-server project.
 
-## Available Scripts
+## Development
 
-In the project directory, you can run:
+To start in development mode follow the next steps:
 
-### `yarn start`
+### Start Keycloak
 
-Runs the app in the development mode.\
-Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
+You can start Keycloak using Docker or Postmam:
 
-The page will reload if you make edits.\
-You will also see any lint errors in the console.
+```shell
+docker run -p 8180:8080 -e KEYCLOAK_USER=admin -e KEYCLOAK_PASSWORD=admin quay.io/keycloak/keycloak:12.0.1
+```
 
-### `yarn test`
+Then you need to create a realm and configure it. You can import the realm using the file `openubl-realm.json`.
 
-Launches the test runner in the interactive watch mode.\
-See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
+### Star the backend
 
-### `yarn build`
+You need to clone the backend server and then start it using:
 
-Builds the app for production to the `build` folder.\
-It correctly bundles React in production mode and optimizes the build for the best performance.
+```shell
+./mvnw quarkus:dev
+```
 
-The build is minified and the filenames include the hashes.\
-Your app is ready to be deployed!
+### Start the UI
 
-See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
+You can start the UI executing:
 
-### `yarn eject`
+```shell
+yarn start
+```
 
-**Note: this is a one-way operation. Once you `eject`, you can’t go back!**
-
-If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
-
-Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
-
-You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
-
-## Learn More
-
-You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
-
-To learn React, check out the [React documentation](https://reactjs.org/).
+You should be able to open http://localhost:3000 and start working on the UI.
diff --git a/cypress.json b/cypress.json
@@ -2,6 +2,10 @@
   "baseUrl": "http://localhost:3000/#",
   "projectId": "8fs1cv",
   "env": {
-    "REST_API": "http://localhost:8080/api"
-  }
+    "REST_API": "http://localhost:8080/api",
+    "auth_base_url": "http://localhost:8180/auth",
+    "auth_realm": "openubl",
+    "auth_client_id": "xsender-ui"
+  },
+  "chromeWebSecurity": false
 }
diff --git a/cypress/fixtures/users/admin.json b/cypress/fixtures/users/admin.json
@@ -0,0 +1,4 @@
+{
+    "username": "admin",
+    "password": "admin"
+  }
diff --git a/cypress/fixtures/users/alice.json b/cypress/fixtures/users/alice.json
@@ -0,0 +1,4 @@
+{
+    "username": "alice",
+    "password": "alice"
+}
diff --git a/cypress/integration/companyList.test.ts → cypress/integration/companyList.test.js b/cypress/integration/companyList.test.ts → cypress/integration/companyList.test.js
@@ -1,46 +1,52 @@
 /// <reference types="cypress" />
 
 context("Test company list", () => {
-  before(() => {
-    const headers = {
-      "Content-Type": "application/json",
-    };
-
-    // Delete all companies
-    cy.request({
-      method: "GET",
-      headers: headers,
-      url: `${Cypress.env("REST_API")}/user/companies?limit=1000`,
-    }).then((result) => {
-      result.body.data.forEach((e) => {
-        cy.request({
-          method: "DELETE",
-          headers: headers,
-          url: `${Cypress.env("REST_API")}/companies/${e.name}`,
-        });
-      });
-    });
+  beforeEach(() => {
+    cy.kcLogout();
+    cy.kcLogin("alice").as("tokens");
+
+    cy.get("@tokens").then((tokens) => {
+      const headers = {
+        "Content-Type": "application/json",
+        Authorization: "Bearer " + tokens.access_token,
+      };
 
-    // Create companies
-    for (let i = 1; i <= 12; i++) {
+      // Delete all companies
       cy.request({
-        method: "POST",
+        method: "GET",
         headers: headers,
-        body: {
-          name: `Company${i}`,
-          webServices: {
-            factura: "http://url1.com",
-            guia: "http://url2.com",
-            retenciones: "http://url3.com",
-          },
-          credentials: {
-            username: "myUsername",
-            password: "myPassword",
-          },
-        },
-        url: `${Cypress.env("REST_API")}/user/companies`,
+        url: `${Cypress.env("REST_API")}/user/companies?limit=1000`,
+      }).then((result) => {
+        result.body.data.forEach((e) => {
+          cy.request({
+            method: "DELETE",
+            headers: headers,
+            url: `${Cypress.env("REST_API")}/companies/${e.name}`,
+          });
+        });
       });
-    }
+
+      // Create companies
+      for (let i = 1; i <= 12; i++) {
+        cy.request({
+          method: "POST",
+          headers: headers,
+          body: {
+            name: `Company${i}`,
+            webServices: {
+              factura: "http://url1.com",
+              guia: "http://url2.com",
+              retenciones: "http://url3.com",
+            },
+            credentials: {
+              username: "myUsername",
+              password: "myPassword",
+            },
+          },
+          url: `${Cypress.env("REST_API")}/user/companies`,
+        });
+      }
+    });
   });
 
   it("Company list - filtering", () => {

diff --git a/cypress/integration/newCompany.test.ts → cypress/integration/newCompany.test.js b/cypress/integration/newCompany.test.ts → cypress/integration/newCompany.test.js
@@ -1,6 +1,11 @@
 /// <reference types="cypress" />
 
 context("Test NewCompany", () => {
+  beforeEach(() => {
+    cy.kcLogout();
+    cy.kcLogin("alice");
+  });
+
   it("Form should work", () => {
     cy.visit("/companies/~new");
 

diff --git a/cypress/integration/template.test.ts → cypress/integration/template.test.js b/cypress/integration/template.test.ts → cypress/integration/template.test.js
@@ -1,6 +1,11 @@
 /// <reference types="cypress" />
 
 context("Test template", () => {
+  beforeEach(() => {
+    cy.kcLogout();
+    cy.kcLogin("alice");
+  });
+
   it("Action buttons disabled when form is invalid", () => {
     cy.visit("/");
 

diff --git a/cypress/support/commands.js b/cypress/support/commands.js
@@ -23,3 +23,5 @@
 //
 // -- This will overwrite an existing command --
 // Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... })
+
+import "cypress-keycloak-commands";
diff --git a/entrypoint.sh b/entrypoint.sh
@@ -3,8 +3,21 @@
 set -e
 
 if [[ -z "$API_URL" ]]; then
-    echo "You must provide API_URL environment variable" 1>&2
-    exit 1
+  echo "You must provide API_URL environment variable" 1>&2
+  exit 1
+fi
+
+if [[ -z "$SSO_REALM" ]]; then
+  echo "You must provide SSO_REALM environment variable" 1>&2
+  exit 1
+fi
+if [[ -z "$SSO_SERVER_URL" ]]; then
+  echo "You must provide SSO_SERVER_URL environment variable" 1>&2
+  exit 1
+fi
+if [[ -z "$SSO_CLIENT_ID" ]]; then
+  echo "You must provide SSO_CLIENT_ID environment variable" 1>&2
+  exit 1
 fi
 
 if [ -f ./nginx.conf.template ]; then
@@ -14,4 +27,11 @@ if [ -f ./nginx.conf.template ]; then
   rm -f ./nginx.conf
 fi
 
+if [ -f ./keycloak.json.template ]; then
+  echo "---> Processing keycloak.json.template configuration file..."  
+  envsubst '${SSO_REALM} ${SSO_SERVER_URL} ${SSO_CLIENT_ID}' < ./keycloak.json.template > ./keycloak.json
+fi
+
+echo "Container started"
+
 exec "$@"