/Yet-Another-Password-Keeper

基于electron实现的密码管理器

Primary LanguageTypeScript

Yet-Another-Password-Keeper

yet another passowrd keeper app based on Electron.

for safe, app is opensource, so anyone can check the source code.

for easily backup, app use local SQLite database file to store password info, so you can keep the database file anytime you want. and the file saved to ~/Document/yet-another-passowrd-keeper by default.

download

TODO

main

  • 主框架
  • 页面设计细化、图标设计等
  • SQLite操作库
  • Electron主进程和渲染进程通信
  • 添加、修改、展示、删除
  • password field show/copy logic
  • when app start, before show react render page, it show index.html empty page first issue
  • how to add perload.js
  • need password when open app for security
  • app setting feature: database storage path, password salt, password export
  • encode password when save to database
  • ui for windows
  • app release
  • github release app package

featrue

功能调研部分，借助这里的环境进行试验，后续会删除。

  • 视频采集
  • capture桌面
  • capture音频：同 capture桌面 功能，使用 Electron desktopCapturer 模块，这里没有试验
  • 音视频recorder、mixer、converter
  • 推流

Reference

技术栈选型

electron + typescript + react + sass + webpack

  • a. 为什么采用 typescript？

    都说挺好的，毕竟有类型系统。

  • b. 为什么采用 react？

    react刚出的时候，研究过，有一定的熟悉感；听人说react才是王道。

  • c. 为什么使用sass？

    很早之前了解过一些，比起一点点写css，继承的写法，省心。

开发备忘录

# 克隆这仓库
$ git clone https://github.com/xsddz/Yet-Another-Password-Keeper.git
# 进入仓库
$ cd Yet-Another-Password-Keeper
# 安装依赖库
# $ npm install
$ yarn
# 运行应用
# $ npm start
$ yarn start

目录结构如下：

Yet-Another-Password-Keeper
├── README.md
├── package-lock.json
├── package.json
├── src
│   ├── components
│   │   ├── appLeftContent.tsx
│   │   ├── appRightContent.tsx
│   │   ├── camera.tsx
│   │   └── desktop.tsx
│   ├── css
│   ├── fonts
│   ├── img
│   ├── electron.ts
│   ├── index.html
│   ├── index.tsx
│   └── modules
│       ├── images.d.ts
│       └── passdb.ts
├── tsconfig.json
└── webpack.config.js

How To Build An Electron App From Scratch

根据参考中的文章，一步一步操作。

docs