Skip to content

Commit 2cf5919

Browse files
gideonairexCMCDragonkai
gideonairex
authored and
CMCDragonkai
committed
feature: add balmui
1 parent 98300a5 commit 2cf5919

25 files changed

+3200
-132
lines changed

‎package-lock.json‎

Lines changed: 1194 additions & 83 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@
2929
"@matrixai/pagination": "^0.1.0",
3030
"@matrixai/polykey": "0.0.20",
3131
"async-mutex": "^0.2.4",
32+
"balm-ui": "^9.0.0-rc.4",
3233
"buffer-json": "^2.0.0",
3334
"core-js": "^3.6.5",
3435
"protobufjs": "^6.10.1",
@@ -57,6 +58,7 @@
5758
"cross-env": "^7.0.2",
5859
"css-loader": "^4.3.0",
5960
"deepmerge": "^4.2.2",
61+
"electron": "^10.1.5",
6062
"electron-builder": "^22.9.1",
6163
"electron-packager": "^15.0.0",
6264
"eslint": "^7.6.0",

‎src/renderer/App.vue‎

Lines changed: 28 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -1,46 +1,36 @@
11
<template>
2-
<div id="nav">
3-
<router-link to="/">Home</router-link> |
4-
<router-link to="/about">About</router-link>
2+
<div style='background: LightGrey;'>
3+
<div>
4+
<!-- <Login /> -->
5+
<Alert />
6+
<Drawer />
7+
<AppBar />
8+
<router-view />
9+
<!-- <Footer /> -->
10+
</div>
511
</div>
6-
<router-view />
712
</template>
813

9-
<script lang="ts">
10-
import { defineComponent } from 'vue';
11-
import Home from './views/Home.vue'; // @ is an alias to /src
12-
import About from './views/About.vue'; // @ is an alias to /src
14+
<script lang='ts'>
15+
/**
16+
* Chore:
17+
* 1. Login not used yet
18+
*/
19+
import { defineComponent } from 'vue'
20+
import Alert from './components/alerts/Alert.vue'
21+
import AppBar from './components/navigation/AppBar.vue'
22+
import Drawer from './components/navigation/Drawer.vue'
23+
// import Footer from './components/navigation/Footer.vue'
24+
// import NewVault from './components/vaults/NewVault.vue'
25+
// import Login from './components/navigation/Login.vue';
1326
1427
export default defineComponent({
15-
created () {
16-
},
17-
name: 'App',
1828
components: {
19-
Home,
20-
About,
21-
},
22-
});
29+
Alert,
30+
AppBar,
31+
Drawer
32+
// Footer
33+
// Login
34+
}
35+
})
2336
</script>
24-
25-
<style>
26-
#app {
27-
font-family: Avenir, Helvetica, Arial, sans-serif;
28-
-webkit-font-smoothing: antialiased;
29-
-moz-osx-font-smoothing: grayscale;
30-
text-align: center;
31-
color: #2c3e50;
32-
}
33-
34-
#nav {
35-
padding: 30px;
36-
}
37-
38-
#nav a {
39-
font-weight: bold;
40-
color: #2c3e50;
41-
}
42-
43-
#nav a.router-link-exact-active {
44-
color: #42b983;
45-
}
46-
</style>

‎src/renderer/components/alerts/Alert.vue‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
<template>
2+
<v-snackbar timeout="2000" v-model="snackbar" :color="color" class="text-xs-center">
3+
{{message}}
4+
<template v-slot:action="{ attrs }">
5+
<v-btn color="black" icon v-bind="attrs" @click="snackbar = false">
6+
<v-icon>fas fa-times</v-icon>
7+
</v-btn>
8+
</template>
9+
</v-snackbar>
10+
</template>
11+
12+
<script lang="ts">
13+
import { defineComponent, ref } from 'vue';
14+
15+
export default defineComponent({
16+
setup() {
17+
const visible = ref(false);
18+
const snackbar = () => {
19+
visible.value = !visible.value;
20+
};
21+
22+
return {
23+
visible,
24+
snackbar,
25+
};
26+
},
27+
});
28+
</script>
29+
30+
<style scoped>
31+
</style>

‎src/renderer/components/configuration/Configuration.vue‎

