fix: footer would overlap reset password boxes

frontend/src/App.vue

@@ -1547,6 +1547,10 @@ h4.section-title {
 	margin: 5px 0;
 }
 
+.steps-fade-leave-active {
+	display: none;
+}
+
 .steps-fade-enter-active,
 .steps-fade-leave-active {
 	transition: all 0.3s ease;
@@ -1603,25 +1607,19 @@ h4.section-title {
 
 /* This class is used for content-box in ResetPassword, but not in RemoveAccount. This is because ResetPassword uses transitions and RemoveAccount does not */
 .content-box-wrapper {
-	position: relative;
+	margin-top: 90px;
 	width: 100%;
 	display: flex;
-	flex-direction: column;
 	align-items: center;
-	min-height: 200px;
-
-	.content-box {
-		position: absolute;
-	}
 }
 
 .content-box {
-	margin-top: 90px;
 	border-radius: 3px;
 	background-color: var(--white);
 	border: 1px solid var(--dark-grey);
 	max-width: 580px;
 	padding: 40px;
+	flex: 1;
 
 	@media screen and (max-width: 300px) {
 		margin-top: 30px;

frontend/src/pages/ResetPassword.vue

@@ -19,253 +19,276 @@
 				</div>
 
 				<div class="content-box-wrapper">
-					<transition-group name="steps-fade" mode="out-in">
-						<!-- Step 1 -- Enter email address -->
-						<div class="content-box" v-if="step === 1" key="1">
-							<h2 class="content-box-title">
-								Enter your email address
-							</h2>
-							<p class="content-box-description">
-								We will send a code to your email address to
-								verify your identity.
-							</p>
-
-							<p class="content-box-optional-helper">
-								<a @click="step = 2">Already have a code?</a>
-							</p>
-
-							<div class="content-box-inputs">
-								<div
-									class="control is-grouped input-with-button"
-								>
-									<p class="control is-expanded">
-										<input
-											class="input"
-											type="email"
-											placeholder="Enter email address here..."
-											autofocus
-											v-model="email.value"
-											@keyup.enter="submitEmail()"
-											@keypress="onInput('email')"
-											@paste="onInput('email')"
-										/>
-									</p>
-									<p class="control">
-										<button
-											class="button is-info"
-											@click="submitEmail()"
-										>
-											<i
-												class="
-													material-icons
-													icon-with-button
-												"
-												>mail</i
-											>Request
-										</button>
-									</p>
-								</div>
-								<transition name="fadein-helpbox">
-									<input-help-box
-										:entered="email.entered"
-										:valid="email.valid"
-										:message="email.message"
-									/>
-								</transition>
-							</div>
-						</div>
+					<transition-group
+						name="steps-fade"
+						mode="out-in"
+					>
+						<div class="content-box">
+							<!-- Step 1 -- Enter email address -->
+							<div v-if="step === 1" key="1">
+								<h2 class="content-box-title">
+									Enter your email address
+								</h2>
+								<p class="content-box-description">
+									We will send a code to your email address to
+									verify your identity.
+								</p>
 
-						<!-- Step 2 -- Enter code -->
-						<div class="content-box" v-if="step === 2" key="2">
-							<h2 class="content-box-title">
-								Enter the code sent to your email
-							</h2>
-							<p
-								class="content-box-description"
-								v-if="!email.hasBeenSentAlready"
-							>
-								A code has been sent to
-								<strong>{{ email.value }}.</strong>
-							</p>
-
-							<p class="content-box-optional-helper">
-								<a
-									@click="
-										email.value ? submitEmail() : (step = 1)
-									"
-									>Request another code</a
-								>
-							</p>
+								<p class="content-box-optional-helper">
+									<a @click="step = 2"
+										>Already have a code?</a
+									>
+								</p>
 
-							<div class="content-box-inputs">
-								<div
-									class="control is-grouped input-with-button"
-								>
-									<p class="control is-expanded">
-										<input
-											class="input"
-											type="text"
-											placeholder="Enter code here..."
-											autofocus
-											v-model="code"
-											@keyup.enter="verifyCode()"
+								<div class="content-box-inputs">
+									<div
+										class="
+											control
+											is-grouped
+											input-with-button
+										"
+									>
+										<p class="control is-expanded">
+											<input
+												class="input"
+												type="email"
+												placeholder="Enter email address here..."
+												autofocus
+												v-model="email.value"
+												@keyup.enter="submitEmail()"
+												@keypress="onInput('email')"
+												@paste="onInput('email')"
+											/>
+										</p>
+										<p class="control">
+											<button
+												class="button is-info"
+												@click="submitEmail()"
+											>
+												<i
+													class="
+														material-icons
+														icon-with-button
+													"
+													>mail</i
+												>Request
+											</button>
+										</p>
+									</div>
+									<transition name="fadein-helpbox">
+										<input-help-box
+											:entered="email.entered"
+											:valid="email.valid"
+											:message="email.message"
 										/>
-									</p>
-									<p class="control">
-										<button
-											class="button is-info"
-											@click="verifyCode()"
-										>
-											<i
-												class="
-													material-icons
-													icon-with-button
-												"
-												>vpn_key</i
-											>Verify
-										</button>
-									</p>
+									</transition>
 								</div>
 							</div>
-						</div>
 
-						<!-- Step 3 -- Set new password -->
-						<div class="content-box" v-if="step === 3" key="3">
-							<h2 class="content-box-title">
-								Set a new password
-							</h2>
-							<p class="content-box-description">
-								Create a new password for your account.
-							</p>
-
-							<div class="content-box-inputs">
-								<p class="control is-expanded">
-									<label for="new-password"
-										>New password</label
-									>
+							<!-- Step 2 -- Enter code -->
+							<div v-if="step === 2" key="2">
+								<h2 class="content-box-title">
+									Enter the code sent to your email
+								</h2>
+								<p
+									class="content-box-description"
+									v-if="!email.hasBeenSentAlready"
+								>
+									A code has been sent to
+									<strong>{{ email.value }}.</strong>
 								</p>
 
-								<div id="password-visibility-container">
-									<input
-										class="input"
-										id="new-password"
-										type="password"
-										ref="password"
-										placeholder="Enter password here..."
-										v-model="password.value"
-										@keypress="onInput('password')"
-										@paste="onInput('password')"
-									/>
+								<p class="content-box-optional-helper">
 									<a
 										@click="
-											togglePasswordVisibility('password')
+											email.value
+												? submitEmail()
+												: (step = 1)
+										"
+										>Request another code</a
+									>
+								</p>
+
+								<div class="content-box-inputs">
+									<div
+										class="
+											control
+											is-grouped
+											input-with-button
 										"
 									>
-										<i class="material-icons">
-											{{
-												!password.visible
-													? "visibility"
-													: "visibility_off"
-											}}
-										</i>
-									</a>
+										<p class="control is-expanded">
+											<input
+												class="input"
+												type="text"
+												placeholder="Enter code here..."
+												autofocus
+												v-model="code"
+												@keyup.enter="verifyCode()"
+											/>
+										</p>
+										<p class="control">
+											<button
+												class="button is-info"
+												@click="verifyCode()"
+											>
+												<i
+													class="
+														material-icons
+														icon-with-button
+													"
+													>vpn_key</i
+												>Verify
+											</button>
+										</p>
+									</div>
 								</div>
+							</div>
 
-								<transition name="fadein-helpbox">
-									<input-help-box
-										:entered="password.entered"
-										:valid="password.valid"
-										:message="password.message"
-									/>
-								</transition>
+							<!-- Step 3 -- Set new password -->
+							<div v-if="step === 3" key="3">
+								<h2 class="content-box-title">
+									Set a new password
+								</h2>
+								<p class="content-box-description">
+									Create a new password for your account.
+								</p>
 
-								<p
-									id="new-password-again-input"
-									class="control is-expanded"
-								>
-									<label for="new-password-again"
-										>New password again</label
+								<div class="content-box-inputs">
+									<p class="control is-expanded">
+										<label for="new-password"
+											>New password</label
+										>
+									</p>
+
+									<div id="password-visibility-container">
+										<input
+											class="input"
+											id="new-password"
+											type="password"
+											ref="password"
+											placeholder="Enter password here..."
+											v-model="password.value"
+											@keypress="onInput('password')"
+											@paste="onInput('password')"
+										/>
+										<a
+											@click="
+												togglePasswordVisibility(
+													'password'
+												)
+											"
+										>
+											<i class="material-icons">
+												{{
+													!password.visible
+														? "visibility"
+														: "visibility_off"
+												}}
+											</i>
+										</a>
+									</div>
+
+									<transition name="fadein-helpbox">
+										<input-help-box
+											:entered="password.entered"
+											:valid="password.valid"
+											:message="password.message"
+										/>
+									</transition>
+
+									<p
+										id="new-password-again-input"
+										class="control is-expanded"
 									>
-								</p>
+										<label for="new-password-again"
+											>New password again</label
+										>
+									</p>
 
-								<div id="password-visibility-container">
-									<input
-										class="input"
-										id="new-password-again"
-										type="password"
-										ref="passwordAgain"
-										placeholder="Enter password here..."
-										v-model="passwordAgain.value"
-										@keyup.enter="changePassword()"
-										@keypress="onInput('passwordAgain')"
-										@paste="onInput('passwordAgain')"
-									/>
-									<a
-										@click="
-											togglePasswordVisibility(
-												'passwordAgain'
-											)
-										"
+									<div id="password-visibility-container">
+										<input
+											class="input"
+											id="new-password-again"
+											type="password"
+											ref="passwordAgain"
+											placeholder="Enter password here..."
+											v-model="passwordAgain.value"
+											@keyup.enter="changePassword()"
+											@keypress="onInput('passwordAgain')"
+											@paste="onInput('passwordAgain')"
+										/>
+										<a
+											@click="
+												togglePasswordVisibility(
+													'passwordAgain'
+												)
+											"
+										>
+											<i class="material-icons">
+												{{
+													!passwordAgain.visible
+														? "visibility"
+														: "visibility_off"
+												}}
+											</i>
+										</a>
+									</div>
+
+									<transition name="fadein-helpbox">
+										<input-help-box
+											:entered="passwordAgain.entered"
+											:valid="passwordAgain.valid"
+											:message="passwordAgain.message"
+										/>
+									</transition>
+
+									<button
+										id="change-password-button"
+										class="button is-success"
+										@click="changePassword()"
 									>
-										<i class="material-icons">
-											{{
-												!passwordAgain.visible
-													? "visibility"
-													: "visibility_off"
-											}}
-										</i>
-									</a>
+										Change password
+									</button>
 								</div>
-
-								<transition name="fadein-helpbox">
-									<input-help-box
-										:entered="passwordAgain.entered"
-										:valid="passwordAgain.valid"
-										:message="passwordAgain.message"
-									/>
-								</transition>
-
-								<button
-									id="change-password-button"
-									class="button is-success"
-									@click="changePassword()"
-								>
-									Change password
-								</button>
 							</div>
-						</div>
 
-						<div
-							class="content-box reset-status-box"
-							v-if="step === 4"
-							key="4"
-						>
-							<i class="material-icons success-icon"
-								>check_circle</i
-							>
-							<h2>Password successfully {{ mode }}</h2>
-							<router-link class="button is-dark" to="/settings"
-								><i class="material-icons icon-with-button"
-									>undo</i
-								>Return to Settings</router-link
+							<div
+								class="reset-status-box"
+								v-if="step === 4"
+								key="4"
 							>
-						</div>
+								<i class="material-icons success-icon"
+									>check_circle</i
+								>
+								<h2>Password successfully {{ mode }}</h2>
+								<router-link
+									class="button is-dark"
+									to="/settings"
+									><i class="material-icons icon-with-button"
+										>undo</i
+									>Return to Settings</router-link
+								>
+							</div>
 
-						<div
-							class="content-box reset-status-box"
-							v-if="step === 5"
-							key="5"
-						>
-							<i class="material-icons error-icon">error</i>
-							<h2>
-								Password {{ mode }} failed, please try again
-								later
-							</h2>
-							<router-link class="button is-dark" to="/settings"
-								><i class="material-icons icon-with-button"
-									>undo</i
-								>Return to Settings</router-link
+							<div
+								class="reset-status-box"
+								v-if="step === 5"
+								key="5"
 							>
+								<i class="material-icons error-icon">error</i>
+								<h2>
+									Password {{ mode }} failed, please try again
+									later
+								</h2>
+								<router-link
+									class="button is-dark"
+									to="/settings"
+									><i class="material-icons icon-with-button"
+										>undo</i
+									>Return to Settings</router-link
+								>
+							</div>
 						</div>
 					</transition-group>
 				</div>