@gnar-engine/cli 1.0.4 → 1.0.6

package/bootstrap/services/portal/src/slices/authSlice.js

@@ -0,0 +1,101 @@
+import { createSlice, createAsyncThunk, createAction } from '@reduxjs/toolkit';
+import { getAuthToken, getAuthUser, setAuthToken, setAuthUser, removeAuthToken, removeAuthUser } from '../services/storage.js';
+import { user } from '../services/user.js';
+
+
+export const login = createAsyncThunk('auth/login', async ({ username, password }) => {
+    let response;
+    try {
+        response = await user.authenticate({ username, password });
+    } catch (error) {
+        response = error.response;
+    }
+    return response;
+})
+
+export const register = createAsyncThunk('auth/register', async (user) => {
+    let response;
+    try {
+        response = await user.createUser(user);
+    } catch (error) {
+        response = error.response;
+    }
+    return response;
+})
+
+export const logout = createAction('auth/logout');
+
+export const authSlice = createSlice({
+    name: 'auth',
+    initialState: {
+        authUser: getAuthUser() ? JSON.parse(getAuthUser()) : null,
+        accessToken: getAuthToken() ? getAuthToken() : '',
+        authLoading: false,
+        authError: ''
+    },
+    reducers: {
+    },
+    extraReducers: builder => {
+        builder
+            .addCase(login.pending, (state, action) => {
+                state.authLoading = true;
+                state.authError = '';
+            })
+            .addCase(login.fulfilled, (state, action) => {
+                console.log('login.fulfilled', action.payload);
+                state.authLoading = false;
+                state.authError = action.payload.message ? action.payload.message : '';
+
+                if (action.payload.token) {
+                    state.accessToken = action.payload.token;
+                    state.authUser = action.payload.user;
+
+                    // store in local storage
+                    setAuthToken(action.payload.token);
+                    setAuthUser(JSON.stringify(action.payload.user));
+
+                    // redirect to portal
+                    window.location.href= '/portal/dashboard';
+                }
+            })
+            .addCase(logout, (state, action) => {
+                // Clear auth state
+                state.authUser = '';
+                state.accessToken = '';
+
+                // Remove from local storage
+                removeAuthToken();
+                removeAuthUser();
+
+                // Redirect to login page
+                window.location.href = '/portal/login';
+            })
+
+            // Register
+            .addCase(register.pending, (state, action) => {
+                state.status = 'loading';
+            })
+            .addCase(register.fulfilled, (state, action) => {
+                state.status    = 'idle';
+
+                if (action.payload.users && action.payload.users.length > 0) {
+                    const user = action.payload.users[0];
+            
+                    state.logged_in = true;
+                    state.user = user;
+            
+                    // Save user auth details (if needed)
+                    setAuthUser(JSON.stringify(user));
+            
+                    // Redirect to dashboard page
+                    window.location.href = '/portal/dashboard';
+                } else {
+                    state.logged_in = false;
+                    state.user = {};
+                    state.error = 'Registration failed: Invalid response';
+                }
+            });
+    }
+})
+
+export default authSlice;

package/bootstrap/services/portal/src/store/configureStore.js

@@ -0,0 +1,10 @@
+import { configureStore } from '@reduxjs/toolkit';
+import authSlice from '../slices/authSlice';
+
+const store = configureStore({
+    reducer: {
+        auth: authSlice.reducer
+    }
+})
+
+export default store;

package/bootstrap/services/portal/src/style/cards.less

@@ -0,0 +1,57 @@
+.card {
+    border: 1px solid #3C3C3C;
+    border-radius: 10px;
+    margin-bottom: 30px;
+    width: 100%;
+
+    .card-title {
+        background: #242424;
+        margin: 0px;
+        padding: 20px 40px;
+        font-size: 16px;
+        font-weight: 400;
+        border-top-left-radius: 10px;
+        border-top-right-radius: 10px;
+        overflow: hidden;
+    }
+    
+    .card-content {
+        padding: 30px 40px;
+    }
+
+    .instruction {
+        color: @mid-grey;
+        margin-bottom: 30px;
+    }
+}
+
+.card-columns {
+    display: flex;
+    flex-wrap: no-wrap;
+    gap: 50px;
+    
+    & > .col-66 {
+        width: 66%;
+    }
+    
+    & > .col-33 {
+        width: 33%;
+    }   
+    p {
+        margin-top: 0px;
+    }
+}
+
+.card {
+    input[type="text"],
+    input[type="password"],
+    input[type="email"],
+    textarea {
+        margin-top: 8px;
+        background: @dark-3; 
+
+        &::placeholder {
+            color: @light-grey; 
+        }
+    }
+}

