Total.js Examples

The controller-mail example demonstrates how to implement e-mail templating within a Total.js application. It covers the core components required for email functionality:

• Routing (Controller): How to define routes that trigger email actions.
• Settings (Config): How to configure e-mail server settings.
• Templates (Views): How to use the view engine to create dynamic e-mail templates.

https://github.com/totaljs/examples/tree/master/controller-mail

The Auth example demonstrates how to implement authentication in a Total.js application using the following core components:

• AUTH() delegate: The primary mechanism for handling authentication logic and checking user credentials.
• SESSION() object: Used to manage user session state on the server-side.
• jComponent library: Utilized on the client-side for UI components related to the authentication flow.

To implement similar functionality, you should leverage the AUTH() delegate to intercept requests and validate them against your session management logic.

By default, controller.baa() only checks HTTP headers. To support credentials embedded directly in the URI (e.g., https://user:password@example.com/), you must manually check this.req.uri.auth and populate the auth object.

function authorization() {
	var auth = this.baa();

	if (auth.empty) {
		if (this.req.uri.auth) {
			// Parse credentials from URI: user:password
			let creds = this.req.uri.auth.split(':');
			auth.user = creds[0];
			auth.password = creds[1];
			auth.empty = false;
		} else {
			this.baa('Admin Login Required.');
			return;
		}
	}
}

Total.js supports inline Flow files (located in flowstreams/*.flow) that allow you to create workflows, services, or extend application functionality.

Key characteristics:

• Direct Execution: Flow files are evaluated directly in the app process (no worker process is used). This means routes created within a Flow can function without a reverse proxy and can modify existing Total.js application behavior.
• Hot Reloading: The framework watches all flowstreams/*.flow files and automatically restarts the application whenever a change is detected.
• Editing: You can edit these files using the Total.js Code editor (which includes an offline flow editor) or by dragging and dropping the .flow files into the Total.js Flow editor.

Total.js views use specific tags to handle layouts, conditional logic, and data injection:

• @{layout('name')}: Sets the layout for the view. Use @{layout('')} for no layout.
• @{if condition} ... @{fi}: Conditional block. You can check for the existence of query parameters using @{if query.key}.
• @{model.key}: Outputs a property from the data model passed to the view.
• @{query.key}: Outputs a value from the URL query string.

<!-- Example: Conditional logic based on query string and layout usage -->
@{layout('')}

@{if query.success}
	<div style="background-color:#E0E0E0;padding:10px">E-mail was sent.</div
	<br />
@{fi}

<!-- Example: Accessing model data -->
<h1
@{model.name}</h1>

Blocks are conditional statements used in HTML templates (views), CSS, and JS files. They allow you to maintain a single source file that can be rendered into multiple versions by enabling specific blocks. This minimizes file maintenance and reduces the payload size sent to clients by only including code relevant to the current scenario (e.g., admin-only vs. user-only code).

Key Rules:

• The @{BLOCK} and @{END} tags must always be on separate lines.
• Blocks can be enabled via the MAP() method or conditionally via @{if}/@{import} in HTML templates.

You can listen for specific lifecycle events in the TMS using the SUBSCRIBE() method. In this example, you can subscribe to events related to the users schema, such as:

• users_insert
• users_update
• users_remove

When a new user is created, a subscriber to users_insert will receive a message containing the newly created user object.

Basic Access Authentication (BAA) allows you to authenticate users via the Authorization: Basic <mime-encoded-userid-and-password> HTTP header.

Security Warning: BAA does not encrypt credentials. It should only be used over HTTPS connections.

Default credentials for this example:

• user: totaljs
• password: 123456

function authorization() {
	var auth = this.baa(); // 'this' refers to the controller
	// auth contains: 
	// auth.empty (boolean)
	// auth.user (string)
	// auth.password (string)
}

To set up the Vue.js CRUD App with Vue Router & Axios, install the project dependencies using npm.

npm install