Merge branch 'develop-2'

.env

@@ -0,0 +1,3 @@
+KEYCLOAK_HOST='https://inb.bsc.es'
+KEYCLOAK_REALM='openebench'
+KEYCLOAK_CLIENT_ID='oeb-frontend'

.github/workflows/ci.yml

@@ -4,12 +4,10 @@ on:
   push:
     branches:
       - master
-      - develop
       - develop-2
   pull_request:
     branches:
       - master
-      - develop
       - develop-2
 
 jobs:

Dockerfile.develop

@@ -9,6 +9,9 @@ ARG OBSERVATORY_URI=https://observatory.openebench.bsc.es
 ARG REST_API_URL=https://dev-openebench.bsc.es/monitor/rest/
 ARG SCIENTIFIC_SERVICE_URL=https://dev-openebench.bsc.es/api/scientific
 ARG BENCH_EVENT_API_URL=https://dev-openebench.bsc.es/rest/bench_event_api
+ARG KEYCLOAK_HOST=https://inb.bsc.es
+ARG KEYCLOAK_REALM=openebench
+ARG KEYCLOAK_CLIENT_ID=oeb-frontend
 ARG OBSERVATORY_API_URL=https://observatory.openebench.bsc.es/api/stats
 ENV ENVIRONMENT $ENVIRONMENT
 ENV OEB_LEGACY_ANGULAR_URI $OEB_LEGACY_ANGULAR_URI
@@ -17,6 +20,9 @@ ENV OBSERVATORY_URI $OBSERVATORY_URI
 ENV REST_API_URL $REST_API_URL
 ENV SCIENTIFIC_SERVICE_URL $SCIENTIFIC_SERVICE_URL
 ENV BENCH_EVENT_API_URL $BENCH_EVENT_API_URL
+ENV KEYCLOAK_HOST $KEYCLOAK_HOST
+ENV KEYCLOAK_REALM $KEYCLOAK_REALM
+ENV KEYCLOAK_CLIENT_ID $KEYCLOAK_CLIENT_ID
 ENV OBSERVATORY_API_URL $OBSERVATORY_API_URL
 COPY . .
 RUN npm install

Dockerfile.develop2

@@ -9,6 +9,9 @@ ARG OBSERVATORY_URI=https://observatory.openebench.bsc.es
 ARG REST_API_URL=https://dev-openebench.bsc.es/monitor/rest/
 ARG SCIENTIFIC_SERVICE_URL=https://dev-openebench.bsc.es/api/scientific
 ARG BENCH_EVENT_API_URL=https://dev-openebench.bsc.es/rest/bench_event_api
+ARG KEYCLOAK_HOST=https://inb.bsc.es
+ARG KEYCLOAK_REALM=openebench
+ARG KEYCLOAK_CLIENT_ID=oeb-frontend
 ARG OBSERVATORY_API_URL=https://observatory.openebench.bsc.es/api/stats
 ENV ENVIRONMENT $ENVIRONMENT
 ENV OEB_LEGACY_ANGULAR_URI $OEB_LEGACY_ANGULAR_URI
@@ -17,6 +20,9 @@ ENV OBSERVATORY_URI $OBSERVATORY_URI
 ENV REST_API_URL $REST_API_URL
 ENV SCIENTIFIC_SERVICE_URL $SCIENTIFIC_SERVICE_URL
 ENV BENCH_EVENT_API_URL $BENCH_EVENT_API_URL
+ENV KEYCLOAK_HOST $KEYCLOAK_HOST
+ENV KEYCLOAK_REALM $KEYCLOAK_REALM
+ENV KEYCLOAK_CLIENT_ID $KEYCLOAK_CLIENT_ID
 ENV OBSERVATORY_API_URL $OBSERVATORY_API_URL
 COPY . .
 RUN npm install

Dockerfile.production

@@ -9,6 +9,9 @@ ARG OBSERVATORY_URI=https://observatory.openebench.bsc.es
 ARG REST_API_URL=https://openebench.bsc.es/monitor/rest/
 ARG SCIENTIFIC_SERVICE_URL=https://openebench.bsc.es/api/scientific
 ARG BENCH_EVENT_API_URL=https://openebench.bsc.es/rest/bench_event_api
