gaugendre/mobileconfig-generator
1
0
Fork 0
Code Issues Pull requests Releases Activity

Rework form to improve accessibility

Browse source 
Close #1
Close #2
This commit is contained in:
Gabriel Augendre 2021-06-19 17:47:10 +02:00
parent 42efefb95d
commit 84046a3077
2 changed files with 128 additions and 95 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
css/main.css
View file

@ -9,12 +9,3 @@ body {
color: var(--main-color); color: var(--main-color);
background-color: var(--background-color); background-color: var(--background-color);
} }
#profile {
white-space: pre-wrap;
color: var(--light-color);
}
#profile strong {
color: var(--main-color);
}

212
index.html
View file

@ -25,95 +25,137 @@
<a href="https://git.augendre.info/gaugendre/mobileconfig-generator">here</a>. <a href="https://git.augendre.info/gaugendre/mobileconfig-generator">here</a>.
</p> </p>
<div id="profile"> <div id="profile">
&lt;?xml version="1.0" encoding="UTF-8"?&gt; <h2>Account</h2>
&lt;!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd"&gt; <div class="form-row">
&lt;plist version='1.0'&gt; <label for="account-type">Email account type</label>
&lt;dict&gt; <select id="account-type" v-model="payload.EmailAccountType">
&lt;key&gt;PayloadContent&lt;/key&gt; <option value="" disabled>Select...</option>
&lt;array&gt; <option value="EmailTypeIMAP">IMAP</option>
&lt;dict&gt; <option value="EmailTypePOP">POP</option>
&lt;key&gt;<strong>EmailAccountType</strong>&lt;/key&gt; </select>
&lt;string&gt;<select v-model="payload.EmailAccountType"> </div>
<option value="" disabled>Select...</option> <div class="form-row">
<option>EmailTypeIMAP</option> <label for="email-address">Email address</label>
<option>EmailTypePOP</option> <input id="email-address" type="email" v-model="payload.EmailAddress" v-bind:placeholder="payloadPlaceholders.EmailAddress">
</select>&lt;/string&gt; </div>
&lt;key&gt;<strong>EmailAddress</strong>&lt;/key&gt; <div class="form-row">
&lt;string&gt;<input type="email" v-model="payload.EmailAddress" v-bind:placeholder="payloadPlaceholders.EmailAddress">&lt;/string&gt; <label for="account-description">Account description</label>
&lt;key&gt;<strong>EmailAccountDescription</strong>&lt;/key&gt; <input id="account-description" type="text" v-model="payload.EmailAccountDescription" v-bind:placeholder="payloadPlaceholders.EmailAccountDescription">
&lt;string&gt;<input type="text" v-model="payload.EmailAccountDescription" v-bind:placeholder="payloadPlaceholders.EmailAccountDescription">&lt;/string&gt; </div>
&lt;!-- Incoming --&gt; <h2>Incoming mail server config</h2>
&lt;key&gt;<strong>IncomingMailServerAuthentication</strong>&lt;/key&gt; <div class="form-row">
&lt;string&gt;<select v-model="payload.IncomingMailServerAuthentication"> <label for="inc-auth">Incoming mail server authentication</label>
<option value="" disabled>Select...</option> <select id="inc-auth" v-model="payload.IncomingMailServerAuthentication">
<option>EmailAuthNone</option> <option value="" disabled>Select...</option>
<option>EmailAuthPassword</option> <option value="EmailAuthNone">None</option>
<option>EmailAuthCRAMMD5</option> <option value="EmailAuthPassword">Password</option>
<option>EmailAuthNTLM</option> <option value="EmailAuthCRAMMD5">CRAM MD5</option>
<option>EmailAuthHTTPMD5</option> <option value="EmailAuthNTLM">NTLM</option>
</select>&lt;/string&gt; <option value="EmailAuthHTTPMD5">HTTP MD5</option>
&lt;key&gt;<strong>IncomingMailServerHostName</strong>&lt;/key&gt; </select>
&lt;string&gt;<input type="text" v-model="payload.IncomingMailServerHostName" v-bind:placeholder="payloadPlaceholders.IncomingMailServerHostName">&lt;/string&gt; </div>
&lt;key&gt;<strong>IncomingMailServerPortNumber</strong>&lt;/key&gt; <div class="form-row">
&lt;integer&gt;<input type="number" v-model="payload.IncomingMailServerPortNumber" v-bind:placeholder="payloadPlaceholders.IncomingMailServerPortNumber">&lt;/integer&gt; <label for="inc-host">Incoming mail server host</label>
&lt;key&gt;<strong>IncomingMailServerUsername</strong>&lt;/key&gt; <input id="inc-host" type="text" v-model="payload.IncomingMailServerHostName" v-bind:placeholder="payloadPlaceholders.IncomingMailServerHostName">
&lt;string&gt;<input type="text" v-model="payload.IncomingMailServerUsername" v-bind:placeholder="payloadPlaceholders.IncomingMailServerUsername">&lt;/string&gt; </div>
&lt;key&gt;<strong>IncomingMailServerUseSSL</strong>&lt;/key&gt; <div class="form-row">
&lt;<input type="checkbox" v-model="payload.IncomingMailServerUseSSL">/&gt; <label for="inc-port">Incoming mail server port</label>
<input id="inc-port" type="number" v-model="payload.IncomingMailServerPortNumber" v-bind:placeholder="payloadPlaceholders.IncomingMailServerPortNumber">
</div>
<div class="form-row">
<label for="inc-username">Incoming mail server username</label>
<input id="inc-username" type="text" v-model="payload.IncomingMailServerUsername" v-bind:placeholder="payloadPlaceholders.IncomingMailServerUsername">
</div>
<div class="form-row">
<label for="inc-ssl">Incoming mail server use SSL</label>
<input id="inc-ssl" type="checkbox" v-model="payload.IncomingMailServerUseSSL">
</div>
&lt;!-- Outgoing --&gt; <h2>Outgoing mail server config</h2>
&lt;key&gt;<strong>OutgoingMailServerAuthentication</strong>&lt;/key&gt; <div class="form-row">
&lt;string&gt;<select v-model="payload.OutgoingMailServerAuthentication"> <label for="out-auth">Outgoing mail server authentication</label>
<option value="" disabled>Select...</option> <select id="out-auth" v-model="payload.OutgoingMailServerAuthentication">
<option>EmailAuthNone</option> <option value="" disabled>Select...</option>
<option>EmailAuthPassword</option> <option value="EmailAuthNone">None</option>
<option>EmailAuthCRAMMD5</option> <option value="EmailAuthPassword">Password</option>
<option>EmailAuthNTLM</option> <option value="EmailAuthCRAMMD5">CRAM MD5</option>
<option>EmailAuthHTTPMD5</option> <option value="EmailAuthNTLM">NTLM</option>
</select>&lt;/string&gt; <option value="EmailAuthHTTPMD5">HTTP MD5</option>
&lt;key&gt;<strong>OutgoingMailServerHostName</strong>&lt;/key&gt; </select>
&lt;string&gt;<input type="text" v-model="payload.OutgoingMailServerHostName" v-bind:placeholder="payloadPlaceholders.OutgoingMailServerHostName">&lt;/string&gt; </div>
&lt;key&gt;<strong>OutgoingMailServerPortNumber</strong>&lt;/key&gt; <div class="form-row">
&lt;integer&gt;<input type="number" v-model="payload.OutgoingMailServerPortNumber" v-bind:placeholder="payloadPlaceholders.OutgoingMailServerPortNumber">&lt;/integer&gt; <label for="out-host">Outgoing mail server host</label>
&lt;key&gt;<strong>OutgoingMailServerUsername</strong>&lt;/key&gt; <input id="out-host" type="text" v-model="payload.OutgoingMailServerHostName" v-bind:placeholder="payloadPlaceholders.OutgoingMailServerHostName">
&lt;string&gt;<input type="text" v-model="payload.OutgoingMailServerUsername" v-bind:placeholder="payloadPlaceholders.OutgoingMailServerUsername">&lt;/string&gt; </div>
&lt;key&gt;<strong>OutgoingMailServerUseSSL</strong>&lt;/key&gt; <div class="form-row">
&lt;<input type="checkbox" v-model="payload.OutgoingMailServerUseSSL">/&gt; <label for="out-port">Outgoing mail server port</label>
&lt;key&gt;<strong>OutgoingPasswordSameAsIncomingPassword</strong>&lt;/key&gt; <input id="out-port" type="number" v-model="payload.OutgoingMailServerPortNumber" v-bind:placeholder="payloadPlaceholders.OutgoingMailServerPortNumber">
&lt;<input type="checkbox" v-model="payload.OutgoingPasswordSameAsIncomingPassword">/&gt; </div>
<div class="form-row">
<label for="out-username">Outgoing mail server username</label>
<input id="out-username" type="text" v-model="payload.OutgoingMailServerUsername" v-bind:placeholder="payloadPlaceholders.OutgoingMailServerUsername">
</div>
<div class="form-row">
<label for="out-ssl">Outgoing mail server use SSL</label>
<input id="out-ssl" type="checkbox" v-model="payload.OutgoingMailServerUseSSL">
</div>
<div class="form-row">
<label for="out-same-as-inc">Outgoing mail server password same as incoming</label>
<input id="out-same-as-inc" type="checkbox" v-model="payload.OutgoingPasswordSameAsIncomingPassword">
</div>
&lt;!-- Common keys --&gt; <h2>Inner common keys</h2>
&lt;key&gt;<strong>PayloadDisplayName</strong>&lt;/key&gt; <div class="form-row">
&lt;string&gt;<input type="text" v-model="payload.PayloadDisplayName" v-bind:placeholder="payloadPlaceholders.PayloadDisplayName">&lt;/string&gt; <label for="top-display">Payload display name</label>
&lt;key&gt;<strong>PayloadDescription</strong>&lt;/key&gt; <input id="inner-display" type="text" v-model="payload.PayloadDisplayName" v-bind:placeholder="payloadPlaceholders.PayloadDisplayName">
&lt;string&gt;<input type="text" v-model="payload.PayloadDescription" v-bind:placeholder="payloadPlaceholders.PayloadDescription">&lt;/string&gt; </div>
&lt;key&gt;<strong>PayloadIdentifier</strong>&lt;/key&gt; <div class="form-row">
&lt;string&gt;<input type="text" v-model="payload.PayloadIdentifier" v-bind:placeholder="payloadPlaceholders.PayloadIdentifier">&lt;/string&gt; <label for="inner-desc">Payload description</label>
&lt;key&gt;<strong>PayloadType</strong>&lt;/key&gt; <input id="inner-desc" type="text" v-model="payload.PayloadDescription" v-bind:placeholder="payloadPlaceholders.PayloadDescription">
&lt;string&gt;{{ payload.PayloadType }}&lt;/string&gt; </div>
&lt;key&gt;<strong>PayloadUUID</strong>&lt;/key&gt; <div class="form-row">
&lt;string&gt;{{ payload.PayloadUUID() }}&lt;/string&gt; <label for="inner-id">Payload identifier</label>
&lt;key&gt;<strong>PayloadVersion</strong>&lt;/key&gt; <input id="inner-id" type="text" v-model="payload.PayloadIdentifier" v-bind:placeholder="payloadPlaceholders.PayloadIdentifier">
&lt;integer&gt;{{ payload.PayloadVersion }}&lt;/integer&gt; </div>
&lt;/dict&gt; <div class="form-row">
&lt;/array&gt; <label for="inner-type">Payload type</label>
<span id="inner-type">{{ payload.PayloadType }}</span>
</div>
<div class="form-row">
<label for="inner-uuid">Payload UUID</label>
<span id="inner-uuid">{{ payload.PayloadUUID() }}</span>
</div>
<div class="form-row">
<label for="inner-version">Payload version</label>
<span id="inner-version">{{ payload.PayloadVersion }}</span>
</div>
&lt;!-- Common keys --&gt; <h2>Top level common keys</h2>
&lt;key&gt;<strong>PayloadDisplayName</strong>&lt;/key&gt; <div class="form-row">
&lt;string&gt;<input type="text" v-model="container.PayloadDisplayName" v-bind:placeholder="containerPlaceholders.PayloadDisplayName">&lt;/string&gt; <label for="top-display">Payload display name</label>
&lt;key&gt;<strong>PayloadDescription</strong>&lt;/key&gt; <input id="top-display" type="text" v-model="container.PayloadDisplayName" v-bind:placeholder="containerPlaceholders.PayloadDisplayName">
&lt;string&gt;<input type="text" v-model="container.PayloadDescription" v-bind:placeholder="containerPlaceholders.PayloadDescription">&lt;/string&gt; </div>
&lt;key&gt;<strong>PayloadIdentifier</strong>&lt;/key&gt; <div class="form-row">
&lt;string&gt;<input type="text" v-model="container.PayloadIdentifier" v-bind:placeholder="containerPlaceholders.PayloadIdentifier">&lt;/string&gt; <label for="top-desc">Payload description</label>
&lt;key&gt;<strong>PayloadType</strong>&lt;/key&gt; <input id="top-desc" type="text" v-model="container.PayloadDescription" v-bind:placeholder="containerPlaceholders.PayloadDescription">
&lt;string&gt;{{ container.PayloadType }}&lt;/string&gt; </div>
&lt;key&gt;<strong>PayloadUUID</strong>&lt;/key&gt; <div class="form-row">
&lt;string&gt;{{ container.PayloadUUID() }}&lt;/string&gt; <label for="top-id">Payload identifier</label>
&lt;key&gt;<strong>PayloadVersion</strong>&lt;/key&gt; <input id="top-id" type="text" v-model="container.PayloadIdentifier" v-bind:placeholder="containerPlaceholders.PayloadIdentifier">
&lt;integer&gt;{{ container.PayloadVersion }}&lt;/integer&gt; </div>
&lt;/dict&gt; <div class="form-row">
&lt;/plist&gt; <label for="top-type">Payload type</label>
<span id="top-type">{{ container.PayloadType }}</span>
</div>
<div class="form-row">
<label for="top-uuid">Payload UUID</label>
<span id="top-uuid">{{ container.PayloadUUID() }}</span>
</div>
<div class="form-row">
<label for="top-version">Payload version</label>
<span id="top-version">{{ container.PayloadVersion }}</span>
</div>
</div> </div>
<h1>2. Download your profile</h1> <h1>2. Download your profile</h1>