<h1 class="title">{{title}}</h1>

<form id="user_form" action="{{{postUrl}}}" method="POST" class="block">

	<div class="block">
		{{> errorBanner}}
		{{{csrfTag}}}
		<input type="hidden" name="id" value="{{user.id}}"/>
		<input type="hidden" name="totpSecret" value="{{totpSecret}}"/>

		{{#isMFAEnabled}}
			<input type="hidden" name="formType" value="disableMFA"/>
			<div class="block readable-block content">
				<p>Please enter your password to disable multi-factor authentication.</p>
			</div>
			<div class="field">
				<label class="label">Password</label>
				<div class="control mb-2">
					<input class="input" type="password" name="password"/>
				</div>
			</div>
		{{/isMFAEnabled}}

		{{^isMFAEnabled}}
			<input type="hidden" name="formType" value="enableMFA"/>
			<div class="block readable-block content">
				<p>Multi-factor authentication (MFA), also known as Two Factor Authentication (2FA), enhances the security of your account by adding an additional layer of protection. When you log in to your Joplin Cloud account, you'll be required to enter both your password and an authentication code sent to your mobile phone.</p>
			</div>
			<div class="block readable-block content">
				<p>1. Install an authenticator app on your phone, such as <a href="https://getaegis.app/" target="_blank">Aegis for Android</a> or <a href="https://apps.apple.com/us/app/2fa-authenticator-2fas/id1217793794" target="_blank">2FAS for iOS</a>.</p>
			</div>
			<div class="block readable-block content">
				<p>2. Open your authenticator app and choose the option to add a new entry.</p>
			</div>
			<div class="block readable-block content">
				<p>3. Pair your authenticator app to your Joplin Cloud account by scanning the QR code below.</p>
			</div>
			<div class="block readable-block content ml-4">
				<img class="ml-6" src="{{qrcodeImage}}" alt="qrcode-2fa" />
				<p class="has-text-grey">Or copy the secret code: <code>{{totpSecret}}</code></p>
			</div>
			<div class="field block readable-block content">
				<p>4. Verify the pairing was successful by entering two consecutive codes generated by your authenticator app.</label>
				<div class="control mb-2">
					<input type="text" name="confirmCode" class="input"/>
				</div>
				<div class="control">
					<input type="text" name="confirmCode2" class="input"/>
				</div>
			</div>
			<div class="block readable-block content notification is-warning">
				<p>After enabling multi-factor authentication you will need an authentication code or a recovery code to log in.</p>
			</div>
		{{/isMFAEnabled}}

		<div class="control block">
			<input type="submit" name="postButton" class="button is-primary" value="{{buttonTitle}}" />
		</div>
	</div>
</form>