Lines changed: 172 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,172 @@
1+
<template>
2+
<v-container fluid pa-0 class="d-flex flex-column flex-grow-1 fill-parent-height">
3+
<v-row no-gutters class="top-row flex-grow-1 flex-shrink-1">
4+
<v-col class="side-panel fill-parent-height">
5+
<h2 style="text-align: center;">Configuration</h2>
6+
7+
<v-subheader>Active Key Node</v-subheader>
8+
<v-select value="~/.polykey" :items="nodePathList" label="Active Key Node" solo style="margin: 10px;" />
9+
10+
<v-subheader>Key Node List</v-subheader>
11+
<v-list-item>
12+
<v-list-item-content>
13+
<v-btn color="success" rounded small @click="newKeyNode()">New KeyNode</v-btn>
14+
</v-list-item-content>
15+
</v-list-item>
16+
17+
<v-list :item-height="50" color="transparent">
18+
<v-list-item-group v-model="selectedVaultIndex" color="primary" mandatory>
19+
<v-list-item v-for="item in nodePathList" :key="item" color="primary" link :ripple="false">
20+
<v-list-item-icon>
21+
<v-icon>fas fa-file</v-icon>
22+
</v-list-item-icon>
23+
24+
<v-list-item-title>{{item}}</v-list-item-title>
25+
26+
<v-spacer></v-spacer>
27+
<v-btn link icon x-small color="warning" @click="deleteVault(item)">
28+
<v-icon>fas fa-trash</v-icon>
29+
</v-btn>
30+
</v-list-item>
31+
</v-list-item-group>
32+
</v-list>
33+
</v-col>
34+
<v-col class="main-panel fill-parent-height">
35+
<!-- <v-card color="FloralWhite" style="position: relative" width="100%">
36+
<v-form v-model="valid" ref="newVaultForm">
37+
<v-container>
38+
<h2>New KeyNode</h2>
39+
<span>Use this form to initialize a new keynode state</span>
40+
<v-row>
41+
<v-col>
42+
<v-list outlined>
43+
<v-text-field
44+
v-model="secretName"
45+
:rules="secretNameRules"
46+
label="Full Name"
47+
counter="100"
48+
required
49+
outlined
50+
style="padding-left: 10px; padding-right: 10px"
51+
placeholder="Enter your full name"
52+
/>
53+
54+
<v-textarea
55+
v-model="secretContent"
56+
label="Secret Content"
57+
required
58+
outlined
59+
style="padding-left: 10px; padding-right: 10px"
60+
placeholder="Enter the content of the secret"
61+
></v-textarea>
62+
</v-list>
63+
</v-col>
64+
</v-row>
65+
</v-container>
66+
67+
<v-card-actions>
68+
<v-btn @click="cancel">Cancel</v-btn>
69+
<v-btn color="warning" @click="resetValidation">Clear</v-btn>
70+
<v-spacer></v-spacer>
71+
<v-btn color="success" @click="newSecret">Create</v-btn>
72+
</v-card-actions>
73+
</v-form>
74+
</v-card> -->
75+
</v-col>
76+
</v-row>
77+
</v-container>
78+
</template>
79+
80+
<script lang="ts">
81+
import { Component, Vue, Prop } from 'vue-property-decorator';
82+
import { namespace } from 'vuex-class';
83+
import { polykeyClient } from '@/store';
84+
import { getConfiguration } from '@/store/modules/Configuration';
85+
86+
const configuration = namespace('Configuration');
87+
88+
const namingRule = name =>
89+
/^\b[\w]+(?:['-]?[\w]+)*\b$/.test(name) || !name || 'Name must only contain letters, numbers and hyphens';
90+
91+
@Component({})
92+
export default class Configuration extends Vue {
93+
@configuration.State
94+
public activeNodePath!: string;
95+
96+
@configuration.State
97+
public nodePathList!: string[];
98+
99+
@configuration.Action
100+
public loadNodePathList!: () => Promise<void>;
101+
102+
public valid: boolean = false;
103+
public secretName = '';
104+
public secretNameRules = [namingRule];
105+
public secretContent = '';
106+
selectedVaultIndex = 0
107+
108+
newKeyNode() {
109+
this.$router.push('Configuration/NewKeyNode')
110+
}
111+
112+
validate(): boolean {
113+
return (<any>this.$refs.newVaultForm).validate();
114+
}
115+
reset() {
116+
(<any>this.$refs.newVaultForm).reset();
117+
}
118+
resetValidation() {
119+
this.reset();
120+
}
121+
async newSecret() {
122+
if (this.validate()) {
123+
// const successful = await polykeyClient.createSecret(
124+
// getConfiguration().activeNodePath,
125+
// this.selectedVaultName,
126+
// this.secretName,
127+
// Buffer.from(this.secretContent),
128+
// );
129+
// console.log(successful);
130+
// if (successful) {
131+
// this.$router.back();
132+
// }
133+
} else {
134+
alert('Please address errors');
135+
}
136+
}
137+
138+
cancel() {
139+
this.$router.back();
140+
}
141+
142+
constructor() {
143+
super()
144+
this.loadNodePathList().then(() => {
145+
console.log(this.nodePathList);
146+
147+
})
148+
}
149+
}
150+
</script>
151+
152+
<style scoped>
153+
.main-panel {
154+
margin: 10px;
155+
min-height: 0;
156+
}
157+
158+
.side-panel {
159+
background-color: rgb(184, 184, 184);
160+
overflow-y: scroll;
161+
max-width: 300px;
162+
min-width: 150px;
163+
}
164+
165+
.fill-parent-height {
166+
height: 100%;
167+
}
168+
169+
.top-row {
170+
min-height: 0;
171+
}
172+
</style>

0 commit comments

Comments
 (0)