From 819d9844bae7720353c7cb57e1f6dd02ecc42565 Mon Sep 17 00:00:00 2001
From: veypi <i@veypi.com>
Date: Tue, 30 Jul 2024 19:38:24 +0800
Subject: [PATCH] update login page

---
 oaweb/assets/img/bg.svg      |  13 ++
 oaweb/assets/img/favicon.svg |   6 +
 oaweb/assets/img/github.svg  |   6 +
 oaweb/assets/img/google.svg  |   6 +
 oaweb/assets/img/wechat.svg  |   9 +
 oaweb/pages/login.vue        | 371 ++++++++++++++++++++++++++++++++---
 6 files changed, 388 insertions(+), 23 deletions(-)
 create mode 100644 oaweb/assets/img/bg.svg
 create mode 100644 oaweb/assets/img/favicon.svg
 create mode 100644 oaweb/assets/img/github.svg
 create mode 100644 oaweb/assets/img/google.svg
 create mode 100644 oaweb/assets/img/wechat.svg

diff --git a/oaweb/assets/img/bg.svg b/oaweb/assets/img/bg.svg
new file mode 100644
index 0000000..e374255
--- /dev/null
+++ b/oaweb/assets/img/bg.svg
@@ -0,0 +1,13 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 409.6 409.6"
+  version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.dev/svgjs">
+  <path
+    d="M409.602 341.336c0 37.7-30.567 68.266-68.266 68.266-37.703 0-68.266-30.567-68.266-68.266 0-37.703 30.563-68.266 68.266-68.266 37.7 0 68.266 30.563 68.266 68.266zM324.27 179.2c0 32.991-26.743 59.734-59.735 59.734-32.992 0-59.734-26.743-59.734-59.735 0-32.988 26.742-59.734 59.734-59.734 32.992 0 59.735 26.746 59.735 59.734zm-119.47 128c0 56.554-45.847 102.402-102.402 102.402C45.848 409.602 0 363.754 0 307.199c0-56.554 45.848-102.398 102.398-102.398 56.555 0 102.403 45.844 102.403 102.398zM170.672 85.336c0 47.129-38.207 85.336-85.336 85.336S0 132.465 0 85.336 38.207 0 85.336 0s85.336 38.207 85.336 85.336zM409.602 51.2c0 28.277-22.926 51.198-51.204 51.198-28.277 0-51.199-22.921-51.199-51.199C307.2 22.922 330.121 0 358.4 0c28.277 0 51.203 22.922 51.203 51.2zm-17.071 170.663c0 9.426-7.64 17.067-17.066 17.067-9.426 0-17.067-7.64-17.067-17.067 0-9.422 7.641-17.062 17.067-17.062s17.066 7.64 17.066 17.062zM264.535 59.734c0 14.141-11.46 25.602-25.601 25.602-14.137 0-25.598-11.461-25.598-25.602 0-14.136 11.46-25.597 25.598-25.597 14.14 0 25.601 11.46 25.601 25.597zm0 0"
+    fill="url(&quot;#SvgjsLinearGradient2614&quot;)"></path>
+  <defs>
+    <linearGradient gradientTransform="rotate(0 0.5 0.5)" id="SvgjsLinearGradient2614">
+      <stop stop-opacity=" 1" stop-color="rgba(105, 234, 203)" offset="0"></stop>
+      <stop stop-opacity=" 1" stop-color="rgba(252, 252, 252)" offset="0.48"></stop>
+      <stop stop-opacity=" 1" stop-color="rgba(95, 222, 255)" offset="0.998515625"></stop>
+    </linearGradient>
+  </defs>
+</svg>
diff --git a/oaweb/assets/img/favicon.svg b/oaweb/assets/img/favicon.svg
new file mode 100644
index 0000000..7a505b0
--- /dev/null
+++ b/oaweb/assets/img/favicon.svg
@@ -0,0 +1,6 @@
+<svg t="1721966078152" class="icon" viewBox="0 0 1024 1024" version="1.1"
+  xmlns="http://www.w3.org/2000/svg" p-id="2830" width="200" height="200">
+  <path
+    d="M768 256h-85.333333v384c0 42.666667-7.68 69.973333-42.666667 83.2L405.333333 810.666667V256c0-29.866667 10.24-81.066667 64-75.093333L768 213.333333V161.706667L384 90.026667C368.64 87.04 356.693333 85.333333 341.333333 85.333333c-54.613333 0-85.333333 33.28-85.333333 85.333334v698.453333c0 67.413333 58.453333 80.64 85.333333 69.546667l384-157.013334c42.666667-17.493333 42.666667-56.32 42.666667-98.986666V256z"
+    fill="#00ffff" p-id="2831"></path>
+</svg>
diff --git a/oaweb/assets/img/github.svg b/oaweb/assets/img/github.svg
new file mode 100644
index 0000000..54382ad
--- /dev/null
+++ b/oaweb/assets/img/github.svg
@@ -0,0 +1,6 @@
+<svg t="1722237445743" class="icon" viewBox="0 0 1024 1024" version="1.1"
+  xmlns="http://www.w3.org/2000/svg" p-id="2681" width="200" height="200">
+  <path
+    d="M511.6 76.3C264.3 76.2 64 276.4 64 523.5 64 718.9 189.3 885 363.8 946c23.5 5.9 19.9-10.8 19.9-22.2v-77.5c-135.7 15.9-141.2-73.9-150.3-88.9C215 726 171.5 718 184.5 703c30.9-15.9 62.4 4 98.9 57.9 26.4 39.1 77.9 32.5 104 26 5.7-23.5 17.9-44.5 34.7-60.8-140.6-25.2-199.2-111-199.2-213 0-49.5 16.3-95 48.3-131.7-20.4-60.5 1.9-112.3 4.9-120 58.1-5.2 118.5 41.6 123.2 45.3 33-8.9 70.7-13.6 112.9-13.6 42.4 0 80.2 4.9 113.5 13.9 11.3-8.6 67.3-48.8 121.3-43.9 2.9 7.7 24.7 58.3 5.5 118 32.4 36.8 48.9 82.7 48.9 132.3 0 102.2-59 188.1-200 212.9 23.5 23.2 38.1 55.4 38.1 91v112.5c0.8 9 0 17.9 15 17.9 177.1-59.7 304.6-227 304.6-424.1 0-247.2-200.4-447.3-447.5-447.3z"
+    p-id="2682"></path>
+</svg>
diff --git a/oaweb/assets/img/google.svg b/oaweb/assets/img/google.svg
new file mode 100644
index 0000000..b5b80b3
--- /dev/null
+++ b/oaweb/assets/img/google.svg
@@ -0,0 +1,6 @@
+<svg t="1722237398153" class="icon" viewBox="0 0 1024 1024" version="1.1"
+  xmlns="http://www.w3.org/2000/svg" p-id="2534" width="200" height="200">
+  <path
+    d="M881 442.4H519.7v148.5h206.4c-8.9 48-35.9 88.6-76.6 115.8-34.4 23-78.3 36.6-129.9 36.6-99.9 0-184.4-67.5-214.6-158.2-7.6-23-12-47.6-12-72.9s4.4-49.9 12-72.9c30.3-90.6 114.8-158.1 214.7-158.1 56.3 0 106.8 19.4 146.6 57.4l110-110.1c-66.5-62-153.2-100-256.6-100-149.9 0-279.6 86-342.7 211.4-26 51.8-40.8 110.4-40.8 172.4S151 632.8 177 684.6C240.1 810 369.8 896 519.7 896c103.6 0 190.4-34.4 253.8-93 72.5-66.8 114.4-165.2 114.4-282.1 0-27.2-2.4-53.3-6.9-78.5z"
+    p-id="2535"></path>
+</svg>
diff --git a/oaweb/assets/img/wechat.svg b/oaweb/assets/img/wechat.svg
new file mode 100644
index 0000000..bc1c2fc
--- /dev/null
+++ b/oaweb/assets/img/wechat.svg
@@ -0,0 +1,9 @@
+<svg t="1722237471862" class="icon" viewBox="0 0 1024 1024" version="1.1"
+  xmlns="http://www.w3.org/2000/svg" p-id="2828" width="200" height="200">
+  <path
+    d="M690.1 377.4c5.9 0 11.8 0.2 17.6 0.5-24.4-128.7-158.3-227.1-319.9-227.1C209 150.8 64 271.4 64 420.2c0 81.1 43.6 154.2 111.9 203.6 5.5 3.9 9.1 10.3 9.1 17.6 0 2.4-0.5 4.6-1.1 6.9-5.5 20.3-14.2 52.8-14.6 54.3-0.7 2.6-1.7 5.2-1.7 7.9 0 5.9 4.8 10.8 10.8 10.8 2.3 0 4.2-0.9 6.2-2l70.9-40.9c5.3-3.1 11-5 17.2-5 3.2 0 6.4 0.5 9.5 1.4 33.1 9.5 68.8 14.8 105.7 14.8 6 0 11.9-0.1 17.8-0.4-7.1-21-10.9-43.1-10.9-66 0-135.8 132.2-245.8 295.3-245.8z m-194.3-86.5c23.8 0 43.2 19.3 43.2 43.1s-19.3 43.1-43.2 43.1c-23.8 0-43.2-19.3-43.2-43.1s19.4-43.1 43.2-43.1z m-215.9 86.2c-23.8 0-43.2-19.3-43.2-43.1s19.3-43.1 43.2-43.1 43.2 19.3 43.2 43.1-19.4 43.1-43.2 43.1z"
+    p-id="2829"></path>
+  <path
+    d="M866.7 792.7c56.9-41.2 93.2-102 93.2-169.7 0-124-120.8-224.5-269.9-224.5-149 0-269.9 100.5-269.9 224.5S540.9 847.5 690 847.5c30.8 0 60.6-4.4 88.1-12.3 2.6-0.8 5.2-1.2 7.9-1.2 5.2 0 9.9 1.6 14.3 4.1l59.1 34c1.7 1 3.3 1.7 5.2 1.7 2.4 0 4.7-0.9 6.4-2.6 1.7-1.7 2.6-4 2.6-6.4 0-2.2-0.9-4.4-1.4-6.6-0.3-1.2-7.6-28.3-12.2-45.3-0.5-1.9-0.9-3.8-0.9-5.7 0.1-5.9 3.1-11.2 7.6-14.5zM600.2 587.2c-19.9 0-36-16.1-36-35.9 0-19.8 16.1-35.9 36-35.9s36 16.1 36 35.9c0 19.8-16.2 35.9-36 35.9z m179.9 0c-19.9 0-36-16.1-36-35.9 0-19.8 16.1-35.9 36-35.9s36 16.1 36 35.9c-0.1 19.8-16.2 35.9-36 35.9z"
+    p-id="2830"></path>
+</svg>
diff --git a/oaweb/pages/login.vue b/oaweb/pages/login.vue
index df5c3fb..39fae28 100644
--- a/oaweb/pages/login.vue
+++ b/oaweb/pages/login.vue
@@ -5,21 +5,85 @@
  * Distributed under terms of the MIT license.
  -->
 <template>
