habitica/views/app/settings.html

<modals:>
    {{#if _loggedIn}}
        <app:modals:modal modalId="settings-modal" header="Settings">
            <ul class="nav nav-tabs">
                <li class="active"><a data-toggle="tab" href="#" data-target="#settings-settings">General</a></li>
                <li><a data-toggle="tab" href="#" data-target="#settings-api">API</a></li>
            </ul>

            <div class="tab-content">
                <div class="tab-pane active" id="settings-settings">
                    <h4>Custom Day Start</h4>
                    <div class="input-append">
                        <input class="span2" type="number" min=0 max=24 value={_user.preferences.dayStart} />
                        <span class="add-on">:00 (24h)</span>
                    </div>
                    <div>
                        <small>Habit defaults to check and reset your dailies at midnight each day. You can customize that here (Enter number between 0 and 24).</small>
                    </div>

                    <hr/>
                    <h4>Toggle Header</h4>
                    <button x-bind="click:toggleHeader">{#if _user.preferences.hideHeader}Show{else}Hide{/}</button>

                    {{#if _user.auth.local}}
                        <hr/>
                        <h4>Change Password</h4>
                        <derby-auth:changePassword />
                    {{/}}

                    <hr/>
                    <a class='btn btn-danger' data-target="#reset-modal" data-toggle="modal" rel=tooltip title="Resets your entire account (dangerous).">Reset</a>
                    &nbsp;<a class='btn btn-danger' data-target="#restore-modal" data-toggle="modal" rel=tooltip title="Restores attributes to your character.">Restore</a>
                </div>
                <div class="tab-pane" id="settings-api">
                    <small>Copy these for use in third party applications.</small>
                    <h6>User ID</h6>
                    <pre class=prettyprint>{_user.id}</pre>

                    <h6>API Token</h6>
                    <pre class=prettyprint>{_user.apiToken}</pre>
                </div>
            </div>

            <@footer>
                <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
            </@footer>
        </app:modals:modal>

        <app:modals:modal modalId="reset-modal" header="Reset">
            <p>This resets your entire account - your tasks will be deleted and your character will start over.</p>
            <p>This is highly discouraged because you'll lose historical data, which is useful for graphing your progress over time. However, some people find it useful in the beginning after playing with the app for a while.</p>
            <@footer>
                <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
                <button data-dismiss="modal" x-bind=click:reset class="btn btn-danger">Reset</button>
            </@footer>
        </app:modals:modal>

        <app:modals:modal modalId="restore-modal" header="Restore">
            <p>HabitRPG is quite Beta-quality at present, and many find they need to restore character attributes as a result. Enter your numbers here and it will be applied automatically to your character. This will be removed once Habit is more stable.</p>

            {#with _user}
            <form id='restore-form' class="form-horizontal">
                <h3>Stats</h3>
                <div class="input-prepend">
                    <span class="add-on">HP</span>
                    <input class="span2" type="number" data-for='stats.hp' value="{{.stats.hp}}">
                </div>
                <div class="input-prepend">
                    <span class="add-on">Exp</span>
                    <input class="span2" type="number" data-for='stats.exp' value="{{.stats.exp}}">
                </div>
                <div class="input-prepend">
                    <span class="add-on">GP</span>
                    <input class="span2" type="number" data-for='stats.gp' value="{{.stats.gp}}">
                </div>
                <div class="input-prepend">
                    <span class="add-on">Level</span>
                    <input class="span2" type="number" data-for='stats.lvl' value="{{.stats.lvl}}">
                </div>

                <h3>Items</h3>
                <div class="input-prepend">
                    <span class="add-on">Weapon</span>
                    <input class="span2" type="number" data-for='items.weapon' value="{{.items.weapon}}">
                </div>
                <div class="input-prepend">
                    <span class="add-on">Armor</span>
                    <input class="span2" type="number" data-for='items.armor' value="{{.items.armor}}">
                </div>
                <div class="input-prepend">
                    <span class="add-on">Helm</span>
                    <input class="span2" type="number" data-for='items.head' value="{{.items.head}}">
                </div>
                <div class="input-prepend">
                    <span class="add-on">Shield</span>
                    <input class="span2" type="number" data-for='items.shield' value="{{.items.shield}}">
                </div>

            </form>
            {/}

            <@footer>
                <button class="btn" x-bind="click:restoreSave" data-dismiss="modal" aria-hidden="true">Save & Close</button>
            </@footer>
        </app:modals:modal>

    {{else}}
        <app:modals:modal modalId="login-modal" header="Login / Register">
            <a href="/auth/facebook"><img src='/img/facebook-login-register.jpeg' alt="Login / Register With Facebook"/></a>
            <h3>Or</h3>

            <ul class="nav nav-tabs">
                <li class="active"><a href="#" data-toggle="tab" data-target="#login">Login</a></li>
                <li><a href="#" data-toggle="tab" data-target="#register">Register</a></li>
            </ul>

            <div class="tab-content">
                <div class="tab-pane active" id="login"><derby-auth:login /></div>
                <div class="tab-pane" id="register"><derby-auth:register /></div>
            </div>
        </app:modals:modal>
    {{/}}

<menu:>
    <div class='pull-right'>
        {#unless _loggedIn}
        <a href="#" class="btn btn-small btn-info" data-target="#login-modal" data-toggle="modal">Login / Register</a>
        {else}
        <div class="btn-group">
            <button class="btn btn-small">
                {#if _user.party.invitation}<span class="badge badge-success">1</span>{/}
                {username(_user.auth)}
            </button>
            <button class="btn btn-small dropdown-toggle" data-toggle="dropdown">
                <span class="caret"></span>
            </button>
            <ul class="dropdown-menu">
                <li><a href="#" data-target="#settings-modal" data-toggle="modal">Settings</a></li>
                {#if _user.flags.partyEnabled}
                <li><a href="#" data-target="#party-modal" data-toggle="modal">
                    Party{#if _user.party.invitation}<span class="badge badge-success">1</span>{/}
                </a></li>
                {/}
                <li><a href='/logout'>Logout</a></li>
            </ul>
        </div>
        {/}
    </div>