Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add email input #2165

Merged
merged 4 commits into from
Feb 25, 2024
Merged

Add email input #2165

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
e56dea7
Add email input to
samaradel Feb 14, 2024
e388150
Fix email field in small screens
samaradel Feb 20, 2024
1045e12
Fix profile page and connect your wallet dialog delay behavior
samaradel Feb 22, 2024
44dbd19
disable save btn while saving wmail
samaradel Feb 22, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
65 changes: 63 additions & 2 deletions packages/playground/src/dashboard/twin_view.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,6 +55,50 @@
</v-list-item>
</v-col>
</v-row>
<v-row class="row-style">
<v-col cols="1" sm="2" style="min-width: fit-content">
<v-list-item> E-mail :</v-list-item>
</v-col>
<v-col cols="11" sm="10">
<v-list-item v-if="!editEmail">
<div style="display: flex; justify-content: space-between">
{{ profileManager.profile?.email ? profileManager.profile?.email : "None" }}
<v-icon @click="editEmail = true">mdi-pencil</v-icon>
</div>
</v-list-item>

<v-list-item v-if="editEmail">
<v-form style="display: flex; justify-content: space-between" v-model="isValid">
<input-validator
:value="email"
:rules="[
validators.required('Email is required.'),
validators.isEmail('Please provide a valid email address.'),
]"
#="{ props }"
>
<v-text-field
class="mr-2"
placeholder="email@example.com"
v-model="email"
v-bind="props"
:loading="loading"
autofocus
/>
</input-validator>
<v-btn
type="submit"
icon="mdi-content-save-all"
class="mt-2"
variant="text"
:disabled="!isValid"
@click="saveEmail"
>
</v-btn>
</v-form>
</v-list-item>
</v-col>
</v-row>
<v-row class="row-style">
<v-col cols="1" sm="2" style="min-width: fit-content">
<v-list-item> Address : </v-list-item>
Expand Down Expand Up @@ -142,7 +186,8 @@ import { useProfileManager } from "../stores";
import type { FarmInterface } from "../types";
import { createCustomToast, ToastType } from "../utils/custom_toast";
import { getFarms } from "../utils/get_farms";
import { getGrid } from "../utils/grid";
import { getGrid, readEmail, storeEmail } from "../utils/grid";

const profileManager = useProfileManager();

const editingTwin = ref(false);
Expand All @@ -154,6 +199,10 @@ const numberOfProposalsToVoteOn = ref(0);
const userFarms = ref<FarmInterface[]>();
const activeProposalsUserHasVotedOn = ref(0);
const bridge = (window as any).env.BRIDGE_TFT_ADDRESS;
const email = ref("");
const loading = ref<boolean>(false);
const editEmail = ref<boolean>(false);
const isValid = ref<boolean>(false);

