Feature/login

.env.development

@@ -0,0 +1,2 @@
+VUE_APP_BASE_URL=/auth
+VUE_APP_BASE_URL_SOCKET=/socket

README.md

@@ -9,11 +9,87 @@ npm i helix-chat
 ## Usage
 ```js
 import Vue from 'vue';
-import HelixChat from "helix-chat/dist/helix-chat.esm"
+import HelixChat from "helix-chat"
 
 Vue.use(HelixChat)
 ```
 
 ```html
 <helix-chat />
+```
+
+## SCSS
+``` scss
+@import "~helix-chat/src/index";
+```
+
+### Customizable variables
+
+```scss
+$h-border-radius: 6px !default;
+$h-primary-color: #25305A !default;
+$h-primary-color-light: #404e81 !default;
+$h-primary-color-dark: #1C2140 !default;
+$h-secondary-color: #f6355e !default;
+$h-white: #ffffff !default;
+
+$h-bg-box: $h-primary-color !default;
+$h-icon-header: $h-white !default;
+$h-box-border-radius: 10px !default;
+
+$h-bg-box-body: $h-primary-color-dark !default;
+$h-box-body-border-radius: $h-border-radius !default;
+$h-row-color: $h-white !default;
+$h-row-font-size: .9rem !default;
+$h-row-border-radius: $h-border-radius !default;
+$h-row-bg-input-message: $h-primary-color !default;
+$h-row-bg-output-message: $h-secondary-color !default;
+
+$h-contact-list-border-radius: $h-border-radius !default;
+$h-contact-list-item-bg-hover: $h-primary-color-light !default;
+$h-contact-list-item-color: $h-white !default;
+
+$h-box-user-color: $h-white !default;
+$h-box-user-font-weight: bold !default;
+
+$h-input-bg: $h-primary-color-dark !default;
+$h-input-color: $h-white !default;
+$h-input-placeholder-color: $h-white !default;
+$h-input-placeholder-opacity: .5 !default;
+$h-input-border-radius: $h-border-radius !default;
+
+$h-floating-button-bg: $h-white !default;
+$h-floating-button-bg-ping: $h-secondary-color !default;
+```
+
+# For development
+you must create two environment variables to configure the proxy *.env.development*
+
+
+```
+VUE_APP_BASE_URL=/auth
+VUE_APP_BASE_URL_SOCKET=/socket
+```
+create or modify the *vue.config.js* file
+```js
+module.exports = {
+    devServer: {
+        proxy: {
+            '/auth': {
+                target: 'http://localhost:8000/',
+                changeOrigin: true,
+                pathRewrite: {
+                    '^/auth': ''
+                }
+            },
+            '/socket': {
+                target: 'ws://localhost:8000/',
+                changeOrigin: true,
+                pathRewrite: {
+                    '^/socket': ''
+                }
+            }
+        }
+    }
+}
 ```

build/rollup.config.js

@@ -9,6 +9,7 @@ import replace from '@rollup/plugin-replace';
 import babel from '@rollup/plugin-babel';
 import { terser } from 'rollup-plugin-terser';
 import minimist from 'minimist';
+// import scss from 'rollup-plugin-scss'
 
 // Get browserslist config and remove ie from es build targets
 const esbrowserslist = fs.readFileSync('./.browserslistrc')
@@ -42,6 +43,13 @@ const baseConfig = {
     },
     vue: {
       css: true,
+      // preprocessStyles: true,
+      // preprocessOptions: {
+      //   scss: {
+      //     includePaths: ['node_modules'],
+      //     additionalData: `@import '~@/variables';`,
+      //   },
+      // },
       template: {
         isProduction: true,
       },
@@ -51,6 +59,9 @@ const baseConfig = {
         extensions: ['.js', '.jsx', '.ts', '.tsx', '.vue'],
       }),
       commonjs(),
+      // scss({
+      //   output: 'bundle.css',
+      // }),
     ],
     babel: {
       exclude: 'node_modules/**',
@@ -104,7 +115,7 @@ if (!argv.format || argv.format === 'es') {
             },
           ],
         ],
-      }),
+      })
     ],
   };
   buildFormats.push(esConfig);

dev/serve.js

@@ -1,5 +1,7 @@
 import Vue from 'vue';
 import Dev from './serve.vue';
+import "@/index.scss"
+import "bootstrap/scss/bootstrap-reboot.scss"
 
 Vue.config.productionTip = false;
 

dev/serve.vue

@@ -15,30 +15,3 @@ export default Vue.extend({
     <helix-chat />
   </div>
 </template>
-
-<style>
-html, body, div, span,
-h1, h2, h3, h4, h5, h6, p,
-small, strong, sub, sup,
-b, u, i, ol, ul, li,
-article, aside,
-menu, nav {
-  margin: 0;
-  padding: 0;
-  border: 0;
-  font-size: 100%;
-  font: inherit;
-  vertical-align: baseline;
-}
-
-body {
-  line-height: 1;
-  background-color: #1C2140;
-}
-
-*,
-*::before,
-*::after {
-  box-sizing: border-box;
-}
-</style>