up

frontent/ops_vue_js/src/my_network_func.js

@@ -0,0 +1,46 @@
+import axios from "axios";
+import { myfuncs } from "./myfunc";
+
+export const my_network_func = {
+  post_json(path, json, callback) {
+    var head_path = "/api/v1";
+    //把cookie插入json
+    var data = {};
+    data["data"] = json;
+    var cookie = myfuncs.load_json("cookie");
+    if (cookie) {
+      data["cookie"] = cookie.Value;
+    }
+    var re_data = {};
+
+    axios
+      .post(head_path + path, data, {
+        headers: {
+          "Content-Type": "application/json",
+        },
+      })
+      .then((response) => {
+        //console.log(response)
+        re_data["statusCode"] = response.status;
+        //载入服务器返回的数据
+        if (response.data) {
+          re_data["data"] = response.data;
+          //自动保存服务器发送的cookie
+          if (response.data.cookie) {
+            if (response.data.cookie.Value == "") {
+              myfuncs.dele("cookie");
+            } else {
+              myfuncs.save_json("cookie", response.data.cookie);
+            }
+          }
+        }
+
+        callback(re_data);
+      })
+      .catch((error) => {
+        re_data["statusCode"] = -1;
+        re_data["error"] = error;
+        callback(re_data);
+      });
+  },
+};

frontent/ops_vue_js/src/views/forgotPassword.vue

@@ -1,4 +1,97 @@
+<script setup>
+import { onMounted, watch, ref } from 'vue'
+import MyOffcanvas from '@/components/MyOffcanvas.vue'
+import { myfuncs } from '@/myfunc.js'
+import { useI18n } from 'vue-i18n'
+// 使用 vue-i18n 的 Composition API
+const { t, locale } = useI18n()
+const email = ref()
+const mos = ref()
+
+function resetPassword() {
+  // 在这里处理重置密码逻辑
+  const emailValue = email.value?.value
+  if (emailValue === undefined || emailValue.trim() === '') {
+    mos.value?.showAlert('info', t('message.please_enter_your_email'), 5000)
+    return
+  }
+
+  if (!myfuncs.isValidEmail(emailValue)) {
+    mos.value?.showAlert('warning', t('message.this_not_email'), 5000)
+    return
+  }
+
+  console.log('sending password reset to:', emailValue)
+}
+
+function functionupdataTitle() {
+  document.title = 'Operations.' + t('appname.forgot_password')
+}
+onMounted(() => {
+  functionupdataTitle()
+})
+// 监听语言变化，更新标题
+watch(locale, () => {
+  functionupdataTitle()
+})
+</script>
 <template>
-
+  <div class="container container-tight py-4">
-  
+    <div class="text-center mb-4">
+      <a href="." class="navbar-brand navbar-brand-autodark">
+        <img
+          src="/static/logo.svg"
+          width="110"
+          height="32"
+          alt="Tabler"
+          class="navbar-brand-image"
+        />
+      </a>
+    </div>
+    <div class="card card-md">
+      <div class="card-body">
+        <h2 class="card-title text-center mb-4">{{ t('message.forgot_password') }}</h2>
+        <p class="text-secondary mb-4">
+          {{ t('message.enter_your_email_to_reset_password') }}
+        </p>
+        <div class="mb-3">
+          <label class="form-label">{{ t('message.email_address') }}</label>
+          <input
+            ref="email"
+            type="email"
+            class="form-control"
+            :placeholder="t('message.your_email_address')"
+          />
+        </div>
+        <div class="form-footer">
+          <button @click="resetPassword" class="btn btn-primary w-100">
+            <!-- Download SVG icon from http://tabler-icons.io/i/mail -->
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              class="icon"
+              width="24"
+              height="24"
+              viewBox="0 0 24 24"
+              stroke-width="2"
+              stroke="currentColor"
+              fill="none"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            >
+              <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+              <path
+                d="M3 7a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v10a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-10z"
+              />
+              <path d="M3 7l9 6l9 -6" />
+            </svg>
+            {{ t('button.send_me_new_password') }}
+          </button>
+        </div>
+      </div>
+    </div>
+    <div class="text-center text-secondary mt-3">
+      <router-link to="/login">{{ t('message.back_to_login') }}</router-link>
+    </div>
+  </div>
+  <MyOffcanvas ref="mos" />
 </template>

frontent/ops_vue_js/src/views/registerView.vue

