Login Panel

Customizable login page layouts with support for different visual styles.

Overview

XReports provides four login panel modes to match your organization's branding and visual requirements. Each mode offers different levels of customization.

Login Modes

Mode	Name	Description
1	Full	Standard white card, vertically centered with header
2	Simple	Standard white card, positioned at top
3	Custom	Configurable colors and background image
4	Glassmorphism	Transparent panel with backdrop blur effect

Configuration

Login panel settings are configured in tsdc.xml:

<IndexLayoutMode>1</IndexLayoutMode>
<!--1 - full, 2 - simple, 3 - custom, 4 - glassmorphism-->

Mode 1: Full Layout

Standard white login card centered vertically on the page with the application header visible.

Best for: Default installations, standard corporate environments

Sample Configuration

<IndexLayoutMode>1</IndexLayoutMode>

No additional configuration required. Uses default styling.

---

Mode 2: Simple Layout

Standard white login card positioned at the top of the page without vertical centering.

Best for: Compact displays, kiosk applications

Sample Configuration

<IndexLayoutMode>2</IndexLayoutMode>

No additional configuration required. Uses default styling.

---

Mode 3: Custom Layout

White card with configurable background image, colors, and positioning.

Best for: Branded login pages with company background images

Sample Configuration

<IndexLayoutMode>3</IndexLayoutMode>
<IndexLayoutCustom>
    <BackgroundImage>bg.png</BackgroundImage>
    <BackgroundSizeMode>cover</BackgroundSizeMode>
    <LoginPanelPosition>0</LoginPanelPosition>
    <LoginPanelTitle>Login</LoginPanelTitle>
    <LoginPanelWidth>384</LoginPanelWidth>
    <LoginPanelMarginTop>0</LoginPanelMarginTop>
    <InputTextColor>#1f2937</InputTextColor>
    <LoginPanelBackgroundColor>#ffffff</LoginPanelBackgroundColor>
    <LoginButtonBackgroundColor>#5C6BC0</LoginButtonBackgroundColor>
    <LoginButtonTextColor>#ffffff</LoginButtonTextColor>
</IndexLayoutCustom>

Mode 3 Properties

Property	Type	Default	Description
BackgroundImage	string	bg.png	Background image filename
BackgroundSizeMode	string	cover	CSS background-size (cover/contain)
LoginPanelPosition	int	0	0 = center, 1 = top
LoginPanelTitle	string	Login	Panel title text
LoginPanelWidth	int	384	Panel width in pixels
LoginPanelMarginTop	int	0	Top margin in pixels
InputTextColor	string	#1f2937	Text color for labels and inputs
LoginPanelBackgroundColor	string	#ffffff	Panel background color
LoginButtonBackgroundColor	string	#5C6BC0	Button background color
LoginButtonTextColor	string	#ffffff	Button text color

---

Mode 4: Glassmorphism Layout

Advanced transparent panel with backdrop blur effect, underline-style inputs, and ghost button.

Best for: Modern UI, industrial displays, digital signage

Sample Configuration

<IndexLayoutMode>4</IndexLayoutMode>
<IndexLayoutCustom>
    <BackgroundImage>bg-industrial.svg</BackgroundImage>
    <BackgroundSizeMode>cover</BackgroundSizeMode>
    <LoginPanelPosition>0</LoginPanelPosition>
    <LoginPanelTitle>Login</LoginPanelTitle>
    <LoginPanelWidth>384</LoginPanelWidth>
    <LoginPanelMarginTop>0</LoginPanelMarginTop>
    <InputTextColor>#ffffff</InputTextColor>
    <LoginPanelBackgroundColor>rgba(0,0,0,0.3)</LoginPanelBackgroundColor>
    <LoginButtonBackgroundColor>#5C6BC0</LoginButtonBackgroundColor>
    <LoginButtonTextColor>#ffffff</LoginButtonTextColor>
    <!-- Mode 4 specific properties -->
    <LoginPanelBlurAmount>10</LoginPanelBlurAmount>
    <LoginPanelBorderColor>rgba(255,255,255,0.2)</LoginPanelBorderColor>
    <LoginInputBorderColor>rgba(255,255,255,0.5)</LoginInputBorderColor>
</IndexLayoutCustom>

Mode 4 Additional Properties

Property	Type	Default	Description
LoginPanelBlurAmount	int	10	Backdrop blur intensity in pixels
LoginPanelBorderColor	string	rgba(255,255,255,0.2)	Panel border color
LoginInputBorderColor	string	rgba(255,255,255,0.5)	Input underline color

Glassmorphism Tips

• Use rgba() colors for transparency effects
• Higher blur amounts (15-20) work well with busy backgrounds
• Use light text colors (#ffffff) on dark transparent backgrounds
• SVG backgrounds scale well on all screen sizes

---

Background Images

Background images should be placed in:

TSWebAssets/images/tsdc/bg/

Available Backgrounds

Filename	Description
bg.png	Default city/energy themed background
bg-green.png	Green themed background
bg-black.png	Solid black (for testing transparency)
bg-industrial.svg	Industrial/solar panel SVG pattern

Custom Backgrounds

You can add your own background images:

1. Place the image file in TSWebAssets/images/tsdc/bg/
2. Update <BackgroundImage> in tsdc.xml with the filename

Supported formats: PNG, JPG, SVG

---

Related

• Authentication - JWT authentication overview
• User Management - User and permission settings