From 375029ed0a95b5b98ab90765829e324a4a6c8a0d Mon Sep 17 00:00:00 2001
From: nkanaev <nkanaev@live.com>
Date: Thu, 25 Jun 2026 16:28:34 +0100
Subject: [PATCH] frontend: separate vue and go templates

---
 src/assets/javascripts/templates/index.html | 436 +++++++++++++++++++
 src/assets/javascripts/templates/login.html |  16 +
 src/assets/templates/index.html             | 443 +-------------------
 src/assets/templates/login.html             |  23 +-
 4 files changed, 460 insertions(+), 458 deletions(-)
 create mode 100644 src/assets/javascripts/templates/index.html
 create mode 100644 src/assets/javascripts/templates/login.html

diff --git a/src/assets/javascripts/templates/index.html b/src/assets/javascripts/templates/index.html
new file mode 100644
index 0000000..b12be18
--- /dev/null
+++ b/src/assets/javascripts/templates/index.html
@@ -0,0 +1,436 @@
+<div class="d-flex" :class="{'feed-selected': feedSelected !== null, 'item-selected': itemSelected !== null}">
+    <!-- feed list -->
+    <div id="col-feed-list" class="vh-100 position-relative d-flex flex-column border-right flex-shrink-0" :style="{width: feedListWidth+'px'}">
+        <drag :width="feedListWidth" @resize="resizeFeedList"></drag>
+        <div class="p-2 toolbar d-flex align-items-center">
+            <div class="icon mx-2">{% inline "anchor.svg" %}</div>
+            <div class="flex-grow-1"></div>
+            <button class="toolbar-item ml-1"
+                    :class="{active: filterSelected == 'unread'}"
+                    :aria-pressed="filterSelected == 'unread'"
+                    :title="$t('unread')"
+                    @click="filterSelected = 'unread'">
+                <span class="icon">{% inline "circle-full.svg" %}</span>
+            </button>
+            <button class="toolbar-item mx-1"
+                    :class="{active: filterSelected == 'starred'}"
+                    :aria-pressed="filterSelected == 'starred'"
+                    :title="$t('starred')"
+                    @click="filterSelected = 'starred'">
+                <span class="icon">{% inline "star-full.svg" %}</span>
+            </button>
+            <button class="toolbar-item mr-1"
+                    :class="{active: filterSelected == ''}"
+                    :aria-pressed="filterSelected == ''"
+                    :title="$t('all')"
+                    @click="filterSelected = ''">
+                <span class="icon">{% inline "assorted.svg" %}</span>
+            </button>
+            <div class="flex-grow-1"></div>
+            <dropdown class="settings-dropdown" toggle-class="btn btn-link toolbar-item px-2" ref="menuDropdown" drop="right" :title="$t('settings')">
+                <template v-slot:button>
+                    <span class="icon">{% inline "more-horizontal.svg" %}</span>
+                </template>
+
+                <button class="dropdown-item" @click="showSettings('create')">
+                    <span class="icon mr-1">{% inline "plus.svg" %}</span>
+                    {{ $t('new_feed') }}
+                </button>
+                <div class="dropdown-divider"></div>
+                <button class="dropdown-item" @click="fetchAllFeeds()">
+                    <span class="icon mr-1">{% inline "rotate-cw.svg" %}</span>
+                    {{ $t('refresh_feeds') }}
+                </button>
+
+                <div class="dropdown-divider"></div>
+
+                <header class="dropdown-header" role="heading" aria-level="2">{{ $t('theme') }}</header>
+                <div class="row text-center m-0">
+                    <button class="btn btn-link col-4 px-0 rounded-0"
+                            :class="'theme-'+t"
+                            :title="t"
+                            :aria-label="t"
+                            :aria-pressed="theme.name == t"
+                            @click.stop="theme.name = t"
+                            v-for="t in ['light', 'sepia', 'night']">
+                        <span class="icon" v-if="theme.name == t">{% inline "check.svg" %}</span>
+                    </button>
+                </div>
+
+                <div class="dropdown-divider"></div>
+
+                <header class="dropdown-header" role="heading" aria-level="2">{{ $t('auto_refresh') }}</header>
+                <div class="row text-center m-0">
+                    <button class="dropdown-item col-4 px-0"
+                            @click.stop="changeRefreshRate(-1)"
+                            :disabled="!refreshRate">
+                        <span class="icon">
+                            {% inline "chevron-down.svg" %}
+                        </span>
+                    </button>
+                    <div class="col-4 d-flex align-items-center justify-content-center">{{ refreshRateTitle }}</div>
+                    <button class="dropdown-item col-4 px-0"
+                            @click.stop="changeRefreshRate(1)" :disabled="refreshRate === refreshRateOptions.at(-1).value">
+                        <span class="icon">
+                            {% inline "chevron-up.svg" %}
+                        </span>
+                    </button>
+                </div>
+
+                <div class="dropdown-divider"></div>
+
+                <header class="dropdown-header" role="heading" aria-level="2">{{ $t('show_first') }}</header>
+                <div class="d-flex text-center">
+                    <button class="dropdown-item px-0" :aria-pressed="itemSortNewestFirst"  :class="{active: itemSortNewestFirst}"  @click.stop="itemSortNewestFirst=true">{{ $t('new') }}</button>
+                    <button class="dropdown-item px-0" :aria-pressed="!itemSortNewestFirst" :class="{active: !itemSortNewestFirst}" @click.stop="itemSortNewestFirst=false">{{ $t('old') }}</button>
+                </div>
+                <div class="dropdown-divider"></div>
+                <header class="dropdown-header" role="heading" aria-level="2">{{ $t('subscriptions') }}</header>
+                <form id="opml-import-form" enctype="multipart/form-data" tabindex="-1">
+                    <input type="file"
+                            id="opml-import"
+                            @change="importOPML"
+                            name="opml"
+                            style="opacity: 0; width: 1px; height: 0; position: absolute; z-index: -1;">
+                    <label class="dropdown-item mb-0 cursor-pointer" for="opml-import" @click.stop="">
+                        <span class="icon mr-1">{% inline "download.svg" %}</span>
+                        {{ $t('import') }}
+                    </label>
+                </form>
+                <a class="dropdown-item" href="./opml/export">
+                    <span class="icon mr-1">{% inline "upload.svg" %}</span>
+                    {{ $t('export') }}
+                </a>
+                <div class="dropdown-divider"></div>
+                <button class="dropdown-item" @click="showSettings('shortcuts')">
+                    <span class="icon mr-1">{% inline "help-circle.svg" %}</span>
+                    {{ $t('shortcuts') }}
+                </button>
+                <div class="dropdown-divider"></div>
+                <header class="dropdown-header" role="heading" aria-level="2">A / あ / 文</header>
+                <div class="container">
+                    <div class="row">
+                        <button
+                            v-for="lang in languages"
+                            class="dropdown-item text-center col-3 px-0"
+                            :aria-label="lang.name"
+                            :title="lang.name"
+                            :class="{active: language==lang.code}"
+                            @click.stop="changeLanguage(lang.code)">
+                                {{ lang.code }}
+                        </button>
+                    </div>
+                </div>
+                <div class="dropdown-divider" v-if="authenticated"></div>
+                <button class="dropdown-item" v-if="authenticated" @click="logout()">
+                    <span class="icon mr-1">{% inline "log-out.svg" %}</span>
+                    {{ $t('log_out') }}
+                </button>
+            </dropdown>
+        </div>
+        <div id="feed-list-scroll" class="p-2 overflow-auto scroll-touch border-top flex-grow-1">
+            <label class="selectgroup">
+                <input type="radio" name="feed" value="" v-model="feedSelected">
+                <div class="selectgroup-label d-flex align-items-center w-100">
+                    <span class="icon mr-2">{% inline "layers.svg" %}</span>
+                    <span class="flex-fill text-left text-truncate" v-if="filterSelected=='unread'">{{ $t('all_unread') }}</span>
+                    <span class="flex-fill text-left text-truncate" v-if="filterSelected=='starred'">{{ $t('all_starred') }}</span>
+                    <span class="flex-fill text-left text-truncate" v-if="filterSelected==''">{{ $t('all_feeds') }}</span>
+                    <span class="counter text-right">{{ filteredTotalStats }}</span>
+                </div>
+            </label>
+            <div v-for="folder in foldersWithFeeds">
+                <label class="selectgroup mt-1"
+                        :class="{'d-none': mustHideFolder(folder)}"
+                        v-if="folder.id">
+                    <input type="radio" name="feed" :value="'folder:'+folder.id" v-model="feedSelected" v-if="folder.id">
+                    <div class="selectgroup-label d-flex align-items-center w-100" v-if="folder.id">
+                        <span class="icon mr-2"
+                                :class="{expanded: folder.is_expanded}"
+                                @click.prevent="toggleFolderExpanded(folder)">
+                            {% inline "chevron-right.svg" %}
+                        </span>
+                        <span class="flex-fill text-left text-truncate">{{ folder.title }}</span>
+                        <span class="counter text-right">{{ filteredFolderStats[folder.id] || '' }}</span>
+                    </div>
+                </label>
+                <div v-show="!folder.id || folder.is_expanded" class="mt-1" :class="{'pl-3': folder.id}">
+                    <label class="selectgroup"
+                            :class="{'d-none': mustHideFeed(feed)}"
+                            v-for="feed in folder.feeds">
+                        <input type="radio" name="feed" :value="'feed:'+feed.id" v-model="feedSelected">
+                        <div class="selectgroup-label d-flex align-items-center w-100">
+                            <span class="icon mr-2" v-if="!feed.has_icon">{% inline "rss.svg" %}</span>
+                            <span class="icon mr-2" v-else><img :src="'./api/feeds/'+feed.id+'/icon'" alt="" loading="lazy"></span>
+                            <span class="flex-fill text-left text-truncate">{{ feed.title }}</span>
+                            <span class="counter text-right">{{ filteredFeedStats[feed.id] || '' }}</span>
+                            <span class="icon flex-shrink-0 mx-2"
+                                    :title="feed_errors[feed.id]"
+                                    v-if="!filterSelected && feed_errors[feed.id]">
+                                {% inline "alert-circle.svg" %}
+                            </span>
+                        </div>
+                    </label>
+                </div>
+            </div>
+        </div>
+        <div class="p-2 toolbar d-flex align-items-center border-top flex-shrink-0" v-if="loading.feeds">
+            <span class="icon loading mx-2"></span>
+            <span class="text-truncate cursor-default noselect">{{ $t('refreshing_progress', {count: loading.feeds}) }}</span>
+        </div>
+    </div>
+    <!-- item list -->
+    <div id="col-item-list" class="vh-100 position-relative d-flex flex-column border-right flex-shrink-0" :style="{width: itemListWidth+'px'}">
+        <drag :width="itemListWidth" @resize="resizeItemList"></drag>
+        <div class="px-2 toolbar d-flex align-items-center">
+            <button class="toolbar-item mr-2 d-block d-md-none"
+                    @click="feedSelected = null"
+                    :title="$t('show_feeds')">
+                <span class="icon">{% inline "chevron-left.svg" %}</span>
+            </button>
+            <div class="input-icon flex-grow-1">
+                <span class="icon">{% inline "search.svg" %}</span>
+                <!-- id used by keybindings -->
+                <input id="searchbar" type="" class="d-block toolbar-search" v-model="itemSearch" @keydown.enter="$event.target.blur()">
+            </div>
+            <button class="toolbar-item ml-2"
+                    @click="markItemsRead()"
+                    v-if="filterSelected == 'unread'"
+                    :title="$t('mark_all_read')">
+                <span class="icon">{% inline "check.svg" %}</span>
+            </button>
+
+
+            <button class="btn btn-link toolbar-item px-2 ml-2" v-if="!current.type" disabled>
+                <span class="icon">{% inline "more-horizontal.svg" %}</span>
+            </button>
+            <dropdown class="settings-dropdown"
+                        toggle-class="btn btn-link toolbar-item px-2 ml-2"
+                        drop="right"
+                        :title="$t('feed_settings')"
+                        v-if="current.type == 'feed'">
+                <template v-slot:button>
+                    <span class="icon">{% inline "more-horizontal.svg" %}</span>
+                </template>
+                <header class="dropdown-header" role="heading" aria-level="2">{{ current.feed.title }}</header>
+                <a class="dropdown-item" :href="current.feed.link" rel="noopener noreferrer" target="_blank" referrerpolicy="no-referrer" v-if="current.feed.link">
+                    <span class="icon mr-1">{% inline "globe.svg" %}</span>
+                    {{ $t('website') }}
+                </a>
+                <a class="dropdown-item" :href="current.feed.feed_link" rel="noopener noreferrer" target="_blank" referrerpolicy="no-referrer" v-if="current.feed.feed_link">
+                    <span class="icon mr-1">{% inline "rss.svg" %}</span>
+                    {{ $t('feed_link') }}
+                </a>
+                <div class="dropdown-divider" v-if="current.feed.link || current.feed.feed_link"></div>
+                <button class="dropdown-item" @click="renameFeed(current.feed)">
+                    <span class="icon mr-1">{% inline "edit.svg" %}</span>
+                    {{ $t('rename') }}
+                </button>
+                <button class="dropdown-item" @click="updateFeedLink(current.feed)" v-if="current.feed.feed_link">
+                    <span class="icon mr-1">{% inline "edit.svg" %}</span>
+                    {{ $t('change_link') }}
+                </button>
+                <div class="dropdown-divider"></div>
+                <header class="dropdown-header" role="heading" aria-level="2">{{ $t('move_to') }}</header>
+                <button class="dropdown-item"
+                    v-if="folder.id != current.feed.folder_id"
+                    v-for="folder in folders"
+                    @click="moveFeed(current.feed, folder)">
+                    <span class="icon mr-1">{% inline "folder.svg" %}</span>
+                    {{ folder.title }}
+                </button>
+                <button class="dropdown-item text-muted" @click="moveFeed(current.feed, null)" v-if="current.feed.folder_id">
+                    <span class="icon mr-1">{% inline "folder-minus.svg" %}</span>
+                    ──
+                </button>
+                <button class="dropdown-item text-muted" @click="moveFeedToNewFolder(current.feed)">
+                    <span class="icon mr-1">{% inline "folder-plus.svg" %}</span>
+                    {{ $t('new_folder') }}
+                </button>
+                <div class="dropdown-divider"></div>
+                <button class="dropdown-item text-danger" @click.prevent="deleteFeed(current.feed)">
+                    <span class="icon mr-1">{% inline "trash.svg" %}</span>
+                    {{ $t('delete') }}
+                </button>
+            </dropdown>
+            <dropdown class="settings-dropdown"
+                        toggle-class="btn btn-link toolbar-item px-2 ml-2"
+                        :title="$t('folder_settings')"
+                        drop="right"
+                        v-if="current.type == 'folder'">
+                <template v-slot:button>
+                    <span class="icon">{% inline "more-horizontal.svg" %}</span>
+                </template>
+                <header class="dropdown-header" role="heading" aria-level="2">{{ current.folder.title }}</header>
+                <button class="dropdown-item" @click="renameFolder(current.folder)">
+                    <span class="icon mr-1">{% inline "edit.svg" %}</span>
+                    {{ $t('rename') }}
+                </button>
+                <div class="dropdown-divider"></div>
+                <button class="dropdown-item text-danger" @click="deleteFolder(current.folder)">
+                    <span class="icon mr-1">{% inline "trash.svg" %}</span>
+                    {{ $t('delete') }}
+                </button>
+            </dropdown>
+        </div>
+        <div id="item-list-scroll" class="p-2 overflow-auto scroll-touch border-top flex-grow-1" v-scroll="loadMoreItems" ref="itemlist">
+            <label v-for="item in items" :key="item.id"
+                    class="selectgroup">
+                <input type="radio" name="item" :value="item.id" v-model="itemSelected">
+                <div class="selectgroup-label d-flex flex-column">
+                    <div style="line-height: 100%; opacity: .7; margin-bottom: .1rem;" class="d-flex align-items-center">
+                        <transition name="indicator">
+                            <span class="icon icon-small mr-1" v-if="item.status=='unread'">{% inline "circle-full.svg" %}</span>
+                            <span class="icon icon-small mr-1" v-if="item.status=='starred'">{% inline "star-full.svg" %}</span>
+                        </transition>
+                        <small class="flex-fill text-truncate mr-1">
+                            {{ (feedsById[item.feed_id] || {}).title }}
+                        </small>
+                        <small class="flex-shrink-0"><relative-time v-bind:title="formatDate(item.date)" :val="item.date"/></small>
+                    </div>
+                    <div>{{ item.title || $t('untitled') }}</div>
+                </div>
+            </label>
+            <button class="btn btn-link btn-block loading my-3" v-if="itemsHasMore"></button>
+        </div>
+        <div class="px-3 py-2 border-top text-danger text-break" v-if="feed_errors[current.feed.id]">
+            {{ feed_errors[current.feed.id] }}
+        </div>
+    </div>
+    <!-- item show -->
+    <div id="col-item" class="vh-100 d-flex flex-column w-100" style="min-width: 0;">
+        <div class="toolbar px-2 d-flex align-items-center" v-if="itemSelectedDetails">
+            <button class="toolbar-item"
+                    @click="toggleItemStarred(itemSelectedDetails)"
+                    :title="$t('mark_starred')">
+                <span class="icon" v-if="itemSelectedDetails.status=='starred'" >{% inline "star-full.svg" %}</span>
+                <span class="icon" v-else-if="itemSelectedDetails.status!='starred'" >{% inline "star.svg" %}</span>
+            </button>
+            <button class="toolbar-item"
+                    :title="$t('mark_unread')"
+                    @click="toggleItemRead(itemSelectedDetails)">
+                <span class="icon" v-if="itemSelectedDetails.status=='unread'">{% inline "circle-full.svg" %}</span>
+                <span class="icon" v-if="itemSelectedDetails.status!='unread'">{% inline "circle.svg" %}</span>
+            </button>
+            <dropdown class="settings-dropdown" toggle-class="toolbar-item px-2" drop="center" :title="$t('appearance')">
+                <template v-slot:button>
+                    <span class="icon">{% inline "sliders.svg" %}</span>
+                </template>
+
+                <button class="dropdown-item" :class="{active: !theme.font}" @click.stop="theme.font = ''">{{ $t('sans_serif') }}</button>
+                <button class="dropdown-item font-serif" :class="{active: theme.font == 'serif'}" @click.stop="theme.font = 'serif'">{{ $t('serif') }}</button>
+                <button class="dropdown-item font-monospace" :class="{active: theme.font == 'monospace'}" @click.stop="theme.font = 'monospace'">{{ $t('monospace') }}</button>
+
+                <div class="d-flex text-center">
+                    <button class="dropdown-item" style="font-size: 0.8rem" @click.stop="incrFont(-1)">A</button>
+                    <button class="dropdown-item" style="font-size: 1.2rem" @click.stop="incrFont(1)">A</button>
+                </div>
+            </dropdown>
+            <button class="toolbar-item"
+                    :class="{active: itemSelectedReadability}"
+                    @click="toggleReadability()"
+                    :title="$t('read_here')">
+                <span class="icon" :class="{'icon-loading': loading.readability}">{% inline "book-open.svg" %}</span>
+            </button>
+            <a class="toolbar-item" :href="itemSelectedDetails.link" rel="noopener noreferrer" target="_blank" referrerpolicy="no-referrer" :title="$t('open_link')">
+                <span class="icon">{% inline "external-link.svg" %}</span>
+            </a>
+            <div class="flex-grow-1"></div>
+            <button class="toolbar-item" @click="navigateToItem(-1)" :title="$t('previous_article')" :disabled="!items.length || itemSelected == items[0].id">
+                <span class="icon">{% inline "chevron-left.svg" %}</span>
+            </button>
+            <button class="toolbar-item" @click="navigateToItem(+1)" :title="$t('next_article')" :disabled="!items.length || itemSelected == items[items.length - 1].id">
+                <span class="icon">{% inline "chevron-right.svg" %}</span>
+            </button>
+            <button class="toolbar-item" @click="itemSelected=null" :title="$t('close_article')">
+                <span class="icon">{% inline "x.svg" %}</span>
+            </button>
+        </div>
+        <div v-if="itemSelectedDetails"
+                ref="content"
+                class="content px-4 pt-3 pb-5 border-top overflow-auto scroll-touch"
+                :class="{'font-serif': theme.font == 'serif', 'font-monospace': theme.font == 'monospace'}"
+                :style="{'font-size': theme.size + 'rem'}">
+            <div class="content-wrapper">
+                <h1><b>{{ itemSelectedDetails.title || $t('untitled') }}</b></h1>
+                <div class="text-muted">
+                    <div>
+                        <span class="cursor-pointer" @click="feedSelected = 'feed:'+(feedsById[itemSelectedDetails.feed_id] || {}).id">
+                            {{ (feedsById[itemSelectedDetails.feed_id] || {}).title }}
+                        </span>
+                    </div>
+                    <time>{{ formatDate(itemSelectedDetails.date) }}</time>
+                </div>
+                <hr>
+                <div v-if="!itemSelectedReadability">
+                    <div v-if="contentImages.length">
+                        <figure v-for="media in contentImages">
+                            <img :src="media.url" loading="lazy">
+                            <figcaption v-if="media.description">{{ media.description }}</figcaption>
+                        </figure>
+                    </div>
+                    <audio class="w-100" controls v-for="media in contentAudios" :src="media.url"></audio>
+                    <video class="w-100" controls v-for="media in contentVideos" :src="media.url"></video>
+                </div>
+                <div v-html="itemSelectedContent"></div>
+            </div>
+        </div>
+    </div>
+    <modal :open="!!settings" @hide="settings = ''">
+        <button class="btn btn-link outline-none float-right p-2 mr-n2 mt-n2" style="line-height: 1" @click="settings = ''">
+            <span class="icon">{% inline "x.svg" %}</span>
+        </button>
+        <div v-if="settings=='create'">
+            <p class="cursor-default"><b>{{ $t('new_feed') }}</b></p>
+            <form action="" @submit.prevent="createFeed(event)" class="mt-4">
+                <label for="feed-url">{{ $t('url') }}</label>
+                <input id="feed-url" name="url" type="url" class="form-control" required autocomplete="off" :readonly="feedNewChoice.length > 0" placeholder="https://example.com/feed" v-focus>
+                <label for="feed-folder" class="mt-3 d-block">
+                    {{ $t('folder') }}
+                    <a href="#" class="float-right text-decoration-none" @click.prevent="createNewFeedFolder()">{{ $t('new_folder') }}</a>
+                </label>
+                <select class="form-control" id="feed-folder" name="folder_id" ref="newFeedFolder">
+                    <option value="">---</option>
+                    <option :value="folder.id" v-for="folder in folders" :selected="folder.id === current.feed.folder_id || folder.id === current.folder.id">{{ folder.title }}</option>
+                </select>
+                <div class="mt-4" v-if="feedNewChoice.length">
+                    <p class="mb-2">
+                        {{ $t('multiple_feeds_found') }}
+                        <a href="#" class="float-right text-decoration-none" @click.prevent="resetFeedChoice()">{{ $t('cancel') }}</a>
+                    </p>
+                    <label class="selectgroup" v-for="choice in feedNewChoice">
+                        <input type="radio" name="feedToAdd" :value="choice.url" v-model="feedNewChoiceSelected">
+                        <div class="selectgroup-label">
+                            <div class="text-truncate">{{ choice.title }}</div>
+                            <div class="text-truncate" :class="{light: choice.title}">{{ choice.url }}</div>
+                        </div>
+                    </label>
+                </div>
+                <button class="btn btn-block btn-default mt-3" :class="{loading: loading.newfeed}" type="submit">{{ $t('add') }}</button>
+            </form>
+        </div>
+        <div v-else-if="settings=='shortcuts'">
+            <p class="cursor-default"><b>{{ $t('keyboard_shortcuts') }}</b></p>
+
+            <table class="table table-borderless table-sm table-compact m-0">
+                <tr><td><kbd>1</kbd> <kbd>2</kbd> <kbd>3</kbd></td>
+                                                        <td>{{ $t('kb_show_filters') }}</td></tr>
+                <tr><td><kbd>/</kbd></td>               <td>{{ $t('kb_focus_search') }}</td></tr>
+
+                <tr><td colspan=2>&nbsp;</td></tr>
+                <tr><td><kbd>j</kbd> <kbd>k</kbd></td>  <td>{{ $t('kb_next_prev_article') }}</td></tr>
+                <tr><td><kbd>l</kbd> <kbd>h</kbd></td>  <td>{{ $t('kb_next_prev_feed') }}</td></tr>
+                <tr><td><kbd>q</kbd></td>               <td>{{ $t('kb_close_article') }}</td></tr>
+
+                <tr><td colspan=2>&nbsp;</td></tr>
+                <tr><td><kbd>R</kbd></td>               <td>{{ $t('kb_mark_all_read') }}</td></tr>
+                <tr><td><kbd>r</kbd></td>               <td>{{ $t('kb_mark_read') }}</td></tr>
+                <tr><td><kbd>s</kbd></td>               <td>{{ $t('kb_mark_starred') }}</td></tr>
+                <tr><td><kbd>o</kbd></td>               <td>{{ $t('kb_open_link') }}</td></tr>
+                <tr><td><kbd>i</kbd></td>               <td>{{ $t('kb_read_here') }}</td> </tr>
+                <tr><td><kbd>f</kbd> <kbd>b</kbd></td>  <td>{{ $t('kb_scroll_content') }}</td>
+                </tr>
+            </table>
+        </div>
+    </modal>
+</div>
diff --git a/src/assets/javascripts/templates/login.html b/src/assets/javascripts/templates/login.html
new file mode 100644
index 0000000..33d5822
--- /dev/null
+++ b/src/assets/javascripts/templates/login.html
@@ -0,0 +1,16 @@
+<div>
+    <form action="" method="post">
+        <img src="./static/graphicarts/anchor.svg" alt="">
+        <div class="text-danger text-center my-3" v-if="hasError">{{ $t('login_error') }}</div>
+        <div class="form-group">
+            <label for="username">{{ $t('username') }}</label>
+            <input name="username" class="form-control" id="username" autocomplete="off"
+                value="{% if .username %}{% .username %}{% end %}" required autofocus>
+        </div>
+        <div class="form-group">
+            <label for="password">{{ $t('password') }}</label>
+            <input name="password" class="form-control" id="password" type="password" required>
+        </div>
+        <button class="btn btn-block btn-default" type="submit">{{ $t('login') }}</button>
+    </form>
+</div>
diff --git a/src/assets/templates/index.html b/src/assets/templates/index.html
index 61c2950..03f54e4 100644
--- a/src/assets/templates/index.html
+++ b/src/assets/templates/index.html
@@ -12,447 +12,12 @@
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
     <script>
         window.app = window.app || {}
