Login Page

The TechUI Workbench module provides a highly encapsulated login page component <TuiLogin>. It not only includes complete form validation, loading state management, and captcha logic, but also supports flexible layout positioning and background style switching, helping developers build beautiful authentication pages in minutes.

Component Features

• Flexible Layout: Supports displaying the form on the left, right, or center of the screen.
• Rich Backgrounds: Can invoke TechUI vector backgrounds, and also supports custom image backgrounds.
• Complete Interaction: Integrates common entry points like "Forgot Password", "Help", and loading states.
• Highly Customizable: Through the slot mechanism, you can embed Logos, theme switchers, or decorative panels (such as sci-fi style borders) around the login box.

Basic Usage

Import and use this component in views/login.vue:

<script setup>
import { reactive, inject } from 'vue';
import { useRouter } from "vue-router";

// Inject global services
const { routerTransition, $tMessage } = inject('$global');

// Define form data reference
const loginCfg = reactive({
  form: {
    username: '',
    password: '',
    captcha: '',
  },
  loading: false,
  position: "right", // Form position
  backgroundType: "image",
  enableCaptcha: true
});

// Handle login logic
const handleLogin = async (formData) => {
  loginCfg.loading = true;
  
  // Simulate API request
  try {
    // await apiLogin(formData);
    $tMessage({ content: "Login successful", type: 'success' });
    
    // Execute route transition with animation
    routerTransition({ path: '/' });
  } catch (e) {
    loginCfg.loading = false;
  }
}
</script>

<template>
  <TuiLogin
    v-bind="loginCfg"
    @login="handleLogin"
  >
    <template #logo>
      <TuiSystemLogo />
    </template>
  </TuiLogin>
</template>

API Reference

Props

Property Name	Type	Default	Description
form	Object	(Required)	Form data object, must contain username and password fields.
position	String	'center'	The position of the login box on the screen. Options: 'center', 'left', 'right'.
backgroundType	String	'vector'	Background rendering mode. Options: 'image' (Image), 'gradient' (Gradient), 'vector' (Vector Graphics).
backgroundImage	String	-	The URL address of the image when backgroundType is 'image'.
loading	Boolean	false	Whether the login button is in a loading state.
enableCaptcha	Boolean	true	Whether to display the captcha input box.
captchaImg	String	'ERROR'	Base64 or URL of the captcha image.
formSize	String	'large'	The size of the form controls. Options: 'small', 'default', 'large'.
rules	Object	-	Custom form validation rules (compatible with common UI library rule formats).
usernamePlaceholder	String	-	Placeholder text for the username input box.
passwordPlaceholder	String	-	Placeholder text for the password input box.
captchaPlaceholder	String	-	Placeholder text for the captcha input box.
loginButtonText	String	-	Text for the login button.
helpText	String	-	Text for the "Help" link.
forgetText	String	-	Text for the "Forgot Password" link.

Events

Event Name	Description	Callback Parameters
login	Triggered when form validation passes and the user clicks the login button.	(formData: Object)
help	Triggered when the user clicks the "Help" link.	-
forget	Triggered when the user clicks the "Forgot Password" link.	-
validate	Triggered when form validation completes, returning the validation result.	(result: Boolean)
captchaError	Triggered when captcha validation logic (if any) fails.	-

Slots

<TuiLogin> provides rich slots for extending the UI:

• #logo: Used to place the system Logo, usually located at the top of the login box.
• #extra: Used to place extra control components, such as a theme switcher (TuiThemeToggle) or control panel switches.
• #border: Used to add decorative border components around the login box (e.g., ScifiPanelAlpha), commonly used to build sci-fi style login pages.

Business Logic Best Practices

In the handleLogin event callback, it is recommended to handle business logic in the following steps:

1. Enable Loading: Set the loading property to true.
2. API Call: Send the username and password to the backend interface.
3. State Writing:

• Upon success, write the Token and UserID to the global state $ADMIN.value.userInfo.
• TuiProvider's global watch will automatically encrypt and persist this information to local storage.

4. Menu Handling:

• If it is the first login, you can manually fetch menu data and write it to $ADMIN.value.menu.
• Alternatively, rely on the global Provider's automatic restoration mechanism.

5. Route Navigation:

• Use routerTransition to navigate.
• Check the route parameter route.query.redirect. If it exists, jump back to that address; otherwise, jump to the homepage.

6. Error Handling: If the API fails, turn off loading and display an error message.