package/bootstrap/services/portal/src/style/global.less

@@ -0,0 +1,204 @@
+
+/* vars */
+@dark-1: #242424;
+@dark-2: #2C2C2C;
+@dark-3: #242424;
+@dark-grey: #3C3C3C;
+@mid-grey: #868686;
+@light-grey: #D9D9D9;
+@white: #ffffff;
+@green-main: #47DCA6;
+@error-red: #FF4D4F;
+
+@content-width: 1550px;
+
+/* Fonts */
+// @import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
+
+html {
+    background: @dark-1;
+}
+
+body,
+body * {
+    font-family: ubuntu, sans-serif !important;
+    color: @white;
+    font-size: 14px;
+}
+
+/* Global styles */
+
+h1 {
+    margin-top: 0px;
+    margin-bottom: 40px;
+    font-size: 18px;
+    font-weight: 400;
+}
+h2 {
+    font-size: 14px;
+    font-weight: 500;
+}
+body {
+    margin: 0px;
+
+    &, #root {
+        min-height: 100vh;
+    }
+}
+
+.separator {
+    display: inline-block;
+    margin-top: 20px;
+    margin-bottom: 20px;
+    height: 0px;
+    border-top: 1px solid @dark-grey;
+    width: 100%;
+}
+.content-wrap {
+    display: flex;
+    justify-content: center;
+}
+.content {
+    width: 100%;
+    max-width: @content-width;
+    margin-left: auto;
+    margin-right: auto;
+    padding-left: 20px;
+    padding-right: 20px;
+}
+.instruction {
+    margin-top: 10px;
+    margin-bottom: 10px;
+    color: @light-grey;
+}
+.flex-row {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    gap: 20px;
+}
+.flex-row-end{
+    align-items: flex-end;
+}
+.form-cont {
+    width: 100%;
+    margin-bottom: 30px;
+}
+
+.full-width-select-cont,
+.full-width-select-cont .custom-select {
+    min-width: 100%;
+}
+.flex-row-select-cont {
+    min-width: 100%;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    gap: 20px;
+
+    .custom-select {
+        width: 100%;
+        max-width: unset;
+    }
+}
+
+.flex-row-checkbox-cont {
+    min-width: 100%;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    gap: 20px;
+
+    label {
+        display: inline-block;
+    }
+}
+
+.flex-row-buttons-cont {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-end;
+    gap: 20px;
+}
+
+.button {
+    &.button-loading {
+        background: @dark-grey !important;
+        cursor: not-allowed !important;
+
+        &:disabled {
+            cursor: not-allowed;
+            opacity: 0.5;
+        }
+    }
+}
+
+.text-link {
+    color: @light-grey;
+    cursor: pointer;
+    display: inline-block;
+    text-decoration: none;
+    font-size: 14px;
+
+    &:hover {
+        opacity: 0.8;
+    }
+}
+
+.input {
+    font-size: 12px;
+    color: @dark-2;
+
+    input {
+        background: @dark-1 !important;
+        color: white;
+        padding: 10px;
+        padding-left: 48px;
+        border-radius: 20px;
+        font-size: 14px;
+        margin-top: 5px;
+        margin-bottom: 5px !important;
+    }
+
+    &.icon {
+        background-size: 15px;
+        background-repeat: no-repeat;
+        background-position: 15px 15px;
+
+        input {
+            padding-left: 50px;
+        }
+    }
+}
+
+.single-crud-page {
+    .top-bar {
+        margin-bottom: 20px;
+    }
+    .bottom-bar {
+        margin-top: 20px;
+        margin-bottom: 20px;
+        justify-content: flex-end;
+    }
+}
+
+.error-messages {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-end;
+
+    ul {
+        list-style: none;
+        margin: 0px;
+    }
+
+    li, a, span, p {
+        color: @error-red;
+    }
+}
+
+.button-group {
+    button {
+        margin-left: 15px;
+    }
+}

package/bootstrap/services/portal/src/style/icons.less

@@ -0,0 +1,21 @@
+.icon-dashboard {
+    background: url('../assets/icon-home.svg');
+}
+.icon-users {
+    background: url('../assets/icon-users.svg');
+}
+.icon-settings {
+    background: url('../assets/icon-settings.svg');
+}
+.icon-reports {
+    background: url('../assets/icon-reports.svg');
+}
+.icon-agent {
+    background: url('../assets/icon-agent.svg');
+}
+.icon-page {
+    background: url('../assets/icon-page.svg');
+}
+.icon-delete {
+    background: url('../assets/icon-delete.svg');
+}

