ams-backend/front/admin-front/src/views/login/index.vue

<template>
  <div
    class="login-box"
    :style="{
      height: this.windowHeight + 'px',
    }"
  >
    <el-row>
      <el-col :span="12">
        <div
          class="flex-container login login-box"
          :style="{
            height: this.windowHeight + 'px',
            backgroundColor: isSun ? '#f9f9f9' : '#202020',
          }"
        >
          <span :class="isSun ? 'logo-box-sun' : 'logo-box-moon'"></span>
          <img
            src="@/assets/images/background-left.png"
            alt=""
            class="bg-img"
          />
          <div
            class="desc-chn"
            :style="{
              color: !isSun ? '#FEEAEA' : '#212121',
            }"
          >
            # Verifiable reviews & ratings for everything in web3
          </div>
          <div
            class="desc-en"
            :style="{
              color: !isSun ? '#FEEAEA' : '#212121',
            }"
          >
            <span
              class="dot"
              :style="{
                backgroundColor: !isSun ? '#FEEAEA' : '#212121',
              }"
            ></span
            ><span class="ml-2" style="margin-top: 20px"
              >The world’s first verifiable review platform for NFTs, Coins,<br />
              DAOs, Dapps, and everything in web3</span
            >
          </div>
        </div>
      </el-col>
      <el-col :span="12">
        <div
          class="flex-container login-box"
          :style="{
            height: this.windowHeight + 'px',
            backgroundColor: isSun ? '#ffffff' : '#2e2e2e',
          }"
        >
          <div class="lang-box" v-show="false">
            <el-dropdown trigger="click">
              <div class="lang mt-11">
                Simple Chinese
                <svg-icon icon-class="arrow-down" />
              </div>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item>中文</el-dropdown-item>
                <el-dropdown-item>英文</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
          <span v-show="false" @click="clickSun" style="height: 24px"
            ><sun-fog
              class="sun ml-12 mt-10"
              :color="isSun ? '#2980FF' : '#ababab'"
          /></span>
          <span v-show="false" @click="clickMoon" style="height: 24px">
            <moon
              class="sun ml-5 mt-10"
              :color="isSun ? '#292D32' : '#2980FF'"
            />
          </span>
          <div class="verifi">
            <img class="verifi-icon" src="@/assets/images/Shield.png" alt="" />
            <span class="verifi-url ml-2">URL verification: {{ url }}</span>
          </div>
          <div
            class="login-title"
            :style="{
              color: !isSun ? '#ffffff' : '#212121',
            }"
          >
            管理员账户登录
          </div>
          <div class="regist"></div>
          <el-form
            ref="loginForm"
            :model="loginForm"
            :rules="loginRules"
            class="login-form"
            auto-complete="on"
            label-position="left"
          >
            <el-form-item prop="email">
              <el-input
                ref="email"
                v-model="loginForm.email"
                placeholder="请输入您的账号"
                name="email"
                type="text"
                tabindex="2"
                auto-complete="on"
                :style="{
                  backgroundColor: isSun ? '#ffffff' : '#383838',
                }"
              />
            </el-form-item>

            <el-form-item prop="password">
              <el-input
                :key="passwordType"
                ref="password"
                v-model="loginForm.password"
                :type="passwordType"
                placeholder="请输入密码"
                name="password"
                tabindex="2"
                auto-complete="on"
                @keyup.enter.native="handleLogin"
                :class="isSun ? 'sun-input' : 'moon-input'"
                :style="{
                  backgroundColor: isSun ? '#ffffff' : '#383838',
                  opacity: isSun ? '#ffffff' : '#383838',
                }"
              />
              <span class="show-pwd" @click="showPwd">
                <svg-icon
                  style="width: 20px; height: 20px"
                  :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'"
                />
              </span>
            </el-form-item>
            <div class="forget" v-show="false">忘记密码?</div>
            <el-button
              :loading="loading"
              type="primary"
              style="margin-bottom: 20px; display: block"
              class="btn-text mt-10"
              @click.native.prevent="handleLogin"
            >
              <span v-if="!loading">立即登录</span>
              <span v-else>登 录 中...</span>
            </el-button>
            <div v-show="false">
              <el-divider
                class="divider"
                :style="{
                  backgroundColor: isSun ? '#ffffff' : '#2e2e2e',
                }"
              >
              </el-divider>
              <span
                class="other-account"
                :style="{
                  backgroundColor: isSun ? '#ffffff' : '#2e2e2e',
                }"
                >第三方账号</span
              >
              <el-divider
                class="divider-right"
                :style="{
                  backgroundColor: isSun ? '#ffffff' : '#2e2e2e',
                }"
              >
              </el-divider>
            </div>
            <div v-show="false">
              <el-button
                type="primary"
                class="btn-wechat mt-5"
                :style="{
                  border: isSun ? '' : '1px solid #454545',
                  backgroundColor: isSun ? '#ffffff' : '#383838',
                }"
              >
                <span>
                  <Wechat
                    :color="'#6FCF97'"
                    style="
                      width: 25px;
                      height: 25px;
                      position: relative;
                      top: 3.5px;
                    "
                  />
                </span>
                <span class="wechat-text">微信登录</span>
              </el-button>
              <el-button
                type="primary"
                class="btn-qq"
                :style="{
                  border: isSun ? '' : '1px solid #454545',
                  backgroundColor: isSun ? '#ffffff' : '#383838',
                }"
              >
                <span>
                  <qq
                    :color="'#2980FF'"
                    style="
                      width: 25px;
                      height: 25px;
                      position: relative;
                      top: 3.5px;
                    "
                  />
                </span>
                <span class="qq-text">QQ登录</span>
              </el-button>
            </div>
          </el-form>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<style>