const apps = [
{
Expand All @@ -170,7 +219,6 @@ const apps = [
onMounted(async () => {
const profile = profileManager.profile!;
const grid = await getGrid(profile);

if (!grid) {
createCustomToast("Fetch Grid Failed", ToastType.danger);

Expand Down Expand Up @@ -207,6 +255,19 @@ onMounted(async () => {
function redirectToDao() {
router.push({ path: "/tf-chain/dao" });
}

async function saveEmail() {
const grid = await getGrid(profileManager.profile!);
try {
loading.value = true;
await storeEmail(grid!, email.value);
profileManager.profile!.email = await readEmail(grid!);
editEmail.value = false;
loading.value = false;
} catch (e) {
console.log(e);
}
}
onMounted(validateEdit);
async function validateEdit() {
try {
Expand Down
1 change: 1 addition & 0 deletions packages/playground/src/stores/profile_manager.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ export interface Profile {
relay: string;
pk: string;
keypairType: KeypairType | undefined;
email: string;
}

interface State {
Expand Down
22 changes: 22 additions & 0 deletions packages/playground/src/utils/grid.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -103,6 +103,7 @@ export async function loadProfile(grid: GridClient): Promise<Profile> {
relay: grid.getDefaultUrls(network).relay.slice(6),
pk: (await grid.twins.get({ id: grid!.twinId })).pk,
keypairType: grid.clientOptions!.keypairType,
email: await readEmail(grid),
};
}

Expand Down Expand Up @@ -133,3 +134,24 @@ export async function storeSSH(grid: GridClient, newSSH: string): Promise<void>
}),
});
}

export async function readEmail(grid: GridClient): Promise<string> {
const metadata = await getMetadata(grid);
console.log(metadata.email);

return metadata.email || "";
}

export async function storeEmail(grid: GridClient, newEmail: string): Promise<void> {
const metadata = await getMetadata(grid);
const email = metadata.email;
if (email === newEmail) return;

return grid.kvstore.set({
key: "metadata",
value: JSON.stringify({
...metadata,
email: newEmail,
}),
});
}
35 changes: 32 additions & 3 deletions packages/playground/src/weblets/profile_manager.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -263,6 +263,19 @@
You will need to provide the password used while connecting your wallet.
</p>
</v-alert>

<input-validator
v-if="activeTab === 1"
:value="email"
:rules="[
validators.required('Email is required.'),
validators.isEmail('Please provide a valid email address.'),
]"
#="{ props }"
>
<v-text-field label="Email" placeholder="email@example.com" v-model="email" v-bind="props" />
</input-validator>

<PasswordInputWrapper #="{ props: passwordInputProps }">
<InputValidator
:value="password"
Expand Down Expand Up @@ -354,6 +367,9 @@
<VTextField label="Twin ID" readonly v-model="profileManager.profile.twinId" v-bind="props" />
</CopyInputWrapper>

<CopyInputWrapper v-if="profileManager.profile.email" :data="profileManager.profile.email" #="{ props }">
<VTextField label="Email" readonly v-model="profileManager.profile.email" v-bind="props" />
</CopyInputWrapper>
<CopyInputWrapper :data="profileManager.profile.address" #="{ props }">
<VTextField label="Address" readonly v-model="profileManager.profile.address" v-bind="props" />
</CopyInputWrapper>
Expand Down Expand Up @@ -431,6 +447,7 @@ import { useOnline } from "../hooks";
import { useInputRef } from "../hooks/input_validator";
import { useProfileManager } from "../stores";
import { activateAccountAndCreateTwin, createAccount, getGrid, loadBalance, loadProfile } from "../utils/grid";
import { storeEmail } from "../utils/grid";
import { normalizeBalance, normalizeError } from "../utils/helpers";
const items = ref([{ id: 1, name: "stellar" }]);
const depositWallet = ref("");
Expand All @@ -441,6 +458,7 @@ interface Credentials {
passwordHash?: string;
mnemonicHash?: string;
keypairTypeHash?: string;
emailHash?: string;
}
const keyType = ["sr25519", "ed25519"];
const keypairType = ref(KeypairType.sr25519);
Expand Down Expand Up @@ -547,11 +565,17 @@ function getCredentials() {
return credentials;
}

function setCredentials(passwordHash: string, mnemonicHash: string, keypairTypeHash: string): Credentials {
function setCredentials(
passwordHash: string,
mnemonicHash: string,
keypairTypeHash: string,
emailHash: string,
): Credentials {
const credentials: Credentials = {
passwordHash,
mnemonicHash,
keypairTypeHash,
emailHash,
};
localStorage.setItem(WALLET_KEY, JSON.stringify(credentials));
return credentials;
Expand Down Expand Up @@ -595,6 +619,8 @@ const profileManagerController = useProfileManagerController();

const balance = profileManagerController.balance;

const email = ref("");

const activeTab = ref(0);
const password = ref("");
const confirmPassword = ref("");
Expand Down Expand Up @@ -656,6 +682,7 @@ function clearFields() {
password.value = "";
confirmPassword.value = "";
mnemonic.value = "";
email.value = "";
}

function reloadValidation() {
Expand Down Expand Up @@ -785,11 +812,13 @@ function login() {
}
}

function storeAndLogin() {
async function storeAndLogin() {
const cryptr = new Cryptr(password.value, { pbkdf2Iterations: 10, saltLength: 10 });
const mnemonicHash = cryptr.encrypt(mnemonic.value);
const keypairTypeHash = cryptr.encrypt(keypairType.value);
setCredentials(md5(password.value), mnemonicHash, keypairTypeHash);
const grid = await getGrid({ mnemonic: mnemonic.value, keypairType: keypairType.value });
await storeEmail(grid!, email.value);
setCredentials(md5(password.value), mnemonicHash, keypairTypeHash, md5(email.value));
activate(mnemonic.value, keypairType.value);
}

Expand Down
Loading