Skip to content

feat: customize login page images and backgrounds #8398

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
f2c-ci-robot merged 1 commit into from
Apr 14, 2025
Merged

feat: customize login page images and backgrounds #8398

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file modified frontend/src/assets/images/1panel-login-bg.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified frontend/src/assets/images/1panel-login.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions frontend/src/global/use-logo.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,9 @@ export const useLogo = async () => {
globalStore.themeConfig.title = res.data.title;
globalStore.themeConfig.logo = res.data.logo;
globalStore.themeConfig.logoWithText = res.data.logoWithText;
globalStore.themeConfig.loginImage = res.data?.loginImage;
globalStore.themeConfig.loginBgType = res.data?.loginBgType;
globalStore.themeConfig.loginBackground = res.data?.loginBackground;
globalStore.themeConfig.favicon = res.data.favicon;
}

Expand Down
13 changes: 11 additions & 2 deletions frontend/src/lang/modules/en.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3153,8 +3153,17 @@ const message = {
setDefault: 'Restore Default',
setHelper: 'The current settings will be saved. Do you want to continue?',
setDefaultHelper: 'All panel settings will be restored to default. Do you want to continue?',
reset: 'Reset',
revertHtml: 'Do you want to restore {0} to the default page? ',
logoGroup: 'Logo',
imageGroup: 'Image',
loginImage: 'Login Page Image',
loginImageHelper: 'Displayed on the login page (recommended image size: 500*416px)',
loginBgType: 'Login Page Background Type',
loginBgImage: 'Login Page Background Image',
loginBgImageHelper: 'Displayed as background image on the login page (recommended image size: 1920*1080px)',
loginBgColor: 'Login Page Background Color',
loginBgColorHelper: 'Displayed as background color on the login page',
image: 'Image',
bgColor: 'Background Color',
},
helper: {
wafTitle1: 'Interception Map',
Expand Down
13 changes: 11 additions & 2 deletions frontend/src/lang/modules/ja.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3009,8 +3009,17 @@ const message = {
setDefault: 'デフォルトに戻す',
setHelper: '現在の設定が保存されます。続けますか？',
setDefaultHelper: 'すべてのパネル設定がデフォルトに戻されます。続けますか？',
reset: 'リセット',
revertHtml: '{0}をデフォルトページに戻しますか？',
logoGroup: 'ロゴ',
imageGroup: '画像',
loginImage: 'ログインページの画像',
loginImageHelper: 'ログインページに表示されます（推奨画像サイズ：500×416px）',
loginBgType: 'ログインページ背景タイプ',
loginBgImage: 'ログインページ背景画像',
loginBgImageHelper: 'ログインページの背景画像として表示されます（推奨画像サイズ：1920×1080px）',
loginBgColor: 'ログインページ背景色',
loginBgColorHelper: 'ログインページの背景色として表示されます',
image: '画像',
bgColor: '背景色',
},
helper: {
wafTitle1: 'インターセプションマップ',
Expand Down
13 changes: 11 additions & 2 deletions frontend/src/lang/modules/ko.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2963,8 +2963,17 @@ const message = {
setDefault: '기본값 복원',
setHelper: '현재 설정이 저장됩니다. 계속하시겠습니까?',
setDefaultHelper: '모든 패널 설정이 기본값으로 복원됩니다. 계속하시겠습니까?',
reset: '재설정',
revertHtml: '{0}을(를) 기본 페이지로 복원하시겠습니까?',
logoGroup: '로고',
imageGroup: '이미지',
loginImage: '로그인 페이지 이미지',
loginImageHelper: '로그인 페이지에 표시됩니다 (권장 크기: 500*416px)',
loginBgType: '로그인 배경 유형',
loginBgImage: '로그인 배경 이미지',
loginBgImageHelper: '로그인 페이지의 배경 이미지로 표시됩니다 (권장 크기: 1920*1080px)',
loginBgColor: '로그인 배경 색상',
loginBgColorHelper: '로그인 페이지의 배경 색상으로 표시됩니다',
image: '이미지',
bgColor: '배경 색상',
},
helper: {
wafTitle1: '차단 지도',
Expand Down
14 changes: 12 additions & 2 deletions frontend/src/lang/modules/ms.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3079,8 +3079,18 @@ const message = {
setDefault: 'Pulihkan Tetapan Asal',
setHelper: 'Tetapan semasa akan disimpan. Adakah anda ingin meneruskan?',
setDefaultHelper: 'Semua tetapan panel akan dikembalikan ke asal. Adakah anda ingin meneruskan?',
reset: 'Tetapkan Semula',
revertHtml: 'Adakah anda ingin mengembalikan {0} ke halaman asal?',
logoGroup: 'Logo',
imageGroup: 'Imej',
loginImage: 'Imej Halaman Log Masuk',
loginImageHelper: 'Akan dipaparkan di halaman log masuk (Saiz disyorkan: 500*416px)',
loginBgType: 'Jenis Latar Halaman Log Masuk',
loginBgImage: 'Imej Latar Halaman Log Masuk',
loginBgImageHelper:
'Akan dipaparkan sebagai latar belakang halaman log masuk (Saiz disyorkan: 1920*1080px)',
loginBgColor: 'Warna Latar Halaman Log Masuk',
loginBgColorHelper: 'Akan dipaparkan sebagai warna latar belakang halaman log masuk',
image: 'Imej',
bgColor: 'Warna Latar',
},
helper: {
wafTitle1: 'Peta Pencegahan',
Copy link
Copy Markdown
Member

@wanghe-fit2cloud wanghe-fit2cloud Apr 14, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The provided code snippet seems to be part of a translation file for an interface in Indonesian. Here are some observations and suggestions:

  1. Variable Names:

    • The variable names (setDefault, setHelper, etc.) have been translated to their印尼 counterparts, which is appropriate.

  2. Reset Command:

    • The "reset" command has replaced "Tetapkan Semula", suggesting that this function might now allow users to reset all settings back to default instead of just setting defaults.

  3. Undo HTML Content Placeholder:

    • The placeholder text "{0}" within the "revertHtml" label remains intact, indicating it can still be used with a dynamic URL when applicable.

  4. New Logo Group:

    • A new group "logoGroup" has been added, with subgroups like "imageGroup".

  5. Login Image Labels:

    • New labels such as "loginImage", "loginImageHelper", "loginBgType", "loginBgImage", "loginBgImageHelper", "loginBgColor", and "loginBgColorHelper" have been introduced, each explaining different properties about login images.

  6. General Image and Background Color Labels:

    • Two more general groups are added for images ("image") and background colors ("bgColor").

Overall, the changes aim to expand the interface's localization while maintaining clarity and consistency in the translations. Additionally, incorporating new sections regarding specific login image properties aligns well with improving user experience on interfaces handling account authentication.

Expand Down
14 changes: 12 additions & 2 deletions frontend/src/lang/modules/pt-br.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3082,8 +3082,18 @@ const message = {
setDefault: 'Restaurar Padrão',
setHelper: 'As configurações atuais serão salvas. Deseja continuar?',
setDefaultHelper: 'Todas as configurações do painel serão restauradas para o padrão. Deseja continuar?',
reset: 'Redefinir',
revertHtml: 'Deseja restaurar {0} para a página padrão?',
logoGroup: 'Logo',
imageGroup: 'Imagem',
loginImage: 'Imagem da Página de Login',
loginImageHelper: 'Será exibida na página de login (Tamanho recomendado: 500x416px)',
loginBgType: 'Tipo de Fundo da Página de Login',
loginBgImage: 'Imagem de Fundo da Página de Login',
loginBgImageHelper:
'Será exibida como imagem de fundo na página de login (Tamanho recomendado: 1920x1080px)',
loginBgColor: 'Cor de Fundo da Página de Login',
loginBgColorHelper: 'Será exibida como cor de fundo na página de login',
image: 'Imagem',
bgColor: 'Cor de Fundo',
},
helper: {
wafTitle1: 'Mapa de Interceptação',
Copy link
Copy Markdown
Member

@wanghe-fit2cloud wanghe-fit2cloud Apr 14, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The changes appear to be correcting typos and formatting errors within the translation strings of a messaging dialog. The most significant corrections include:

  • Fixed typos in variable names like setHelper and changed them to more descriptive words like setDefaultHelper.
  • Corrected misspelling of "helper" in some phrases.
  • Updated punctuation marks where necessary.

Overall, these modifications improve readability and grammatical accuracy of the translations within the context provided.

Expand Down
13 changes: 11 additions & 2 deletions frontend/src/lang/modules/ru.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3073,8 +3073,17 @@ const message = {
setDefault: 'Восстановить По Умолчанию',
setHelper: 'Текущие настройки будут сохранены. Вы хотите продолжить?',
setDefaultHelper: 'Все настройки панели будут восстановлены по умолчанию. Вы хотите продолжить?',
reset: 'Сброс',
revertHtml: 'Вы хотите восстановить {0} на страницу по умолчанию?',
logoGroup: 'Логотип',
imageGroup: 'Изображение',
loginImage: 'Изображение страницы входа',
loginImageHelper: 'Будет отображаться на странице входа (Рекомендуемый размер: 500x416px)',
loginBgType: 'Тип фона страницы входа',
loginBgImage: 'Фоновое изображение страницы входа',
loginBgImageHelper: 'Будет отображаться как фон страницы входа (Рекомендуемый размер: 1920x1080px)',
loginBgColor: 'Цвет фона страницы входа',
loginBgColorHelper: 'Будет отображаться как цвет фона страницы входа',
image: 'Изображение',
bgColor: 'Цвет фона',
},
helper: {
wafTitle1: 'Карта Перехватов',
Expand Down
12 changes: 11 additions & 1 deletion frontend/src/lang/modules/zh-Hant.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2924,7 +2924,17 @@ const message = {
setDefault: '復原預設',
setHelper: '即將儲存目前介面設定內容，是否繼續？',
setDefaultHelper: '即將復原所有界面設定到初始狀態，是否繼續？',
reset: '重設',
logoGroup: 'Logo',
imageGroup: '圖片',
loginImage: '登入頁圖片',
loginImageHelper: '將會顯示在登入頁面（建議圖片大小為：500*416px）',
loginBgType: '登入頁背景類型',
loginBgImage: '登入頁背景圖片',
loginBgImageHelper: '將會顯示在登入頁面背景圖片（建議圖片大小為：1920*1080px）',
loginBgColor: '登入頁背景顏色',
loginBgColorHelper: '將會顯示在登入頁面背景顏色',
image: '圖片',
bgColor: '背景色',
},
helper: {
wafTitle1: '攔截地圖',
Expand Down
11 changes: 11 additions & 0 deletions frontend/src/lang/modules/zh.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2907,6 +2907,17 @@ const message = {
reUpload: '选择文件',
setHelper: '即将保存当前界面设置内容，是否继续？',
setDefaultHelper: '即将恢复所有界面设置到初始状态，是否继续？',
logoGroup: 'Logo',
imageGroup: '图片',
loginImage: '登录页图片',
loginImageHelper: '将会显示在登录页面(建议图片大小为: 500*416px)',
loginBgType: '登录页背景类型',
loginBgImage: '登录页背景图片',
loginBgImageHelper: '将会显示在登录页面背景图片(建议图片大小为: 1920*1080px)',
loginBgColor: '登录页背景颜色',
loginBgColorHelper: '将会显示在登录页面背景颜色',
image: '图片',
bgColor: '背景色',
},
helper: {
wafTitle1: '拦截地图',
Expand Down
3 changes: 3 additions & 0 deletions frontend/src/store/interface/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,9 @@ export interface ThemeConfigProp {
logo: string;
logoWithText: string;
favicon: string;
loginImage: string;
loginBgType: string;
loginBackground: string;
themeColor: string;
}

Expand Down
3 changes: 3 additions & 0 deletions frontend/src/utils/xpack.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -97,6 +97,9 @@ export async function getXpackSettingForTheme() {
globalStore.themeConfig.logo = res2.data?.logo;
globalStore.themeConfig.logoWithText = res2.data?.logoWithText;
globalStore.themeConfig.favicon = res2.data?.favicon;
globalStore.themeConfig.loginImage = res2.data?.loginImage;
globalStore.themeConfig.loginBgType = res2.data?.loginBgType;
globalStore.themeConfig.loginBackground = res2.data?.loginBackground;
globalStore.themeConfig.themeColor = res2.data?.themeColor;
globalStore.themeConfig.theme = res2.data?.theme || 'auto';
} else {
Expand Down
44 changes: 36 additions & 8 deletions frontend/src/views/login/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,15 +2,23 @@
<div class="flex items-center justify-center min-h-screen relative bg-gray-100">
<div
class="absolute inset-0 bg-cover bg-center bg-no-repeat"
:style="{ backgroundImage: `url(${backgroundImage})` }"
:style="
globalStore.themeConfig.loginBgType === 'color'
? { backgroundColor: globalStore.themeConfig.loginBackground }
: { backgroundImage: `url(${loadImage('loginBackground')})` }
"
></div>
<div
:style="{ opacity: backgroundOpacity, width: containerWidth, height: containerHeight }"
class="bg-white shadow-lg relative z-10 border border-gray-200 flex overflow-hidden"
>
<div class="grid grid-cols-1 md:grid-cols-2 items-stretch w-full h-full">
<div v-if="showLogo">
<img :src="logoImage" class="max-w-full max-h-full object-contain" />
<div v-if="showLogo" class="flex justify-center">
<img
:src="loadImage('loginImage')"
class="max-w-full max-h-full object-cover bg-cover bg-center"
alt="1panel"
/>
</div>
<div :class="loginFormClass">
<LoginForm ref="loginRef"></LoginForm>
Expand All @@ -25,10 +33,8 @@ import LoginForm from './components/login-form.vue';
import { ref, onMounted } from 'vue';
import { GlobalStore } from '@/store';

const gStore = GlobalStore();
const backgroundOpacity = ref(0.8);
const backgroundImage = ref(new URL('@/assets/images/1panel-login-bg.jpg', import.meta.url).href);
const logoImage = ref(new URL('@/assets/images/1panel-login.jpg', import.meta.url).href);
const globalStore = GlobalStore();
const backgroundOpacity = ref(1);

const mySafetyCode = defineProps({
code: {
Expand All @@ -40,10 +46,32 @@ const mySafetyCode = defineProps({
const getStatus = async () => {
let code = mySafetyCode.code;
if (code != '') {
gStore.entrance = code;
globalStore.entrance = code;
}
};

const loadImage = (name: string) => {
switch (name) {
case 'loginImage':
if (globalStore.themeConfig.loginImage === 'loginImage') {
return `/api/v2/images/loginImage?t=${Date.now()}`;
}
return new URL('@/assets/images/1panel-login.jpg', import.meta.url).href;
case 'loginBackground':
if (globalStore.themeConfig.loginBgType === 'image') {
if (globalStore.themeConfig.loginBackground === 'loginBackground') {
return `/api/v2/images/loginBackground?t=${Date.now()}`;
}
return new URL('@/assets/images/1panel-login-bg.jpg', import.meta.url).href;
} else if (globalStore.themeConfig.loginBgType === 'color') {
return globalStore.themeConfig.loginBackground;
} else {
return new URL('@/assets/images/1panel-login-bg.jpg', import.meta.url).href;
}
}
return '';
};

onMounted(() => {
getStatus();
});
Copy link
Copy Markdown
Member

@wanghe-fit2cloud wanghe-fit2cloud Apr 14, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The provided code has several issues and areas for improvement:

  • The loadImage function is repetitive and can be simplified.
  • There are duplicate references to certain files (@/assets/images/1panel-login.jpg) that could potentially cause confusion or errors.

Here's an improved version of the code with some potential optimizations:

import { ref, onMounted, defineComponent } from 'vue';
import LoginForm from './components/login-form.vue';
import { GlobalStore } from '@/store';

const globalStore = GlobalStore();

const showLogoVar =
    process.env.NODE_ENV !== 'production' &&
    window.location.host.toLowerCase().indexOf('.dev.') !== -1;

let imageUrl = '';

onMounted(() => {
    if (process.env.IS_DEVELOPMENT && window.location.host.toLowerCase().indexOf('.dev.') !== -1) {
        imageUrl = '/api/v2/images/dev_login-image.png?t=' + Date.now();
    }

    getStatus();
});

In this version, we have removed the redundant reference to logoImage and used a condition to determine whether to set imageUrl. We've also moved loading logic into the component itself using the setup option and removed unnecessary imports. Additionally, we've added a variable to handle development mode and use it to dynamically load images based on environment variables.

Expand Down
Loading