Vite - Vite is build tool that brings blazing-fast development and build performance to modern web application development. Its innovative use of native ES modules and seamless integration with Vue.js make it a popular choice for developers seeking to improve their development workflow and deliver high-performance web applications.
Pinia - Pinia is a state management library specifically designed for Vue.js applications. It provides a simple and powerful way to manage application state, making it a great alternative to Vuex. Pinia embraces the Composition API, which was introduced in Vue 3, to provide a more organised and modular approach to managing state.
Bootstrap - Bootstrap is a widely-used open-source front-end CSS framework developed by Twitter. It provides a set of pre-styled components and utilities to build responsive and visually appealing web applications. Bootstrap has gained immense popularity due to its simplicity, flexibility, and extensive documentation.
If you use application internally your token will be recognised and you are allowed to see your devices:
If you use application externally login page appears and you are able to login two ways:
a) Using URL + username and password:
b) Using URL + token:
You can enter both username + password and token and whatever credentials are good you will be logged in. You will get appropriate message if credentials are incorrect.
When you are successfully logged in you will see this page:
Credentials will be saved in local storage and next time you don’t have to login.
Frontend Setup and Configuration Guide
Running the Frontend
Navigate to the frontend folder.
Run the following commands in your terminal:
npm run dev
Configuring the Frontend
To customize the frontend's configuration, such as the server port, follow these steps:
Make the desired configuration changes, such as adjusting the server port.
Customizing Backend Connection
To configure your backend connection and interaction with SICON, modify the
// Set to true if you have your own backend
export const HAS_OWN_BACKEND = true;
// Set to true if you connect directly to SICON
export const CONNECT_DIRECTLY_TO_SICON = true;
Token Handling and Endpoint Configuration
constants.js file, you'll find functions related to token handling and endpoint configuration.
Endpoint Configuration Functions
The endpoint configuration functions are located in the
main.js file, specifically within
plugins/axios.js. There are two axios instances, one with an internal base URL and one with an external base URL. Default URLs are defined in
checkAndConfigureEndpoints() handles endpoint configuration based on token presence and credentials in local storage:
If a token is found in the cookie, the default configuration is used.
If a token is not found but credentials are in local storage:
HAS_OWN_BACKENDis false and
If a token is not found and no credentials are in local storage, a login popup is opened.
These functions are also used in the
Login.vue component during the login process.