Tools/Notes
1
0
Fork 0
mirror of https://github.com/TriliumNext/Notes.git synced 2025-08-18 00:02:28 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(client/mfa): improve layout by separating into multiple sections

Browse Source
This commit is contained in:
Elian Doran 2024-12-24 14:02:00 +02:00
parent 2eb4d4fb66
commit e20e53f606
No known key found for this signature in database
1 changed files with 67 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

134
src/public/app/widgets/type_widgets/options/multi_factor_authentication.js
View File

@ -5,87 +5,87 @@ import OptionsWidget from "./options_widget.js";
const TPL = `
<div class="options-section">
<h2 class=""><b>What is Multi-Factor Authentication?</b></h2>
<div class="">
<i>
Multi-Factor Authentication (MFA) adds an extra layer of security to your account. Instead
of just entering a password to log in, MFA requires you to provide one or more additional
pieces of evidence to verify your identity. This way, even if someone gets hold of your
password, they still ca TOTP_ENABLED is not set in environment variable. Requires restart.n't access your account without the second piece of information.
It's like adding an extra lock to your door, making it much harder for anyone else to
break in.</i>
</div>
<br>
<i>
Multi-Factor Authentication (MFA) adds an extra layer of security to your account. Instead
of just entering a password to log in, MFA requires you to provide one or more additional
pieces of evidence to verify your identity. This way, even if someone gets hold of your
password, they still ca TOTP_ENABLED is not set in environment variable. Requires restart.n't access your account without the second piece of information.
It's like adding an extra lock to your door, making it much harder for anyone else to
break in.</i>
</div>
<div class="options-section">
<h3><b>OAuth/OpenID</b></h3>
<span><i>OpenID is a standardized way to let you log into websites using an account from another service, like Google, to verify your identity.</i></span>
<div>
<h3><b>OAuth/OpenID</b></h3>
<span><i>OpenID is a standardized way to let you log into websites using an account from another service, like Google, to verify your identity.</i></span>
<div>
<label>
<b>OAuth/OpenID Enabled</b>
</label>
<input type="checkbox" class="oauth-enabled-checkbox" disabled="true" />
<span class="env-oauth-enabled" "alert alert-warning" role="alert" style="font-weight: bold; color: red !important;" > </span>
</div>
<div>
<span> <b>User Account: </b></span><span class="user-account-name"> Not logged in! </span>
<br>
<span><b> User Email: </b></span><span class="user-account-email"> Not logged in!</span>
</div>
<label>
<b>OAuth/OpenID Enabled</b>
</label>
<input type="checkbox" class="oauth-enabled-checkbox" disabled="true" />
<span class="env-oauth-enabled" "alert alert-warning" role="alert" style="font-weight: bold; color: red !important;" > </span>
</div>
<br>
<div>
<span> <b>User Account: </b></span><span class="user-account-name"> Not logged in! </span>
<br>
<span><b> User Email: </b></span><span class="user-account-email"> Not logged in!</span>
</div>
</div>
<div class="options-section">
<h3><b>Time-based One-Time Password</b></h3>
<div>
<label>
<b>TOTP Enabled</b>
</label>
<input type="checkbox" class="totp-enabled" disabled="true" />
<input type="checkbox" class="totp-enabled" disabled="true" />
<span class="env-totp-enabled" "alert alert-warning" role="alert" style="font-weight: bold; color: red !important;" > </span>
</div>
<div>
<span><i>TOTP (Time-Based One-Time Password) is a security feature that generates a unique, temporary
code which changes every 30 seconds. You use this code, along with your password to log into your
<span><i>TOTP (Time-Based One-Time Password) is a security feature that generates a unique, temporary
code which changes every 30 seconds. You use this code, along with your password to log into your
account, making it much harder for anyone else to access it.</i></span>
</div>
<br>
</div>
<div class="options-section">
<h4> Generate TOTP Secret </h4>
<div>
<span class="totp-secret" > TOTP Secret Key </span>
<br>
<button class="regenerate-totp"> Generate TOTP Secret </button>
</div>
<span class="totp-secret" > TOTP Secret Key </span>
<br>
<button class="regenerate-totp"> Generate TOTP Secret </button>
</div>
<div class="options-section">
<h4> Single Sign-on Recovery Keys </h4>
<div>
<span ><i>Single sign-on recovery keys are used to login in the event you cannot access your Authenticator codes. Keep them somewhere safe and secure. </i></span>
<br><br>
<span class="alert alert-warning" role="alert" style="font-weight: bold; color: red !important;">After a recovery key is used it cannot be used again.</span>
<br><br>
<table style="border: 0px solid white">
<tbody>
<tr>
<td class="key_0"></td>
<td style="width: 20px" />
<td class="key_1"></td>
</tr>
<tr>
<td class="key_2"></td>
<td />
<td class="key_3"></td>
</tr>
<tr>
<td class="key_4"></td>
<td />
<td class="key_5"></td>
</tr>
<tr>
<td class="key_6"></td>
<td />
<td class="key_7"></td>
</tr>
</tbody>
</table>
<br>
<button class="generate-recovery-code" disabled="true"> Generate Recovery Keys </button>
</div>
<span ><i>Single sign-on recovery keys are used to login in the event you cannot access your Authenticator codes. Keep them somewhere safe and secure. </i></span>
<br><br>
<span class="alert alert-warning" role="alert" style="font-weight: bold; color: red !important;">After a recovery key is used it cannot be used again.</span>
<br><br>
<table style="border: 0px solid white">
<tbody>
<tr>
<td class="key_0"></td>
<td style="width: 20px" />
<td class="key_1"></td>
</tr>
<tr>
<td class="key_2"></td>
<td />
<td class="key_3"></td>
</tr>
<tr>
<td class="key_4"></td>
<td />
<td class="key_5"></td>
</tr>
<tr>
<td class="key_6"></td>
<td />
<td class="key_7"></td>
</tr>
</tbody>
</table>
<br>
<button class="generate-recovery-code" disabled="true"> Generate Recovery Keys </button>
</div>
`;
@ -217,4 +217,4 @@ export default class MultiFactorAuthenticationOptions extends OptionsWidget {
this.$generateRecoveryCodeButton.text("Regenerate Recovery Codes");
});
}
}
}