-        window.app.settings = {% .settings %}
-        window.app.authenticated = {% .authenticated %}
+        window.app.settings = {{ .settings }};
+        window.app.authenticated = {{ .authenticated }};
     </script>
 </head>
-<body class="theme-{% .settings.theme_name %}">
-    <div id="app" class="d-flex" :class="{'feed-selected': feedSelected !== null, 'item-selected': itemSelected !== null}" v-cloak>
-        <!-- feed list -->
-        <div id="col-feed-list" class="vh-100 position-relative d-flex flex-column border-right flex-shrink-0" :style="{width: feedListWidth+'px'}">
-            <drag :width="feedListWidth" @resize="resizeFeedList"></drag>
-            <div class="p-2 toolbar d-flex align-items-center">
-                <div class="icon mx-2">{% inline "anchor.svg" %}</div>
-                <div class="flex-grow-1"></div>
-                <button class="toolbar-item ml-1"
-                        :class="{active: filterSelected == 'unread'}"
-                        :aria-pressed="filterSelected == 'unread'"
-                        :title="$t('unread')"
-                        @click="filterSelected = 'unread'">
-                    <span class="icon">{% inline "circle-full.svg" %}</span>
-                </button>
-                <button class="toolbar-item mx-1"
-                        :class="{active: filterSelected == 'starred'}"
-                        :aria-pressed="filterSelected == 'starred'"
-                        :title="$t('starred')"
-                        @click="filterSelected = 'starred'">
-                    <span class="icon">{% inline "star-full.svg" %}</span>
-                </button>
-                <button class="toolbar-item mr-1"
-                        :class="{active: filterSelected == ''}"
-                        :aria-pressed="filterSelected == ''"
-                        :title="$t('all')"
-                        @click="filterSelected = ''">
-                    <span class="icon">{% inline "assorted.svg" %}</span>
-                </button>
-                <div class="flex-grow-1"></div>
-                <dropdown class="settings-dropdown" toggle-class="btn btn-link toolbar-item px-2" ref="menuDropdown" drop="right" :title="$t('settings')">
-                    <template v-slot:button>
-                        <span class="icon">{% inline "more-horizontal.svg" %}</span>
-                    </template>
-
-                    <button class="dropdown-item" @click="showSettings('create')">
-                        <span class="icon mr-1">{% inline "plus.svg" %}</span>
-                        {{ $t('new_feed') }}
-                    </button>
-                    <div class="dropdown-divider"></div>
-                    <button class="dropdown-item" @click="fetchAllFeeds()">
-                        <span class="icon mr-1">{% inline "rotate-cw.svg" %}</span>
-                        {{ $t('refresh_feeds') }}
-                    </button>
-
-                    <div class="dropdown-divider"></div>
-
-                    <header class="dropdown-header" role="heading" aria-level="2">{{ $t('theme') }}</header>
-                    <div class="row text-center m-0">
-                        <button class="btn btn-link col-4 px-0 rounded-0"
-                                :class="'theme-'+t"
-                                :title="t"
-                                :aria-label="t"
-                                :aria-pressed="theme.name == t"
-                                @click.stop="theme.name = t"
-                                v-for="t in ['light', 'sepia', 'night']">
-                            <span class="icon" v-if="theme.name == t">{% inline "check.svg" %}</span>
-                        </button>
-                    </div>
-
-                    <div class="dropdown-divider"></div>
-
-                    <header class="dropdown-header" role="heading" aria-level="2">{{ $t('auto_refresh') }}</header>
-                    <div class="row text-center m-0">
-                        <button class="dropdown-item col-4 px-0"
-                                @click.stop="changeRefreshRate(-1)"
-                                :disabled="!refreshRate">
-                            <span class="icon">
-                                {% inline "chevron-down.svg" %}
-                            </span>
-                        </button>
-                        <div class="col-4 d-flex align-items-center justify-content-center">{{ refreshRateTitle }}</div>
-                        <button class="dropdown-item col-4 px-0"
-                                @click.stop="changeRefreshRate(1)" :disabled="refreshRate === refreshRateOptions.at(-1).value">
-                            <span class="icon">
-                                {% inline "chevron-up.svg" %}
-                            </span>
-                        </button>
-                    </div>
-
-                    <div class="dropdown-divider"></div>
-
-                    <header class="dropdown-header" role="heading" aria-level="2">{{ $t('show_first') }}</header>
-                    <div class="d-flex text-center">
-                        <button class="dropdown-item px-0" :aria-pressed="itemSortNewestFirst"  :class="{active: itemSortNewestFirst}"  @click.stop="itemSortNewestFirst=true">{{ $t('new') }}</button>
-                        <button class="dropdown-item px-0" :aria-pressed="!itemSortNewestFirst" :class="{active: !itemSortNewestFirst}" @click.stop="itemSortNewestFirst=false">{{ $t('old') }}</button>
-                    </div>
-                    <div class="dropdown-divider"></div>
-                    <header class="dropdown-header" role="heading" aria-level="2">{{ $t('subscriptions') }}</header>
-                    <form id="opml-import-form" enctype="multipart/form-data" tabindex="-1">
-                        <input type="file"
-                               id="opml-import"
-                               @change="importOPML"
-                               name="opml"
-                               style="opacity: 0; width: 1px; height: 0; position: absolute; z-index: -1;">
-                        <label class="dropdown-item mb-0 cursor-pointer" for="opml-import" @click.stop="">
-                            <span class="icon mr-1">{% inline "download.svg" %}</span>
-                            {{ $t('import') }}
-                        </label>
-                    </form>
-                    <a class="dropdown-item" href="./opml/export">
-                        <span class="icon mr-1">{% inline "upload.svg" %}</span>
-                        {{ $t('export') }}
-                    </a>
-                    <div class="dropdown-divider"></div>
-                    <button class="dropdown-item" @click="showSettings('shortcuts')">
-                        <span class="icon mr-1">{% inline "help-circle.svg" %}</span>
-                        {{ $t('shortcuts') }}
-                    </button>
-                    <div class="dropdown-divider"></div>
-                    <header class="dropdown-header" role="heading" aria-level="2">A / あ / 文</header>
-                    <div class="container">
-                        <div class="row">
-                            <button
-                                v-for="lang in languages"
-                                class="dropdown-item text-center col-3 px-0"
-                                :aria-label="lang.name"
-                                :title="lang.name"
-                                :class="{active: language==lang.code}"
-                                @click.stop="changeLanguage(lang.code)">
-                                    {{ lang.code }}
-                            </button>
-                        </div>
-                    </div>
-                    <div class="dropdown-divider" v-if="authenticated"></div>
-                    <button class="dropdown-item" v-if="authenticated" @click="logout()">
-                        <span class="icon mr-1">{% inline "log-out.svg" %}</span>
-                        {{ $t('log_out') }}
-                    </button>
-                </dropdown>
-            </div>
-            <div id="feed-list-scroll" class="p-2 overflow-auto scroll-touch border-top flex-grow-1">
-                <label class="selectgroup">
-                    <input type="radio" name="feed" value="" v-model="feedSelected">
-                    <div class="selectgroup-label d-flex align-items-center w-100">
-                        <span class="icon mr-2">{% inline "layers.svg" %}</span>
-                        <span class="flex-fill text-left text-truncate" v-if="filterSelected=='unread'">{{ $t('all_unread') }}</span>
-                        <span class="flex-fill text-left text-truncate" v-if="filterSelected=='starred'">{{ $t('all_starred') }}</span>
-                        <span class="flex-fill text-left text-truncate" v-if="filterSelected==''">{{ $t('all_feeds') }}</span>
-                        <span class="counter text-right">{{ filteredTotalStats }}</span>
-                    </div>
-                </label>
-                <div v-for="folder in foldersWithFeeds">
-                    <label class="selectgroup mt-1"
-                           :class="{'d-none': mustHideFolder(folder)}"
-                           v-if="folder.id">
-                        <input type="radio" name="feed" :value="'folder:'+folder.id" v-model="feedSelected" v-if="folder.id">
-                        <div class="selectgroup-label d-flex align-items-center w-100" v-if="folder.id">
-                            <span class="icon mr-2"
-                                  :class="{expanded: folder.is_expanded}"
-                                  @click.prevent="toggleFolderExpanded(folder)">
-                                {% inline "chevron-right.svg" %}
-                            </span>
-                            <span class="flex-fill text-left text-truncate">{{ folder.title }}</span>
-                            <span class="counter text-right">{{ filteredFolderStats[folder.id] || '' }}</span>
-                        </div>
-                    </label>
-                    <div v-show="!folder.id || folder.is_expanded" class="mt-1" :class="{'pl-3': folder.id}">
-                        <label class="selectgroup"
-                              :class="{'d-none': mustHideFeed(feed)}"
-                               v-for="feed in folder.feeds">
-                            <input type="radio" name="feed" :value="'feed:'+feed.id" v-model="feedSelected">
-                            <div class="selectgroup-label d-flex align-items-center w-100">
-                                <span class="icon mr-2" v-if="!feed.has_icon">{% inline "rss.svg" %}</span>
-                                <span class="icon mr-2" v-else><img :src="'./api/feeds/'+feed.id+'/icon'" alt="" loading="lazy"></span>
-                                <span class="flex-fill text-left text-truncate">{{ feed.title }}</span>
-                                <span class="counter text-right">{{ filteredFeedStats[feed.id] || '' }}</span>
-                                <span class="icon flex-shrink-0 mx-2"
-                                      :title="feed_errors[feed.id]"
-                                      v-if="!filterSelected && feed_errors[feed.id]">
-                                    {% inline "alert-circle.svg" %}
-                                </span>
-                            </div>
-                        </label>
-                    </div>
-                </div>
-            </div>
-            <div class="p-2 toolbar d-flex align-items-center border-top flex-shrink-0" v-if="loading.feeds">
-                <span class="icon loading mx-2"></span>
-                <span class="text-truncate cursor-default noselect">{{ $t('refreshing_progress', {count: loading.feeds}) }}</span>
-            </div>
-        </div>
-        <!-- item list -->
-        <div id="col-item-list" class="vh-100 position-relative d-flex flex-column border-right flex-shrink-0" :style="{width: itemListWidth+'px'}">
-            <drag :width="itemListWidth" @resize="resizeItemList"></drag>
-            <div class="px-2 toolbar d-flex align-items-center">
-                <button class="toolbar-item mr-2 d-block d-md-none"
-                        @click="feedSelected = null"
-                        :title="$t('show_feeds')">
-                    <span class="icon">{% inline "chevron-left.svg" %}</span>
-                </button>
-                <div class="input-icon flex-grow-1">
-                    <span class="icon">{% inline "search.svg" %}</span>
-                    <!-- id used by keybindings -->
-                    <input id="searchbar" type="" class="d-block toolbar-search" v-model="itemSearch" @keydown.enter="$event.target.blur()">
-                </div>
-                <button class="toolbar-item ml-2"
-                        @click="markItemsRead()"
-                        v-if="filterSelected == 'unread'"
-                        :title="$t('mark_all_read')">
-                    <span class="icon">{% inline "check.svg" %}</span>
-                </button>
-
-
-                <button class="btn btn-link toolbar-item px-2 ml-2" v-if="!current.type" disabled>
-                    <span class="icon">{% inline "more-horizontal.svg" %}</span>
-                </button>
-                <dropdown class="settings-dropdown"
-                          toggle-class="btn btn-link toolbar-item px-2 ml-2"
-                          drop="right"
-                          :title="$t('feed_settings')"
-                          v-if="current.type == 'feed'">
-                    <template v-slot:button>
-                        <span class="icon">{% inline "more-horizontal.svg" %}</span>
-                    </template>
-                    <header class="dropdown-header" role="heading" aria-level="2">{{ current.feed.title }}</header>
-                    <a class="dropdown-item" :href="current.feed.link" rel="noopener noreferrer" target="_blank" referrerpolicy="no-referrer" v-if="current.feed.link">
-                        <span class="icon mr-1">{% inline "globe.svg" %}</span>
-                        {{ $t('website') }}
-                    </a>
-                    <a class="dropdown-item" :href="current.feed.feed_link" rel="noopener noreferrer" target="_blank" referrerpolicy="no-referrer" v-if="current.feed.feed_link">
-                        <span class="icon mr-1">{% inline "rss.svg" %}</span>
-                        {{ $t('feed_link') }}
-                    </a>
-                    <div class="dropdown-divider" v-if="current.feed.link || current.feed.feed_link"></div>
-                    <button class="dropdown-item" @click="renameFeed(current.feed)">
-                        <span class="icon mr-1">{% inline "edit.svg" %}</span>
-                        {{ $t('rename') }}
-                    </button>
-                    <button class="dropdown-item" @click="updateFeedLink(current.feed)" v-if="current.feed.feed_link">
-                        <span class="icon mr-1">{% inline "edit.svg" %}</span>
-                        {{ $t('change_link') }}
-                    </button>
-                    <div class="dropdown-divider"></div>
-                    <header class="dropdown-header" role="heading" aria-level="2">{{ $t('move_to') }}</header>
-                    <button class="dropdown-item"
-                        v-if="folder.id != current.feed.folder_id"
-                        v-for="folder in folders"
-                        @click="moveFeed(current.feed, folder)">
-                        <span class="icon mr-1">{% inline "folder.svg" %}</span>
-                        {{ folder.title }}
-                    </button>
-                    <button class="dropdown-item text-muted" @click="moveFeed(current.feed, null)" v-if="current.feed.folder_id">
-                        <span class="icon mr-1">{% inline "folder-minus.svg" %}</span>
-                        ──
-                    </button>
-                    <button class="dropdown-item text-muted" @click="moveFeedToNewFolder(current.feed)">
-                        <span class="icon mr-1">{% inline "folder-plus.svg" %}</span>
-                        {{ $t('new_folder') }}
-                    </button>
-                    <div class="dropdown-divider"></div>
-                    <button class="dropdown-item text-danger" @click.prevent="deleteFeed(current.feed)">
-                        <span class="icon mr-1">{% inline "trash.svg" %}</span>
-                        {{ $t('delete') }}
-                    </button>
-                </dropdown>
-                <dropdown class="settings-dropdown"
-                          toggle-class="btn btn-link toolbar-item px-2 ml-2"
-                          :title="$t('folder_settings')"
-                          drop="right"
-                          v-if="current.type == 'folder'">
-                    <template v-slot:button>
-                        <span class="icon">{% inline "more-horizontal.svg" %}</span>
-                    </template>
-                    <header class="dropdown-header" role="heading" aria-level="2">{{ current.folder.title }}</header>
-                    <button class="dropdown-item" @click="renameFolder(current.folder)">
-                        <span class="icon mr-1">{% inline "edit.svg" %}</span>
-                        {{ $t('rename') }}
-                    </button>
-                    <div class="dropdown-divider"></div>
-                    <button class="dropdown-item text-danger" @click="deleteFolder(current.folder)">
-                        <span class="icon mr-1">{% inline "trash.svg" %}</span>
-                        {{ $t('delete') }}
-                    </button>
-                </dropdown>
-            </div>
-            <div id="item-list-scroll" class="p-2 overflow-auto scroll-touch border-top flex-grow-1" v-scroll="loadMoreItems" ref="itemlist">
-                <label v-for="item in items" :key="item.id"
-                       class="selectgroup">
-                    <input type="radio" name="item" :value="item.id" v-model="itemSelected">
-                    <div class="selectgroup-label d-flex flex-column">
-                        <div style="line-height: 100%; opacity: .7; margin-bottom: .1rem;" class="d-flex align-items-center">
-                            <transition name="indicator">
-                                <span class="icon icon-small mr-1" v-if="item.status=='unread'">{% inline "circle-full.svg" %}</span>
-                                <span class="icon icon-small mr-1" v-if="item.status=='starred'">{% inline "star-full.svg" %}</span>
-                            </transition>
-                            <small class="flex-fill text-truncate mr-1">
-                                {{ (feedsById[item.feed_id] || {}).title }}
-                            </small>
-                            <small class="flex-shrink-0"><relative-time v-bind:title="formatDate(item.date)" :val="item.date"/></small>
-                        </div>
-                        <div>{{ item.title || $t('untitled') }}</div>
-                    </div>
-                </label>
-                <button class="btn btn-link btn-block loading my-3" v-if="itemsHasMore"></button>
-            </div>
-            <div class="px-3 py-2 border-top text-danger text-break" v-if="feed_errors[current.feed.id]">
-                {{ feed_errors[current.feed.id] }}
-            </div>
-        </div>
-        <!-- item show -->
-        <div id="col-item" class="vh-100 d-flex flex-column w-100" style="min-width: 0;">
-            <div class="toolbar px-2 d-flex align-items-center" v-if="itemSelectedDetails">
-                <button class="toolbar-item"
-                        @click="toggleItemStarred(itemSelectedDetails)"
-                        :title="$t('mark_starred')">
-                    <span class="icon" v-if="itemSelectedDetails.status=='starred'" >{% inline "star-full.svg" %}</span>
-                    <span class="icon" v-else-if="itemSelectedDetails.status!='starred'" >{% inline "star.svg" %}</span>
-                </button>
-                <button class="toolbar-item"
-                        :title="$t('mark_unread')"
-                        @click="toggleItemRead(itemSelectedDetails)">
-                    <span class="icon" v-if="itemSelectedDetails.status=='unread'">{% inline "circle-full.svg" %}</span>
-                    <span class="icon" v-if="itemSelectedDetails.status!='unread'">{% inline "circle.svg" %}</span>
-                </button>
-                <dropdown class="settings-dropdown" toggle-class="toolbar-item px-2" drop="center" :title="$t('appearance')">
-                    <template v-slot:button>
-                        <span class="icon">{% inline "sliders.svg" %}</span>
-                    </template>
-
-                    <button class="dropdown-item" :class="{active: !theme.font}" @click.stop="theme.font = ''">{{ $t('sans_serif') }}</button>
-                    <button class="dropdown-item font-serif" :class="{active: theme.font == 'serif'}" @click.stop="theme.font = 'serif'">{{ $t('serif') }}</button>
-                    <button class="dropdown-item font-monospace" :class="{active: theme.font == 'monospace'}" @click.stop="theme.font = 'monospace'">{{ $t('monospace') }}</button>
-
-                    <div class="d-flex text-center">
-                        <button class="dropdown-item" style="font-size: 0.8rem" @click.stop="incrFont(-1)">A</button>
-                        <button class="dropdown-item" style="font-size: 1.2rem" @click.stop="incrFont(1)">A</button>
-                    </div>
-                </dropdown>
-                <button class="toolbar-item"
-                        :class="{active: itemSelectedReadability}"
-                        @click="toggleReadability()"
-                        :title="$t('read_here')">
-                    <span class="icon" :class="{'icon-loading': loading.readability}">{% inline "book-open.svg" %}</span>
-                </button>
-                <a class="toolbar-item" :href="itemSelectedDetails.link" rel="noopener noreferrer" target="_blank" referrerpolicy="no-referrer" :title="$t('open_link')">
-                    <span class="icon">{% inline "external-link.svg" %}</span>
-                </a>
-                <div class="flex-grow-1"></div>
-                <button class="toolbar-item" @click="navigateToItem(-1)" :title="$t('previous_article')" :disabled="!items.length || itemSelected == items[0].id">
-                    <span class="icon">{% inline "chevron-left.svg" %}</span>
-                </button>
-                <button class="toolbar-item" @click="navigateToItem(+1)" :title="$t('next_article')" :disabled="!items.length || itemSelected == items[items.length - 1].id">
-                    <span class="icon">{% inline "chevron-right.svg" %}</span>
-                </button>
-                <button class="toolbar-item" @click="itemSelected=null" :title="$t('close_article')">
-                    <span class="icon">{% inline "x.svg" %}</span>
-                </button>
-            </div>
-            <div v-if="itemSelectedDetails"
-                 ref="content"
-                 class="content px-4 pt-3 pb-5 border-top overflow-auto scroll-touch"
-                 :class="{'font-serif': theme.font == 'serif', 'font-monospace': theme.font == 'monospace'}"
-                 :style="{'font-size': theme.size + 'rem'}">
-                <div class="content-wrapper">
-                    <h1><b>{{ itemSelectedDetails.title || $t('untitled') }}</b></h1>
-                    <div class="text-muted">
-                        <div>
-                            <span class="cursor-pointer" @click="feedSelected = 'feed:'+(feedsById[itemSelectedDetails.feed_id] || {}).id">
-                                {{ (feedsById[itemSelectedDetails.feed_id] || {}).title }}
-                            </span>
-                        </div>
-                        <time>{{ formatDate(itemSelectedDetails.date) }}</time>
-                    </div>
-                    <hr>
-                    <div v-if="!itemSelectedReadability">
-                        <div v-if="contentImages.length">
-                            <figure v-for="media in contentImages">
-                                <img :src="media.url" loading="lazy">
-                                <figcaption v-if="media.description">{{ media.description }}</figcaption>
-                            </figure>
-                        </div>
-                        <audio class="w-100" controls v-for="media in contentAudios" :src="media.url"></audio>
-                        <video class="w-100" controls v-for="media in contentVideos" :src="media.url"></video>
-                    </div>
-                    <div v-html="itemSelectedContent"></div>
-                </div>
-            </div>
-        </div>
-        <modal :open="!!settings" @hide="settings = ''">
-            <button class="btn btn-link outline-none float-right p-2 mr-n2 mt-n2" style="line-height: 1" @click="settings = ''">
-                <span class="icon">{% inline "x.svg" %}</span>
-            </button>
-            <div v-if="settings=='create'">
-                <p class="cursor-default"><b>{{ $t('new_feed') }}</b></p>
-                <form action="" @submit.prevent="createFeed(event)" class="mt-4">
-                    <label for="feed-url">{{ $t('url') }}</label>
-                    <input id="feed-url" name="url" type="url" class="form-control" required autocomplete="off" :readonly="feedNewChoice.length > 0" placeholder="https://example.com/feed" v-focus>
-                    <label for="feed-folder" class="mt-3 d-block">
-                        {{ $t('folder') }}
-                        <a href="#" class="float-right text-decoration-none" @click.prevent="createNewFeedFolder()">{{ $t('new_folder') }}</a>
-                    </label>
-                    <select class="form-control" id="feed-folder" name="folder_id" ref="newFeedFolder">
-                        <option value="">---</option>
-                        <option :value="folder.id" v-for="folder in folders" :selected="folder.id === current.feed.folder_id || folder.id === current.folder.id">{{ folder.title }}</option>
-                    </select>
-                    <div class="mt-4" v-if="feedNewChoice.length">
-                        <p class="mb-2">
-                            {{ $t('multiple_feeds_found') }}
-                            <a href="#" class="float-right text-decoration-none" @click.prevent="resetFeedChoice()">{{ $t('cancel') }}</a>
-                        </p>
-                        <label class="selectgroup" v-for="choice in feedNewChoice">
-                            <input type="radio" name="feedToAdd" :value="choice.url" v-model="feedNewChoiceSelected">
-                            <div class="selectgroup-label">
-                                <div class="text-truncate">{{ choice.title }}</div>
-                                <div class="text-truncate" :class="{light: choice.title}">{{ choice.url }}</div>
-                            </div>
-                        </label>
-                    </div>
-                    <button class="btn btn-block btn-default mt-3" :class="{loading: loading.newfeed}" type="submit">{{ $t('add') }}</button>
-                </form>
-            </div>
-            <div v-else-if="settings=='shortcuts'">
-                <p class="cursor-default"><b>{{ $t('keyboard_shortcuts') }}</b></p>
-
-                <table class="table table-borderless table-sm table-compact m-0">
-                    <tr><td><kbd>1</kbd> <kbd>2</kbd> <kbd>3</kbd></td>
-                                                            <td>{{ $t('kb_show_filters') }}</td></tr>
-                    <tr><td><kbd>/</kbd></td>               <td>{{ $t('kb_focus_search') }}</td></tr>
-
-                    <tr><td colspan=2>&nbsp;</td></tr>
-                    <tr><td><kbd>j</kbd> <kbd>k</kbd></td>  <td>{{ $t('kb_next_prev_article') }}</td></tr>
-                    <tr><td><kbd>l</kbd> <kbd>h</kbd></td>  <td>{{ $t('kb_next_prev_feed') }}</td></tr>
-                    <tr><td><kbd>q</kbd></td>               <td>{{ $t('kb_close_article') }}</td></tr>
-
-                    <tr><td colspan=2>&nbsp;</td></tr>
-                    <tr><td><kbd>R</kbd></td>               <td>{{ $t('kb_mark_all_read') }}</td></tr>
-                    <tr><td><kbd>r</kbd></td>               <td>{{ $t('kb_mark_read') }}</td></tr>
-                    <tr><td><kbd>s</kbd></td>               <td>{{ $t('kb_mark_starred') }}</td></tr>
-                    <tr><td><kbd>o</kbd></td>               <td>{{ $t('kb_open_link') }}</td></tr>
-                    <tr><td><kbd>i</kbd></td>               <td>{{ $t('kb_read_here') }}</td> </tr>
-                    <tr><td><kbd>f</kbd> <kbd>b</kbd></td>  <td>{{ $t('kb_scroll_content') }}</td>
-                    </tr>
-                </table>
-            </div>
-        </modal>
-    </div>
+<body class="theme-{{ .settings.theme_name }}">
+    <div id="app" v-cloak></div>
     <!-- external -->
     <script src="./static/javascripts/vue.min.js"></script>
     <script src="./static/javascripts/fluent.js"></script>