+ARG KEYCLOAK_HOST=https://inb.bsc.es
+ARG KEYCLOAK_REALM=openebench
+ARG KEYCLOAK_CLIENT_ID=oeb-frontend
 ARG OBSERVATORY_API_URL=https://observatory.openebench.bsc.es/api/stats
 ENV ENVIRONMENT $ENVIRONMENT
 ENV OEB_LEGACY_ANGULAR_URI $OEB_LEGACY_ANGULAR_URI
@@ -17,6 +20,9 @@ ENV OBSERVATORY_URI $OBSERVATORY_URI
 ENV REST_API_URL $REST_API_URL
 ENV SCIENTIFIC_SERVICE_URL $SCIENTIFIC_SERVICE_URL
 ENV BENCH_EVENT_API_URL $BENCH_EVENT_API_URL
+ENV KEYCLOAK_HOST $KEYCLOAK_HOST
+ENV KEYCLOAK_REALM $KEYCLOAK_REALM
+ENV KEYCLOAK_CLIENT_ID $KEYCLOAK_CLIENT_ID
 ENV OBSERVATORY_API_URL $OBSERVATORY_API_URL
 COPY . .
 RUN npm install

components/Header/HeaderMenu.spec.js

@@ -1,26 +1,76 @@
 import { mount } from '@vue/test-utils';
 import HeaderMenu from './HeaderMenu.vue';
 
