Login

RestGo email/password login, registration, and password recovery in a Panel or Popup.

Quick start

Add Login1 in the Designer. Use the example in a page method.

// Enable and configure the project RestGo connection first.
Login1.email = 'user@example.com';
Login1.remember = false;
Login1.showLogin();
Login1.controls.email.focus();
// Login1.showRegistration();
// Login1.showRecovery();
// Login1.close();

Configure Login

1. Enable RestGo integration and configure Connection for the project.
2. Drag Login from Authentication onto a page or reusable component.
3. Double-click it or choose Login configuration → Configure Login in the Inspector.
4. In Behavior, choose Panel or Popup, the initial form, registration, Remember me, password visibility, and closing behavior.
5. In Fields and Texts, edit labels, placeholders, and feedback. English and Brazilian Portuguese presets replace the draft text.
6. In Styles, assign existing compatible project Styles to the internal controls. Use the ordinary Styles workspace to edit their appearance.
7. Configure Recovery, review Desktop/Mobile and form previews, and save the modal.

The internal fields and buttons are managed by the modal. Each placement keeps its own form state. Panel follows ordinary container layout; Popup opens a modal dialog. Disable Open Popup when the component is shown to open it explicitly with showLogin(), showRegistration(), or showRecovery().

Authentication and registration

Public registration must be enabled on the RestGo server. Activation, password policy, and permission to log in follow that server's settings. By default, successful registration returns to sign-in with the email retained. Sign in after registration requests login after account creation.

Remember me requests the corresponding session lifetime. Browser persistence follows the project's Connection settings. OnLogin also reports server-validated restored sessions. Use Interaction → OnLogin to navigate after authentication.

Password recovery

Enable recovery to show Forgot your password?. The email form requests a reset link. Its success message does not confirm that an account exists or that email was delivered.

The email returns to the application or the configured HTTP(S) return URL. That destination needs a Login with recovery enabled. With automatic links enabled, the component opens the new-password form. A successful reset returns to sign-in; it does not start a session. Expired links and server errors appear in the form.

Runtime behavior

• email and remember prefill the form; busy and open are read-only state.
• showLogin(), showRegistration(), and showRecovery() select and open a form. submit() sends the current form; close() dismisses it.
• controls exposes typed runtime controls. Obtain these references again after changing the view or configuration.
• Events contain user/status data without passwords or tokens. OnRegister confirms account creation; OnLogin confirms authentication.
• Changing configuration in code affects that instance. Save in the modal to persist project changes.

More examples

import type { WebLogin, WebLoginUserEvent } from '@webrad/runtime';
// Copy into the page class and link OnLogin in Interaction.
class Example {
  public Login1Login(
    sender: WebLogin,
    event: CustomEvent<WebLoginUserEvent>,
  ): void {
    console.log(event.detail.user.id, event.detail.restored);
    Navigate('Dashboard');
  }
}

// Choose Popup and disable Open Popup when the component is shown in the modal.
// Use this in a button's OnClick body.
Login1.showLogin();

Inspector properties

Component options and defaults. Fields without runtime access are configured in the Inspector.

API in code

show(): void;

Login1.show();

hide(): void;

Login1.hide();

close(): void;

Login1.close();

showLogin(): void;

Login1.showLogin();

showRegistration(): void;

Login1.showRegistration();

showRecovery(): void;

Login1.showRecovery();

openRecoveryLink(): boolean;

Login1.openRecoveryLink();

showPasswordReset(token: string): void;

// For an authored recovery integration; normally use automatic email links.
Login1.showPasswordReset('TOKEN-FROM-EMAIL-LINK');

submit(): Promise<void>;

await Login1.submit();

dispose(): void;

// Call only when disposing of an instance whose lifecycle you control.
Login1.dispose();

focus(options?: FocusOptions): void;

bindEvent(eventName: string, handler: WebComponentEventHandler<this> | null): () => void;

emit(eventName: string, detail?: unknown): boolean;

Events

Link methods in Interaction. How to use events.

import type { WebLogin, WebLoginUserEvent } from '@webrad/runtime';
// Copy this method into the page class and link it in Interaction.
class Example {
  public async Login1Login(
    sender: WebLogin,
    event: CustomEvent<WebLoginUserEvent>,
  ): Promise<void> {
    console.log(event.detail);
    const { user, restored } = event.detail;
    console.log(user, restored);
  }
}

import type { WebLogin, WebLoginUserEvent } from '@webrad/runtime';
// Copy this method into the page class and link it in Interaction.
class Example {
  public async Login1Register(
    sender: WebLogin,
    event: CustomEvent<WebLoginUserEvent>,
  ): Promise<void> {
    console.log(event.detail);
    const { user } = event.detail;
    console.log(user);
  }
}

import type { WebLogin, WebLoginRecoveryEvent } from '@webrad/runtime';
// Copy this method into the page class and link it in Interaction.
class Example {
  public async Login1RecoveryRequested(
    sender: WebLogin,
    event: CustomEvent<WebLoginRecoveryEvent>,
  ): Promise<void> {
    console.log(event.detail);
    const { email } = event.detail;
    console.log(email);
  }
}

import type { WebLogin } from '@webrad/runtime';
// Copy this method into the page class and link it in Interaction.
class Example {
  public async Login1PasswordReset(
    sender: WebLogin,
    event: Event,
  ): Promise<void> {
    console.log(sender.name, event.type);
  }
}

import type { WebLogin, WebLoginErrorEvent } from '@webrad/runtime';
// Copy this method into the page class and link it in Interaction.
class Example {
  public async Login1Error(
    sender: WebLogin,
    event: CustomEvent<WebLoginErrorEvent>,
  ): Promise<void> {
    console.log(event.detail);
    const { operation, message, code, status } = event.detail;
    console.log(operation, message, code, status);
  }
}

import type { WebLogin, WebLoginViewEvent } from '@webrad/runtime';
// Copy this method into the page class and link it in Interaction.
class Example {
  public async Login1ViewChange(
    sender: WebLogin,
    event: CustomEvent<WebLoginViewEvent>,
  ): Promise<void> {
    console.log(event.detail);
    const { view } = event.detail;
    console.log(view);
  }
}

import type { WebLogin } from '@webrad/runtime';
// Copy this method into the page class and link it in Interaction.
class Example {
  public async Login1Close(
    sender: WebLogin,
    event: Event,
  ): Promise<void> {
    console.log(sender.name, event.type);
  }
}