Merge pull request #24 from stc-community/feat-auth

Add user account authorized function

locales/en.yaml

@@ -192,3 +192,8 @@ wasm:
   Capabilities: Capabilities
 
   "New Actor": New Actor
+
+user:
+  "modal title": Join CloudX3
+  "modal description": Once you click on "Join CloudX3," the platform will generate user information for you, which will be used for subsequent resource creation and management.
+  "join now": Join Now

locales/zh-CN.yaml

@@ -192,3 +192,8 @@ wasm:
   Capabilities: 能力声明
 
   "New Actor": 创建Actor
+
+user:
+  "modal title": 加入 CloudX3
+  "modal description": 点击加入 CloudX3 后，平台会为你生成用户信息，用于后续的资源创建和管理
+  "join now": 现在加入

package.json

@@ -31,7 +31,8 @@
     "animate.css": "^4.1.1",
     "apexcharts": "^3.37.1",
     "axios": "^1.2.1",
-    "daisyui": "^2.50.2",
+    "crypto-js": "^4.1.1",
+    "daisyui": "^3.2.1",
     "dayjs": "^1.11.6",
     "ethers": "^6.1.0",
     "js-base64": "^3.7.5",

src/components/Modal/account.bak.vue

@@ -0,0 +1,50 @@
+<script setup lang="ts">
+import { useAccountStore } from "@/store/modules/account";
+import { ref } from "vue";
+import { useLang } from "@/hooks/useLang";
+const { t } = useLang();
+
+defineOptions({
+  name: "account"
+});
+
+const privateKey = ref("");
+const accountStore = useAccountStore();
+
+const handleSubmit = () => {
+  const err = accountStore.savePrivateKey(privateKey.value);
+  if (err) {
+    window.alert(err);
+  } else {
+    window.location.reload();
+  }
+};
+</script>
+<template>
+  <!-- Put this part before </body> tag -->
+  <input type="checkbox" id="key-modal" class="modal-toggle" />
+  <div class="modal backdrop-blur-sm">
+    <div class="modal-box w-11/12 max-w-xl relative">
+      <label
+        for="key-modal"
+        class="btn btn-sm btn-circle absolute right-2 top-2"
+        >✕</label
+      >
+
+      <h3 class="font-bold text-lg">{{ t("common.input private key") }}</h3>
+      <p class="py-4">
+        <input
+          v-model="privateKey"
+          type="text"
+          :placeholder="t('common.input private key here')"
+          class="input input-bordered input-primary w-full"
+        />
+      </p>
+      <div class="modal-action">
+        <label for="key-modal" class="btn btn-primary" @click="handleSubmit"
+          >{{ t("common.yay") }}!</label
+        >
+      </div>
+    </div>
+  </div>
+</template>

src/components/Modal/account.vue

@@ -1,22 +1,34 @@
 <script setup lang="ts">
-import { useAccountStore } from "@/store/modules/account";
 import { ref } from "vue";
 import { useLang } from "@/hooks/useLang";
 const { t } = useLang();
-
-defineOptions({
-  name: "account"
-});
+import { getNewNostrPrivateKey } from "@/utils/shared";
+import { getPublicKey } from "nostr-tools";
+import { getUserHubContract } from "@/utils/contract/user-hub";
+import { handleEtherError, encrypt } from "@/utils/shared";
 
 const privateKey = ref("");
-const accountStore = useAccountStore();
+const loading = ref(false);
+
+const handleSubmit = async () => {
+  privateKey.value = getNewNostrPrivateKey();
+  const publicKey = getPublicKey(privateKey.value);
+
+  const contract = await getUserHubContract();
+
+  try {
+    loading.value = true;
+    console.log("contract.registerUser", publicKey, encrypt(privateKey.value));
+    const transaction = await contract.registerUser(
+      publicKey,
+      encrypt(privateKey.value)
+    );
 
-const handleSubmit = () => {
-  const err = accountStore.savePrivateKey(privateKey.value);
-  if (err) {
-    window.alert(err);
-  } else {
+    await transaction.wait();
     window.location.reload();
+  } catch (e) {
+    loading.value = false;
+    handleEtherError(e);
   }
 };
 </script>
@@ -31,19 +43,17 @@ const handleSubmit = () => {
         >✕</label
       >
 
-      <h3 class="font-bold text-lg">{{ t("common.input private key") }}</h3>
-      <p class="py-4">
-        <input
-          v-model="privateKey"
-          type="text"
-          :placeholder="t('common.input private key here')"
-          class="input input-bordered input-primary w-full"
-        />
-      </p>
+      <h3 class="font-bold text-lg">{{ t("user.modal title") }}</h3>
+      <p class="py-4">{{ t("user.modal description") }}</p>
       <div class="modal-action">
-        <label for="key-modal" class="btn btn-primary" @click="handleSubmit"
-          >{{ t("common.yay") }}!</label
+        <label
+          class="btn btn-primary"
+          :class="{ 'btn-disabled': loading }"
+          @click="handleSubmit"
         >
+          <span v-if="loading" class="loading loading-spinner" />
+          <span>{{ t("user.join now") }}!</span>
+        </label>
       </div>
     </div>
   </div>

src/main.ts

@@ -43,13 +43,13 @@ getServerConfig(app).then(async config => {
   setupStore(app);
 
   app.use(useI18n);
-  app.mount("#app");
 
-  // init store if needed
-  useAccountStore().init();
+  // get user info from smart contract, for nostr private key
+  await useAccountStore().init();
 
-  // 尝试预获取 instance
+  app.mount("#app");
   try {
+    // 尝试预获取 instance
     await useNostrStore().asyncGetNostrInstance();
   } catch (e) {
     // ignore