# Login

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

URL: https://webrad.atentor.com/docs/login
Updated: 2026-11-07

WebLogin · Authentication · Visual · 7 events

## Quick start

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

```ts
// 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 internal controls in Configure Login. Registration creates an account; it starts a session only when Sign in after registration is enabled and the server accepts login.

## 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

Navigate after a successful login

```ts
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');
  }
}
```

Open a Popup explicitly

```ts
// 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.

| Property / source | Type and options | Default | Runtime access |
| --- | --- | --- | --- |
| `name` — Name · Identity | `string` | `—` | name |
| `x` — Left · Size & position | `number` | `0` | x |
| `y` — Top · Size & position | `number` | `0` | y |
| `width` — Width · Size & position | `number` | `420` | width |
| `height` — Height · Size & position | `number` | `400` | height |
| `itemWidth` — Responsive width · Responsive size — Fit content grows the item to its widest rendered child and preserves child intrinsic widths; minimum and maximum width remain limits. | `enum` — `fixed` `stretch` `fit-content` | `"fixed"` | Inspector / configuration |
| `itemHeight` — Responsive height · Responsive size — Fit content grows the item to its lowest rendered child and preserves child intrinsic heights; minimum and maximum height remain limits. | `enum` — `fixed` `stretch` `fit-content` | `"fit-content"` | Inspector / configuration |
| `itemMinWidth` — Minimum width · Responsive size | `number` | `0` | Inspector / configuration |
| `itemMaxWidth` — Maximum width · Responsive size | `number` | `null` | Inspector / configuration |
| `itemMinHeight` — Minimum height · Responsive size | `number` | `0` | Inspector / configuration |
| `itemMaxHeight` — Maximum height · Responsive size | `number` | `null` | Inspector / configuration |
| `itemGrow` — Grow · Responsive size | `number` | `0` | Inspector / configuration |
| `itemShrink` — Shrink · Responsive size — Allows fixed and stretch flow items to yield space. Fit-content keeps its intrinsic size so its children are not compressed. | `boolean` | `true` | Inspector / configuration |
| `itemAlignSelf` — Item alignment · Responsive size — Cross-axis alignment for this item in a row or column. Auto inherits the parent alignment; responsive cross-axis stretch retains its sizing behavior. | `enum` — `auto` `start` `center` `end` `stretch` | `"auto"` | Inspector / configuration |
| `itemHorizontalAnchor` — Horizontal anchor · Anchors & offsets | `enum` — `start` `center` `end` `stretch` | `"start"` | Inspector / configuration |
| `itemVerticalAnchor` — Vertical anchor · Anchors & offsets | `enum` — `start` `center` `end` `stretch` | `"start"` | Inspector / configuration |
| `itemLeft` — Left inset · Anchors & offsets | `number` | `0` | Inspector / configuration |
| `itemRight` — Right inset · Anchors & offsets | `number` | `0` | Inspector / configuration |
| `itemTop` — Top inset · Anchors & offsets | `number` | `0` | Inspector / configuration |
| `itemBottom` — Bottom inset · Anchors & offsets | `number` | `0` | Inspector / configuration |
| `margin` — Margin · Spacing — Outer spacing on all four sides, in pixels. Row and column layouts include this spacing between components. | `number` | `0` | margin |
| `marginTop` — Margin top · Spacing — Outer spacing on this side, in pixels. Overrides the shared Margin value. | `number` | `0` — Derived from saved properties | marginTop |
| `marginRight` — Margin right · Spacing — Outer spacing on this side, in pixels. Overrides the shared Margin value. | `number` | `0` — Derived from saved properties | marginRight |
| `marginBottom` — Margin bottom · Spacing — Outer spacing on this side, in pixels. Overrides the shared Margin value. | `number` | `0` — Derived from saved properties | marginBottom |
| `marginLeft` — Margin left · Spacing — Outer spacing on this side, in pixels. Overrides the shared Margin value. | `number` | `0` — Derived from saved properties | marginLeft |
| `visible` — Visible · Behavior | `boolean` | `true` | visible |
| `collapseWhenHidden` — Collapse when hidden · Behavior — Removes the component from the layout while it is not visible. | `boolean` | `true` | collapseWhenHidden |
| `enabled` — Enabled · Behavior | `boolean` | `true` | enabled |
| `configuration` — Login configuration · Login — Configure login, registration and account recovery, text, internal project Styles, Panel or Popup, and RestGo behavior. | `login-config` — Editor: login-configurator | `{"version":1,"presentation":"panel","initialView":"login","allowRegistration":true,"showFullName":true,"requireFullName":true,"confirmPassword":true,"showRemember":true,"rememberDefault":false,"showPasswordToggle":true,"autoLoginAfterRegistration":false,"closeOnLogin":true,"openOnShow":true,"dismissible":true,"language":"en","recovery":{"enabled":true,"automaticLinks":true,"returnUrl":"","texts":{"forgotPassword":"Forgot your password?","requestTitle":"Recover your account","requestSubtitle":"Enter your email to receive a password reset link.","requestButton":"Send reset link","requestSent":"If the account is eligible for recovery, you will receive an email with instructions.","resetTitle":"Set a new password","resetSubtitle":"Enter and confirm your new password.","resetButton":"Save new password","passwordChanged":"Password changed. Sign in with your new password.","invalidLink":"The recovery link is invalid or expired. Request a new link.","backToLogin":"Back to sign in"}},"styles":{},"email":{"label":"Email","placeholder":"name@example.com"},"password":{"label":"Password","placeholder":""},"fullName":{"label":"Full name","placeholder":""},"passwordConfirmation":{"label":"Confirm password","placeholder":""},"texts":{"loginTitle":"Welcome back","loginSubtitle":"Sign in with your email and password.","registerTitle":"Create your account","registerSubtitle":"Enter your details to get started.","loginButton":"Sign in","registerButton":"Create account","switchToRegister":"New here? Create an account","switchToLogin":"Already have an account? Sign in","remember":"Remember me","showPassword":"Show password","hidePassword":"Hide password","close":"Close","busy":"Please wait…","registered":"Account created. Sign in with your email and password.","authenticated":"You are signed in.","passwordMismatch":"Passwords do not match.","unavailable":"Configure the project RestGo connection.","requestFailed":"Could not complete the request. Please try again."},"appearance":{"fontFamily":"Roboto, sans-serif","fontSize":14,"background":"var(--wr-theme-surface)","foreground":"var(--wr-theme-text)","backgroundEnd":"var(--wr-theme-surface-end)","heading":"var(--wr-theme-heading)","muted":"var(--wr-theme-text-muted)","border":"var(--wr-theme-border)","borderEnd":"var(--wr-theme-border-accent)","inputBackground":"var(--wr-theme-input)","primary":"var(--wr-theme-primary)","inputBackgroundEnd":"var(--wr-theme-input-end)","primaryEnd":"var(--wr-theme-accent)","focus":"var(--wr-theme-focus)","onPrimary":"var(--wr-theme-on-primary)","error":"var(--wr-theme-danger)","borderRadius":12,"padding":20,"gap":8,"maxWidth":420,"fieldHeight":36}}` | configuration |
| `currentRowBindings` — Current row · Data — Bind writable visual values to fields of this repeated row. | `current-row-bindings` — Editor: current-row-bindings | `[]` | currentRowBindings |

