Browse Source

make display on creation page look halfway decent, and switch fully to it

pull/24/head
Trent Larson 1 year ago
parent
commit
1a86730354
  1. 2
      project.task.yaml
  2. 2
      src/main.ts
  3. 37
      src/views/AccountViewView.vue
  4. 4
      src/views/HelpView.vue
  5. 30
      src/views/NewIdentifierView.vue

2
project.task.yaml

@ -4,6 +4,7 @@
- add infinite scroll assignee:matthew
blocks: ref:https://raw.githubusercontent.com/trentlarson/lives-of-gifts/master/project.yaml#kickstarter%20for%20time
- fix error with server getting reset back to default on every code change & app refresh
- allow new (random) user creation, and make accurate message about registration
- allow type annotations in World.js & landmarks.js (since we get this error: "Types are not supported by current JavaScript version")
- replace user-affecting console.log & console.error with error messages (eg. catches)
@ -35,6 +36,7 @@
- .5 customize favicon
- .5 make advanced features harder to access; advanced build?
- 04 allow user to download claims, mine + ones I can see about me from others
- Release Minimum Viable Product :
- Turn off stats-world or ensure it's usable (eg. cannot zoom out too far and lose world, cannot screenshot).

2
src/main.ts

@ -10,6 +10,7 @@ import "./assets/styles/tailwind.css";
import { library } from "@fortawesome/fontawesome-svg-core";
import {
faBurst,
faCalendar,
faChevronLeft,
faCircle,
@ -43,6 +44,7 @@ import {
} from "@fortawesome/free-solid-svg-icons";
library.add(
faBurst,
faCalendar,
faChevronLeft,
faCircle,

37
src/views/AccountViewView.vue

@ -263,10 +263,10 @@
/>
<button
v-if="apiServerInput != apiServer"
class="px-4 rounded bg-slate-200 border border-slate-400"
class="px-4 rounded bg-red-500 border border-slate-400"
@click="onClickSaveApiServer()"
>
<fa icon="floppy-disk" class="fa-fw"></fa>
<fa icon="floppy-disk" class="fa-fw" color="white"></fa>
</button>
<button
class="px-4 rounded bg-slate-200 border border-slate-400"
@ -332,12 +332,7 @@ import { useClipboard } from "@vueuse/core";
import { AppString } from "@/constants/app";
import { db, accountsDB } from "@/db";
import { MASTER_SETTINGS_KEY } from "@/db/tables/settings";
import {
accessToken,
deriveAddress,
generateSeed,
newIdentifier,
} from "@/libs/crypto";
import { accessToken } from "@/libs/crypto";
import { AxiosError } from "axios/index";
// eslint-disable-next-line @typescript-eslint/no-var-requires
@ -411,32 +406,8 @@ export default class AccountViewView extends Vue {
this.showContactGives = !!settings?.showContactGivesInline;
await accountsDB.open();
this.numAccounts = await accountsDB.accounts.count();
if (this.numAccounts === 0) {
let address = ""; // 0x... ETH address, without "did:eth:"
let privateHex = "";
const mnemonic = generateSeed();
[address, privateHex, this.publicHex, this.derivationPath] =
deriveAddress(mnemonic);
const newId = newIdentifier(
address,
this.publicHex,
privateHex,
this.derivationPath
);
await accountsDB.accounts.add({
dateCreated: new Date().toISOString(),
derivationPath: this.derivationPath,
did: newId.did,
identity: JSON.stringify(newId),
mnemonic: mnemonic,
publicKeyHex: newId.keys[0].publicKeyHex,
});
this.activeDid = newId.did;
}
const accounts = await accountsDB.accounts.toArray();
this.numAccounts = accounts.length;
const account = R.find((acc) => acc.did === this.activeDid, accounts);
const identity = JSON.parse(account?.identity || "undefined");
this.publicHex = identity.keys[0].publicKeyHex;

4
src/views/HelpView.vue

@ -196,8 +196,8 @@
<h2 class="text-xl font-semibold">How do I create another identity?</h2>
<p>
Go
<router-link to="import-account" class="text-blue-500">
import another mnemonic here.
<router-link to="start" class="text-blue-500">
create another identity here.
</router-link>
</p>

30
src/views/NewIdentifierView.vue

@ -54,18 +54,32 @@
Your Identity
</h1>
<div class="flex justify-between py-2">
<div class="flex justify-center py-12">
<span />
<span v-if="loading">
Creating... <i class="fa-solid fa-loader fa-spin"></i>
<span class="text-xl">Creating...&nbsp;</span>
<fa
icon="spinner"
class="fa-spin fa-spin-pulse"
color="green"
size="128"
></fa>
</span>
<span v-else>
Created!
<i
class="fa-solid fa-burst fa-beat"
style="--fa-animation-duration: 3s"
></i>
<span class="text-xl">Created!</span>
<fa
icon="burst"
class="fa-beat px-12"
color="green"
style="
--fa-animation-duration: 1s;
--fa-animation-direction: reverse;
--fa-animation-iteration-count: 1;
--fa-beat-scale: 6;
"
></fa>
</span>
<span />
</div>
</section>
</template>
@ -106,7 +120,7 @@ export default class AccountViewView extends Vue {
this.loading = false;
setTimeout(() => {
this.$router.push({ name: "account" });
}, 3000);
}, 1000);
}
}
</script>

Loading…
Cancel
Save