Skip to main content

Overview

The Credenciales tab (๐ŸŽฎ) is where you manage game account credentials for each company. Each game entry includes:
  • Game name
  • Username/login
  • Link to the game platform
  • Active/inactive toggle
  • Last modification date

Viewing Credentials (Read Mode)

When edit mode is off, the credentials tab displays game cards in a grid layout.

Game Card Components

Each game card shows:
โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”
โ”‚ Game Name                   โšช โ”‚  โ† Toggle (active/inactive)
โ”‚ Username: user123           ๐Ÿ“‹ โ”‚  โ† Copy button
โ”‚ ๐Ÿ”— Abrir                       โ”‚  โ† Open link button
โ”‚ รšltima mod: 2026-03-04        โ”‚  โ† Last modified date
โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜

Copy Username

Click the ๐Ÿ“‹ button next to any username to copy it to clipboard. A toast notification confirms the copy action.
operapedia/app.js
// Copy functionality
navigator.clipboard.writeText(username);
showToast('Copiado al portapapeles');
Click ๐Ÿ”— Abrir to open the game platform in a new tab.

Active/Inactive Status

The toggle indicator shows the gameโ€™s current status:
  • Green toggle: Game is active
  • Gray toggle: Game is inactive
In read mode, toggling requires edit mode to be enabled.

Managing Credentials (Edit Mode)

Editing credentials requires supervisor role and edit mode enabled.

Editing Existing Games

1

Enable Edit Mode

Click Edit in the navbar and authenticate with the admin password.
2

Select Company and Credentials Tab

Choose a company from the sidebar and ensure the ๐ŸŽฎ Credenciales tab is active.
3

Modify Game Details

In edit mode, each game card becomes editable with input fields:
  • Name: Text input (can select from catalog or type custom)
  • Username: Text input with copy button
  • Link: URL input
  • Active: Toggle switch
When you modify a field, the card gets an orange โ€œdirtyโ€ border indicating unsaved changes.
4

Save or Delete

Each game card shows action buttons:
  • Guardar: Saves changes to this specific game
  • Eliminar: Deletes the game (requires confirmation)
Saving updates the lastModified date to the current date.

Adding New Games

When in edit mode, a special + Add Game card appears at the top.
1

Click Add Game Card

The add card includes:
  • Game selector: Dropdown with master catalog games
  • Custom option: Select โ€œโœ๏ธ Otroโ€ to enter a custom name
  • Username field
  • Link field (auto-populated if from catalog)
2

Select from Catalog or Enter Custom

From Catalog:
  • Select a game from the dropdown
  • Link auto-fills from the master catalog
  • Enter username manually
Custom Game:
  • Select โ€œโœ๏ธ Otroโ€ from dropdown
  • Enter game name manually
  • Enter username and link manually
3

Confirm Creation

Click Crear to add the game. A confirmation modal appears asking you to verify the game details before creation.

Importing Games from Another Company

You can clone game credentials from another company within the same partner.
1

Click Import Button

In edit mode, click the ๐Ÿ“ฅ Importar juegos button.
2

Select Source Company

A modal shows companies filtered by the current partner. For example, if youโ€™re editing a Dragon company, only other Dragon companies appear.
operapedia/app.js
// Filter companies by partner
const samePartnerCompanies = companies.filter(
  c => c.id !== currentCompany.id && c.partner === currentCompany.partner
);
3

Review and Import

The modal shows:
  • Source company name
  • List of games to be imported (name, username, link)
  • Editable fields if you want to modify before importing
Click Importar to copy all games to the current company.
Importing adds games to the current company. It does not replace existing games. If a game name already exists, youโ€™ll have duplicates.

Active/Inactive Toggle Sync

The toggle state is synced between two Firebase locations:
  1. Company-specific: companies/{companyId}/games/{gameId}/active
  2. Global toggles: gamesConfig/{companyId}_{gameId}/active
When you toggle a game:
operapedia/app.js
// Update both locations
await firebaseSet(firebaseRef(db, `companies/${companyId}/games/${gameId}/active`), isActive);
await firebaseSet(firebaseRef(db, `gamesConfig/${companyId}_${gameId}/active`), isActive);
This dual storage ensures toggle states persist even if the game is deleted from one company.

Master Game Catalog

The game catalog is a centralized list of available games with their official links.

How the Catalog Works

  • Location: gameCatalog/ in Firebase
  • Structure: {id, name, link} for each game
  • Independence: Modifying the catalog does NOT affect existing company games
  • Usage: Provides dropdown options when adding games + auto-fills links
See the Game Catalog guide for detailed catalog management instructions.

Search Functionality

Local Search (Within Company)

The game search input (#gameSearch) filters the displayed game cards by:
  • Game name
  • Username
It performs real-time filtering as you type.

Global Search (All Companies)

The global omnibar (#globalSearch) in the navbar can search across all companiesโ€™ credentials. Filters include:
  • Partner filter: Only search specific partner companies
  • Category filter: Select โ€œCredencialesโ€ to search only game credentials
Search results show:
  • Company name
  • Matching games with usernames
  • Functional copy and open buttons

Firebase Data Model

Game credentials are stored at:
companies/{companyId}/games/
  {gameId}/
    id: number|string
    name: "Game Name"
    username: "user123"
    link: "https://game-platform.com"
    active: true|false
    lastModified: "2026-03-04"
Toggle sync location:
gamesConfig/
  {companyId}_{gameId}/
    companyId: string|number
    gameId: string|number
    active: true|false
    lastModified: "2026-03-04"

Best Practices

  • Use consistent username formats across companies
  • Include region/server if applicable (e.g., โ€œuser@BRโ€)
  • Avoid special characters that may cause copy issues
  • Document password separately in a secure system
  • Mark games inactive if credentials are expired
  • Keep active games at the top for easier access
  • Document reason for deactivation in Notes tab
  • Import from companies with similar offerings
  • Review imported data before saving
  • Update usernames after import (donโ€™t reuse credentials)
  • Delete irrelevant games after bulk import

Troubleshooting

Editing requires:
  • Supervisor role (Analista and Chats cannot edit)
  • Edit mode enabled (button in navbar)
  • Admin password authentication
  • A company must be selected
The copy function uses navigator.clipboard.writeText() which requires:
  • HTTPS connection (or localhost)
  • Clipboard permissions in the browser
  • Modern browser (Chrome 63+, Firefox 53+, Safari 13.1+)
If a game doesnโ€™t appear in the add game dropdown:
  • It hasnโ€™t been added to the master catalog yet
  • Select โ€œโœ๏ธ Otroโ€ to add it as a custom entry
  • Ask a supervisor to add it to the catalog for future use
If changes arenโ€™t persisting:
  • Check for Firebase connection errors in browser console
  • Ensure you clicked Guardar on the specific game card
  • Verify edit mode is still active (doesnโ€™t timeout)
  • Check Firebase database rules allow write access

Build docs developers (and LLMs) love