mirror of
				https://github.com/zadam/trilium.git
				synced 2025-11-03 20:06:08 +01:00 
			
		
		
		
	feat(client/mfa): improve layout by separating into multiple sections
This commit is contained in:
		@@ -5,33 +5,33 @@ 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>
 | 
			
		||||
@@ -45,47 +45,47 @@ const TPL = `
 | 
			
		||||
        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>
 | 
			
		||||
`;
 | 
			
		||||
 | 
			
		||||
 
 | 
			
		||||
		Reference in New Issue
	
	Block a user