-const factory = () => {
+const factory = (mockStore) => {
 	return mount(HeaderMenu, {
 		...createComponentMocks({
 			mocks: {
 				$vuetify: { breakpoint: {} },
+				$auth: { loginWith: jest.fn(), logout: jest.fn() },
 			},
+			store: mockStore,
 		}),
 		stubs: ['fragment', 'nuxt-link', 'router-link'],
 		propsData: { vreHref: 'somehref' },
 	});
 };
 
 describe('HeaderMenu', () => {
+	const mockStoreLoggedOut = {
+		auth: {
+			state: () => {
+				return {
+					loggedIn: false,
+				};
+			},
+		},
+	};
+
+	const mockStoreLoggedIn = {
+		auth: {
+			state: () => {
+				return {
+					loggedIn: true,
+				};
+			},
+		},
+	};
+
 	it('is instantiated', () => {
-		const wrapper = factory();
+		const wrapper = factory(mockStoreLoggedOut);
+		expect(wrapper).toBeTruthy();
+	});
+
+	it('should show the login button, hide the logout button if logged out', () => {
+		const wrapper = factory(mockStoreLoggedOut);
+		expect(wrapper).toBeTruthy();
+
+		const btnLogin = wrapper.find('[data-testid="btn-login"]');
+		expect(btnLogin.exists()).toBe(true);
+
+		const btnLogout = wrapper.find('[data-testid="btn-logout"]');
+		expect(btnLogout.exists()).toBe(false);
+
+		btnLogin.trigger('click');
+		expect(wrapper.vm.$auth.loginWith).toHaveBeenCalled();
+	});
+
+	it('should show the logout button, hide the login button if logged in', () => {
+		const wrapper = factory(mockStoreLoggedIn);
 		expect(wrapper).toBeTruthy();
+
+		const btnLogin = wrapper.find('[data-testid="btn-login"]');
+		expect(btnLogin.exists()).toBe(false);
+
+		const btnLogout = wrapper.find('[data-testid="btn-logout"]');
+		expect(btnLogout.exists()).toBe(true);
+
+		btnLogout.trigger('click');
+		expect(wrapper.vm.$auth.logout).toHaveBeenCalled();
 	});
 
 	it('should toggle the side menu on button click on mobile', async () => {
-		const wrapper = factory();
+		const wrapper = factory(mockStoreLoggedOut);
 		expect(wrapper).toBeTruthy();
 
 		wrapper.vm.$vuetify.breakpoint.smAndDown = false;
@@ -44,7 +94,7 @@ describe('HeaderMenu', () => {
 	});
 
 	it('should show the cookie hint, and hide on button click', async () => {
-		const wrapper = factory();
+		const wrapper = factory(mockStoreLoggedIn);
 		let cookieBanner = wrapper.find('.Cookie');
 		expect(cookieBanner.exists()).toBe(true);
 

components/Header/HeaderMenu.vue

@@ -91,7 +91,7 @@
 					</v-list-item>
 				</v-list>
 			</v-menu>
-			<v-spacer v-if="$vuetify.breakpoint.lgAndUp" />
+			<v-spacer />
 			<v-btn
 				v-if="$vuetify.breakpoint.lgAndUp"
 				:href="vreHref"
@@ -102,6 +102,25 @@
 			>
 				<v-icon left>mdi-open-in-new</v-icon> Benchmark your Tool
 			</v-btn>
+			<v-btn
+				v-if="!$store.state.auth.loggedIn"
+				color="primary"
+				depressed
+				class="ml-2"
+				data-testid="btn-login"
+				@click="LoginHandler"
+				><v-icon left>mdi-login</v-icon> Login</v-btn
+			>
+			<v-btn
+				v-if="$store.state.auth.loggedIn"
+				color="secondary"
+				depressed
+				outlined
+				class="ml-2"
+				data-testid="btn-logout"
+				@click="LogoutHandler"
+				><v-icon left>mdi-logout</v-icon>Logout</v-btn
+			>
 			<!-- <v-btn v-if="$vuetify.breakpoint.mdAndUp" depressed color="ml-3 primary">
 				<v-icon left>mdi-login-variant</v-icon> Login
 			</v-btn> -->
@@ -142,6 +161,12 @@ export default {
 		handleToggleOpen() {
 			this.openNavMobile = !this.openNavMobile;
 		},
+		LoginHandler() {
+			this.$auth.loginWith('keycloak');
+		},
+		LogoutHandler() {
+			this.$auth.logout();
+		},
 	},
 };
 </script>

nuxt.config.js

@@ -71,8 +71,40 @@ export default {
 		// https://go.nuxtjs.dev/axios
 		'@nuxtjs/axios',
 		'@nuxtjs/robots',
+		'@nuxtjs/auth-next',
 	],
 
+	auth: {
+		strategies: {
+			keycloak: {
+				scheme: '~/plugins/keycloak.js',
+				endpoints: {
+					authorization: `${process.env.KEYCLOAK_HOST}/auth/realms/${process.env.KEYCLOAK_REALM}/protocol/openid-connect/auth`,
+					userInfo: `${process.env.KEYCLOAK_HOST}/auth/realms/${process.env.KEYCLOAK_REALM}/protocol/openid-connect/userinfo`,
+					token: `${process.env.KEYCLOAK_HOST}/auth/realms/${process.env.KEYCLOAK_REALM}/protocol/openid-connect/token`,
+					logout: `${process.env.KEYCLOAK_HOST}/auth/realms/${process.env.KEYCLOAK_REALM}/protocol/openid-connect/logout`,
+					property: 'access_token',
+					type: 'Bearer',
+					name: 'Authorization',
+					maxAge: 1800, // Can be dynamic ?
+				},
+				refreshToken: {
+					property: 'refresh_token',
+					maxAge: 60 * 60 * 24 * 30, // Can be dynamic ?
+				},
+				responseType: 'code',
+				responseMode: 'fragment',
+				grantType: 'authorization_code',
+				clientId: process.env.KEYCLOAK_CLIENT_ID,
+				scope: ['openid'],
+				codeChallengeMethod: 'S256',
+			},
+		},
+		redirect: {
+			login: '/',
+		},
+	},
+
 	robots: {
 		UserAgent: '*',
 		Allow: '/',
@@ -127,6 +159,9 @@ export default {
 				process.env.REST_API_URL ||
 				'https://dev-openebench.bsc.es/monitor/rest/',
 		},
+		KEYCLOAK_HOST: process.env.KEYCLOAK_HOST || 'https://inb.bsc.es/auth',
+		KEYCLOAK_REALM: process.env.KEYCLOAK_REALM || 'openebench',
+		KEYCLOAK_CLIENT_ID: process.env.KEYCLOAK_CLIENT_ID || 'oeb-frontend',
 	},
 
 	// Build Configuration: https://go.nuxtjs.dev/config-build