habitica/views/app/settings.html

<settings-pane:>
    <div class='row-fluid'>
        <div class="personal-options span6 border-right">
            <h2>{{t("settings")}}</h2>
            <h4>{{t("customDayStart")}}</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 ({{t("24HrClock")}})</span>
            </div>
            <div>
                <small>{{t("clockInfo")}}</small>
            </div>

            <hr/>
            <h4>{{t("misc")}}</h4>
            <button x-bind="click:toggleHeader" class="btn">{#if _user.preferences.hideHeader}{{t("showHeader")}} {else} {{t("hideHeader")}}{/}</button>

            {{#if _user.auth.local}}
            <hr/>
            <h4>{{t("changePass")}}</h4>
            <derby-auth:changePassword />
            {{/}}

            <hr/>
            <h4>{{t("dangerZone")}}</h4>
            <a class='btn btn-danger' data-target="#reset-modal" data-toggle="modal" rel=tooltip title={{t("resetAltTest")}}>{{t("reset")}}</a>
            &nbsp;<a class='btn btn-danger' data-target="#restore-modal" data-toggle="modal" rel=tooltip title={{t("restoreAltText")}}>{{t("restore")}}</a>
            &nbsp;<a class='btn btn-danger' data-target="#delete-modal" data-toggle="modal" rel=tooltip title={{t("deleteAltText")}}>{{t("delete")}}</a>
        </div>
        <div class='span6'>
            <h2>API</h2>
            <small>{{t("APIText")}}</small>
            <h6>{{t("userId")}}</h6>
            <pre class=prettyprint>{_user.id}</pre>

            <h6>{{t("APIToken")}}</h6>
            <pre class=prettyprint>{_user.apiToken}</pre>
        </div>
    </div>

<modals:>
    {{#if _loggedIn}}
        <app:modals:modal modalId="reset-modal" header={{t("reset")}}>
            <p>{{t("resetText1")}}</p>
            <p>{{t("resetText2")}}</p>
            <@footer>
                <button class="btn" data-dismiss="modal" aria-hidden="true">{{t("close")}}</button>
                <button data-dismiss="modal" x-bind=click:reset class="btn btn-danger">{{t("reset")}}</button>
            </@footer>
        </app:modals:modal>

        <app:modals:modal modalId="restore-modal" header={{t("restore")}}>
            <p>{{t("restoreText1")}}</p>

            {#with _user}
            <form id='restore-form' class="form-horizontal restore-options">
                <h3>{{t("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">{{t("level")}}</span>
                </div>

                <h3>{{t("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">{{t("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">{{t("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">{{t("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">{{t("shield")}}</span>
                </div>

            </form>
            {/}

            <@footer>
                <button class="btn" x-bind="click:restoreSave" data-dismiss="modal" aria-hidden="true">{{t("saveAndClose")}}</button>
            </@footer>
        </app:modals:modal>

        <app:modals:modal modalId="delete-modal" header={{t("deleteHeader")}}>
            <p>{{t("deleteText1")}}<strong>{{t("deleteText2")}}</strong> {{t("deleteText3")}}</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{/}">{{t("deleteHeader")}}</button>
            </@footer>
        </app:modals:modal>

    {{else}}
        <app:modals:modal modalId="login-modal" header={{t("loginAndReg")}}>
            <a href="/auth/facebook"><img src='/img/facebook-login-register.jpeg' alt={{t("loginFacebookAlt")}}/></a>
            <h3>{{t("or")}}</h3>

            <ul class="nav nav-tabs">
                <li class="active"><a href="#" data-toggle="tab" data-target="#login">{{t("login")}}</a></li>
                <li><a href="#" data-toggle="tab" data-target="#register">{{t("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">{{t("loginAndRegister")}}</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">{{t("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-heart' rel='tooltip' title={{t("")}}></i></a>
        {/}

    </div>