gCubeSystem
/
web-components
16
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 2 Wiki Activity

added password_toggle

This commit is contained in:
dcore94 2022-11-04 17:43:02 +01:00
parent 08ce5266a7
commit 73d00edb45
2 changed files with 35 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
ccp/js/inputwidgetcontroller.js
View File

@ -125,8 +125,9 @@ class SimpleInputRenderer extends Renderer{
<span class="ccp-help-icon" title="${this.description}" alt="${this.description}">?</span>
</label>
<input class="ccp-input-widget form-control" name="${this.name}" value="${this.schema.default}" ${required} ${readonly}></input>
<span style="user-select:none;position:relative;top:-1.6rem;left:95%;cursor:pointer" name="password_toggle" class="d-none">&#128065;</span>
</div>
`
`
return this.#html
}
}
@ -139,16 +140,28 @@ class SecretInputRenderer extends Renderer{
super(input)
}
connectedCallback(controller){
controller.addEventListener("click", ev=>{
const ename = ev.target.getAttribute("name")
if(ename === "password_toggle"){
const w = controller.querySelector("div.ccp-input-widget input")
w.type = (w.type === "password" ? "" : "password")
ev.preventDefault()
}
})
}
render(){
let required = this.required ? 'required="required"' : ""
let readonly = this.readOnly ? 'readonly="readOnly"' : ""
this.#html = `
<div class="ccp-input-widget form-field">
<div class="ccp-input-widget ccp-input-widget form-field">
<label>
${this.title}
<span class="ccp-help-icon" title="${this.description}" alt="${this.description}">?</span>
</label>
<input type="password" class="ccp-input-widget form-control" name="${this.name}" value="${this.schema.default}" ${required} ${readonly}></input>
<span style="user-select:none;position:relative;top:-1.6rem;left:90%;cursor:pointer" name="password_toggle">&#128065;</span>
</div>
`
return this.#html

21
ccp/js/inputwidgeteditorcontroller.js
View File

@ -9,7 +9,7 @@ class CCPInputWidgetEditorController extends HTMLElement{
<path d="M19,4H15.5L14.5,3H9.5L8.5,4H5V6H19M6,19A2,2 0 0,0 8,21H16A2,2 0 0,0 18,19V7H6V19Z" />
</svg>
`
constructor(){
super();
@ -101,12 +101,22 @@ class CCPInputWidgetEditorController extends HTMLElement{
<div name="input-default" class="mb-3">
<div class="form-field" title="Default value">
<input value="${this.#input.schema.default}" name="default" class="form-control" placeholder="default"/>
<span style="user-select:none;position:relative;top:-1.6rem;left:95%;cursor:pointer" name="password_toggle" class="d-none">&#128065;</span>
</div>
</div>
</div>
</details>
`
this.addEventListener("click", ev=>{
const ename = ev.target.getAttribute("name")
if(ename === "password_toggle"){
const w = this.querySelector("div[name=input-default] input[name=default]")
w.type = (w.type === "password" ? "" : "password")
ev.preventDefault()
}
})
this.addEventListener("input", ev=>{
const val = ev.target.value
const ename = ev.target.getAttribute("name")
@ -127,8 +137,17 @@ class CCPInputWidgetEditorController extends HTMLElement{
}
else if(ename === "format"){
this.#input.schema.format = val
this.querySelector("div[name=input-default] span[name=password_toggle]").classList.add("d-none")
this.querySelector("div[name=input-default] input[name=default]").type = ""
if(this.#input.schema.format === "secret"){
this.querySelector("div[name=input-default] input[name=default]").type = "password"
this.querySelector("div[name=input-default] span[name=password_toggle]").classList.remove("d-none")
}else if(this.#input.schema.format === "date"){
this.querySelector("div[name=input-default] input[name=default]").type = "date"
}else if(this.#input.schema.format === "time"){
this.querySelector("div[name=input-default] input[name=default]").type = "time"
}else if(this.#input.schema.format === "dateTime"){
this.querySelector("div[name=input-default] input[name=default]").type = "dateTime"
}
}
else if(ename === "contentMediaType"){