Tools/Notes
1
0
Fork 0
mirror of https://github.com/TriliumNext/Notes.git synced 2025-08-18 16:26:24 +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 = ` const TPL = `
<div class="options-section"> <div class="options-section">
<h2 class=""><b>What is Multi-Factor Authentication?</b></h2> <h2 class=""><b>What is Multi-Factor Authentication?</b></h2>
<div class=""> <i>
<i> Multi-Factor Authentication (MFA) adds an extra layer of security to your account. Instead
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
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
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.
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
It's like adding an extra lock to your door, making it much harder for anyone else to break in.</i>
break in.</i> </div>
</div>
<br> <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> <div>
<h3><b>OAuth/OpenID</b></h3> <label>
<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> <b>OAuth/OpenID Enabled</b>
<div> </label>
<label> <input type="checkbox" class="oauth-enabled-checkbox" disabled="true" />
<b>OAuth/OpenID Enabled</b> <span class="env-oauth-enabled" "alert alert-warning" role="alert" style="font-weight: bold; color: red !important;" > </span>
</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>
</div> </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> <h3><b>Time-based One-Time Password</b></h3>
<div> <div>
<label> <label>
<b>TOTP Enabled</b> <b>TOTP Enabled</b>
</label> </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> <span class="env-totp-enabled" "alert alert-warning" role="alert" style="font-weight: bold; color: red !important;" > </span>
</div> </div>
<div> <div>
<span><i>TOTP (Time-Based One-Time Password) is a security feature that generates a unique, temporary <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 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> account, making it much harder for anyone else to access it.</i></span>
</div> </div>
<br> </div>
<div class="options-section">
<h4> Generate TOTP Secret </h4> <h4> Generate TOTP Secret </h4>
<div> <span class="totp-secret" > TOTP Secret Key </span>
<span class="totp-secret" > TOTP Secret Key </span>
<br>
<button class="regenerate-totp"> Generate TOTP Secret </button>
</div>
<br> <br>
<button class="regenerate-totp"> Generate TOTP Secret </button>
</div>
<div class="options-section">
<h4> Single Sign-on Recovery Keys </h4> <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>
<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>
<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>
<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>
<br><br> <table style="border: 0px solid white">
<table style="border: 0px solid white"> <tbody>
<tbody> <tr>
<tr> <td class="key_0"></td>
<td class="key_0"></td> <td style="width: 20px" />
<td style="width: 20px" /> <td class="key_1"></td>
<td class="key_1"></td> </tr>
</tr> <tr>
<tr> <td class="key_2"></td>
<td class="key_2"></td> <td />
<td /> <td class="key_3"></td>
<td class="key_3"></td> </tr>
</tr> <tr>
<tr> <td class="key_4"></td>
<td class="key_4"></td> <td />
<td /> <td class="key_5"></td>
<td class="key_5"></td> </tr>
</tr> <tr>
<tr> <td class="key_6"></td>
<td class="key_6"></td> <td />
<td /> <td class="key_7"></td>
<td class="key_7"></td> </tr>
</tr> </tbody>
</tbody> </table>
</table> <br>
<br> <button class="generate-recovery-code" disabled="true"> Generate Recovery Keys </button>
<button class="generate-recovery-code" disabled="true"> Generate Recovery Keys </button>
</div>
</div> </div>
`; `;
@ -217,4 +217,4 @@ export default class MultiFactorAuthenticationOptions extends OptionsWidget {
this.$generateRecoveryCodeButton.text("Regenerate Recovery Codes"); this.$generateRecoveryCodeButton.text("Regenerate Recovery Codes");
}); });
} }
} }