Updated

README.md

@@ -1,38 +1,110 @@
-# create-svelte
+# Cipher Box
 
-Everything you need to build a Svelte project, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/main/packages/create-svelte).
+Cipher Box is an innovative TOTP (Time-Based One-Time Password) generator and Password Manager application, designed to address the concerns of cloud storage for sensitive user data. Unlike traditional systems such as Google Authenticator, which store backups on the cloud, Cipher Box takes a different approach to ensure the utmost security and privacy of your data.
 
-## Creating a project
+The primary concern with cloud storage is the lack of transparency and control. Users often don't know where their data is stored or who has access to it. Cipher Box eliminates these concerns by providing an end-to-end encrypted password manager built on the Internet Computer.
 
-If you're seeing this, you've probably already done this step. Congrats!
+Cipher Box leverages VETKeys, a feature on the Internet Computer for onchain encryption and privacy, to encrypt passwords and secret keys on the client side before storing them on backend canisters. This ensures that the user remains in control of their data at all times. The encrypted symmetric key for user is generated by VETKeys system api with transport public key and is decrypted on the client side using the user's principal, transport secret key and VETKeys system api public key. This decrypted symmetric key is then used to encrypt the user's passwords and TOTP secret keys. And also this symmetric key is used to decrypt encrypted passwords and TOTP keys that are stored in backend. Encryption and decryption occurs only on the user device.
+
+The result is a system where users can securely store their encrypted passwords and TOTP secret keys on canisters, of which they are the controller. Users can also decrypt their passwords and TOTP secret keys from the frontend using the decryption key.
+
+With Cipher Box, you can rest assured that your sensitive data is secure, private, and under your control.
+
+## ⚠️ Disclaimer
+
+This is only a Proof of Concept and currently uses an **insecure** implementation of [the proposed vetKD system API](https://github.com/dfinity/interface-spec/pull/158) in a pre-compiled form via the [vetkd_system_api.wasm](src/system_api/vetkd_system_api.wasm). **Do not use this in production or for sensitive data**! This example is solely provided **for demonstration purposes**.
+
+## Project links
+
+- [**Frontend Demo Video**](https://youtu.be/JxVW1134P4Y)
+- [**Backend Interface**](https://a4gq6-oaaaa-aaaab-qaa4q-cai.raw.icp0.io/?id=ppcoq-pyaaa-aaaag-acn6a-cai)
+- [**Frontend Canister**](https://pidie-caaaa-aaaag-acn6q-cai.icp0.io/)
+
+### Supported features
+
+Cipher Box currently supports these features:
+
+- Generate AES symmetric key based on user principal for encryption and decryption
+- Client side encryption before sending into backend
+- Encrypted password store on the blockchain instead of trusting centralized Big Tech Cloud
+- Encrypted TOTP secret key store on the blockchain instead of trusting centralized Cloud
+- TOTP generator
+- Random password generator
+- Login via Internet Identity and No additional master password required
+
+### Canisters
+
+Current architecture consists of 4 canisters for local development:
+
+- frontend canister
+- backend canister
+- vetkd_system_api canister
+- internet identity canister (for local developlment only)
+
+## Deploy Locally
+
+### Prerequisites
+
+Before you begin, ensure you have met the following requirements:
+
+- **dfx**: You have installed the latest version of the DFINITY Canister SDK, `dfx`. You can download it from the [DFINITY SDK page](https://internetcomputer.org/docs/current/developer-docs/getting-started/install/).
+
+- **Node.js**: You have installed Node.js, version 18 or above. You can download it from the [Node.js website](https://nodejs.org/en/download).
+
+- **mops**: You have installed `mops`. If not, you can install it using npm by running the command `npm i -g ic-mops` or you can find in [mops website](https://nodejs.org/en/download).
+
+### Getting Started
+
+To get a local copy up and running, follow these simple steps:
+
+1. Get a clone of this repository:
 
 ```bash
-# create a new project in the current directory
-npm create svelte@latest
+git clone https://github.com/ahdrahees/cipher-box.git
+```
+
+2. Install dependencies:
 
-# create a new project in my-app
-npm create svelte@latest my-app
+```bash
+npm install
 ```
 
-## Developing
+3. Install motoko Packages:
+
+```bash
+mops install
+```
 
-Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
+4. Open new terminal to start your local replica:
 
 ```bash
-npm run dev
+dfx start --clean
+```
+
+5. Open new terminal and deploy Local Internet Identity canister:
 
-# or start the server and open the app in a new browser tab
-npm run dev -- --open
+```bash
+npm run localii
+```
+
+6. Deploy Vetkd system api canister:
+
+```bash
+dfx deploy vetkd_system_api
 ```
 
-## Building
+7. Deploy Backend canister:
 
-To create a production version of your app:
+```bash
+dfx deploy backend
+```
+
+8. Start a frontend development server:
 
 ```bash
-npm run build
+npm run dev
 ```
 
-You can preview the production build with `npm run preview`.
+You will then be able to access the frontend via url provided by development server or `http://localhost:5173/`
 
-> To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target environment.
+If you're seeing this, you've probably already done this step. Congrats!

canister_ids.json

@@ -0,0 +1,11 @@
+{
+  "backend": {
+    "ic": "ppcoq-pyaaa-aaaag-acn6a-cai"
+  },
+  "frontend": {
+    "ic": "pidie-caaaa-aaaag-acn6q-cai"
+  },
+  "vetkd_system_api": {
+    "ic": "p2f75-oqaaa-aaaag-acn5q-cai"
+  }
+}

src/frontend/src/routes/pass/+page.svelte

@@ -46,8 +46,6 @@
 			})
 		);
 
-		console.log('searchResult', $searchResult);
-
 		await tick(); // Wait for Svelte to update the DOM
 	}