Skip to content

fix: Fixed the bug of displaying prompt information for first-time login #7348

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
Dec 12, 2024
Merged

fix: Fixed the bug of displaying prompt information for first-time login #7348

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
31 changes: 19 additions & 12 deletions frontend/src/views/login/components/login-form.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -128,15 +128,6 @@
</template>
</el-checkbox>
</el-form-item>
<div class="agree-helper">
<span
v-if="!loginForm.agreeLicense && !_isMobile()"
class="input-error"
style="line-height: 14px"
>
{{ $t('commons.login.errorAgree') }}
</span>
</div>
</template>
</el-form>
<div class="demo">
Expand All @@ -156,7 +147,7 @@
<span v-html="$t('commons.login.agreeContent')"></span>
</div>
<template #footer>
<span class="dialog-footer">
<span class="dialog-footer login-footer-btn">
<el-button @click="agreeVisible = false">
{{ $t('commons.button.notAgree') }}
</el-button>
Expand All @@ -178,6 +169,7 @@ import { GlobalStore, MenuStore, TabsStore } from '@/store';
import { MsgSuccess } from '@/utils/message';
import { useI18n } from 'vue-i18n';
import { getSettingInfo } from '@/api/modules/setting';
import { Rules } from '@/global/form-rules';

const i18n = useI18n();
const themeConfig = computed(() => globalStore.themeConfig);
Expand Down Expand Up @@ -213,10 +205,18 @@ const loginForm = reactive({
});

const loginRules = reactive({
name: computed(() => [{ required: true, message: i18n.t('commons.rule.username'), trigger: 'blur' }]),
password: computed(() => [{ required: true, message: i18n.t('commons.rule.password'), trigger: 'blur' }]),
name: [{ required: true, message: i18n.t('commons.rule.username'), trigger: 'blur' }],
password: [{ required: true, message: i18n.t('commons.rule.password'), trigger: 'blur' }],
agreeLicense: [Rules.requiredSelect, { type: 'array', validator: checkAgreeLicense, trigger: 'blur' }],
});

function checkAgreeLicense(rule: any, value: any, callback: any) {
if (!value && !_isMobile()) {
return callback(new Error(i18n.t('commons.login.errorAgree')));
}
callback();
}

let isLoggingIn = false;
const mfaButtonFocused = ref();
const mfaLoginForm = reactive({
Expand Down Expand Up @@ -576,4 +576,11 @@ onMounted(() => {
:deep(.el-loading-mask) {
background-color: rgba(229, 238, 253, 0.8) !important;
}

.login-footer-btn {
.el-button--primary {
border-color: #005eeb !important;
background-color: #005eeb !important;
}
}
</style>
Copy link
Member

@wanghe-fit2cloud wanghe-fit2cloud Dec 12, 2024

Choose a reason for hiding this comment

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

The provided code makes several modifications to improve readability and usability. Here's a summary of the main changes with optimization suggestions:

  1. Removed Repeated Code:

    • The agreeHelper div that displayed an error message was removed since it has been integrated into the form validation rules.

  2. Improved Form Validation Rules:

    • A new checkAgreeLicense function was introduced to handle the logic for validating the "agreeLicense" checkbox, ensuring there is agreement before proceeding.
    • This reduces duplication of validation logic within the loginRules object.

  3. Code Readability Improvement:

    • Some comments were added to make the code more readable.
    • Indentation and spacing adjustments improved overall consistency.

  4. Custom CSS for Button Styling:

    • Added custom CSS targeting buttons in the footer section specifically designed for logging in (login-footer-btn). This improves visual styling without affecting other sections.

These improvements enhance maintainability and user experience while maintaining correct functionality.

Loading