package/bootstrap/services/portal/src/style/inputs.less

@@ -0,0 +1,52 @@
+input[type="text"],
+input[type="password"],
+input[type="email"],
+textarea,
+.custom-select .custom-select-input {
+    border: 1px solid @dark-grey;
+    border-radius: 17px;
+    padding: 8px 10px;
+    font-size: 14px;
+    width: 100%;
+    box-sizing: border-box;
+    background: none;
+    margin-bottom: 25px;
+    transition: border-color 0.3s;
+
+    &::placeholder {
+        color: @white;
+    }
+
+    &:focus {
+        outline: none;
+        border-color: @green-main;
+    }
+}
+
+button {
+    background: @green-main;
+    border: 1px solid @green-main;
+    border-radius: 17px;
+    color: @dark-1;
+    padding: 9px 19px;
+    min-width: 143px;
+    font-weight: 700;
+    transition: opacity 0.3s;
+
+    &[type="submit"] {
+        margin-top: 25px;
+        margin-bottom: 25px;
+    }
+
+    &:hover {
+        opacity: 0.8;
+        cursor: pointer; 
+    }
+
+    &.secondary-btn {
+        background: @dark-2;
+        color: @white;
+        border: 1px solid @dark-grey;
+    }
+}
+

package/bootstrap/services/portal/src/style/main.less

@@ -0,0 +1,28 @@
+// GLOBAL
+@import "global.less";
+@import "inputs.less";
+@import "icons.less";
+@import "cards.less";
+
+// LAYOUTS
+@import "../layouts/PortalLayout/PortalLayout.less";
+
+// COMPONENTS
+@import "../components/Sidebar/Sidebar.less";
+@import "../components/Topbar/Topbar.less";
+@import "../components/UserInfo/UserInfo.less";
+@import "../components/CrudList/CrudList.less";
+
+// ELEMENTS
+@import "../elements/Repeater/Repeater.less";
+@import "../elements/CustomSelect/CustomSelect.less";
+@import "../elements/RichTextInput/RichTextInput.less";
+@import "../elements/ImageInput/ImageInput.less";
+@import "../elements/ImageMultiInput/ImageMultiInput.less";
+
+// PAGES
+@import "../pages/LoginPage/LoginPage.less";
+
+#MagiCSS-bookmarklet span {
+    color: black !important;
+}

package/bootstrap/services/portal/src/utils/utils.js

@@ -0,0 +1,9 @@
+
+export const fileToBase64 = (file) => {
+    return new Promise((resolve, reject) => {
+        const reader = new FileReader();
+        reader.onload = () => resolve(reader.result); // returns "data:image/png;base64,..."
+        reader.onerror = reject;
+        reader.readAsDataURL(file);
+    });
+}

package/bootstrap/services/portal/vite.config.js

@@ -0,0 +1,12 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+// https://vite.dev/config/
+export default defineConfig({
+    plugins: [react()],
+    server: {
+        host: true, // binds to 0.0.0.0
+        allowedHosts: ['.localhost', 'portal-service'], // allow extra hosts
+    },
+    base: '/portal/',
+})

package/bootstrap/services/user/src/app.js

@@ -1,4 +1,4 @@
-import { message, http, logger, db, registerService, webSockets } from '@gnar-engine/core';
+import { message, http, logger, db, registerService, webSockets, test } from '@gnar-engine/core';
 import { config } from './config.js';
 import { messageHandlers } from './controllers/message.controller.js';
 import { httpController as userPlatformHttpController } from './controllers/http.controller.js';
@@ -40,6 +40,11 @@ export const initService = async () => {
     await registerService();
 
 	logger.info('G n a r  E n g i n e | User Service initialised successfully.');
+
+    // Tests
+    if (config.environment === 'test' && config.runTests) {
+        test.runCommandTests({config});
+    }
 }
 
 initService();

package/bootstrap/services/user/src/commands/user.handler.js

