{% extends "settings.html" %}

{% block pagetitle %}Security Settings - Drama{% endblock %}

{% block content %}



		<div class="row">

			<div class="col col-lg-8">

				<div class="settings">

					<h2 class="h5">Password</h2>

					<p class="text-small text-muted">Change your account password.</p>

					<div class="settings-section rounded">

						<form action="/settings/security" method="post">

							<div class="body">

								<div class="d-lg-flex">

									<label for="new_password" class="mb-0 w-lg-25">New Password</label>

									<input class="form-control w-lg-100" id="new_password"
									aria-describedby="new_password" type="password" name="new_password" autocomplete="off"
									required>
									<small id="passwordHelpChange"
									class="form-text font-weight-bold text-muted d-none mt-1 w-lg-100">Minimum of 8
									characters
									required.</small>
									<small id="passwordHelpChangeSuccess"
									class="form-text font-weight-bold text-success d-none mt-1 w-lg-100">Your password
									meets the
									requirements.
								</small>

							</div>

							<div class="d-lg-flex mt-3">

								<label for="cnf_password" class="mb-0 w-lg-25">Confirm New Password</label>

								<input class="form-control w-lg-100" id="cnf_password"
								aria-describedby="cnf_password" type="password" name="cnf_password" autocomplete="off"
								required>

								<small id="passwordHelpCnf"
								class="form-text font-weight-bold text-muted d-none mt-1 w-lg-100">Passwords do not
								match.</small>
								<small id="passwordHelpCnfSuccess"
								class="form-text font-weight-bold text-success d-none mt-1 w-lg-100">Passwords match.
							</small>

						</div>

						<div class="d-lg-flex mt-5">

							<label for="old_password" class="mb-0 w-lg-25">Old Password</label>

							<input class="form-control mb-2 w-lg-100" id="old_password" autocomplete="off"
							aria-describedby="old_password" type="password" name="old_password"
							required>

						</div>

					</div>

					<div class="footer">

						<input type="hidden" name="formkey" value="{{v.formkey}}">
						<input type="hidden" name="now" value="1563891643">

						<div class="d-flex">

							<input class="btn btn-primary ml-auto"
							type="submit" value="Change Password">

						</div>

					</div>

				</form>

			</div>

			<h2 class="h5">Email</h2>

			<p class="text-small text-muted">Change the email address used to sign in to your account.</p>

			<div class="settings-section rounded">

				<form	action="/settings/security" method="post">
					<input type="hidden" name="formkey" value="{{v.formkey}}">

					<div class="body">

						<div class="d-lg-flex">

							<label for="new-email" class="w-lg-25">Email</label>

							<div class="w-lg-100">

								<input class="form-control" id="new_email" {% if v.email %}placeholder="{{v.email}}"{% else %}placeholder="Your email"{% endif %}
								aria-describedby="new_email" type="email" name="new_email" required>
								{% if v.email and not v.is_activated %}
								<div class="text-danger text-small-extra mt-1" id="email-verify-text">Email not verified. You will not be able to recover your account with this email until you verify it. <u><a href="javascript:void(0)" onclick="post('/api/verify_email');emailVerifyText();" class="text-danger">Verify now.</a></u></div>
								{% elif not v.email %}
								<div class="text-danger text-small-extra mt-1" id="email-verify-text">Add an email to secure your account in case you forget your password.</div>
								{% endif %}

							</div>

						</div>

						<div class="d-lg-flex mt-3">

						 <label for="email-password" class="w-lg-25 d-none" id="email-password-label">Password</label>

						 <div class="w-lg-100">

							 <input autocomplete="new-password" type="password" class="form-control mb-2 d-none" id="email-password" name="password" autocomplete="off" required>

							 <small id="emailpasswordRequired" class="form-text font-weight-bold text-danger d-none mt-1">Password required to update your email.</small>

						 </div>

					 </div>

					 <small id="emailpasswordRequired" class="form-text font-weight-bold text-danger d-none mt-1">Password required to update your email.</small>

				 </div>

				 <div class="footer">

					<div class="d-flex">

						{% if v.email %}
						<input class="btn btn-primary ml-auto"
						type="submit" value="Update email">
						{% else %}
						<input class="btn btn-primary ml-auto"
						type="submit" value="Add email">
						{% endif %}

					</div>

				</div>

			</form>

		</div>


		<h2 class="h5">Two-Factor Authentication</h2>

		<p class="text-small text-muted">Change the two-factor settings for your account.</p>

		<div class="settings-section rounded">

			<div class="d-lg-flex">

				<div class="title w-lg-25">
					<label for="2faToggle">Use 2-step login</label>
				</div>

				<div class="body w-lg-100">

					<div class="custom-control custom-switch">
					<input type="checkbox" class="custom-control-input" id="2faToggle" name="2faToggle" onchange="$('#2faModal').modal('toggle')" {% if not mfa_secret %}checked=""{% endif %}>
					<label class="custom-control-label" for="2faToggle"></label>
					</div>

					<span class="text-small-extra text-muted">This requires entering a randomly-generated, 6-digit code and your password to login. See <a href="#">Google Authenticator</a> or <a href="#">Authy</a> for more details.</span>

				</div>

			</div>

		</div>

	<h2 class="h5">Log Out Everywhere</h2>

	<p class="text-small text-muted">Log all other devices out of your Drama account.</p>

	<div class="settings-section rounded">

		<form	action="/settings/log_out_all_others" method="post">
			<input type="hidden" name="formkey" value="{{v.formkey}}">

			<div class="body">

				<div class="d-lg-flex">

				 <label for="forcelog-password" class="w-lg-25" id="email-password-label">Password</label>

				 <div class="w-lg-100">

					 <input autocomplete="new-password" type="password" class="form-control mb-2" id="forcelog-password" name="password" autocomplete="off" required>

				 </div>

			 </div>

			 <small id="emailpasswordRequired" class="form-text mt-1">This will also invalidate any existing recovery links associated with this account.</small>

		 </div>

		 <div class="footer">

			<div class="d-flex">

				<input class="btn btn-primary ml-auto"
				type="submit" value="Log out everywhere">

			</div>

		</div>

	</form>