.el-form .el-form-item .el-input {
  width: 400px;
  height: 72px !important;
  border: 1px solid #f0f0f0;
  border-radius: 12px;
  box-shadow: 0px 1px 20px 0px #f5fbff inset;
}
.el-form .el-divider__text {
  padding: 0;
}
.el-form .el-input__inner {
  height: 72px !important;
  border-radius: 12px;
  backdrop-filter: blur(20px);
  font-size: 17px;
  font-family: "hm-medium";
  font-weight: 500;
  text-align: LEFT;
  color: #212121;
  line-height: 17px;
}
</style>
<script>
import CryptoJS from "crypto-js";
import Cookies from "js-cookie";
import { login } from "@/api/getData";
import { getUserInfoByEmail, currentUser } from "@/api/user";
import { getParam } from "@/api/param";
import sunFog from "@/icons/icon/sun-fog.vue";
import Moon from "@/icons/icon/moon.vue";
import Wechat from "@/icons/icon/wechat.vue";
import { getRoleIds } from "@/api/role";
import Qq from "@/icons/icon/qq.vue";
export default {
  components: { sunFog, Moon, Wechat, Qq },
  data() {
    const validatePassword = (rule, value, callback) => {
      if (value.length < 6) {
        callback(new Error("密码不能小于6位"));
      } else {
        callback();
      }
    };
    return {
      url: undefined,
      windowHeight: document.documentElement.clientHeight,
      isSun: true,
      loginForm: {
        email: undefined,
        username: undefined,
        password: undefined,
        systemId: undefined,
        nonce: undefined,
      },
      loginRules: {
        email: [{ required: true, trigger: "blur", message: "请输入您的邮箱" }],
        password: [
          { required: true, trigger: "blur", validator: validatePassword },
        ],
      },
      loading: false,
      passwordType: "password",
      redirect: undefined,
    };
  },
  methods: {
    getRoleIds() {
      getRoleIds().then((resp) => {
        Cookies.set("roles", JSON.stringify(resp), { expires: 15 });
      });
    },
    getUrl() {
      getParam("str_ams_adm_host").then((res) => {
        this.url = res;
      });
    },
    clickSun() {
      this.isSun = true;
    },
    clickMoon() {
      this.isSun = false;
    },
    showPwd() {
      if (this.passwordType === "password") {
        this.passwordType = "";
      } else {
        this.passwordType = "password";
      }
      this.$nextTick(() => {
        this.$refs.password.focus();
      });
    },
    getUserInfo() {
      currentUser().then((resp) => {
        Cookies.set("avatar", resp.avatar, { expires: 15 });
        Cookies.set("username", resp.username, { expires: 15 });
        Cookies.set("nickname", resp.username, { expires: 15 });
        console.log("useruseruser>>>", resp);
        Cookies.set("address", resp.address, { expires: 15 });
        Cookies.set("userId", resp.userId, { expires: 15 });
      });
    },
    handleLogin() {
      this.$refs.loginForm.validate((valid) => {
        if (valid) {
          const data = Object.assign({}, this.loginForm);
          const random = Math.random().toString(36).substring(2);
          data.password = CryptoJS.SHA256(
            `${CryptoJS.SHA256(data.password)}:${data.email}:${random}`
          ).toString();
          data.nonce = random;
          this.loading = true;
          login(data, random)
            .then((res) => {
              Cookies.set("email", this.loginForm.email, { expires: 15 });
              Cookies.set("X-UC-AuthToken", res, { expires: 15 });
              this.$router.push({ path: this.redirect || "/" });
              this.loading = false;

              this.getRoleIds();
              this.getUserInfo();
              setInterval(() => {
                if (Cookies.get("avatar")) {
                  this.$nextTick(() => {
                    location.reload();
                  });
                }
              }, 300);
            })
            .catch(() => {
              this.loading = false;
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
  },
  created() {
    this.getUrl();
  },
};
</script>
<style  scoped>
.login {
  background: #f9f9f9;
}

.flex-container {
  display: flex;
  justify-content: center;
}
.flex-container-logo {
  display: flex;
  justify-content: flex-end;
}
.bg-img {
  width: 400px;
  height: 400px;
  position: absolute;
  top: 22.2%;
  left: 20.7%;
}
.logo-box-sun {
  top: 40px;
  width: 210px;
  height: 50px;
  background-image: url("../../assets/images/logo.png");
  background-repeat: no-repeat;
  position: absolute;
}
.logo-box-moon {
  top: 40px;
  display: flex;
  width: 164px;
  height: 40px;
  /* background-image: url("../../images/NextSign-Moon.png"); */
  position: relative;
  background-repeat: no-repeat;
  left: 13.8%;
}
.desc-chn {
  top: 703px;
  display: flex;
  position: absolute;
  left: 20.7%;
  font-size: 29px;
  font-family: "hm-black";
  font-weight: 900;
  text-align: LEFT;
  color: #212121;
  line-height: 29px;
  text-shadow: 4px 4px 20px 0px rgba(15, 15, 15, 0.16);
  width: 422px;
  height: 80px;
}
.dot {
  opacity: 0.5;
  background-color: #212121;
  height: 5px;
  width: 5px;
  border-radius: 50%;
  position: relative;
  top: 24px;
}
.desc-en {
  top: 775px;
  display: flex;
  position: absolute;
  left: 20.7%;
  opacity: 0.5;
  font-size: 15px;
  font-family: "hm-medium";
  font-weight: 500;
  text-align: LEFT;
  color: #212121;
  line-height: 15px;
  text-shadow: 4px 4px 20px 0px rgba(15, 15, 15, 0.16);
}
.lang-box {
  height: 45px;
  position: relative;
  cursor: pointer;
}
.lang {
  font-size: 13px;
  font-family: "hm-medium";
  font-weight: 500;
  text-align: LEFT;
  color: #2980ff;
  line-height: 13px;
}
.sun {
  cursor: pointer;
}
.verifi {
  position: absolute;
  top: 25.4%;
  left: 61%;
}
.verifi-icon {
  position: relative;
  top: 3px;
}
.verifi-url {
  font-size: 12px;
  font-family: "hm-regular";
  font-weight: 400;
  text-align: LEFT;
  color: #6fcf97;
  line-height: 12px;
}
.login-title {
  font-size: 24px;
  font-family: "hm-bold";
  font-weight: 700;
  text-align: LEFT;
  color: #212121;
  line-height: 24px;
  position: absolute;
  top: 28.5%;
  left: 61%;
}
.regist {
  position: absolute;
  top: 32%;
  left: 61%;
}
.regist-desc {
  font-size: 14px;
  font-family: "hm-regular";
  font-weight: 400;
  text-align: LEFT;
  color: #888888;
}

.regist-link {
  font-size: 14px;
  font-family: "hm-regular";
  font-weight: 400;
  text-align: LEFT;
  color: #2980ff;
  cursor: pointer;
}
.login-form {
  position: absolute;
  top: 36.7%;
  left: 61%;
}

.show-pwd {
  position: absolute;
  right: 10px;
  top: 18px;
  color: #889aa4;
  cursor: pointer;
  user-select: none;
}
.btn-text {
  width: 400px;
  height: 60px;
  background-color: #ffffff;
  border-radius: 12px;
  color: #2980ff;
  font-size: 17px;
  font-family: "hm-medium";
  font-weight: 500;
  text-align: center;
  line-height: 17px;
  border: 1px solid #f4f4f8;
}

.btn-text:hover {
  box-shadow: 0px 1px 20px 0px rgba(0, 0, 0, 0.06);
  color: #ffffff !important;
  background: #2980ff;
}
.other-account {
  font-size: 12px;
  font-family: "hm-medium";
  font-weight: 500;
  text-align: LEFT;
  color: #888888;
  line-height: 12px;
  padding: 0 20px;
  position: relative;
  top: -20px;
}
.btn-wechat {
  width: 188px;
  height: 60px;
  background: #ffffff;
  border: 1px solid #e0e0e0;
  border-radius: 12px;
}

.btn-qq {
  width: 188px;
  height: 60px;
  background: #ffffff;
  border: 1px solid #e0e0e0;
  border-radius: 12px;
  margin-left: 23px !important;
}
.wechat-text {
  font-size: 15px;
  font-family: "hm-medium";
  font-weight: 500;
  text-align: center;
  color: #6fcf97;
  line-height: 15px;
  position: relative;
  top: -3px;
  left: 10px;
}
.qq-text {
  font-size: 15px;
  font-family: "hm-medium";
  font-weight: 500;
  text-align: LEFT;
  color: #2980ff;
  line-height: 15px;
  position: relative;
  top: -3px;
  left: 10px;
}
.divider {
  display: inline-block;
  width: 148px;
}
.divider-right {
  display: inline-block;
  width: 152px;
}
.forget {
  font-size: 15px;
  font-family: "hm-medium";
  font-weight: 500;
  text-align: right;
  color: #ff6b6b;
  line-height: 15px;
  cursor: pointer;
}
</style>