fixup! Add tabs to the setup/settings screen

Signed-off-by: Christoph Wurst <christoph@winzerhof-wurst.at>

src/components/AccountForm.vue

 <template>
 	<div id="account-form">
-		<form method="post" v-on:submit.prevent.stop="onSubmit">
 		<tabs :options="{ useUrlFragment: false }">
 			<tab :name="t('mail', 'Auto')"
 				 key="auto">
+				<label for="auto-name">
+					{{ t('mail', 'Name') }}
+				</label>
 				<input type="text"
-						   ref="accountName"
-						   name="account-name"
+					   id="auto-name"
 					   :placeholder="t('mail', 'Name')"
-						   v-model="config.accountName"
+					   v-model="autoConfig.accountName"
 					   autofocus/>
+				<label for="auto-address">
+					{{ t('mail', 'Mail Address') }}
+				</label>
 				<input type="email"
-						   ref="mailAddress"
-						   name="mail-address"
+					   id="auto-address"
 					   :placeholder="t('mail', 'Mail Address')"
-						   v-model="config.emailAddress"
+					   v-model="autoConfig.emailAddress"
 					   required/>
+				<label for="auto-password">
+					{{ t('mail', 'Password') }}
+				</label>
 				<input type="password"
-						   name="mail-password"
-						   ref="mailPassword"
+					   id="auto-password"
 					   :placeholder="t('mail', 'Password')"
-						   v-model="config.password"
+					   v-model="autoConfig.password"
 					   required/>
 			</tab>
 			<tab :name="t('mail', 'Manual')"
 				 key="manual">
+				<label for="man-name">
+					{{ t('mail', 'Name') }}
+				</label>
 				<input type="text"
-						   name="imap-host"
-						   ref="imapHost"
+					   id="man-name"
+					   :placeholder="t('mail', 'Name')"
+					   v-model="manualConfig.accountName"
+					   autofocus/>
+				<label for="man-address">
+					{{ t('mail', 'Mail Address') }}
+				</label>
+				<input type="email"
+					   id="man-address"
+					   :placeholder="t('mail', 'Mail Address')"
+					   v-model="manualConfig.emailAddress"
+					   required/>
+
+				<h3>{{ t('mail', 'IMAP Settings') }}</h3>
+				<label for="man-imap-host">
+					{{ t('mail', 'IMAP Host') }}
+				</label>
+				<input type="text"
+					   id="man-imap-host"
 					   :placeholder="t('mail', 'IMAP Host')"
-						   v-model="config.imapHost"/>
-					<select id="setup-imap-ssl-mode"
-							v-model="config.imapSslMode"
-							ref="imapSslMode"
-							name="imap-sslmode"
-							:title="t('mail', 'IMAP security')"
-							v-on:change="onImapSslModeChange">
-						<option value="none">{{ t('mail', 'None') }}
-						</option>
-						<option value="ssl">{{ t('mail', 'SSL/TLS') }}
-						</option>
-						<option value="tls">{{ t('mail', 'STARTTLS') }}
-						</option>
-					</select>
+					   v-model="manualConfig.imapHost"/>
+				<h4>{{ t('mail', 'IMAP Security') }}</h4>
+				<div class="flex-row">
+					<label class="button"
+						   :class="{primary: manualConfig.imapSslMode === 'none' }">
+						<input type="radio"
+							   name="man-imap-sec"
+							   v-model="manualConfig.imapSslMode"
+							   value="none">
+						{{ t('mail', 'None') }}
+					</label>
+					<label class="button"
+						   :class="{primary: manualConfig.imapSslMode === 'ssl' }">
+						<input type="radio"
+							   name="man-imap-sec"
+							   v-model="manualConfig.imapSslMode"
+							   value="ssl">
+						{{ t('mail', 'SSL/TLS') }}
+					</label>
+					<label class="button"
+						   :class="{primary: manualConfig.imapSslMode === 'tls' }">
+						<input type="radio"
+							   name="man-imap-sec"
+							   v-model="manualConfig.imapSslMode"
+							   value="tls">
+						{{ t('mail', 'STARTTLS') }}
+					</label>
+				</div>
 				<input type="number"
 					   ref="imapPort"
 					   name="imap-port"
 					   :placeholder="t('mail', 'IMAP Port')"
-						   v-model="config.imapPort"/>
+					   v-model="manualConfig.imapPort"/>
 				<input type="text"
 					   ref="imapUser"
 					   name="imap-user"
 					   :placeholder="t('mail', 'IMAP User')"
-						   v-model="config.imapUser"/>
+					   v-model="manualConfig.imapUser"/>
 				<input type="password"
 					   ref="imapPassword"
 					   name="imap-password"
 					   :placeholder="t('mail', 'IMAP Password')"
