Skip to content

Commit

Permalink
Made the credentials modal nice looking now
Browse files Browse the repository at this point in the history
  • Loading branch information
@michelvocks
michelvocks committed Mar 6, 2018
1 parent 5e9fc46 commit 73d8406
Show file tree
Hide file tree
Showing 7 changed files with 166 additions and 189 deletions.
23 changes: 21 additions & 2 deletions frontend/client/App.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -97,14 +97,14 @@ html {
}
}
.button {
.is-primary {
background-color: #4da2fc !important;
font-weight: bold;
border-color: transparent;
color: whitesmoke;
}
.button:hover, .button:active, .button:focus {
.is-primary:hover, .button:active, .button:focus {
color: whitesmoke;
border-color: transparent;
}
Expand All @@ -131,6 +131,12 @@ html {
-webkit-text-fill-color: initial;
}
.input-bar::-moz-placeholder {
color: #8c91a0;
text-shadow: none;
opacity: 1;
}
.title-text {
border-bottom: 1px whitesmoke solid;
padding-bottom: 8px;
Expand All @@ -147,4 +153,17 @@ html {
width: 480px; /* either % (e.g. 60%) or px (400px) */
}
}
.collapse-item {
background-color: black;
.card-header {
background-color: #3f3d49;
}
}
.card-header-title {
color: whitesmoke;
}
</style>
10 changes: 8 additions & 2 deletions frontend/client/components/layout/Navbar.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
<input class="borderless-search" type="text" placeholder="Find pipeline ..." v-model="search">
</div>
<div class="navbar-button">
<a class="button" @click="createPipeline">
<a class="button is-primary" @click="createPipeline">
<span class="icon">
<i class="fa fa-plus"></i>
</span>
Expand Down Expand Up @@ -233,7 +233,7 @@ export default {
height: 70px;
background-color: transparent;
padding-left: 20px;
color: #4da2fc;
color: whitesmoke;
font-size: 20px;
}
Expand All @@ -250,6 +250,12 @@ export default {
-webkit-text-fill-color: initial;
}
.borderless-search::-moz-placeholder {
color: #8c91a0;
text-shadow: none;
opacity: 1;
}
.app-navbar {
position: static;
min-width: 100%;
Expand Down
158 changes: 118 additions & 40 deletions frontend/client/views/pipelines/create.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,33 +14,33 @@
</span>
<span style="color: red;" v-if="gitNeedAuth">You are not authorized. Invalid username and/or password!</span>
<span style="color: red;" v-if="gitInvalidURL">Invalid link to git repo provided!</span>
<div>
<div v-if="gitBranches.length > 0">
<span>Branch:</span>
<div class="select is-fullwidth" v-if="gitBranches.length > 0">
<div class="select is-fullwidth">
<select v-model="gitBranchSelected">
<option v-for="branch in gitBranches" :key="branch" :value="branch">{{ branch }}</option>
</select>
</div>
</div>
</p>
<p class="control">
<a class="button" v-on:click="showCredentialsModal">
<a class="button is-primary" v-on:click="showCredentialsModal">
<span class="icon">
<i class="fa fa-certificate"></i>
</span>
<span>Add credentials</span>
</a>
</p>
<hr>
<hr class="dotted-line">
<label class="label">Type the name of your pipeline. You can put your pipelines into folders by defining a path. For example <strong>MyFolder/MyAwesomePipeline</strong>.</label>
<p class="control has-icons-left">
<input class="input is-medium input-bar" v-model="pipelineName" type="text" placeholder="Pipeline name ...">
<span class="icon is-small is-left">
<i class="fa fa-book"></i>
</span>
</p>
<hr>
<a class="button">
<hr class="dotted-line">
<a class="button is-primary">
<span class="icon">
<i class="fa fa-plus"></i>
</span>
Expand All @@ -56,29 +56,53 @@
<modal :visible="gitCredentialsModal" class="modal-z-index" @close="close">
<div class="box credentials-modal">
<div class="block credentials-modal-content">
<div class="credentials-modal-content">
<p class="control has-icons-left" style="padding-bottom: 5px;">
<input class="input is-medium input-bar" v-focus type="text" v-model="gitUsername" placeholder="Username">
<span class="icon is-small is-left">
<i class="fa fa-user-circle"></i>
</span>
</p>
<p class="control has-icons-left">
<input class="input is-medium input-bar" type="password" v-model="gitPassword" placeholder="Password">
<span class="icon is-small is-left">
<i class="fa fa-lock"></i>
</span>
</p>
</div>
<hr>
<div class="block credentials-modal-content">
<p class="control">
<label class="label">SSH Private Key:</label>
<textarea class="textarea input-bar" v-model="gitPrivateKey"></textarea>
</p>
</div>
<div class="credentials-modal-content">
<button class="button is-primary" v-on:click="close">Add Credentials</button>
<collapse accordion is-fullwidth>
<collapse-item title="Basic Authentication" selected>
<div class="credentials-modal-content">
<label class="label" style="text-align: left;">Add credentials for basic authentication:</label>
<p class="control has-icons-left" style="padding-bottom: 5px;">
<input class="input is-medium input-bar" v-focus type="text" v-model="gitUsername" placeholder="Username">
<span class="icon is-small is-left">
<i class="fa fa-user-circle"></i>
</span>
</p>
<p class="control has-icons-left">
<input class="input is-medium input-bar" type="password" v-model="gitPassword" placeholder="Password">
<span class="icon is-small is-left">
<i class="fa fa-lock"></i>
</span>
</p>
</div>
</collapse-item>
<collapse-item title="SSH Key">
<label class="label" style="text-align: left;">Instead of using basic authentication, provide a pem encoded private key.</label>
<div class="block credentials-modal-content">
<p class="control">
<textarea class="textarea input-bar" v-model="privateKey"></textarea>
</p>
</div>
<h2><span>Additional:</span></h2>
<p class="control has-icons-left" style="padding-bottom: 5px;">
<input class="input is-medium input-bar" v-focus type="text" v-model="keyUsername" placeholder="Username">
<span class="icon is-small is-left">
<i class="fa fa-user-circle"></i>
</span>
</p>
<p class="control has-icons-left">
<input class="input is-medium input-bar" type="password" v-model="keyPassword" placeholder="Password">
<span class="icon is-small is-left">
<i class="fa fa-lock"></i>
</span>
</p>
</collapse-item>
</collapse>
<div class="modal-footer">
<div style="float: left;">
<button class="button is-primary" v-on:click="close">Add Credentials</button>
</div>
<div style="float: right;">
<button class="button is-danger" v-on:click="cancel">Cancel</button>
</div>
</div>
</div>
</div>
Expand All @@ -88,6 +112,7 @@

<script>
import { Modal } from 'vue-bulma-modal'
import { Collapse, Item as CollapseItem } from 'vue-bulma-collapse'
export default {
Expand All @@ -99,26 +124,42 @@ export default {
gitCredentialsModal: false,
gitUsername: '',
gitPassword: '',
gitPrivateKey: '',
gitBranches: [
'Master'
],
privateKey: '',
keyUsername: '',
keyPassword: '',
gitBranches: [],
gitBranchSelected: '',
pipelineName: ''
}
},
components: {
Modal
Modal,
Collapse,
CollapseItem
},
watch: {
gitURL: function () {
// lets check if we can access the git repo
this.checkGitRepo()
}
},
methods: {
checkGitRepo () {
if (this.gitURL === '') {
return
}
var gitrepo = {
giturl: this.gitURL,
gituser: this.gitUsername,
gitpassword: this.gitPassword
gitpassword: this.gitPassword,
privatekey: {
key: this.privateKey,
username: this.keyUsername,
password: this.keyPassword
}
}
this.$http.post('/api/v1/pipelines/gitlsremote', gitrepo)
Expand All @@ -128,7 +169,7 @@ export default {
this.gitInvalidURL = false
// Get branches and set to master if available
this.gitBranches = response.data.branches
this.gitBranches = response.data.gitbranches
for (var i = 0; i < this.gitBranches.length; i++) {
if (this.gitBranches[i] === 'refs/heads/master') {
this.gitBranchSelected = this.gitBranches[i]
Expand All @@ -153,15 +194,25 @@ export default {
}
console.log(error.response.data)
})
}
},
},
methods: {
close () {
this.checkGitRepo()
this.gitCredentialsModal = false
this.$emit('close')
},
cancel () {
// cancel means reset all stuff
this.gitUsername = ''
this.gitPassword = ''
this.privateKey = ''
this.keyUsername = ''
this.keyPassword = ''
this.close()
},
showCredentialsModal () {
this.gitCredentialsModal = true
}
Expand All @@ -182,4 +233,31 @@ export default {
padding: 10px;
}
.dotted-line {
background-image: linear-gradient(to right, black 33%, rgba(255,255,255,0) 0%);
background-position: bottom;
background-size: 3px 1px;
background-repeat: repeat-x;
}
h2 {
width:100%;
text-align:center;
border-bottom: 1px solid #4da2fc;
line-height:0.1em;
padding-top: 15px;
margin:10px 0 20px;
}
h2 span {
background:black;
color: whitesmoke;
padding:0 10px;
}
.modal-footer {
height: 35px;
padding-top: 15px;
}
</style>
Loading

0 comments on commit 73d8406

Please sign in to comment.