habitica/views/app/settings.html

<settings-pane:>
    <div class='row-fluid'>
        <div class="personal-options span6 border-right">
            <h2>Settings</h2>
            <h4>Custom Day Start</h4>
            <div class="option-group option-short">
                <input class="option-content option-time" type="number" min=0 max=24 value={_user.preferences.dayStart}>
                <span class="input-suffix">:00 (24h clock)</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>Misc</h4>
            <button x-bind="click:toggleHeader" class="btn">{#if _user.preferences.hideHeader}Show Header{else}Hide Header{/}</button>

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

            <hr/>
            <h4>Danger Zone</h4>
            <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>
            &nbsp;<a class='btn btn-danger' data-target="#delete-modal" data-toggle="modal" rel=tooltip title="Delete your account.">Delete</a>
        </div>
        <div class='span6'>
            <h2>API</h2>
            <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>

<modals:>
    {{#if _loggedIn}}
        <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 restore-options">
                <h3>Stats</h3>
                <div class="option-group option-medium">
                    <input class="option-content" type="number" data-for='stats.hp' value="{{.stats.hp}}">
                    <span class="input-suffix">HP</span>
                </div>
                <div class="option-group option-medium">
                    <input class="option-content" type="number" data-for='stats.exp' value="{{.stats.exp}}">
                    <span class="input-suffix">Exp</span>
                </div>
                <div class="option-group option-medium">
                    <input class="option-content" type="number" data-for='stats.gp' value="{{.stats.gp}}">
                    <span class="input-suffix">GP</span>
                </div>
                <div class="option-group option-medium">
                    <input class="option-content" type="number" data-for='stats.lvl' value="{{.stats.lvl}}">
                    <span class="input-suffix">Level</span>
                </div>

                <h3>Items</h3>
                <div class="option-group option-medium">
                    <input class="option-content" type="number" data-for='items.weapon' value="{{.items.weapon}}">
                    <span class="input-suffix">Weapon</span>
                </div>
                <div class="option-group option-medium">
                    <input class="option-content" type="number" data-for='items.armor' value="{{.items.armor}}">
                    <span class="input-suffix">Armor</span>
                </div>
                <div class="option-group option-medium">
                    <input class="option-content" type="number" data-for='items.head' value="{{.items.head}}">
                    <span class="input-suffix">Helm</span>
                </div>
                <div class="option-group option-medium">
                    <input class="option-content" type="number" data-for='items.shield' value="{{.items.shield}}">
                    <span class="input-suffix">Shield</span>
                </div>

            </form>
            {/}

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

        <app:modals:modal modalId="delete-modal" header="Delete Account">
            <p>Woa woa woa! Are you sure? This will seriously delete your account forever, and it can never be restored. If you're absolutely certain, type <strong>DELETE</strong> into the text-box below.</p>
            <p><input type="text" value="{_deleteAccount}" /></p>
            <@footer>
                <button class="btn btn-large" data-dismiss="modal" aria-hidden="true">Cancel</button>
                <button data-dismiss="modal" x-bind="click:deleteAccount" class="btn btn-danger btn-small {#unless equal(_deleteAccount,'DELETE')}disabled{/}">Delete Account</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="user-menu">
        {{#unless _loggedIn}}
            <button class="task-action-btn tile solid" style='cursor:pointer' data-target="#login-modal" data-toggle="modal">Login / Register</button>
        {{else}}
            <ul class="nav site-nav">
                <li class="flyout">
                    <h1 class="task-action-btn tile solid user-reporter">{{username(_user.auth, _user.profile.name)}}</h1>
                    <ul class="flyout-content nav stacked">
                        <li>
                            <a class="task-action-btn tile solid" x-bind='click:toggleGamePane'>
                                {#if _gamePane}Tasks{else}Options{/}
                            </a>
                        </li>
                        <li><a class="task-action-btn tile solid" href="/logout">Logout</a></li>
                    </ul>
                </li>
            </ul>
        {{/}}

        <!-- party invitation notification -->
        {#if _user.party.invitation}
            <a style='cursor:pointer;' x-bind="click:gotoPartyChat"><i class='icon-user'></i></a>
        {/}

        <!-- party chat notification -->
        {#if newChatMessages(_party.chat,_user.party.lastMessageSeen)}
            <a style='cursor:pointer;' x-bind="click:gotoPartyChat"><i class='icon-comment' rel='tooltip' title='New Party Messages'></i></a>
        {/}

    </div>