-  <div class="h-full w-full flex items-center justify-center">
-    <div class="px-10 pb-9 pt-16 rounded-xl w-96 bg-gray-50 relative">
-      <img class='vico' :src="'/favicon.ico'">
-      <Vinput class="mb-8" v-model="data.username" label="用户名" :validate="/^[\w]{5,}$/" />
-      <Vinput class='mb-8' v-model="data.password" label='密码' :validate="/^[\w@_#]{6,}$/" type="password" />
-      <div class="flex justify-around mt-4">
-        <div class='vbtn bg-green-300' @click="$router.push({
-          name:
-            'register'
-        })">注册</div>
-        <div class='vbtn bg-green-300' @click="onSubmit">登录</div>
-        <div class='vbtn bg-gray-300' @click="onReset">重置 </div>
+  <div class="login-page flex items-center justify-center">
+    <div class="login box">
+      <div class="header flex items-center justify-start gap-2">
+        <div class="voa-logo"></div>
+        <div class="txt">OneAuth</div>
       </div>
+      <Transition name="box" mode="out-in">
+        <div class="newbie content" v-if="aOpt === 'newbie'">
+          <div :check="checks.u" class="username mt-8">
+            <input @change="check" v-model="data.username" autocomplete="username" placeholder="username, phone or Email">
+          </div>
+          <div :check="checks.p" class="password">
+            <input @change="check" v-model="data.password" autocomplete="password" type='password' placeholder="password">
+          </div>
+          <div :check="checks.p2" class="password">
+            <input @change="check" v-model="data.confirm" autocomplete="password" type='password' placeholder="password">
+          </div>
+          <div class="flex">
+            <button @click="aOpt = ''" class='ok voa-btn back'>
+              back
+            </button>
+            <button @click="register" class='ok voa-btn'>
+              register
+            </button>
+          </div>
+        </div>
+        <div class="oh_no content" v-else-if="aOpt === 'oh_no'">
+          <div class="username mt-8">
+            <input v-model="data.username" autocomplete="username" placeholder="username, phone or Email">
+          </div>
+          <div class="flex">
+            <button @click="aOpt = ''" class='ok back voa-btn'>
+              back
+            </button>
+            <button @click="reset" class='ok voa-btn'>
+              confirm
+            </button>
+          </div>
+        </div>
+        <div class="login content flex flex-col justify-between" v-else>
+          <div :check="checks.u" class="username mt-8">
+            <input @change="check" v-model="data.username" autocomplete="username" placeholder="username, phone or Email">
+          </div>
+          <div :check="checks.p" class="password">
+            <input @change="check" v-model="data.password" autocomplete="password" type='password' placeholder="password">
+          </div>
+          <button @click="login" class='ok voa-btn'>
+            login
+          </button>
+          <div class="last">
+            <div class="icos">
+              <div class="github"></div>
+              <div class="wechat"></div>
+              <div class="google"></div>
+            </div>
+            <div class="txt">
+              <div @click="aOpt = 'newbie'">Create Account</div>
+              <div @click="aOpt = 'oh_no'">Forgot Password?</div>
+            </div>
+          </div>
+        </div>
+      </Transition>
     </div>
   </div>
