platypush/platypush
platypush
/
platypush
2
2
Fork 4
Code Issues 44 Pull Requests 1 Packages Projects 4 Releases Wiki Activity

Better style for the settings' users and token panels

This commit is contained in:
Fabio Manganiello 2022-11-25 23:16:16 +01:00
parent 21c1c96f2e
commit a57e67b96f
Signed by: blacklight
GPG Key ID: D90FBA7F76362774
2 changed files with 43 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
platypush/backend/http/webapp/src/components/panels/Settings/Token.vue
View File

@ -31,25 +31,33 @@
<div class="form-container">
<form @submit.prevent="generateToken" ref="generateTokenForm">
<label>
Username
<input type="text" name="username" :value="currentUser.username" disabled>
<span>Username</span>
<span>
<input type="text" name="username" :value="currentUser.username" disabled>
</span>
</label>
<label>
Password
<input type="password" name="password">
<span>Confirm password</span>
<span>
<input type="password" name="password">
</span>
</label>
<label>
Token validity in days
<input type="text" name="validityDays">
<span>Token validity in days</span>
<span>
<input type="text" name="validityDays">
</span>
<span class="note">
Decimal values are also supported (e.g. <i>0.5</i> to identify 6 hours). An empty or zero value means that
the token has no expiry date.
</span>
</label>
<input type="submit" value="Generate token">
<label>
<input type="submit" class="btn btn-primary" value="Generate token">
</label>
</form>
</div>
</div>
@ -161,6 +169,12 @@ export default {
font-size: .75em;
margin: -.75em 0 2em 0;
}
span {
input {
width: 100%;
}
}
}
input[type=password] {
@ -181,6 +195,11 @@ export default {
label {
display: flex;
flex-direction: column;
span {
display: block;
width: 100%;
}
}
textarea {
@ -219,6 +238,10 @@ export default {
width: 50%;
justify-content: right;
padding: 1em;
label {
text-align: left;
}
}
.body {

42
platypush/backend/http/webapp/src/components/panels/Settings/Users.vue
View File

@ -12,8 +12,9 @@
<label>
<input type="password" name="confirm_password" placeholder="Confirm password" :disabled="commandRunning">
</label>
<input type="submit" value="Create User" :disabled="commandRunning">
<label>
<input type="submit" class="btn btn-primary" value="Create User" :disabled="commandRunning">
</label>
</form>
</Modal>
@ -31,7 +32,9 @@
<label>
<input type="password" name="confirm_new_password" placeholder="Confirm new password" :disabled="commandRunning">
</label>
<input type="submit" value="Change Password" :disabled="commandRunning">
<label>
<input type="submit" class="btn btn-primary" value="Change Password" :disabled="commandRunning">
</label>
</form>
</modal>
@ -138,32 +141,6 @@ export default {
await this.refresh()
},
// onTokenFocus(event) {
// event.target.select()
// this.document.execCommand('copy')
// event.target.setAttribute('disabled', true)
//
// this.notify({
// text: 'Token copied to the clipboard',
// image: {
// iconClass: 'fas fa-copy',
// },
// })
// },
//
// onTokenBlur(event) {
// event.target.select()
// this.document.execCommand('copy')
// event.target.removeAttribute('disabled')
//
// this.notify({
// text: 'Token copied to clipboard',
// image: {
// iconClass: 'fas fa-copy',
// },
// })
// },
async changePassword(event) {
event.preventDefault()
@ -264,6 +241,13 @@ export default {
}
}
form {
label {
display: block;
text-align: center;
}
}
.users-list {
background: $background-color;
margin-top: .15em;