## API in code

| Member | Signature | Access |
| --- | --- | --- |
| `configuration` | `get configuration(): WebLoginConfiguration;` | Read and write |
| `controls` | `get controls(): WebLoginControls;` | Read-only |
| `styleCatalog` — The compiler/Designer supplies project style classes; configuration stores only stable IDs. | `get styleCatalog(): readonly RuntimeComponentStyle[];` | Read and write |
| `view` | `get view(): WebLoginView;` | Read and write |
| `busy` | `get busy(): boolean;` | Read-only |
| `open` | `get open(): boolean;` | Read-only |
| `email` | `get email(): string;` | Read and write |
| `remember` | `get remember(): boolean;` | Read and write |
| `hasRecoveryToken` | `get hasRecoveryToken(): boolean;` | Read-only |
| `enabled` | `get enabled(): boolean;` | Read and write |
| `visible` | `get visible(): boolean;` | Read and write |

### `show`

method

```ts
show(): void;
```

Example

```ts
Login1.show();
```

### `hide`

method

```ts
hide(): void;
```

Example

```ts
Login1.hide();
```

### `close`

method

```ts
close(): void;
```

Example

```ts
Login1.close();
```

### `showLogin`

method

```ts
showLogin(): void;
```

Example

```ts
Login1.showLogin();
```

