From a3f0314f6bacf84520ec2ddb6927dec25052ab16 Mon Sep 17 00:00:00 2001
From: Mary Strodl <ipadlover8322@gmail.com>
Date: Tue, 15 Jun 2021 13:52:39 -0400
Subject: [PATCH] NetworkForm: only show proxy options if enabled

---
 client/components/NetworkForm.vue | 116 +++++++++++++++---------------
 1 file changed, 59 insertions(+), 57 deletions(-)

diff --git a/client/components/NetworkForm.vue b/client/components/NetworkForm.vue
index 50757d58..354fe7b4 100644
--- a/client/components/NetworkForm.vue
+++ b/client/components/NetworkForm.vue
@@ -100,63 +100,6 @@
 				</div>
 
 				<h2>Proxy Settings</h2>
-				<div class="connect-row">
-					<label for="connect:proxyHost">SOCKS Address</label>
-					<div class="input-wrap">
-						<input
-							id="connect:proxyHost"
-							v-model="defaults.proxyHost"
-							class="input"
-							name="proxyHost"
-							aria-label="Proxy host"
-							maxlength="255"
-						/>
-						<span id="connect:proxyPortSeparator">:</span>
-						<input
-							id="connect:proxyPort"
-							v-model="defaults.proxyPort"
-							class="input"
-							type="number"
-							min="1"
-							max="65535"
-							name="proxyPort"
-							aria-label="SOCKS port"
-						/>
-					</div>
-				</div>
-
-				<div class="connect-row">
-					<label for="connect:proxyUsername">Proxy username</label>
-					<input
-						id="connect:proxyUsername"
-						ref="proxyUsernameInput"
-						v-model="defaults.proxyUsername"
-						class="input username"
-						name="proxyUsername"
-						maxlength="100"
-						placeholder="Proxy username"
-					/>
-				</div>
-
-				<div class="connect-row">
-					<label for="connect:proxyPassword">Proxy password</label>
-					<RevealPassword
-						v-slot:default="slotProps"
-						class="input-wrap password-container"
-					>
-						<input
-							id="connect:proxyPassword"
-							ref="proxyPassword"
-							v-model="defaults.proxyPassword"
-							class="input"
-							:type="slotProps.isVisible ? 'text' : 'password'"
-							placeholder="Proxy password"
-							name="password"
-							maxlength="300"
-						/>
-					</RevealPassword>
-				</div>
-
 				<div class="connect-row">
 					<label></label>
 					<div class="input-wrap">
@@ -164,12 +107,71 @@
 							<input
 								v-model="defaults.proxyEnabled"
 								type="checkbox"
+								id="connect:proxyEnabled"
 								name="proxyEnabled"
 							/>
 							Enable Proxy
 						</label>
 					</div>
 				</div>
+				<template v-if="defaults.proxyEnabled">
+					<div class="connect-row">
+						<label for="connect:proxyHost">SOCKS Address</label>
+						<div class="input-wrap">
+							<input
+								id="connect:proxyHost"
+								v-model="defaults.proxyHost"
+								class="input"
+								name="proxyHost"
+								aria-label="Proxy host"
+								maxlength="255"
+							/>
+							<span id="connect:proxyPortSeparator">:</span>
+							<input
+								id="connect:proxyPort"
+								v-model="defaults.proxyPort"
+								class="input"
+								type="number"
+								min="1"
+								max="65535"
+								name="proxyPort"
+								aria-label="SOCKS port"
+							/>
+						</div>
+					</div>
+
+					<div class="connect-row">
+						<label for="connect:proxyUsername">Proxy username</label>
+						<input
+							id="connect:proxyUsername"
+							ref="proxyUsernameInput"
+							v-model="defaults.proxyUsername"
+							class="input username"
+							name="proxyUsername"
+							maxlength="100"
+							placeholder="Proxy username"
+						/>
+					</div>
+
+					<div class="connect-row">
+						<label for="connect:proxyPassword">Proxy password</label>
+						<RevealPassword
+							v-slot:default="slotProps"
+							class="input-wrap password-container"
+						>
+							<input
+								id="connect:proxyPassword"
+								ref="proxyPassword"
+								v-model="defaults.proxyPassword"
+								class="input"
+								:type="slotProps.isVisible ? 'text' : 'password'"
+								placeholder="Proxy password"
+								name="password"
+								maxlength="300"
+							/>
+						</RevealPassword>
+					</div>
+				</template>
 			</template>
 			<template v-else-if="config.lockNetwork && !$store.state.serverConfiguration.public">
 				<h2>Network settings</h2>