Skip to main content

​
Login Screen Overview

The P.FLEX login screen provides secure, shift-based authentication for authorized plant supervisors and operators.
P.FLEX Login Screen

​
Key Features

Secure Access

Encrypted authentication with employee ID validation

Shift Selection

Choose your work shift during login

Offline Ready

Login works even without network connection

​
Login Steps

1

Access the Login Page

Navigate to the P.FLEX application. You’ll see:
  • System Status Badge: “Sistema: En Línea” (green pulse)
  • Connection Indicators:
    • Conexión Encriptada ✓
    • Modo Offline Activo ✓
  • Terminal Information: Terminal ID and Local Node IP
// From login.component.ts:66-72
<div class="flex items-center gap-2 px-4 py-1.5 rounded-full">
  <span class="w-2 h-2 rounded-full bg-green-500 animate-pulse"></span>
  <span class="text-xs font-semibold text-green-400">Sistema: En Línea</span>
</div>
<span class="text-[10px]">Sincronización de datos persistente habilitada</span>
2

Enter Your Employee ID

In the Identificación de Usuario field, enter your employee ID:
SUP-001  (Supervisor)
OPR-045  (Operator)
ADM-002  (Admin)
JEF-001  (Manager)

// Username input from login.component.ts:86-89
<input 
  type="text" 
  [(ngModel)]="username" 
  name="username"
  placeholder="ID de Empleado (ej. SUP-001)" 
  autocomplete="off"
/>
Your employee ID is case-insensitive and provided by HR or your supervisor.
3

Enter Your Security Password

Type your password in the Contraseña de Seguridad field:
  • Password is masked by default (••••••••)
  • Click the eye icon to toggle visibility
  • Password field has a blinking cursor animation for visual feedback
// Password field from login.component.ts:98-105
<input 
  [type]="showPassword ? 'text' : 'password'" 
  [(ngModel)]="password" 
  name="password"
  placeholder="••••••••"
/>
<button type="button" (click)="showPassword = !showPassword">
  <span class="material-icons">{{ showPassword ? 'visibility_off' : 'visibility' }}</span>
</button>
Passwords expire every 90 days by default. You’ll receive a warning 15 days before expiry.
4

Select Your Work Shift

Choose your assigned shift from the two options:

Turno Día

Day ShiftDefault: 06:00 - 18:00Morning and afternoon production

Turno Noche

Night ShiftDefault: 18:00 - 06:00Evening and overnight production
// Shift selection from login.component.ts:118-135
<button 
  type="button" 
  (click)="selectedShift = state.config().shiftName1"
  [ngClass]="selectedShift === state.config().shiftName1 ? 'active-shift' : 'inactive-shift'"
>
  <span class="material-icons">wb_sunny</span>
  <span>{{ state.config().shiftName1 }}</span>
  <span>{{ state.config().shiftTime1 }} - {{ state.config().shiftTime2 }}</span>
</button>

<button 
  type="button" 
  (click)="selectedShift = state.config().shiftName2"
  [ngClass]="selectedShift === state.config().shiftName2 ? 'active-shift' : 'inactive-shift'"
>
  <span class="material-icons">nights_stay</span>
  <span>{{ state.config().shiftName2 }}</span>
  <span>{{ state.config().shiftTime2 }} - {{ state.config().shiftTime1 }}</span>
</button>
Shift times can be customized by administrators in the system configuration. The default shift is preselected based on current time.
5

Authenticate

Click the AUTENTICAR SISTEMA button to log in.The button is disabled until you provide:
  • ✓ Username/Employee ID
  • ✓ Selected shift
// Submit button from login.component.ts:139-144
<button 
  type="submit" 
  [disabled]="!username || !selectedShift"
  (ngSubmit)="onLogin()"
>
  <span>AUTENTICAR SISTEMA</span>
  <span class="material-icons">login</span>
</button>
Upon successful authentication, you’ll be redirected based on your role.

