SamsaraDao/signup.html

585 lines
25 KiB
HTML
Raw Permalink Normal View History

2025-04-19 15:31:22 +08:00
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="PYXEL || Ultimate Gaming HTML Template">
<title>Samsara DAO</title>
<!-- Favicon -->
<script src="https://cdn.jsdelivr.net/npm/web3@latest/dist/web3.min.js"></script>
<!-- All CSS files -->
<link rel="stylesheet" href="static/css/font-awesome.css">
<link rel="stylesheet" href="static/css/bootstrap.min.css">
<link rel="stylesheet" href="static/css/app.css">
<link rel="stylesheet" href="static/js/element-ui-min.css">
<!-- 引入 Vue.js -->
<script src="static/js/vue.js" ></script>
<!-- 引入 axios -->
<script src="static/js/axios.min.js"></script>
<!-- 引入 Element UI JS -->
<script src="static/js/element-ui.js"></script>
<style>
.pro_txt{
height: 5vh;
margin-bottom: 3vh;
display: flex;
align-items: center;
padding: 0 10px;
box-sizing: border-box;
border: 2px solid #99B1FF;
border-radius: 33px;
overflow: hidden;
}
.pro_txt input{
flex: 1;
height: 100%;
border: none;
outline: none;
color: #000;
}
.signup_page{
background: url(./static/picture/sign_bg.png) no-repeat;
background-size: 100% 100%;
height: 100vh;
display: flex;
align-items: center;
}
.signup_page_img{
width: 50%;
display: flex;
justify-content: center;
height: 100%;
position: relative;
}
.signup_page_img img{
position: absolute;
width: 70%;
bottom: 14%;
}
.signup_page_login{
width: 50%;
height: 100%;
position: relative;
}
.signup_box{
width: 60%;
height: 70%;
background-color: #fff;
border-radius: 30px;
position: absolute;
bottom: 20%;
left: 20%;
padding: 10%;
}
.signup_box h5{
color: #446FFA;
margin-bottom: 10%;
text-align: center;
}
.send_code{
width: 35%;
height: 100%;
background-color: #446FFA;
border-radius: 33px;
color: #fff;
border: none;
}
.pro_txt_btn{
margin-top: 15%;
padding: 1vh 0;
width: 100%;
border-radius: 33px;
background-color: #446FFA;
color: #fff;
display: flex;
justify-content: center;
align-items: center;
border: none;
}
.dialog_title{
height: 40px;
text-align: center;
color: #000;
}
</style>
</head>
<body class="tt-smooth-scroll">
<!-- Main Wrapper Start -->
<div id="app">
<!-- HEADER MENU START -->
<div id="publickHeader"></div>
<!-- HEADER MENU END -->
<!-- BG-SIGN*UP PAGE # 1 START -->
<div class="signup_page">
<div class="signup_page_img">
<img src="static/picture/signup-image.png" alt="">
</div>
<div class="signup_page_login">
<div class="signup_box">
<h5>{{currentLanguage == 'zh' ? '註冊賬戶' : 'Registered Account'}}</h5>
<div class="pro_txt">
<input type="text" v-model="userobj.username" :placeholder="currentLanguage == 'zh' ? '用戶名': 'Name' ">
</div>
<div class="pro_txt">
<input type="text" v-model="userobj.email" :placeholder="currentLanguage == 'zh' ? '郵箱': 'Email' ">
</div>
<div class="pro_txt">
<input type="password" v-model="userobj.password" :placeholder="currentLanguage == 'zh' ? '密碼': 'Password' ">
</div>
<div class="pro_txt" style="padding-right: 0;">
<input type="text" v-model="userobj.code" :placeholder="currentLanguage == 'zh' ? '驗證碼': 'Verification code' ">
<button class="send_code" v-if="showtimer">{{beginnum + 's'}}</button>
<button class="send_code" v-else @click="getregcode">{{currentLanguage == 'zh' ? '發送驗證碼': 'Send code'}}</button>
</div>
<div class="pro_txt" style="padding-right: 0;">
<input type="text" v-model="userobj.googleauthcode" :placeholder="currentLanguage == 'zh' ? '谷歌驗證碼': 'Google code' ">
<button class="send_code" v-if="showtimer1">{{beginnum1 + 's'}}</button>
<button class="send_code" v-else @click="getregcode1">{{currentLanguage == 'zh' ? '發送驗證碼': 'Send code'}}</button>
</div>
<button class="pro_txt_btn" @click="pageRegister">{{currentLanguage == 'zh' ? '確定':'Sure'}}</button>
</div>
</div>
</div>
<!-- BG-SIGN*UP PAGE # 1 END -->
<!-- FOOTER START -->
<div id="publciFooter"></div>
<!-- FOOTER END -->
<el-dialog :visible.sync="dialogFormVisible" width="500px" :close-on-click-modal="false">
<div class="dialog_box">
<div class="dialog_title">{{currentLanguage == 'zh' ? '掃一掃獲取谷歌驗證碼' : 'Scan to get Google verification code'}}</div>
<div class="dialog_txt" style="text-align: center;">
<img :src="googleErwei.url" alt="">
<div style="margin-top: 2vh;">
<span>{{currentLanguage == 'zh' ? '密钥:':'secret key :'}}</span>
<span>{{googleErwei.secret}}</span>
<img @click="copySecret(googleErwei.secret)" src="static/image/fuzhi.png" style="vertical-align: middle;margin-left: 1vh;cursor: pointer;">
</div>
<!-- secret -->
</div>
</div>
</el-dialog>
<!-- 钱包选择弹窗 -->
<el-dialog :visible.sync="moneyDialogVisible" width="40%" custom-class="wallet-dialog">
<div class="wallet-container">
<i class="el-icon-close" @click="moneyDialogVisible = false"></i>
<div class="wallet-left">
<h6 style="font-weight: 700;margin-bottom: 4vh;">{{currentLanguage == 'zh' ? '連接錢包' : 'Connect wallet'}}</h6>
<p class="wallet-tip">
{{ currentLanguage == 'zh' ? '首先,連接以下其中一個錢包。 請務必安全地儲存您的私密金鑰或助記詞,永遠不要與任何人分享它們。' : 'Firstly, connect one of the following wallets. Please make sure to securely store your private keys or mnemonics and never share them with anyone.' }}
</p>
<div class="wallet-grid">
<div v-for="(wallet,index) in wallets" :key="index" class="wallet-item"
@click="selectWallet(wallet)">
<img :src="wallet.icon" :alt="wallet.name">
<span>{{ wallet.name }}</span>
</div>
</div>
</div>
<div class="wallet-right" v-if="selectMoney.icon">
<div class="connecting-status">
<img :src="selectMoney.icon" class="tp-logo">
<p class="status-text">{{ currentLanguage == 'zh' ? '正在打開' : 'Opening' }} {{selectMoney.name}}</p>
<p class="confirm-text">
{{ currentLanguage == 'zh' ? '請在' : 'Please in' }}
{{selectMoney.name}}
{{ currentLanguage == 'zh' ? '中確認' : 'Confirm in the middle' }}</p>
</div>
</div>
<div v-else style="display: flex;justify-content: center;align-items: center;width: 50%;">{{ moneyTip(moneyTipMessage) }}</div>
</div>
</el-dialog>
<!-- 钱包地址弹窗 -->
<el-dialog :visible.sync="showMoneyAdress" width="30%" :close-on-click-modal="false">
<div style="color: #000;">
{{ currentLanguage == 'zh' ? '錢包地址:' : 'Wallet address' }}
{{ userMoneyAdressAll }}
<img src="static/image/fuzhi.png" @click="copyText(userMoneyAdressAll)" style="margin-left: 5px;vertical-align: middle;cursor: pointer;">
</div>
</el-dialog>
</div>
<!-- Main Wrapper End -->
<!-- Back To Top Start -->
<button class="scrollToTopBtn"><i class="fa fa-arrow-up"></i></button>
<!-- Mobile Menu Start -->
<div class="mobile-nav__wrapper">
<div class="mobile-nav__overlay mobile-nav__toggler"></div>
<div class="mobile-nav__content">
<span class="mobile-nav__close mobile-nav__toggler"><i class="fa fa-times"></i></span>
<div class="logo-box">
<a href="index.html" aria-label="logo image"><img src="static/picture/logo.png" alt=""></a>
</div>
<div class="mobile-nav__container"></div>
</div>
</div>
<!-- Mobile Menu End -->
<!-- Jquery Js -->
<script src="static/js/bootstrap.min.js"></script>
<script src="static/js/jquery-3.6.3.min.js"></script>
<script src="static/js/jquery-validator.js"></script>
<script src="static/js/publickDOM.js"></script>
<!-- 引入翻譯文件 -->
<script src="static/js/translation.js"></script>
<script src="static/js/i18n.js"></script>
<!-- 獲取用戶信息 -->
<script src="static/js/getIsUser.js"></script>
<!-- 表單提交 -->
<script>
// 創建一個增強版的 localStorage
const enhancedStorage = {
setItem: function (key, value) {
localStorage.setItem(key, value);
// 觸發自定義事件
window.dispatchEvent(new CustomEvent('localStorageChange', {
detail: { key, value }
}));
},
getItem: function (key) {
return localStorage.getItem(key);
}
};
// 替換原始的 setItem 方法
const originalSetItem = localStorage.setItem;
localStorage.setItem = function (key, value) {
originalSetItem.call(localStorage, key, value);
window.dispatchEvent(new CustomEvent('localStorageChange', {
detail: { key, value }
}));
};
new Vue({
el: "#app",
data() {
return {
// 钱包登录开始
userMoneyAdressAll:"",
showMoneyAdress:false,
hasAdress:false,
moneyTipMessage:"",
selectMoney:{},
wallets: [
{
name: 'MetaMask',
icon: 'static/metamask.png'
},
{
name: 'TokenPocket',
icon: 'static/tokenpocket.png'
},
{
name: 'OKX Wallet',
icon: 'static/okx-wallet.png'
}
],
moneyDialogVisible: false,
userIsLogin: false,
userMoneyAdress: "",
// 钱包登录结尾
googleTip:"",
googleErwei:{},
currentLanguage: localStorage.getItem('languageNow') || 'en',
userobj:{},
initCode:"",
codetimer:null,
showtimer:false,
showtimer1:false,
beginnum: 60,
beginnum1: 60,
dialogFormVisible:false
}
},
async created() {
const user = window.localStorage.getItem("userInfo")
if (user) {
this.userIsLogin = true;
}
const urlParams = new URLSearchParams(window.location.search);
this.initCode = urlParams.get('icode');
// 钱包登录开始
const provider = window.web3?.currentProvider;
let accounts1 = [];
let accounts2 = [];
let accounts3 = [];
if(provider){
accounts1 = await provider.request({method: 'eth_accounts'});
}
if(window.tokenpocket?.ethereum){
accounts2 = await window.tokenpocket.ethereum.request({method: 'eth_accounts'});
}
if(window.okxwallet || (window.ethereum && window.ethereum?.isOKExWallet)){
accounts3 = await window.okxwallet.request({method: 'eth_accounts'});
}
console.log(accounts1,accounts2,accounts3,'see');
let _adressM = accounts1[0] || accounts2[0] || accounts3[0];
if(_adressM){
this.userMoneyAdressAll = _adressM;
this.userMoneyAdress = _adressM.slice(0,4) + "...." + _adressM.slice(-4);
}
// 钱包登录结尾
},
mounted() {
window.addEventListener('localStorageChange', (event) => {
if (event.detail.key === 'languageNow') {
this.currentLanguage = event.detail.value;
}
});
},
methods:{
// <-- -------------------------钱包登录开始 --------------------------->
copyText(txt){
let message = this.currentLanguage == 'zh' ? '複製成功!' : 'Copy successful!';
navigator.clipboard.writeText(txt)
.then(()=>{
this.$message.success(message)
})
.catch(err=>{
console.log(err,'error');
})
},
allMoney(){
this.showMoneyAdress = true;
},
userMoneyAdressOptions(adress){
if(adress){
return adress
}else{
return this.currentLanguage == 'zh' ? '連接錢包' : 'Connect wallet'
}
},
moneyTip(txt){
if(txt){
return txt
}else{
return this.currentLanguage == 'zh' ? '請選擇連接錢包' : 'Please choose to connect the wallet'
}
},
selectWallet(wallet) {
this.selectMoney = {};
if(wallet.name == 'MetaMask') {
if(window.web3?.currentProvider){
this.selectMoney = wallet;
this.connectWallet(wallet.name);
}else{
this.moneyTipMessage = this.currentLanguage == 'zh' ? 'MetaMask未安裝' : 'MetaMask not installed';
}
}
if (wallet.name == 'TokenPocket') {
if(window.tokenpocket?.ethereum){
this.selectMoney = wallet;
this.connectWallet(wallet.name);
}else{
this.moneyTipMessage = this.currentLanguage == 'zh' ? 'TokenPocket未安裝' : 'TokenPocket not installed';
}
}
if(wallet.name == "OKX Wallet"){
if(window.okxwallet || (window.ethereum && window.ethereum.isOKExWallet)){
this.selectMoney = wallet;
this.connectWallet(wallet.name);
}else{
this.moneyTipMessage = this.currentLanguage == 'zh' ? '欧易钱包未安装' : 'OKX Wallet not installed';
}
}
},
async connectWallet(walletType){
let account = "";
try {
if (walletType == 'MetaMask') {
const provider = window.web3.currentProvider;
const accounts = await provider.request({
method: 'eth_requestAccounts'
});
account = accounts[0];
}
if (walletType == 'TokenPocket') {
const tpAccounts = await window.tokenpocket.ethereum.request({
method: 'eth_requestAccounts'
});
account = tpAccounts[0];
}
if (walletType == 'OKX Wallet') {
const okxAccounts = await window.okxwallet.request({
method: 'eth_requestAccounts'
});
account = okxAccounts[0];
}
console.log(account,'xxaa');
let _adressM = account;
this.userMoneyAdressAll = account;
this.userMoneyAdress = _adressM.slice(0,4) + "...." + _adressM.slice(-4);
this.moneyDialogVisible = false;
} catch (error) {
console.log(error);
}
},
toConnectWallet() {
if(this.userMoneyAdress){
if(this.isShowSale){
return
}
this.hasAdress = !this.hasAdress;
return
};
this.moneyDialogVisible = true;
},
//<-- -------------------------钱包登录结尾 --------------------------->
copySecret(secret){
let message = this.currentLanguage == 'zh' ? '複製成功!' : 'Copy successful!';
navigator.clipboard.writeText(secret)
.then(()=>{
this.$message.success(message)
})
.catch(err=>{
console.log(err,'error');
})
},
mobileLang(){
this.currentLanguage = mobileLang()
},
codebtnOption(){
this.codetimer = setInterval(()=>{
this.beginnum--;
if(this.beginnum <= 0){
this.beginnum = 60;
this.showtimer = false;
clearInterval(this.codetimer);
}
},1000)
},
codebtnOption1(){
this.codetimer1 = setInterval(()=>{
this.beginnum1--;
if(this.beginnum1 <= 0){
this.beginnum1 = 60;
this.showtimer1 = false;
clearInterval(this.codetimer1);
}
},1000)
},
getregcode1(){
let _that = this;
let message = _that.currentLanguage == 'zh' ? '郵箱不能為空' : 'Email cannot be empty';
if(!_that.userobj.email){
this.$message.error(message);
return
}
$.ajax({
url:baseUrl+"api/user/getgoogleauthurl2",
type:"post",
dataType: "json",
data:{
email: _that.userobj.email
},
success: function(res) {
_that.googleErwei = res.data;
_that.dialogFormVisible = true;
_that.showtimer1 = true;
_that.codebtnOption1();
},
error: function(rej){
console.log("failed");
}
})
},
getregcode(){
let _that = this;
$.ajax({
url:baseUrl+"api/ems/send",
type: "post",
dataType: "json",
data: {
email:_that.userobj.email,
event:'register'
},
success: function(res) {
if(res.code == 1){
_that.showtimer = true;
_that.$message.success('success!')
_that.codebtnOption();
}else{
console.log(res.msg,'sss');
let tipMessage = "";
switch (res.msg) {
case '发送频繁':
_that.currentLanguage == 'zh' ? tipMessage = "发送频繁" : tipMessage ='Frequent sending';
break;
case '已被注册':
_that.currentLanguage == 'zh' ? tipMessage = "已被注册" : tipMessage ='Already registered';
break;
case '发送失败':
_that.currentLanguage == 'zh' ? tipMessage = "发送失败" : tipMessage ='fail in send';
break;
default:
tipMessage = 'error';
break;
}
_that.$message.error(tipMessage)
}
},
error(rej){
_that.$message.error(rej)
}
});
},
pageRegister(){
let _that = this;
let message = this.currentLanguage == 'zh' ? '請輸入完整信息' : 'Please enter complete information';
if(!this.userobj.username && !this.userobj.email && !this.userobj.password && !this.userobj.code && !this.userobj.googleauthcode){
this.$message.error(message);
return
}
$.ajax({
url:baseUrl+"api/user/register",
type: "post",
dataType: "json",
data: this.userobj,
success: function(res) {
if(res.code === 1){
_that.$message.success('Registration successful!');
let obj = JSON.stringify(res.data.userinfo);
window.localStorage.setItem("userInfo",obj);
if(_that.initCode){
_that.binduser(res.data.userinfo.token);
}else{
setTimeout(()=>{
_that.userobj = {};
window.location.href = "index.html";
},1000)
}
}else{
_that.$message.error(res.msg)
}
},
error: function(rej){
alert("failed")
}
});
},
async binduser(token){
console.log(token,'tokentokentoken');
let res = await axios.post(baseUrl+'api/user/bindicode', { icode:this.initCode,}, { headers:{token}});
setTimeout(()=>{
window.location.href = "index.html";
},1000)
}
}
})
</script>
<script src="static/js/app.js"></script>
</body>
</html>