feat: move credentials to .env file instead of writing them in plain text (#DVRL-71)

docs/docs/general/01-Getting Started/Installing AskUI/getting-started-linux.md

@@ -31,3 +31,4 @@ npx askui@latest init
 To create and serve a static HTML-Report you have to install [Allure](https://github.com/allure-framework/allure2#download) and then call `allure serve ./allure-results` from your root-directory.
 
 :::
+

docs/docs/general/01-Getting Started/write-your-first-instruction.md

@@ -148,7 +148,7 @@ With AskUI, there are near-infinite ways to target an element. We outlined the t
 To close out the interactive annotation, use `CMD/CTRL + W` or `ESC`.
 
 #### Approach B: Filtering by Proximity: Using Relational Selectors
-- **Process**: Chain multiple element descriptions together using commands like `leftOf()`, `above()`, etc., to create a unique selector based on element relationships. More information can be found in the [AskUI documentation](https://docs.askui.com/docs/0.11.6/general/Element%20Selection/relational-selectors).
+- **Process**: Chain multiple element descriptions together using commands like `leftOf()`, `above()`, etc., to create a unique selector based on element relationships. More information can be found in the [AskUI documentation](../03-Element%20Selection/relational-selectors.md).
 - **Advantages**: Increases selector specificity, particularly useful in complex UIs with numerous similar elements.
 - **Best Used When**: Targeting elements in a densely populated UI or when elements lack unique identifiers.
 
@@ -163,7 +163,7 @@ To close out the interactive annotation, use `CMD/CTRL + W` or `ESC`.
     ```
 
 #### Approach C: Custom Element-Descriptions: Screenshot-Based Selection (Advanced)
-- **Process**: Use a screenshot snippet of the desired element to locate its exact position on the screen. More information can be found in the [AskUI documentation](https://docs.askui.com/docs/0.11.6/general/Element%20Selection/text-and-element-selectors#custom-elements).
+- **Process**: Use a screenshot snippet of the desired element to locate its exact position on the screen. More information can be found in the [AskUI documentation](../03-Element%20Selection/text-and-element-selectors.md#custom-elements).
 - **Advantages**: Highly accurate for unique or custom-designed elements.
 - **Best Used When**: The element has a distinct visual appearance.
 - **Considerations**: This method is sensitive to screen resolution changes; ensure consistency in the automation/testing environment.
@@ -192,7 +192,7 @@ it('should click on my element', async () => {
 
 ### Step 3: Selecting the Right Action for Your Task
 In this step you translate your intention (e.g., click a button, enter text) into a programmable action.
-To learn more about the different types of actions, check out our [API Documentation](https://docs.askui.com/docs/0.11.6/api/API/table-of-contents).
+To learn more about the different types of actions, check out our [API Documentation](../../api/01-API/table-of-contents.md).
 
 In this case, we will use the `click` method, which is great for interacting with buttons, links and checkboxes.
 

docs/versioned_docs/version-0.12.2/general/02-Getting Started/write-your-first-instruction.md

@@ -167,7 +167,7 @@ Congratulations! You’ve just built your first instruction using AskUI. :tada:
 Have a look at [Relational Selectors](../03-Element%20Selection/relational-selectors.md) to select elements via a visual relation instead.
 
 ### Technical
-For technical problems with the execution, take a look at our [Troubleshooting page](https://docs.askui.com/docs/general/Troubleshooting/)
+For technical problems with the execution, take a look at our [Troubleshooting page](../07-Troubleshooting/index.md)
 
 ## Where to Go Next?
 

docs/versioned_docs/version-0.13.1/general/01-Getting Started/write-your-first-instruction.md

@@ -148,7 +148,7 @@ With AskUI, there are near-infinite ways to target an element. We outlined the t
 To close out the interactive annotation, use `CMD/CTRL + W` or `ESC`.
 
 #### Approach B: Filtering by Proximity: Using Relational Selectors
-- **Process**: Chain multiple element descriptions together using commands like `leftOf()`, `above()`, etc., to create a unique selector based on element relationships. More information can be found in the [AskUI documentation](https://docs.askui.com/docs/0.11.6/general/Element%20Selection/relational-selectors).
+- **Process**: Chain multiple element descriptions together using commands like `leftOf()`, `above()`, etc., to create a unique selector based on element relationships. More information can be found in the [AskUI documentation](../03-Element%20Selection/relational-selectors.md).
 - **Advantages**: Increases selector specificity, particularly useful in complex UIs with numerous similar elements.
 - **Best Used When**: Targeting elements in a densely populated UI or when elements lack unique identifiers.
 
@@ -163,7 +163,7 @@ To close out the interactive annotation, use `CMD/CTRL + W` or `ESC`.
     ```
 
 #### Approach C: Custom Element-Descriptions: Screenshot-Based Selection (Advanced)
-- **Process**: Use a screenshot snippet of the desired element to locate its exact position on the screen. More information can be found in the [AskUI documentation](https://docs.askui.com/docs/0.11.6/general/Element%20Selection/text-and-element-selectors#custom-elements).
+- **Process**: Use a screenshot snippet of the desired element to locate its exact position on the screen. More information can be found in the [AskUI documentation](../03-Element%20Selection/text-and-element-selectors.md#custom-elements).
 - **Advantages**: Highly accurate for unique or custom-designed elements.
 - **Best Used When**: The element has a distinct visual appearance.
 - **Considerations**: This method is sensitive to screen resolution changes; ensure consistency in the automation/testing environment.
@@ -192,7 +192,7 @@ it('should click on my element', async () => {
 
 ### Step 3: Selecting the Right Action for Your Task
 In this step you translate your intention (e.g., click a button, enter text) into a programmable action.
-To learn more about the different types of actions, check out our [API Documentation](https://docs.askui.com/docs/0.11.6/api/API/table-of-contents).
+To learn more about the different types of actions, check out our [API Documentation](../../api/01-API/table-of-contents.md).
 
 In this case, we will use the `click` method, which is great for interacting with buttons, links and checkboxes.
 

docs/versioned_docs/version-0.14.0/general/01-Getting Started/write-your-first-instruction.md

@@ -148,7 +148,7 @@ With AskUI, there are near-infinite ways to target an element. We outlined the t
 To close out the interactive annotation, use `CMD/CTRL + W` or `ESC`.
 
 #### Approach B: Filtering by Proximity: Using Relational Selectors
-- **Process**: Chain multiple element descriptions together using commands like `leftOf()`, `above()`, etc., to create a unique selector based on element relationships. More information can be found in the [AskUI documentation](https://docs.askui.com/docs/0.11.6/general/Element%20Selection/relational-selectors).
+- **Process**: Chain multiple element descriptions together using commands like `leftOf()`, `above()`, etc., to create a unique selector based on element relationships. More information can be found in the [AskUI documentation](../03-Element%20Selection/relational-selectors.md).
 - **Advantages**: Increases selector specificity, particularly useful in complex UIs with numerous similar elements.
 - **Best Used When**: Targeting elements in a densely populated UI or when elements lack unique identifiers.
 
@@ -163,7 +163,7 @@ To close out the interactive annotation, use `CMD/CTRL + W` or `ESC`.
     ```
 
 #### Approach C: Custom Element-Descriptions: Screenshot-Based Selection (Advanced)
-- **Process**: Use a screenshot snippet of the desired element to locate its exact position on the screen. More information can be found in the [AskUI documentation](https://docs.askui.com/docs/0.11.6/general/Element%20Selection/text-and-element-selectors#custom-elements).
+- **Process**: Use a screenshot snippet of the desired element to locate its exact position on the screen. More information can be found in the [AskUI documentation](../03-Element%20Selection/text-and-element-selectors.md#custom-elements).
 - **Advantages**: Highly accurate for unique or custom-designed elements.
 - **Best Used When**: The element has a distinct visual appearance.
 - **Considerations**: This method is sensitive to screen resolution changes; ensure consistency in the automation/testing environment.
@@ -192,7 +192,7 @@ it('should click on my element', async () => {
 
 ### Step 3: Selecting the Right Action for Your Task
 In this step you translate your intention (e.g., click a button, enter text) into a programmable action.
-To learn more about the different types of actions, check out our [API Documentation](https://docs.askui.com/docs/0.11.6/api/API/table-of-contents).
+To learn more about the different types of actions, check out our [API Documentation](../../api/01-API/table-of-contents.md).
 
 In this case, we will use the `click` method, which is great for interacting with buttons, links and checkboxes.
 

packages/askui-nodejs/example_projects_templates/templates/.env.nj

@@ -0,0 +1,2 @@
+ASKUI_WORKSPACE_ID={{ workspace_id }}
+ASKUI_TOKEN={{ access_token }}

packages/askui-nodejs/example_projects_templates/templates/askui-helper-windows.nj

@@ -1,5 +1,7 @@
 import { UiControlClient } from 'askui';
 {{ allure_stepreporter_import }}
+// Uncomment the next file to load credentials from .env
+// import 'dotenv/config';
 
 // Client is necessary to use the askui API
 // eslint-disable-next-line import/no-mutable-exports

packages/askui-nodejs/example_projects_templates/templates/askui-helper.nj

@@ -1,5 +1,7 @@
 import { UiControlClient, UiController } from 'askui';
 {{ allure_stepreporter_import }}
+// Uncomment the next file to load credentials from .env file
+// import 'dotenv/config';
 
 // Server for controlling the operating system
 let uiController: UiController;

packages/askui-nodejs/src/lib/interactive_cli/create-example-project.ts

@@ -192,24 +192,45 @@ export class CreateExampleProject {
   private static async installTestFrameworkPackages(): Promise<void> {
     const runCommand = promisify(exec);
     const frameworkDependencies = {
-      jest: 'npm i -D @askui/askui-reporters typescript ts-node @types/jest ts-jest jest @askui/jest-allure-circus eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-plugin-import eslint-plugin-askui hpagent',
+      jest: 'npm i -D @askui/askui-reporters typescript ts-node @types/jest ts-jest jest @askui/jest-allure-circus dotenv eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-plugin-import eslint-plugin-askui hpagent',
     };
     await runCommand(frameworkDependencies.jest);
   }
 
   private async addUserCredentials() {
-    return [
-      {
-        title: 'Add user credentials',
-        enabled: () => !this.cliOptions.skipCredentials,
-        task: async () => {
-          this.helperTemplateConfig['credentials'] = ` credentials: {
+    return [{
+      title: 'Add user credentials',
+      task: async () => new Listr([
+        {
+          title: 'Create .env file ',
+          task: async () => {
+            const askuiDotEnvTemplateFilePath = path.join(
+              getPathToNodeModulesRoot(),
+              'example_projects_templates',
+              'templates',
+            );
+
+            const templateFileName = '.env.nj';
+            this.helperTemplateConfig['workspace_id'] = this.cliOptions.workspaceId;
+            this.helperTemplateConfig['access_token'] = this.cliOptions.accessToken;
+            nunjucks.configure(askuiDotEnvTemplateFilePath, { autoescape: false });
+            const result = nunjucks.render(templateFileName, this.helperTemplateConfig);
+            const filePath = path.join(this.baseDirPath, '.env');
+            await fs.writeFile(filePath, result, 'utf8');
+          },
+        },
+        {
+          title: 'Add user credentials',
+          enabled: () => !this.cliOptions.skipCredentials,
+          task: async () => {
+            this.helperTemplateConfig['credentials'] = `credentials: {
         workspaceId: '${this.cliOptions.workspaceId}',
         token: '${this.cliOptions.accessToken}',
       },`;
+          },
         },
-      },
-    ];
+      ]),
+    }];
   }
 
   private async copyESLintConfigFiles(): Promise<Listr.ListrTask<unknown>[]> {