@@ -76,7 +76,6 @@ commands.register('userService.getAuthenticatedUser', async ({token}) => {
     const user_id = await auth.getAuthenticatedUser(token);
 
     if (user_id) {
-        logger.info('Auth user: ' + user_id);
         const userObj = await user.getById({id: user_id});
 
         if (userObj) {
@@ -86,8 +85,6 @@ commands.register('userService.getAuthenticatedUser', async ({token}) => {
             return userObj;
         }
     }
-
-    return;
 });
 
 
@@ -124,31 +121,48 @@ commands.register('userService.getManyUsers', async ({}) => {
  * Creat users with random password
  * 
  * @param {Object} params
- * @param {Object} params.user - New user data
+ * @param {Array} params.users - New user data
  */
-commands.register('userService.createUserWithRandomPassword', async ({user}) => {
+commands.register('userService.createUserWithRandomPassword', async ({users}) => {
 
-    // create random password
-    const password = Math.random().toString(36);
-    const userData = {
-        ...user,
-        password: password
-    };
+    const validationErrors = [];
+    let createdNewUsers = [];
 
-    logger.info('creating new user : ' + JSON.stringify(userData));
+    // validate user data
+    for (const newUserData of users) {
+
+        // create random password
+        const password = Math.random().toString(36);
+        newUserData.password = password;
 
-    // create user
-    try {
-        const newUsers = await createUsers({users: [userData]})
+        const { errors } = validateUser(newUserData);
 
-        if (!newUsers || newUsers.length === 0) {
-            throw new error.badRequest('User creation failed');
+        if (errors?.length) {
+            validationErrors.push(errors);
+            continue;
+        }
+
+        if (!newUserData.role || newUserData.role !== 'service_admin') {
+            // ensure emails are unique
+            const existingUser = await user.getByEmail({email: newUserData.email});
+
+            if (existingUser) {
+                validationErrors.push(`User with email ${newUserData.email} already exists`);
+            }
         }
-    
-        return newUsers[0];
-    } catch (error) {
-        throw new error.badRequest('User creation failed: ' + error);
     }
+
+    if (validationErrors.length) {
+        throw new error.badRequest(`Invalid user data: ${validationErrors}`);
+    }
+
+    // add users
+    for (const newUserData of users) {
+        const newUser = await user.create(newUserData);
+        createdNewUsers.push(newUser);
+    }
+
+    return createdNewUsers;
 });
 
 /**

package/bootstrap/services/user/src/config.js

@@ -6,12 +6,16 @@ export const config = {
     // service name
     serviceName: 'userService',
 
+    // environment
+    environment: process.env.USER_NODE_ENV || 'dev',
+    runTests: process.env.USER_RUN_TESTS || false,
+
     // microservice | modular-monolith
     architecture: process.env.GLOBAL_ARCHITECTURE || 'microservice',
 
     // web server
     http: {
-        allowedOrigins: [],
+        allowedOrigins: ['localhost', 'localhost:4003'],
         allowedMethods: ['GET', 'POST', 'PUT', 'DELETE'],
         allowedHeaders: ['Content-Type', 'Authorization'],
         rateLimiting: {

package/bootstrap/services/user/src/policies/user.policy.js

@@ -1,4 +1,5 @@
 import { config } from '../config.js';
+import { logger } from '@gnar-engine/core';
 
 
 export const authorise = {
@@ -23,6 +24,7 @@ export const authorise = {
      * Authorise get many users
      */
     getMany: async (request, reply) => {
+        logger.info('user -' + JSON.stringify(request.user)); 
         if (!request.user || request.user.role !== 'service_admin') {
             reply.code(403).send({error: 'not authorised'});
         }
@@ -78,4 +80,4 @@ export const authorise = {
             reply.code(403).send({error: 'not authorised'});
         }
     }
-}
+}

package/bootstrap/services/user/src/tests/commands/user.test.js

@@ -0,0 +1,31 @@
+import { commands, logger, test } from '@gnar-engine/core';
+
+// Preparation before tests run
+test.prep(async () => {
+    if (process.env.NODE_ENV === 'production') {
+        throw new Error('Do not run tests in production mode!');
+    }
+})
+
+// Test create user command
+test.run('Create user command', async () => {
+    const users = await commands.execute('createUsers', { users: [
+        {
+            email: 'test@gnar.co.uk',
+            password: 'p4ssw0rd987'
+        }
+    ]});
+    test.assert(users.length === 1, 'User was not created successfully');
+    test.assert(users[0].email === 'test@gnar.co.uk', 'User email does not match');
+});
+
+// Test create user with random password command
+test.run('Create user with random password command', async () => {
+    const users = await commands.execute('createUserWithRandomPassword', { users: [
+        {
+            email: 'test2@gnar.co.uk'
+        }
+    ]});
+    test.assert(users.length === 1, 'User was not created successfully');
+    test.assert(users[0].email === 'test3@gnar.co.uk', 'User email does not match');
+});