Implement invite-code system (#307)

Author: ashutosh1206

src/backend/invite.ts

@@ -0,0 +1,52 @@
+import axios from 'axios'
+import { capsuleServer, sigValidity } from './utilities/config'
+import { uint8ArrayToHexString } from './utilities/helpers'
+import { signContent } from './utilities/keys'
+
+export async function verifyCodeAndGetToken(inviteCode: string) {
+	const response = await axios.post(`${capsuleServer}/invite/verify`, { code: inviteCode })
+	const token: string = response.data.data
+	setToken(token)
+}
+
+export async function verifyTokenAndOnboard(accountId: string) {
+	const token = getToken()
+	if (!token) {
+		throw new Error(`Invite token not found`)
+	}
+	const response = await axios.post(
+		`${capsuleServer}/invite/verify/token`,
+		{ accountId },
+		{ headers: { Authorization: `Bearer ${token}` } },
+	)
+	removeToken()
+	return response.data.data as string
+}
+
+export async function generateInviteCode(inviter: string): Promise<{ inviteCode: string; invitesRemaining: number }> {
+	const exp = Date.now() + sigValidity
+	const signature = await signContent({ inviter, exp })
+	if (!signature) {
+		throw new Error(`Object signing failed`)
+	}
+	const sig = uint8ArrayToHexString(signature)
+	const response = await axios.get(`${capsuleServer}/invite`, { params: { exp, sig, inviter } })
+	return response.data.data
+}
+
+export async function getInvitesRemaining(inviter: string): Promise<number> {
+	const response = await axios.get(`${capsuleServer}/invite/remaining`, { params: { inviter } })
+	return response.data.data
+}
+
+function setToken(token: string) {
+	window.localStorage.setItem(`inviteToken`, token)
+}
+
+function getToken() {
+	return window.localStorage.getItem(`inviteToken`)
+}
+
+function removeToken() {
+	window.localStorage.removeItem(`inviteToken`)
+}

src/backend/near.ts

@@ -81,7 +81,7 @@ export async function walletLogin() {
 	const walletConnection = getWalletConnection()
 	if (!walletConnection.isSignedIn()) {
 		// Redirects to wallet login page
-		const redirectURL = new URL(`/`, domain)
+		const redirectURL = new URL(`/register`, domain)
 		await walletConnection.requestSignIn(nearConfig.contractName, undefined, redirectURL.toString())
 	}
 }
@@ -228,6 +228,7 @@ enum SetUserInfoStatus {
 	UsernameAlreadyExists,
 	UsernameTooLarge,
 	NearAccountAlreadyLinked,
+	AccountNotOnboarded,
 }
 
 export async function setUserInfoNEAR(username: string) {
@@ -244,6 +245,8 @@ export async function setUserInfoNEAR(username: string) {
 			return { success: false, error: `Username should not contain more than 18 characters!` }
 		case SetUserInfoStatus.NearAccountAlreadyLinked:
 			return { success: false, error: `Your NEAR Account is already linked to another username` }
+		case SetUserInfoStatus.AccountNotOnboarded:
+			return { success: false, error: `Account does not have a valid invite code` }
 		default:
 			throw new Error(`Unknown status encountered while updating info on NEAR`)
 	}

src/pages/register.vue

@@ -7,7 +7,7 @@
 		<section class="flex justify-center items-center" style="height: 86%">
 			<div class="flex flex-col items-center w-full p-14 -mt-5">
 				<!-- Step 0: Code redeem -->
-				<article v-if="!inviteCode && !isLoading" class="w-1/2">
+				<article v-if="!hasInviteCode && !(userInfo || nearWallet) && !isLoading" class="w-1/2">
 					<h1 class="font-semibold text-primary mb-10" style="font-size: 2.6rem">Welcome</h1>
 					<p class="text-center text-gray7 mt-10">
 						Blogchain is a place for writers to do great work and for readers to discover it. For now, during our beta
@@ -69,7 +69,7 @@
 					</div>
 				</article>
 				<!-- Step 1: Choose Login / register -->
-				<article v-show="inviteCode && !(userInfo || nearWallet) && !isLoading" class="w-1/2">
+				<article v-show="hasInviteCode && !(userInfo || nearWallet) && !isLoading" class="w-1/2">
 					<h1 class="font-semibold text-primary mb-10" style="font-size: 2.6rem">Sign up</h1>
 					<button
 						class="w-full rounded-lg bg-gray2 mb-4 py-2 flex justify-center items-center focus:outline-none"
@@ -221,14 +221,15 @@ import {
 } from '@/backend/near'
 import { sufficientFunds, torusVerifiers, TorusVerifiers } from '@/backend/utilities/config'
 import { requestOTP, requestSponsor } from '@/backend/funder'
+import { verifyCodeAndGetToken, verifyTokenAndOnboard } from '@/backend/invite'
 
 interface IData {
 	id: string
 	torus: DirectWebSdk
 	userInfo: null | TorusLoginResponse
 	username?: null | string
 	accountId: null | string
-	inviteCode: null | string
+	hasInviteCode: boolean
 	inputCode: string
 	isLoading: boolean
 	phoneNumber: string
@@ -261,7 +262,7 @@ export default Vue.extend({
 				network: `testnet`, // details for test net
 			}),
 			accountId: null,
-			inviteCode: null,
+			hasInviteCode: false,
 			inputCode: ``,
 			userInfo: null,
 			isLoading: false,
@@ -319,7 +320,8 @@ export default Vue.extend({
 				this.userInfo = await this.torus.triggerLogin(torusVerifiers[type])
 
 				this.accountId = getAccountIdFromPrivateKey(this.userInfo.privateKey)
-				this.username = await getUsernameNEAR(this.accountId)
+				const [username] = await Promise.all([getUsernameNEAR(this.accountId), this.onboardAccount()])
+				this.username = username
 				if (this.username) {
 					// If a username is found then proceed to login...
 					this.verify()
@@ -349,7 +351,8 @@ export default Vue.extend({
 				return false
 			}
 
-			;[this.username] = await Promise.all([getUsernameNEAR(this.accountId), this.checkFunds()])
+			const [username] = await Promise.all([getUsernameNEAR(this.accountId), this.checkFunds(), this.onboardAccount()])
+			this.username = username
 			if (this.username) {
 				this.$toastError(`You cannot login with wallet, please import your private key`)
 				removeNearPrivateKey(this.accountId)
@@ -366,7 +369,8 @@ export default Vue.extend({
 			this.isLoading = true
 
 			this.accountId = await generateAndSetKey()
-			;[this.username] = await Promise.all([getUsernameNEAR(this.accountId), this.checkFunds()])
+			const [username] = await Promise.all([getUsernameNEAR(this.accountId), this.checkFunds(), this.onboardAccount()])
+			this.username = username
 			if (this.username) {
 				this.$toastError(`You cannot login with implicit account, please import your private key`)
 				removeNearPrivateKey(this.accountId)
@@ -518,6 +522,45 @@ export default Vue.extend({
 			URL.revokeObjectURL(link.href)
 			this.$toastSuccess(`Downloaded private key`)
 		},
+		async verifyCode() {
+			if (this.inputCode.length !== 8) {
+				this.$toastError(`Invite codes should be of length 8`)
+				return
+			}
+			try {
+				await verifyCodeAndGetToken(this.inputCode)
+				this.hasInviteCode = true
+			} catch (error: any) {
+				if (axios.isAxiosError(error) && error.response) {
+					if (error.response.status === 429) {
+						this.$toastWarning(`Too many requests`)
+						return
+					}
+					this.$toastError(error.response.data.error)
+					return
+				}
+				throw error
+			}
+		},
+		async onboardAccount() {
+			if (!this.accountId) {
+				this.$toastError(`AccountId missing`)
+				return
+			}
+			try {
+				await verifyTokenAndOnboard(this.accountId)
+			} catch (error: any) {
+				if (axios.isAxiosError(error) && error.response) {
+					if (error.response.status === 429) {
+						this.$toastWarning(`Too many requests`)
+						return
+					}
+					this.$toastError(error.response.data.error)
+					return
+				}
+				throw error
+			}
+		},
 	},
 })
 </script>

src/pages/settings/account.vue

@@ -42,9 +42,8 @@
 			<button class="text-negative focus:outline-none">Deactivate my Capsule Account</button>
 		</div>
 		<!-- Account Invites -->
-		<h2 v-if="generatedNumber < 1" class="text-primary font-semibold pt-4 mb-4 text-sm">Account Invites</h2>
+		<h2 class="text-primary font-semibold pt-4 mb-4 text-sm">Account Invites</h2>
 		<div
-			v-if="generatedNumber < 1"
 			class="p-5 rounded-lg mt-4 overflow-hidden relative bg-gradient-to-r from-lightBGStart to-lightBGStop border-lightBorder shadow-lg"
 		>
 			<label for="id" class="font-semibold text-sm pb-1 block mb-2">Generate an invite code</label>
@@ -62,7 +61,7 @@
 						ref="code"
 						v-model="generatedInviteCode"
 						type="text"
-						placeholder="No more code available"
+						placeholder="Eg. a5bX2cYY"
 						class="rounded-lg px-4 py-2 text-sm focus:outline-none focus:border-primary text-primary font-sans bg-gray2 border border-dashed border-primary w-full"
 						style="height: 3rem"
 						@focus="$event.target.select()"
@@ -71,10 +70,16 @@
 						<CopyIcon class="w-5 h-5 fill-current" />
 					</button>
 				</div>
-				<button class="text-primary focus:outline-none text-sm" @click="generateNewInviteCode">
+				<button
+					v-if="inviteCodesRemaining >= 1"
+					class="text-primary focus:outline-none text-sm"
+					@click="generateNewInviteCode"
+				>
 					Generate a new code
 				</button>
 			</div>
+			<br />
+			<p class="text-gray5">You have {{ inviteCodesRemaining }} invites remaining</p>
 		</div>
 
 		<!-- Submit button -->
@@ -88,16 +93,18 @@
 
 <script lang="ts">
 import Vue from 'vue'
+import axios from 'axios'
 import { mapMutations } from 'vuex'
 import { MutationType, getProfileFromSession, namespace as sessionStoreNamespace } from '~/store/session'
 import { setProfile } from '@/backend/profile'
 import { getNearPrivateKey } from '@/backend/near'
 import CopyIcon from '@/components/icons/Copy.vue'
+import { generateInviteCode, getInvitesRemaining } from '@/backend/invite'
 
 interface IData {
 	backgroundImage: null | string | ArrayBuffer
 	generatedInviteCode: string
-	generatedNumber: number
+	inviteCodesRemaining: number
 }
 
 export default Vue.extend({
@@ -109,9 +116,12 @@ export default Vue.extend({
 		return {
 			backgroundImage: null,
 			generatedInviteCode: ``,
-			generatedNumber: 0,
+			inviteCodesRemaining: 1,
 		}
 	},
+	created() {
+		this.getInviteCodesRemaining()
+	},
 	methods: {
 		...mapMutations(sessionStoreNamespace, {
 			changeCID: MutationType.CHANGE_CID,
@@ -147,15 +157,33 @@ export default Vue.extend({
 				this.$toastSuccess(`Your settings has been successfully updated`)
 			}
 		},
-		generateNewInviteCode() {
+		async generateNewInviteCode() {
 			// generate a new invite code
-			this.generatedInviteCode = `TEST`
+			try {
+				const { inviteCode, invitesRemaining } = await generateInviteCode(this.$store.state.session.id)
+				this.generatedInviteCode = inviteCode
+				this.inviteCodesRemaining = invitesRemaining
+			} catch (error: any) {
+				if (axios.isAxiosError(error) && error.response) {
+					if (error.response.status === 429) {
+						this.$toastWarning(`Too many requests`)
+						return
+					}
+					this.$toastError(error.response.data.error)
+					return
+				}
+				throw error
+			}
 		},
 		copyURL(): void {
 			const code = this.$refs.code as HTMLElement
 			code.focus()
 			document.execCommand(`copy`)
-			this.$toastSuccess(`code copied to clipboard!`)
+			this.$toastSuccess(`Code copied to clipboard!`)
+		},
+		async getInviteCodesRemaining() {
+			const response = await getInvitesRemaining(this.$store.state.session.id)
+			this.inviteCodesRemaining = response
 		},
 	},
 })