-						   v-model="config.imapPassword"
+					   v-model="manualConfig.imapPassword"
 					   required/>
+
+				<h3>{{ t('mail', 'SMTP Settings') }}</h3>
 				<input type="text"
 					   ref="smtpHost"
 					   name="smtp-host"
 					   :placeholder="t('mail', 'SMTP Host')"
-						   v-model="config.smtpHost"/>
-					<select id="setup-smtp-ssl-mode"
-							v-model="config.smtpSslMode"
-							ref="smtpSslMode"
-							name="mail-smtp-sslmode"
-							:title="t('mail', 'SMTP security')"
-							v-on:change="onSmtpSslModeChange">
-						<option value="none">{{ t('mail', 'None') }}
-						</option>
-						<option value="ssl">{{ t('mail', 'SSL/TLS') }}
-						</option>
-						<option value="tls">{{ t('mail', 'STARTTLS') }}
-						</option>
-					</select>
+					   v-model="manualConfig.smtpHost"/>
+				<div class="flex-row">
+					<label class="button"
+						   :class="{primary: manualConfig.smtpSslMode === 'none' }">
+						<input type="radio"
+							   name="man-smtp-sec"
+							   v-model="manualConfig.smtpSslMode"
+							   value="none">
+						{{ t('mail', 'None') }}
+					</label>
+					<label class="button"
+						   :class="{primary: manualConfig.smtpSslMode === 'ssl' }">
+						<input type="radio"
+							   name="man-smtp-sec"
+							   v-model="manualConfig.smtpSslMode"
+							   value="ssl">
+						{{ t('mail', 'SSL/TLS') }}
+					</label>
+					<label class="button"
+						   :class="{primary: manualConfig.smtpSslMode === 'tls' }">
+						<input type="radio"
+							   name="man-smtp-sec"
+							   v-model="manualConfig.smtpSslMode"
+							   value="tls">
+						{{ t('mail', 'STARTTLS') }}
+					</label>
+				</div>
 				<input type="number"
 					   ref="smtpPort"
 					   name="smtp-port"
 					   :placeholder="t('mail', 'SMTP Port')"
-						   v-model="config.smtpPort"/>
+					   v-model="manualConfig.smtpPort"/>
 				<input type="text"
 					   ref="smtpUser"
 					   name="smtp-user"
 					   :placeholder="t('mail', 'SMTP User')"
-						   v-model="config.smtpUser"/>
+					   v-model="manualConfig.smtpUser"/>
 				<input type="password"
 					   ref="smtpPassword"
 					   name="smtp-password"
 					   :placeholder="t('mail', 'SMTP Password')"
-						   v-model="config.smtpPassword"
+					   v-model="manualConfig.smtpPassword"
 					   required/>
 			</tab>
 		</tabs>
@@ -99,7 +153,6 @@
 			   ref="submitButton"
 			   class="primary"
 			   :value="t('mail', 'Connect')"/>
-		</form>
 	</div>
 </template>
 
@@ -118,10 +171,14 @@
 		data () {
 			return {
 				firstToggle: true,
-				config: {
+				autoConfig: {
 					accountName: $('#user-displayname').text() || '',
 					emailAddress: $('#user-email').text() || '',
 					password: '',
+				},
+				manualConfig: {
+					accountName: $('#user-displayname').text() || '',
+					emailAddress: $('#user-email').text() || '',
 					accountName: '',
 					autoDetect: true,
 					imapHost: '',
@@ -256,15 +313,39 @@
 	.tabs-component-tabs {
 		display: flex;
 	}
+
 	.tabs-component-tab {
 		flex-grow: 1;
 		color: var(--color-text-lighter);
 		font-weight: bold;
 	}
+
 	.tabs-component-tab.is-active {
 		border-bottom: 1px solid black;
 	}
+
 	.tabs-component-panels {
 		padding-top: 20px;
 	}
+
+	.tabs-component-panels label {
+		text-align: left;
+		width: 100%;
+		display: inline-block;
+	}
+	.tabs-component-panels input,
+	.tabs-component-panels select {
+		margin-bottom: 10px;
+	}
+
+	.flex-row {
+		display: flex;
+	}
+	label.button {
+		display: inline-block;
+		flex-grow: 1;
+	}
+	label input[type="radio"] {
+		display: none;
+	}
 </style>
\ No newline at end of file

src/views/Setup.vue

@@ -20,3 +20,9 @@
 		}
 	}
 </script>
+
+<style>
+	#emptycontent {
+		margin-top: 10vh;
+	}
+</style>
\ No newline at end of file