</div>

</div>

</div>

</div>

</div>

</div>


<!-- Account Deletion Modal -->
<div class="modal fade" id="deleteAccountModal" tabindex="-1" role="dialog" aria-labelledby="deleteAccountModal" aria-hidden="true">
	<div class="modal-dialog modal-dialog-centered" role="document">
		<div class="modal-content">
			<div class="modal-header">
				<h5 class="modal-title">Delete your Drama account</h5>
				<button type="button" class="close" data-dismiss="modal" aria-label="Close">
					<span aria-hidden="true"><i class="far fa-times"></i></span>
				</button>
			</div>
			<div class="" id="deleteFormContainer">
				<form id="deleteAccountForm" method="post" action="/settings/delete_account">
					<input type="hidden" name="formkey" value="{{v.formkey}}">
					<div class="modal-body body">

						<div class="d-lg-flex">

							<label for="delete-password" class="w-lg-25" id="email-password-label">Password</label>

							<div class="w-lg-100">

									<input autocomplete="new-password" type="password" class="form-control mb-2" id="delete-password" name="password" required>

							</div>

						</div>

						{% if v.mfa_secret %}
						<div class="d-lg-flex mt-3">

							<label for="delete-mfa" class="w-lg-25" id="email-password-label">Two-Factor Code</label>

							<div class="w-lg-100">

									<input autocomplete="new-password" type="text" class="form-control mb-2" id="delete-mfa" name="twofactor" required>

							</div>

						</div>
						{% endif %}

						<div class="d-lg-flex mt-3">

							<label for="delete-reason" class="w-lg-25" id="email-password-label">Feedback</label>

							<div class="w-lg-100">

									<textarea class="form-control mb-2" id="delete-reason" name="delete_reason" placeholder="Tell us why you're leaving Drama. (Optional)"></textarea>

							</div>

						</div>

					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-link text-muted" data-dismiss="modal">Cancel</button>
						<input type="submit" id="deleteAccountBUtton" class="btn btn-danger" value="Delete my account"></button>
					</div>
				</form>
			</div>
			<!-- After report is made, show this -->
		</div>

{% endblock %}