<p>Hey guys, I made an UI for HashiCorp Vault, with VueJS as frontend and Golang Echo as backend</p>
<p>Source code (MPL2.0): <a href="https://github.com/Caiyeon/goldfish">https://github.com/Caiyeon/goldfish</a></p>
<p>Live demo: <a href="https://vault-ui.io">vault-ui.io</a></p>
<p>I originally posted this in <a href="/r/devops">/r/devops</a> - <a href="https://www.reddit.com/r/devops/comments/69ynv4/hashicorp_vault_ui/">link to post</a>. But a friend of mine suggested that you guys here might be interested too. </p>
<p>I started the project with <a href="https://github.com/vue-bulma/vue-admin">this boilerplate</a> by fundon. I chose golang as backend mostly because at the time I started this side project (~4 months ago), there were very few vuejs + golang repos out there. In fact, I think the first page of google search brought up results in a foreign language.</p>
<p>If you don't know what vault is, that's ok; I'm posting here so that people who are interested in admin panels or webservers can have one more repo to refer to. For those that want to simply play around, feel free to fork the repo, strip all the <code>init()</code> requirements, and build your own API + frontend! Make your own vuejs + golang admin panel of whatever you'd like</p>
<p>On the off chance that you are interested in vault as well, pull requests are very welcome.</p>
<p><strong>A star for the repo would be very much appreciated</strong>, if you want to encourage further development or just to give me a pat on the back</p>
<p>Cheers</p>
<p><strong>Edit</strong>: Thanks for the stars and positive feedback! The demo website is now https (because why not?) and I'll be taking care of those not-quite-right http response codes soon. I <em>may</em> have kicked quite a few peoples' sessions while tinkering with tls... Apologies!</p>
<hr/>**评论：**<br/><br/>dmikalova: <pre><p>I'm right now going through a Vue tutorial and then planning to use it with my Go project. This will probably be a huge help for me to reference, thanks!!</p></pre>koffiezet: <pre><p>Looks nice, is this strictly intended to manage Vault secrets?</p>
<p>I ask this because we're currently looking at products (sadly I fail to find any decent opensource solutions for this) to manage passwords for humans in a team context. I've thought about writing a frontend with Vault as backend, without exposing the technical Vault details, but I'm no frontend dev at all...</p></pre>Caiyeon: <pre><p>Yes, this strictly works with vault. A lot of the backend is built like a wrapper around vault's golang api. This simplifies things for me, since I can rely on vault for both credential verification and storage.</p>
<p>Team context operational secrets are vault's specialty. I would recommend taking vault for a spin (with or without goldfish as UI) and see how you like it. If you aren't comfortable with the base vault API administration, it's a moot point anyway :)</p></pre>koffiezet: <pre><p>Well, I know vault a bit, (played a with it, but haven't used in production yet).</p>
<p>It's just that I was looking for an on-premises secret/password manager for humans, and had this idea that Vault would be a very good back-end for this, handling all security and auditing, while hiding all vault-specific complexity. Currently we use secretserver - but for political reasons it was decided we will abandon this and move to something new. It's windows/mssql-based, which I'm not a huge fan of, but it did bring the right mindset towards passwords/secrets in the company: no passwords shared via mail, no more plaintext passwords in documentation (yeah...) and no password reuse (just generate new-ones for everything), while still being able to share passwords in a relatively easy way.</p></pre>the_web_dev: <pre><p>Cool project. <a href="https://github.com/b3ntly/vue-grpc" rel="nofollow">Here's</a> a starter kit I made for VueJS + Typescript + gRPC + Golang if anyone wants to try something similar.</p></pre>php_questions: <pre><p>I love their blog post about GRPC!</p>
<p><a href="https://spatialos.improbable.io/games/grpc-web-moving-past-restjson-towards-type-safe-web-apis" rel="nofollow">https://spatialos.improbable.io/games/grpc-web-moving-past-restjson-towards-type-safe-web-apis</a></p>
<p>Have you had any problems with this yet? Any limitations you encountered? Are you using this in production?</p>
<p>I love strongly typed languages, so the combination of backend (go) frontend (typescript) and a strongly typed api (grpc) sounds pretty amazing..</p>
<p>Thanks for the starter kit! I'll definitely check this out.</p></pre>the_web_dev: <pre><p>I wrote a slightly larger project <a href="https://obits.tech" rel="nofollow">obits.tech</a> and the <a href="https://github.com/b3ntly/obits" rel="nofollow">source</a> is on Github. You could consider that a live environment and everything works fine.</p>
<p>Theirs a couple negligible quarks here and there. The Typescript API could be a little smoother and less verbose but I'm not complaining. There was also an issue using grpc-web with Glide, though that may well be be misunderstanding the vendor directory. An error is logged server side if you don't return headers, I don't know why this is and I haven't even raised an issue for it yet.</p>
<p>All in all I love the client-server contract it provides. It's easier writing gRPC endpoints then JSON-REST endpoints both on the server with Go and on the client with Typescript. I think this is a step towards the future but we still need some better abstractions / APIs / Frameworks before its ready for general adoption.</p>
<p>If the gRPC team had prioritized web clients sooner the project would have a much larger ecosystem by now.</p></pre>sevagh: <pre><p>Just last week I had a conversation with a coworker that he likes Vault but wish it had good administrative UIs available. I'll give this a shot, thanks!</p></pre>xrstf: <pre><p>(totally off-topic)</p>
<p>Another Go developer that likes Stardew Valley. Time to start a club :D</p></pre>Caiyeon: <pre><p>Soothing game, soothing language :)</p></pre>ProgressCheck: <pre><p>Let's do this... After I water my crops.</p></pre>darkjedicoder: <pre><p>Sign me up</p></pre>hackop: <pre><p>I've used Vue a little bit, but the way that you're doing it is a lot different from how I understood it to work. I'm much more of a back-end developer though.</p>
<p>Would you mind explaining, or pointing me to some docs, on using the .vue files / templates? It also looks like you're exporting the Vues in these type of blocks</p>
<pre><code>export default {
data () {
return {
csrf: '',
type: 'Token'
</code></pre>
<p>which seems pretty neat, but also different from how the docs for Vue.js read. What's the reason for this structure?</p></pre>Caiyeon: <pre><p><a href="https://vuejs.org/v2/guide/single-file-components.html" rel="nofollow">https://vuejs.org/v2/guide/single-file-components.html</a></p>
<p>Each page is a single component, with scoped css, html template, and javascript. This came with the frontend boilerplate, and is one of the reasons I chose the boilerplate to begin with.</p>
<p>As a project gets large, html templates and javascript files can get unwieldy. Also, minor css edits on one page may not be desired on all pages. The one to one ratio of page to .vue file works nicely when I'm coding too - no more scrambling everywhere for the file I'm looking for.</p></pre>the_web_dev: <pre><p>The reason is pretty straight forward, it allows you to have all your business, view, and styling, logic in one self-contained place. It reduces the number of directories and files in your project. It also provides a single "build story" for your project meaning you just add vue-loader to webpack and everything gets taken care of*.</p>
<p>In practice many editors have problems properly highlighting the polyglot syntax of Vue files. Furthermore things like adding support for Pug templating instead of HTML can be a headache. The community for Vue is small enough to the point where nobody may have tried your particular setup and you'll have to do it yourself which is a huge misnomer for some.</p>
<p>It also leads to the problem of incompatibility when you may choose not to use vue-templating but want to pull in third party projects which do, or vice versa. All in all I think the Vue templating is ok but should not have been made into a psuedo standard for Vue projects like it has been...</p></pre>karnivoorischenkiwi: <pre><p>I might implement this to make vault easier to manage for our dev environments/vagrant box. Thank you for sharing</p></pre>sriramalka: <pre><p>Strangely, the side panel doesn't show for me on Safari (10.0.3). It shows up fine on Chrome.</p></pre>royge: <pre><p>Does the app have the option to be distributed as a single binary?</p></pre>vkolev: <pre><p>Error: 500 Login first? Shouldn't it be 401 ?</p></pre>Caiyeon: <pre><p>Yes. A complete nitpick over http status codes is on my to-do list. It's not as trivial as it seems, since vault api returns error for both permission denied and internal errors, so I'll have to comb through each error detail.</p></pre>paddie: <pre><p>Aye, the clear text search through their golang API errors was my biggest annoyance about their client tbh. I ended up ripping out their API and calling it myself to get the correct status codes. </p></pre>vkolev: <pre><p>Just what I saw first. Great work!</p></pre>