+  <!-- <div class="h-full w-full flex items-center justify-center"> -->
+  <!--   <div class="px-10 pb-9 pt-16 rounded-xl w-96 bg-gray-50 relative"> -->
+  <!--     <img class='vico' :src="'/favicon.ico'"> -->
+  <!--     <Vinput class="mb-8" v-model="data.username" label="用户名" :validate="" /> -->
+  <!--     <Vinput class='mb-8' v-model="data.password" label='密码' :validate="" type="password" /> -->
+  <!--     <div class="flex justify-around mt-4"> -->
+  <!--       <div class='vbtn bg-green-300' @click="$router.push({ -->
+  <!--         name: -->
+  <!--           'register' -->
+  <!--       })">注册</div> -->
+  <!--       <div class='vbtn bg-green-300' @click="onSubmit">登录</div> -->
+  <!--       <div class='vbtn bg-gray-300' @click="onReset">重置 </div> -->
+  <!--     </div> -->
+  <!--   </div> -->
+  <!-- </div> -->
 </template>
 
 <script lang="ts" setup>
@@ -38,10 +102,29 @@ const router = useRouter()
 let data = ref({
   username: '',
   password: '',
+  confirm: '',
 })
 
 
-const onSubmit = () => {
+
+let uReg = /^[\w]{5,}$/
+let pReg = /^[\w@_#]{6,}$/
+let checks = ref({ 'u': true, 'p': true, 'p2': true })
+let enable_check = ref(false)
+const check = () => {
+  if (!enable_check.value) {
+    return
+  }
+  checks.value.u = !Boolean(!data.value.username || !uReg.test(data.value.username))
+  checks.value.p = !Boolean(!data.value.password || !pReg.test(data.value.password))
+  checks.value.p2 = !Boolean(data.value.confirm !== data.value.password)
+}
+const login = () => {
+  enable_check.value = true
+  check()
+  if (!checks.value.u || !checks.value.p) {
+    return
+  }
   api.user.login(data.value.username,
     data.value.password).then((data: any) => {
       util.setToken(data.auth_token)
@@ -54,17 +137,35 @@ const onSubmit = () => {
       msg.Warn(e)
     })
 }
-const onReset = () => {
-  data.value.password = ''
-  data.value.username = ''
+const register = () => {
+  enable_check.value = true
+  check()
+  if (!checks.value.u || !checks.value.p || !checks.value.p2) {
+    return
+  }
+  // api.user.register(data.value.username, data.value.password).then(u => {
+  //   console.log(u)
+  //   msg.Info('注册成功')
+  //   router.push({ name: 'login' })
+  // }).catch(e => {
+  //   console.log(e)
+  //   msg.Warn('注册失败：' + e.data)
+  // })
+}
+const reset = () => {
+  enable_check.value = true
+  check()
 }
 
 let uuid = computed(() => {
   return route.query.uuid
 })
+
 let ifLogOut = computed(() => {
   return route.query.logout === '1'
 })
+let aOpt = ref('' as '' | 'newbie' | 'oh_no')
+
 
 function redirect(url: string) {
   if (url === 'undefined') {
@@ -94,6 +195,7 @@ function redirect(url: string) {
     router.push('/')
   }
 }
+
 function buildURL(url: string, params?: string) {
   if (!params) {
     return url;
@@ -119,13 +221,236 @@ onMounted(() => {
 })
 </script>
 
-<style scoped>
-.vico {
-  width: 120px;
-  height: 120px;
-  position: absolute;
-  top: -50px;
-  left: -60px;
+<style scoped lang="scss">
+.login-page {
+  margin: 0;
+  padding: 0;
+  height: 100vh;
+  width: 100vw;
+  background-color: #fafafa;
+  background-image: url("../assets/img/bg.svg");
+  background-size: cover;
+  background-position: center;
+  /* backdrop-filter: blur(5px); */
+}
+
+.box {
+  user-select: none;
+  position: sticky;
+  padding: 2rem;
+  width: 40%;
+  min-width: 20rem;
+  height: 50%;
+
+  &::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    border-radius: 2rem;
+    background-color: rgba(200, 200, 200, 0.2);
+    backdrop-filter: blur(20px);
+    /* 模糊效果 */
+    z-index: -1;
+  }
+
+  .header {
+    line-height: 2rem;
+    width: 100%;
+    height: 4rem;
+
+    .voa-logo {
+      height: 4rem;
+      width: 4rem;
+    }
+
+    .txt {
+      font-size: 1.5rem;
+    }
+  }
+
+  .content {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    height: calc(100% - 4rem);
+
+    .username,
+    .password {
+      position: relative;
+      width: 100%;
+
+      input {
+        height: 2.5rem;
+        line-height: 2.5rem;
+        font-size: 1.5rem;
+        width: calc(100% - 2rem);
+        margin: 0 1rem;
+        border: none;
+        outline: none;
+        background: none;
+      }
+
+      input:-webkit-autofill,
+      input:autofill,
+      input:-webkit-autofill:hover,
+      input:-webkit-autofill:focus,
+      input:-webkit-autofill:active {
+        // box-shadow: inset 0 0 0 100px rgba(200, 200, 200, 0.2) !important;
+        background-color: #0f0 !important;
+        transition: background-color 15000s ease-in-out 0s;
+      }
+
+      &::after {
+        content: "";
+        position: absolute;
+        bottom: 0;
+        left: 1rem;
+        width: calc(100% - 2rem);
+        height: 0.1em;
+        background-color: #000;
+        transition: all 0.3s;
+      }
+
+      &:hover::after {
+        left: 0%;
+        width: 100%;
+        background-color: #00ffff;
+      }
+
+      &[check='false']::after {
+        background-color: #f00 !important;
+      }
+    }
+
+    .ok {
+      line-height: 3rem;
+      font-size: 1.5rem;
+      height: 3rem;
+      margin: 0rem auto;
+      width: 40%;
+      background: #73f7ca;
+      border-radius: 1.5rem;
+    }
+
+    .back {
+      background: #ccc;
+      opacity: 0.5;
+
+      &:hover {
+        opacity: 1;
+      }
+    }
+  }
+}
+
+.box-enter-active,
+.box-leave-active {
+  transition: all 0.3s ease-out;
+}
+
+.box-enter-from {
+  transform: translateX(-20px);
+  opacity: 0;
+}
+
+.box-leave-to {
+  transform: translateX(20px);
+  opacity: 0;
+}
+
+
+.login {
+
+
+
+  .last {
+    flex-shrink: 0;
+    display: flex;
+    justify-content: space-between;
+    padding: 0 1rem;
+    height: 3rem;
+
+    .icos {
+      display: flex;
+      align-items: center;
+      gap: 1rem;
+
+      div {
+        opacity: 0.5;
+        cursor: pointer;
+        height: 2rem;
+        width: 2rem;
+        background-size: cover;
+        background-position: center;
+
+        &:hover {
+          opacity: 1;
+        }
+      }
+
+      .github {
+        background-image: url("../assets/img/github.svg");
+      }
+
+      .google {
+        background-image: url("../assets/img/google.svg");
+      }
+
+      .wechat {
+        background-image: url("../assets/img/wechat.svg");
+      }
+    }
+
+    .txt {
+
+      height: 1.5rem;
+      line-height: 1.5rem;
+      font-size: 1rem;
+
+      div {
+        cursor: pointer;
+        opacity: 0.5;
+
+        &:hover {
+          opacity: 1;
+        }
+      }
+    }
+  }
+}
+
+
+.voa-logo {
+  background-image: url("../assets/img/favicon.svg");
+  background-size: cover;
+  background-position: center;
+}
+
+.voa-btn {
+  position: relative;
+  text-align: center;
+  display: block;
+  border: none;
+  cursor: pointer;
+
+  &::after {
+    content: "";
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
+    transition: 0.3s;
+  }
+
+  &:active::after {
+    box-shadow: 0 1px 0px 0px rgba(0, 0, 0, 0.5);
+  }
+
+  &:active {
+    opacity: 0.8;
+  }
 }
 </style>