​
Authentication Logic

​
How Login Works

// From login.component.ts:262-267 and state.service.ts:114-143
onLogin() {
  if (this.username && this.selectedShift) {
    this.state.login(this.username, this.selectedShift);
    this.router.navigate(['/operator']);
  }
}

// State service login method
login(username: string, shift: Shift) {
  let role: UserRole = 'Supervisor';
  let name = 'Juan Supervisor';
  const lowerUser = username.toLowerCase().trim();

  // Find user in admin users list
  const foundUser = this.adminUsers().find(u => u.username.toLowerCase() === lowerUser);
  if (foundUser && foundUser.active) {
     role = foundUser.role;
     name = foundUser.name;
  } else if (lowerUser === 'admin') {
    role = 'Sistemas';
    name = 'Admin Sistema';
  } else if (lowerUser === 'jefe') {
    role = 'Jefatura';
    name = 'Carlos Gerencia';
  } else if (lowerUser === 'operario') {
    role = 'Operario';
    name = 'Pedro Operador';
  }

  this.currentUser.set({
    id: 'u-' + Date.now(),
    name: name,
    role: role
  });
  this.currentShift.set(shift);

  // Create audit log entry
  this.audit.log(name, role, 'ACCESO', 'Inicio de Sesión', 
    `Usuario ${username} inició sesión en ${shift}.`);
}

​
Role-Based Redirection

After login, users are directed to appropriate interfaces:
Operator View/operator → Station selector with 4 workstations:
  • Impresión (Printing)
  • Troquelado (Die-cutting)
  • Rebobinado (Rewinding)
  • Empaquetado (Packaging)

​
Forgot Password

If you’ve forgotten your password:
1

Click 'Solicitar Restablecimiento'

Located below the password field
2

Contact IT Support

Request will be routed to:
  • Soporte Operativo IT
  • Terminal ID: Your workstation ID
  • Node: Your local network node
3

Verify Identity

Provide your employee ID and supervisor confirmation
4

Receive Temporary Password

You’ll be required to change it on first login

​
Security Features

Encrypted Connection

All authentication data is transmitted over encrypted channels
// Secure connection indicator
<span class="material-icons">verified_user</span>
<span>Conexión Encriptada</span>

Audit Trail

Every login is logged for security auditing
this.audit.log(name, role, 'ACCESO', 'Inicio de Sesión',
  `Usuario ${username} inició sesión en ${shift}.`);

Auto Logout

Sessions automatically expire after 30 minutes of inactivity (configurable)
// From system config
autoLogoutMinutes: 30

Offline Support

Authentication works offline with cached credentialsStatus indicator shows “Modo Offline Activo”

​
Terminal Information

The login screen displays important terminal metadata: 
// From login.component.ts:165-170
<div class="flex items-center gap-3">
  <span class="material-icons">terminal</span>
  <div>
    <span>Soporte Operativo IT</span>
    <span>Terminal ID: W9M-04-A</span>
    <span>Nodo Local: 10.0.4.12</span>
  </div>
</div>
Terminal ID and Local Node are automatically assigned during installation and used for support requests.

​
Troubleshooting Login Issues

  • Verify your employee ID with HR or supervisor
  • Ensure CAPS LOCK is off
  • Check if your account is active (contact admin)
  • Try resetting your password
  • Shifts must be configured by administrator
  • Verify shift times in system config
  • Contact admin if shifts are not visible
  • You can still log in with cached credentials
  • Data will sync when connection is restored
  • Contact IT if offline mode persists
Make sure you’ve entered:
  1. Username/Employee ID
  2. Selected a shift (click a shift card)
Password is not required for demo/testing mode.

​
Next Steps

User Roles

Learn about different roles and permissions

Navigation Guide

Master the application interface

Operator Mode

Start working with production stations

Manager Dashboard

Explore management features

Build docs developers (and LLMs) love

Get started for freeTalk to us