### `showRegistration`

method

```ts
showRegistration(): void;
```

Example

```ts
Login1.showRegistration();
```

### `showRecovery`

method

```ts
showRecovery(): void;
```

Example

```ts
Login1.showRecovery();
```

### `openRecoveryLink`

method

```ts
openRecoveryLink(): boolean;
```

Claims a pending email link without exposing its token to authored code.

Example

```ts
Login1.openRecoveryLink();
```

### `showPasswordReset`

method

```ts
showPasswordReset(token: string): void;
```

The token remains private and is cleared on completion, replacement, hiding or disposal.

Example

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

### `submit`

method

```ts
submit(): Promise<void>;
```

Runs the current form through the shared project RestGo client. Never exposes tokens.

Example

```ts
await Login1.submit();
```

### `dispose`

method

```ts
dispose(): void;
```

Example

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

Inherited members (22)

| Member | Signature | Access |
| --- | --- | --- |
| `currentRowBindings` | `currentRowBindings: readonly WebCurrentRowBinding[];` | Read and write |
| `element` | `readonly element: TElement;` | Read-only |
| `id` | `readonly id: string;` | Read-only |
| `name` | `readonly name: string;` | Read-only |
| `collapseWhenHidden` | `collapseWhenHidden: boolean;` | Read and write |
| `x` | `x: number;` | Read and write |
| `y` | `y: number;` | Read and write |
| `width` | `width: number;` | Read and write |
| `height` | `height: number;` | Read and write |
| `margin` — Outer spacing on all four sides, in pixels. | `margin: number;` | Read and write |
| `marginTop` | `marginTop: number;` | Read and write |
| `marginRight` | `marginRight: number;` | Read and write |
| `marginBottom` | `marginBottom: number;` | Read and write |
| `marginLeft` | `marginLeft: number;` | Read and write |
| `alignSelf` | `alignSelf: RuntimeLayoutAlignSelf;` | Read and write |
| `tabIndex` | `tabIndex: number;` | Read and write |
| `backgroundColor` | `backgroundColor: string;` | Read and write |
| `color` | `color: string;` | Read and write |
| `borderColor` | `borderColor: string;` | Read and write |

### `focus`

method

```ts
focus(options?: FocusOptions): void;
```

### `bindEvent`

method

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

### `emit`

method

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

## Events

Link methods in **Interaction**. [How to use events](https://webrad.atentor.com/docs/interactions).

### OnLogin

[WebLoginUserEvent](https://webrad.atentor.com/docs/types#webloginuserevent) in `event.detail` · `user`, `restored`

A login or restored server-validated session. Credentials are never included.

Signature and example

```ts
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);
  }
}
```

### OnRegister

[WebLoginUserEvent](https://webrad.atentor.com/docs/types#webloginuserevent) in `event.detail` · `user`

RestGo created the account. This alone does not start a session.

Signature and example

```ts
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);
  }
}
```

### OnRecoveryRequested

[WebLoginRecoveryEvent](https://webrad.atentor.com/docs/types#webloginrecoveryevent) in `event.detail` · `email`

RestGo accepted the request. This does not reveal account existence or prove email delivery.

Signature and example

```ts
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);
  }
}
```

### OnPasswordReset

Standard event (Event).

RestGo accepted the new password. Returns to login without starting a session.

Signature and example

```ts
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);
  }
}
```

### OnError

[WebLoginErrorEvent](https://webrad.atentor.com/docs/types#webloginerrorevent) in `event.detail` · `operation`, `message`, `code`, `status`

Signature and example

```ts
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);
  }
}
```

### OnViewChange

[WebLoginViewEvent](https://webrad.atentor.com/docs/types#webloginviewevent) in `event.detail` · `view`

Signature and example

```ts
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);
  }
}
```

### OnClose

Standard event (Event).

Signature and example

```ts
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);
  }
}
```