(Grav GitSync) Automatic Commit from GitSync
This commit is contained in:
GitSync
@@ -0,0 +1,174 @@
|
||||
/**
|
||||
* Git Sync — enc-password custom field for admin-next.
|
||||
*
|
||||
* The plugin's git-sync/data endpoint never returns the stored password to
|
||||
* the client (it's encrypted at rest and only the boolean `password_stored`
|
||||
* flag is sent back). The field renders a normal password input whose
|
||||
* placeholder reflects whether a password is on file:
|
||||
*
|
||||
* - empty + nothing stored → "Your Git Password or Token"
|
||||
* - empty + stored encrypted → "Your password is securely stored."
|
||||
* - empty + stored unencrypted → "Your password is stored but not encrypted."
|
||||
*
|
||||
* Submitting an empty value tells the server "keep what's already there";
|
||||
* any non-empty value replaces and re-encrypts.
|
||||
*/
|
||||
const TAG = window.__GRAV_FIELD_TAG;
|
||||
|
||||
class EncPasswordField extends HTMLElement {
|
||||
constructor() {
|
||||
super();
|
||||
this.attachShadow({ mode: 'open' });
|
||||
this._field = null;
|
||||
this._value = '';
|
||||
this._show = false;
|
||||
this._stored = false;
|
||||
this._encrypted = false;
|
||||
}
|
||||
|
||||
set field(v) {
|
||||
this._field = v || {};
|
||||
// Server annotates the resolved blueprint with the current
|
||||
// password storage state (see onApiBlueprintResolved in git-sync.php).
|
||||
this._stored = !!(this._field.password_stored);
|
||||
this._encrypted = !!(this._field.password_encrypted);
|
||||
this._render();
|
||||
}
|
||||
get field() { return this._field; }
|
||||
|
||||
set value(v) {
|
||||
const next = (v == null) ? '' : String(v);
|
||||
if (next !== this._value) {
|
||||
this._value = next;
|
||||
// Re-render only if we haven't already mounted, to avoid stomping
|
||||
// on the user's in-flight typing.
|
||||
const input = this.shadowRoot.querySelector('input');
|
||||
if (!input) this._render();
|
||||
}
|
||||
}
|
||||
get value() { return this._value; }
|
||||
|
||||
connectedCallback() {
|
||||
this._render();
|
||||
}
|
||||
|
||||
_placeholder() {
|
||||
if (this._value) return this._field.placeholder || '';
|
||||
if (this._stored && this._encrypted) return 'Your password is securely stored.';
|
||||
if (this._stored && !this._encrypted) return 'Your password is stored but not encrypted.';
|
||||
return this._field.placeholder || 'Your Git Password or Token';
|
||||
}
|
||||
|
||||
_onInput(e) {
|
||||
this._value = e.target.value;
|
||||
this.dispatchEvent(new CustomEvent('change', {
|
||||
detail: this._value,
|
||||
bubbles: true,
|
||||
}));
|
||||
}
|
||||
|
||||
_toggleVisibility() {
|
||||
this._show = !this._show;
|
||||
const input = this.shadowRoot.querySelector('input');
|
||||
const btn = this.shadowRoot.querySelector('.toggle');
|
||||
if (input) input.type = this._show ? 'text' : 'password';
|
||||
if (btn) btn.setAttribute('aria-pressed', String(this._show));
|
||||
if (btn) btn.innerHTML = this._show ? this._eyeOff() : this._eye();
|
||||
}
|
||||
|
||||
_eye() {
|
||||
return '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7z"/><circle cx="12" cy="12" r="3"/></svg>';
|
||||
}
|
||||
_eyeOff() {
|
||||
return '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17.94 17.94A10.94 10.94 0 0 1 12 19c-7 0-10-7-10-7a17.36 17.36 0 0 1 4.06-5.94"/><path d="M9.9 4.24A10.94 10.94 0 0 1 12 4c7 0 10 7 10 7a17.36 17.36 0 0 1-3.17 4.55"/><line x1="2" y1="2" x2="22" y2="22"/></svg>';
|
||||
}
|
||||
|
||||
_render() {
|
||||
const placeholder = this._placeholder();
|
||||
const value = this._value;
|
||||
const autocomplete = (this._field && this._field.autocomplete) || 'new-password';
|
||||
|
||||
this.shadowRoot.innerHTML = `
|
||||
<style>
|
||||
:host { display: block; font-family: inherit; }
|
||||
.wrap {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
width: 100%;
|
||||
height: 2.5rem;
|
||||
border: 1px solid var(--input, var(--border));
|
||||
background: color-mix(in srgb, var(--muted) 50%, transparent);
|
||||
border-radius: 0.5rem;
|
||||
transition: box-shadow 120ms ease, border-color 120ms ease;
|
||||
}
|
||||
.wrap:focus-within {
|
||||
outline: none;
|
||||
box-shadow: 0 0 0 1px var(--ring);
|
||||
border-color: var(--ring);
|
||||
}
|
||||
input {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
height: 100%;
|
||||
padding: 0.5rem 0.75rem;
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.25rem;
|
||||
color: var(--foreground);
|
||||
background: transparent;
|
||||
border: 0;
|
||||
border-radius: 0.5rem 0 0 0.5rem;
|
||||
box-sizing: border-box;
|
||||
font-family: inherit;
|
||||
}
|
||||
input:focus { outline: none; }
|
||||
input::placeholder {
|
||||
color: var(--muted-foreground);
|
||||
opacity: 1;
|
||||
}
|
||||
.toggle {
|
||||
flex: 0 0 auto;
|
||||
width: 2.25rem;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: transparent;
|
||||
border: 0;
|
||||
color: var(--muted-foreground);
|
||||
cursor: pointer;
|
||||
border-radius: 0 0.5rem 0.5rem 0;
|
||||
padding: 0;
|
||||
font: inherit;
|
||||
}
|
||||
.toggle:hover {
|
||||
color: var(--foreground);
|
||||
background: color-mix(in srgb, var(--accent) 60%, transparent);
|
||||
}
|
||||
.stored-hint {
|
||||
margin-top: 0.375rem;
|
||||
font-size: 0.75rem;
|
||||
color: #b45309;
|
||||
}
|
||||
</style>
|
||||
<div class="wrap">
|
||||
<input
|
||||
type="password"
|
||||
autocomplete="${autocomplete}"
|
||||
placeholder="${placeholder.replace(/"/g, '"')}"
|
||||
value="${value.replace(/"/g, '"')}"
|
||||
/>
|
||||
<button type="button" class="toggle" aria-label="Show password" aria-pressed="false" tabindex="-1">
|
||||
${this._eye()}
|
||||
</button>
|
||||
</div>
|
||||
${this._stored && !this._encrypted ? '<div class="stored-hint">Existing password is stored unencrypted — saving the form will encrypt it.</div>' : ''}
|
||||
`;
|
||||
|
||||
const input = this.shadowRoot.querySelector('input');
|
||||
input.addEventListener('input', (e) => this._onInput(e));
|
||||
const toggle = this.shadowRoot.querySelector('.toggle');
|
||||
toggle.addEventListener('click', () => this._toggleVisibility());
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define(TAG, EncPasswordField);
|
||||
Reference in New Issue
Block a user