@@ -1,4 +1,185 @@
+<script setup>
+import { onMounted, watch, ref } from 'vue'
+import MyOffcanvas from '@/components/MyOffcanvas.vue'
+import { myfuncs } from '@/myfunc.js'
+import { useI18n } from 'vue-i18n'
+// 使用 vue-i18n 的 Composition API
+const { t, locale } = useI18n()
+const mos = ref()
+const isShowPassword = ref(false)
+const username = ref()
+const useremail = ref()
+const userpassword = ref()
+
+
+function functionupdataTitle() {
+  document.title = 'Operations.' + t('appname.register')
+}
+function togglePasswordVisibility() {
+  isShowPassword.value = !isShowPassword.value
+}
+function createAccount() {
+  // 在这里处理创建新账户的逻辑
+  const user = username.value?.value
+  const email = useremail.value?.value
+  const pass = userpassword.value?.value
+
+  username.value?.classList.remove('is-invalid');
+  useremail.value?.classList.remove('is-invalid');
+  userpassword.value?.classList.remove('is-invalid');
+
+  if (
+    !user ||
+    !email ||
+    !pass
+  ) {
+
+    if(!user){
+      username.value?.classList.add('is-invalid');
+    }
+    if(!email){
+      useremail.value?.classList.add('is-invalid');
+    }
+    if(!pass){
+      userpassword.value?.classList.add('is-invalid');
+    }
+
+    mos.value?.showAlert('info', t('message.please_enter_username_and_password'), 5000)
+    return
+  }
+  if (!myfuncs.isValidEmail(email)) {
+    useremail.value?.classList.add('is-invalid');
+    mos.value?.showAlert('warning', t('message.this_not_email'), 5000)
+    return
+  }
+console.log('创建新账户信息:', {
+    user: username.value?.value,
+    email: useremail.value?.value,
+    pass: userpassword.value?.value,
+  })
+}
+
+onMounted(() => {
+  functionupdataTitle()
+})
+// 监听语言变化，更新标题
+watch(locale, () => {
+  functionupdataTitle()
+})
+</script>
+
 <template>
+  <div class="page page-center">
+    <div class="container container-tight py-4">
+      <div class="text-center mb-4">
+        <router-link to="/" class="navbar-brand navbar-brand-autodark">
+            <img
+            src="/static/logo.svg"
+            width="110"
+            height="32"
+            alt="Tabler"
+            class="navbar-brand-image"
+          />
+        </router-link>
        
-  
+      </div>
+      <div class="card card-md">
+        <div class="card-body">
+          <h2 class="card-title text-center mb-4">{{ t('message.create_new_account') }}</h2>
+          <div class="mb-3">
+            <label class="form-label">{{ t('message.user_name') }}</label>
+            <input
+              ref="username"
+              type="text"
+              class="form-control"
+              :placeholder="t('message.your_user_name')"
+            />
+          </div>
+          <div class="mb-3">
+            <label class="form-label">{{ t('message.email_address') }}</label>
+            <input
+              ref="useremail"
+              type="email"
+              class="form-control"
+              :placeholder="t('message.your_email_address')"
+            />
+          </div>
+          <div class="mb-3">
+            <label class="form-label">{{ t('message.password') }}</label>
+            <div class="input-group input-group-flat">
+              <input
+                ref="userpassword"
+                :type="isShowPassword ? 'text' : 'password'"
+                class="form-control"
+                :placeholder="t('message.your_password')"
+                autocomplete="off"
+              />
+              <span class="input-group-text">
+                <div class="link-secondary" title="Show password" data-bs-toggle="tooltip">
+                  <!-- Download SVG icon from http://tabler-icons.io/i/eye -->
+                  <svg
+                    v-if="!isShowPassword"
+                    @click="togglePasswordVisibility"
+                    xmlns="http://www.w3.org/2000/svg"
+                    class="icon"
+                    width="24"
+                    height="24"
+                    viewBox="0 0 24 24"
+                    stroke-width="2"
+                    stroke="currentColor"
+                    fill="none"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                  >
+                    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+                    <path d="M10 12a2 2 0 1 0 4 0a2 2 0 0 0 -4 0" />
+                    <path
+                      d="M21 12c-2.4 4 -5.4 6 -9 6c-3.6 0 -6.6 -2 -9 -6c2.4 -4 5.4 -6 9 -6c3.6 0 6.6 2 9 6"
+                    />
+                  </svg>
+                  <svg
+                    v-if="isShowPassword"
+                    @click="togglePasswordVisibility"
+                    xmlns="http://www.w3.org/2000/svg"
+                    class="icon"
+                    width="24"
+                    height="24"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="2"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                  >
+                    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+                    <path d="M10.585 10.587a2 2 0 0 0 2.829 2.828" />
+                    <path
+                      d="M16.681 16.673a8.717 8.717 0 0 1 -4.681 1.327c-3.6 0 -6.6 -2 -9 -6c1.272 -2.12 2.712 -3.678 4.32 -4.674m2.86 -1.146a9.055 9.055 0 0 1 1.82 -.18c3.6 0 6.6 2 9 6c-.666 1.11 -1.379 2.067 -2.138 2.87"
+                    />
+                    <path d="M3 3l18 18" />
+                  </svg>
+                </div>
+              </span>
+            </div>
+          </div>
+          <!-- <div class="mb-3">
+              <label class="form-check">
+                <input type="checkbox" class="form-check-input"/>
+                <span class="form-check-label">Agree the <a href="./terms-of-service.html" tabindex="-1">terms and policy</a>.</span>
+              </label>
+            </div> -->
+          <div class="form-footer">
+            <button @click="createAccount" class="btn btn-primary w-100">
+              {{ t('message.create_new_account') }}
+            </button>
+          </div>
+        </div>
+      </div>
+      <div class="text-center text-secondary mt-3">
+        {{ t('message.already_have_an_account') }}
+        <router-link to="/login">{{ t('message.back_to_login') }}</router-link>
+      </div>
+    </div>
+  </div>
+  <MyOffcanvas ref="mos" />
 </template>