blacklight/platypush
1
0
Fork 0
forked from platypush/platypush
Code Issues Pull requests Projects Releases Packages Wiki Activity

Better style for the settings' users and token panels

Browse source
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

31
platypush/backend/http/webapp/src/components/panels/Settings/Token.vue
View file

@ -31,25 +31,33 @@
<div class="form-container"> <div class="form-container">
<form @submit.prevent="generateToken" ref="generateTokenForm"> <form @submit.prevent="generateToken" ref="generateTokenForm">
<label> <label>
Username <span>Username</span>
<span>
<input type="text" name="username" :value="currentUser.username" disabled> <input type="text" name="username" :value="currentUser.username" disabled>
</span>
</label> </label>
<label> <label>
Password <span>Confirm password</span>
<span>
<input type="password" name="password"> <input type="password" name="password">
</span>
</label> </label>
<label> <label>
Token validity in days <span>Token validity in days</span>
<span>
<input type="text" name="validityDays"> <input type="text" name="validityDays">
</span>
<span class="note"> <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 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. the token has no expiry date.
</span> </span>
</label> </label>
<input type="submit" value="Generate token"> <label>
<input type="submit" class="btn btn-primary" value="Generate token">
</label>
</form> </form>
</div> </div>
</div> </div>
@ -161,6 +169,12 @@ export default {
font-size: .75em; font-size: .75em;
margin: -.75em 0 2em 0; margin: -.75em 0 2em 0;
} }
span {
input {
width: 100%;
}
}
} }
input[type=password] { input[type=password] {
@ -181,6 +195,11 @@ export default {
label { label {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
span {
display: block;
width: 100%;
}
} }
textarea { textarea {
@ -219,6 +238,10 @@ export default {
width: 50%; width: 50%;
justify-content: right; justify-content: right;
padding: 1em; padding: 1em;
label {
text-align: left;
}
} }
.body { .body {

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

@ -12,8 +12,9 @@
<label> <label>
<input type="password" name="confirm_password" placeholder="Confirm password" :disabled="commandRunning"> <input type="password" name="confirm_password" placeholder="Confirm password" :disabled="commandRunning">
</label> </label>
<label>
<input type="submit" value="Create User" :disabled="commandRunning"> <input type="submit" class="btn btn-primary" value="Create User" :disabled="commandRunning">
</label>
</form> </form>
</Modal> </Modal>
@ -31,7 +32,9 @@
<label> <label>
<input type="password" name="confirm_new_password" placeholder="Confirm new password" :disabled="commandRunning"> <input type="password" name="confirm_new_password" placeholder="Confirm new password" :disabled="commandRunning">
</label> </label>
<input type="submit" value="Change Password" :disabled="commandRunning"> <label>
<input type="submit" class="btn btn-primary" value="Change Password" :disabled="commandRunning">
</label>
</form> </form>
</modal> </modal>
@ -138,32 +141,6 @@ export default {
await this.refresh() 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) { async changePassword(event) {
event.preventDefault() event.preventDefault()
@ -264,6 +241,13 @@ export default {
} }
} }
form {
label {
display: block;
text-align: center;
}
}
.users-list { .users-list {
background: $background-color; background: $background-color;
margin-top: .15em; margin-top: .15em;