|
|
@@ -0,0 +1,174 @@
|
|
|
+<template>
|
|
|
+ <div class="login-container">
|
|
|
+ <h2 style="color: black;" v-text="translatedTitle"></h2>
|
|
|
+ <p style="color: purple;">{{ translatedMessages.welcomeMessage }}</p>
|
|
|
+ <div>
|
|
|
+ <label for="languageSelect">Language:</label>
|
|
|
+ <select id="languageSelect" v-model="selectedLanguage">
|
|
|
+ <option value="en">English</option>
|
|
|
+ <option value="zh">中文</option>
|
|
|
+ </select>
|
|
|
+ </div>
|
|
|
+ <form @submit.prevent="handleSubmit">
|
|
|
+ <div>
|
|
|
+ <label for="username">{{ translatedLabels.username }}</label>
|
|
|
+ <input id="username" v-model="username" type="text" required />
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <label for="password">{{ translatedLabels.password }}</label>
|
|
|
+ <input id="password" v-model="password" type="password" required />
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <label for="rememberMe"><input id="rememberMe" type="checkbox" v-model="rememberMe"> {{ translatedLabels.rememberMe }}</label>
|
|
|
+ </div>
|
|
|
+ <button type="submit">{{ translatedButtons.login }}</button>
|
|
|
+ <div class="process-flow">
|
|
|
+ <span>Requirement Management</span>
|
|
|
+ <span>→</span>
|
|
|
+ <span>Design</span>
|
|
|
+ <span>→</span>
|
|
|
+ <span>Build</span>
|
|
|
+ <span>→</span>
|
|
|
+ <span>Test</span>
|
|
|
+ <span>→</span>
|
|
|
+ <span>Deploy & Release</span>
|
|
|
+ <span>→</span>
|
|
|
+ <span>Operation</span>
|
|
|
+ </div>
|
|
|
+ </form>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ username: '',
|
|
|
+ password: '',
|
|
|
+ rememberMe: false,
|
|
|
+ selectedLanguage: 'en',
|
|
|
+ translations: {
|
|
|
+ en: {
|
|
|
+ title: 'Welcome to Chatbot of TDLC',
|
|
|
+ labels: {
|
|
|
+ username: 'Username:',
|
|
|
+ password: 'Password:',
|
|
|
+ rememberMe: 'Remember Me'
|
|
|
+ },
|
|
|
+ buttons: {
|
|
|
+ login: 'Login'
|
|
|
+ },
|
|
|
+ messages: {
|
|
|
+ welcomeMessage: 'This is a Prototype Design generated by GenLiteX, the current generation is for demonstration purposes only.'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ zh: {
|
|
|
+ title: '欢迎使用TDLC聊天机器人',
|
|
|
+ labels: {
|
|
|
+ username: '用户名：',
|
|
|
+ password: '密码：',
|
|
|
+ rememberMe: '记住我'
|
|
|
+ },
|
|
|
+ buttons: {
|
|
|
+ login: '登录'
|
|
|
+ },
|
|
|
+ messages: {
|
|
|
+ welcomeMessage: '这是一个由“GenLiteX生成的Prototype Design的界面，当前生成仅用于示例'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ };
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ translatedTitle() {
|
|
|
+ return this.translations[this.selectedLanguage].title;
|
|
|
+ },
|
|
|
+ translatedLabels() {
|
|
|
+ return this.translations[this.selectedLanguage].labels;
|
|
|
+ },
|
|
|
+ translatedButtons() {
|
|
|
+ return this.translations[this.selectedLanguage].buttons;
|
|
|
+ },
|
|
|
+ translatedMessages() {
|
|
|
+ return this.translations[this.selectedLanguage].messages;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ handleSubmit() {
|
|
|
+ if (this.username === 'admin' && this.password === 'admin') {
|
|
|
+ this.$router.push({ name: 'ChatInterface' }).then(() => {
|
|
|
+ console.log('Redirected to ChatInterface');
|
|
|
+ }).catch(err => {
|
|
|
+ console.error('Navigation failed:', err);
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ alert('无效的用户名或密码。');
|
|
|
+ }
|
|
|
+ this.rememberMeCredentials();
|
|
|
+ },
|
|
|
+ rememberMeCredentials() {
|
|
|
+ if (this.rememberMe) {
|
|
|
+ localStorage.setItem('username', this.username);
|
|
|
+ localStorage.setItem('password', this.password);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ retrieveRememberedCredentials() {
|
|
|
+ this.username = localStorage.getItem('username') || '';
|
|
|
+ this.password = localStorage.getItem('password') || '';
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.retrieveRememberedCredentials();
|
|
|
+ }
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+ .login-container {
|
|
|
+ width: 80%;
|
|
|
+ max-width: 800px;
|
|
|
+ margin: auto;
|
|
|
+ padding: 20px;
|
|
|
+ background-color: rgba(255, 255, 255, 0.9);
|
|
|
+ border-radius: 10px;
|
|
|
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .login-container label {
|
|
|
+ margin-bottom: 5px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .login-container select {
|
|
|
+ margin-bottom: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .login-container input {
|
|
|
+ margin-bottom: 10px;
|
|
|
+ width: 100%;
|
|
|
+ padding: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .login-container button {
|
|
|
+ width: 100%;
|
|
|
+ padding: 10px;
|
|
|
+ }
|
|
|
+ .process-flow {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: nowrap;
|
|
|
+ align-items: center;
|
|
|
+ margin-top: 10px;
|
|
|
+ }
|
|
|
+ .process-flow span {
|
|
|
+ font-style: italic;
|
|
|
+ font-size: 14px; /* Adjusted font size */
|
|
|
+ margin-right: 5px; /* Adjusted margin */
|
|
|
+ }
|
|
|
+ .process-flow span {
|
|
|
+ font-style: italic;
|
|
|
+ font-size: 12px; /* Reduced font size */
|
|
|
+ margin-right: 10px; /* Adjusted margin */
|
|
|
+ }
|
|
|
+</style>
|
genlitex