diff --git a/src/assets/templates/login.html b/src/assets/templates/login.html
index 408ac1e..5c6c1ab 100644
--- a/src/assets/templates/login.html
+++ b/src/assets/templates/login.html
@@ -23,32 +23,17 @@
         }
     </style>
 </head>
-<body class="theme-{% .settings.theme_name %}">
-    <div id="app" v-cloak>
-        <form action="" method="post">
-            <img src="./static/graphicarts/anchor.svg" alt="">
-            <div class="text-danger text-center my-3" v-if="hasError">{{ $t('login_error') }}</div>
-            <div class="form-group">
-                <label for="username">{{ $t('username') }}</label>
-                <input name="username" class="form-control" id="username" autocomplete="off"
-                       value="{% if .username %}{% .username %}{% end %}" required autofocus>
-            </div>
-            <div class="form-group">
-                <label for="password">{{ $t('password') }}</label>
-                <input name="password" class="form-control" id="password" type="password" required>
-            </div>
-            <button class="btn btn-block btn-default" type="submit">{{ $t('login') }}</button>
-        </form>
-    </div>
+<body class="theme-{{ .settings.theme_name }}">
+    <div id="app" v-cloak></div>
     <script src="./static/javascripts/vue.min.js"></script>
     <script src="./static/javascripts/fluent.js"></script>
     <script src="./static/javascripts/i18n.js"></script>
     <script>
         Vue.use(i18n)
         new Vue({
-            data: { hasError: {% .hasError %} },
+            data: { hasError: {{ .hasError }} },
             created: function () {
-                this.$setLang('{% .settings.language %}')
+                this.$setLang('{{ .settings.language }}')
             }
         }).$mount('#app')
     </script>