magic-editor/src/components/panel/main/magic-login.vue

<template>
    <magic-dialog :title="$i('message.login')" :showClose="false" v-model:value="value" >
        <div class="magic-login">
            <label>{{ $i('message.username') }}：</label>
            <magic-input :onEnter="doLogin" v-model:value="username"/>
            <div style="height: 2px"/>
            <label>{{ $i('message.password') }}：</label>
            <magic-input :onEnter="doLogin"  v-model:value="password" type="password"/>
            <div style="height: 2px"/>
        </div>
        <magic-button-group align="center">
            <magic-button :value="$i('message.login')" @onClick="doLogin"/>
        </magic-button-group>
    </magic-dialog>
</template>
<script setup>
import { ref } from 'vue'
import bus from '../../../scripts/bus.js'
import $i from '../../../scripts/i18n.js'
import constants from '../../../scripts/constants.js'
import Message from '../../../scripts/constants/message.js'
import request from '../../../scripts/request.js'
import store from '../../../scripts/store.js'
defineProps({
    value: Boolean
})
const username = ref('')
const password = ref('')
const emit = defineEmits(['update:value'])
const doLogin = () => {
    if(username.value && password.value){
        request.sendPost('/login', { username: username.value, password: password.value }).success((successed, response) => {
            if(successed){
                emit('update:value', false)
                constants.HEADER_MAGIC_TOKEN_VALUE = response.headers[constants.HEADER_MAGIC_TOKEN]
                store.set(constants.STORE.token, constants.HEADER_MAGIC_TOKEN_VALUE)
                bus.$emit(Message.LOGINED)
            }
        })
    }
}
</script>
<style scoped>
label {
  width: 60px;
  text-align: right;
  display: inline-block;
}
.magic-login :deep(.magic-input){
    width: auto !important;
}
</style>