materialdesignish

Former-commit-id: 5624723eeb939734902eeaa6c2f132c4beffa911 [formerly a83456d3eda5175e2941b2deeb58b5da323ff678] [formerly a6b3ac7942dbf48d7d9b3f8db5e5041a93143f19 [formerly 4d6b54c63e]]
Former-commit-id: d03621c16b2c892701d678361b6c0a7d5dbec620 [formerly d818b6751e035f283e1c8390d7993a33a459a7dd]
Former-commit-id: 3539ee68532135467daa2cc175482769b1efb592

assets/index.html

@@ -24,6 +24,7 @@
   <!-- Add to home screen for Windows -->
   <meta name="msapplication-TileImage" content="{{ .BaseURL }}/static/img/icons/msapplication-icon-144x144.png">
   <meta name="msapplication-TileColor" content="#2979ff">
+
   <% for (var chunk of webpack.chunks) {
     for (var file of chunk.files) {
       if (file.match(/\.(js|css)$/)) { %>

assets/src/components/prompts/Copy.vue

@@ -1,19 +1,23 @@
 <template>
-  <div class="prompt">
+  <div class="card floating">
-    <h3>{{ $t('prompts.copy') }}</h3>
+    <div class="card-title">
+      <h2>{{ $t('prompts.copy') }}</h2>
+    </div>
+
+    <div class="card-content">
       <p>{{ $t('prompts.copyMessage') }}</p>
-
       <file-list @update:selected="val => dest = val"></file-list>
+    </div>
 
-    <div>
+    <div class="card-action">
-      <button class="ok"
+      <button class="cancel flat"
-        @click="copy"
-        :aria-label="$t('buttons.copy')"
-        :title="$t('buttons.copy')">{{ $t('buttons.copy') }}</button>
-      <button class="cancel"
         @click="$store.commit('closeHovers')"
         :aria-label="$t('buttons.cancel')"
         :title="$t('buttons.cancel')">{{ $t('buttons.cancel') }}</button>
+      <button class="flat"
+        @click="copy"
+        :aria-label="$t('buttons.copy')"
+        :title="$t('buttons.copy')">{{ $t('buttons.copy') }}</button>
     </div>
   </div>
 </template>

assets/src/components/prompts/Delete.vue

@@ -1,16 +1,18 @@
 <template>
-  <div class="prompt">
+  <div class="card floating">
-    <h3>{{ $t('prompts.deleteTitle') }}</h3>
+    <div class="card-content">
-    <p v-show="req.kind !== 'listing'">{{ $t('prompts.deleteMessageSingle') }}</p>
+      <p v-if="req.kind !== 'listing'">{{ $t('prompts.deleteMessageSingle') }}</p>
-    <p v-show="req.kind === 'listing'">{{ $t('prompts.deleteMessageMultiple', { count: selectedCount}) }}</p>
+      <p v-else>{{ $t('prompts.deleteMessageMultiple', { count: selectedCount}) }}</p>
-    <div>
+    </div>
-      <button @click="submit"
+    <div class="card-action">
-        :aria-label="$t('buttons.delete')"
+      <button @click="$store.commit('closeHovers')"
-        :title="$t('buttons.delete')">{{ $t('buttons.delete') }}</button>
+        class="flat cancel"
-      <button class="cancel"
-        @click="$store.commit('closeHovers')"
         :aria-label="$t('buttons.cancel')"
         :title="$t('buttons.cancel')">{{ $t('buttons.cancel') }}</button>
+      <button @click="submit"
+        class="flat"
+        :aria-label="$t('buttons.delete')"
+        :title="$t('buttons.delete')">{{ $t('buttons.delete') }}</button>
     </div>
   </div>
 </template>

assets/src/components/prompts/Download.vue

@@ -1,13 +1,18 @@
 <template>
-  <div class="prompt" id="download">
+  <div class="card floating" id="download">
-    <h3>{{ $t('prompts.download') }}</h3>
+    <div class="card-title">
+      <h2>{{ $t('prompts.download') }}</h2>
+    </div>
+
+    <div class="card-content">
       <p>{{ $t('prompts.downloadMessage') }}</p>
 
-    <button @click="download('zip')" autofocus>zip</button>
+      <button class="block cancel" @click="download('zip')" autofocus>zip</button>
-    <button @click="download('tar')" autofocus>tar</button>
+      <button class="block cancel" @click="download('tar')" autofocus>tar</button>
-    <button @click="download('targz')" autofocus>tar.gz</button>
+      <button class="block cancel" @click="download('targz')" autofocus>tar.gz</button>
-    <button @click="download('tarbz2')" autofocus>tar.bz2</button>
+      <button class="block cancel" @click="download('tarbz2')" autofocus>tar.bz2</button>
-    <button @click="download('tarxz')" autofocus>tar.xz</button>
+      <button class="block cancel" @click="download('tarxz')" autofocus>tar.xz</button>
+    </div>
   </div>
 </template>
 

assets/src/components/prompts/Help.vue

@@ -1,7 +1,10 @@
 <template>
-  <div class="prompt help">
+  <div class="card floating help">
-    <h3>{{ $t('help.help') }}</h3>
+    <div class="card-title">
+      <h2>{{ $t('help.help') }}</h2>
+    </div>
 
+    <div class="card-content">
       <ul>
         <li><strong>F1</strong> - {{ $t('help.f1') }}</li>
         <li><strong>F2</strong> - {{ $t('help.f2') }}</li>
@@ -13,11 +16,12 @@
         <li><strong>Click</strong> - {{ $t('help.click') }}</li>
         <li><strong>Double click</strong> - {{ $t('help.doubleClick') }}</li>
       </ul>
+    </div>
 
-    <div>
+    <div class="card-action">
       <button type="submit"
         @click="$store.commit('closeHovers')"
-        class="ok"
+        class="flat"
         :aria-label="$t('buttons.ok')"
         :title="$t('buttons.ok')">{{ $t('buttons.ok') }}</button>
     </div>

assets/src/components/prompts/Info.vue

@@ -1,29 +1,33 @@
 <template>
-  <div class="prompt">
+  <div class="card floating">
-    <h3>{{ $t('prompts.fileInfo') }}</h3>
+    <div class="card-title">
+      <h2>{{ $t('prompts.fileInfo') }}</h2>
+    </div>
 
-    <p v-show="selected.length > 1">{{ $t('prompts.filesSelected', { count: selected.length }) }}</p>
+    <div class="card-content">
+      <p v-if="selected.length > 1">{{ $t('prompts.filesSelected', { count: selected.length }) }}</p>
 
-    <p v-show="selected.length < 2"><strong>{{ $t('prompts.displayName') }}</strong> {{ name() }}</p>
+      <p v-if="selected.length < 2"><strong>{{ $t('prompts.displayName') }}</strong> {{ name() }}</p>
       <p><strong>{{ $t('prompts.size') }}:</strong> <span id="content_length"></span>{{ humanSize() }}</p>
-    <p v-show="selected.length < 2"><strong>{{ $t('prompts.lastModified') }}:</strong> {{ humanTime() }}</p>
+      <p v-if="selected.length < 2"><strong>{{ $t('prompts.lastModified') }}:</strong> {{ humanTime() }}</p>
 
-    <section v-show="dir() && selected.length === 0">
+      <template v-if="dir() && selected.length === 0">
         <p><strong>{{ $t('prompts.numberFiles') }}:</strong> {{ req.numFiles }}</p>
         <p><strong>{{ $t('prompts.numberDirs') }}:</strong> {{ req.numDirs }}</p>
-    </section>
+      </template>
 
-    <section v-show="!dir()">
+      <template v-if="!dir()">
         <p><strong>MD5:</strong> <code><a @click="checksum($event, 'md5')">{{ $t('prompts.show') }}</a></code></p>
         <p><strong>SHA1:</strong> <code><a @click="checksum($event, 'sha1')">{{ $t('prompts.show') }}</a></code></p>
         <p><strong>SHA256:</strong> <code><a @click="checksum($event, 'sha256')">{{ $t('prompts.show') }}</a></code></p>
         <p><strong>SHA512:</strong> <code><a @click="checksum($event, 'sha512')">{{ $t('prompts.show') }}</a></code></p>
-    </section>
+      </template>
+    </div>
 
-    <div>
+    <div class="card-action">
       <button type="submit"
         @click="$store.commit('closeHovers')"
-        class="ok"
+        class="flat"
         :aria-label="$t('buttons.ok')"
         :title="$t('buttons.ok')">{{ $t('buttons.ok') }}</button>
     </div>

assets/src/components/prompts/Move.vue

@@ -1,19 +1,22 @@
 <template>
-  <div class="prompt">
+  <div class="card floating">
-    <h3>{{ $t('prompts.move') }}</h3>
+    <div class="card-title">
-    <p>{{ $t('prompts.moveMessage') }}</p>
+      <h2>{{ $t('prompts.move') }}</h2>
+    </div>
 
+    <div class="card-content">
       <file-list @update:selected="val => dest = val"></file-list>
+    </div>
 
-    <div>
+    <div class="card-action">
-      <button class="ok"
+      <button class="flat cancel"
-        @click="move"
-        :aria-label="$t('buttons.move')"
-        :title="$t('buttons.move')">{{ $t('buttons.move') }}</button>
-      <button class="cancel"
         @click="$store.commit('closeHovers')"
         :aria-label="$t('buttons.cancel')"
         :title="$t('buttons.cancel')">{{ $t('buttons.cancel') }}</button>
+      <button class="flat"
+        @click="move"
+        :aria-label="$t('buttons.move')"
+        :title="$t('buttons.move')">{{ $t('buttons.move') }}</button>
     </div>
   </div>
 </template>

assets/src/components/prompts/NewArchetype.vue

@@ -1,18 +1,24 @@
 <template>
-  <div class="prompt">
+  <div class="card floating">
-    <h3>{{ $t('prompts.newFile') }}</h3>
+    <div class="card-title">
+      <h2>{{ $t('prompts.newFile') }}</h2>
+    </div>
+
+    <div class="card-content">
       <p>{{ $t('prompts.newArchetype') }}</p>
       <input autofocus type="text" @keyup.enter="submit" v-model.trim="name">
       <input type="text" @keyup.enter="submit" v-model.trim="archetype">
-    <div>
+    </div>
-      <button class="ok"
+
-        @click="submit"
+    <div class="card-action">
-        :aria-label="$t('buttons.create')"
+      <button class="flat cancel"
-        :title="$t('buttons.create')">{{ $t('buttons.create') }}</button>
-      <button class="cancel"
         @click="$store.commit('closeHovers')"
         :aria-label="$t('buttons.cancel')"
         :title="$t('buttons.cancel')">{{ $t('buttons.cancel') }}</button>
+      <button class="flat"
+        @click="submit"
+        :aria-label="$t('buttons.create')"
+        :title="$t('buttons.create')">{{ $t('buttons.create') }}</button>
     </div>
   </div>
 </template>

assets/src/components/prompts/NewDir.vue

@@ -1,17 +1,23 @@
 <template>
-  <div class="prompt">
+  <div class="card floating">
-    <h3>{{ $t('prompts.newDir') }}</h3>
+    <div class="card-title">
+      <h2>{{ $t('prompts.newDir') }}</h2>
+    </div>
+
+    <div class="card-content">
       <p>{{ $t('prompts.newDirMessage') }}</p>
       <input autofocus type="text" @keyup.enter="submit" v-model.trim="name">
-    <div>
+    </div>
-      <button class="ok"
+
-        :aria-label="$t('buttons.create')"
+    <div class="card-action">
-        :title="$t('buttons.create')"
+      <button class="cancel flat"
-        @click="submit">{{ $t('buttons.create') }}</button>
-      <button class="cancel"
         @click="$store.commit('closeHovers')"
         :aria-label="$t('buttons.cancel')"
         :title="$t('buttons.cancel')">{{ $t('buttons.cancel') }}</button>
+      <button class="flat"
+        :aria-label="$t('buttons.create')"
+        :title="$t('buttons.create')"
+        @click="submit">{{ $t('buttons.create') }}</button>
     </div>
   </div>
 </template>

assets/src/components/prompts/NewFile.vue

@@ -1,17 +1,23 @@
 <template>
-  <div class="prompt">
+  <div class="card floating">
-    <h3>{{ $t('prompts.newFile') }}</h3>
+    <div class="card-title">
+      <h2>{{ $t('prompts.newFile') }}</h2>
+    </div>
+
+    <div class="card-content">
       <p>{{ $t('prompts.newFileMessage') }}</p>
       <input autofocus type="text" @keyup.enter="submit" v-model.trim="name">
-    <div>
+    </div>
-      <button class="ok"
+
-        @click="submit"
+    <div class="card-action">
-        :aria-label="$t('buttons.create')"
+      <button class="cancel flat"
-        :title="$t('buttons.create')">{{ $t('buttons.create') }}</button>
-      <button class="cancel"
         @click="$store.commit('closeHovers')"
         :aria-label="$t('buttons.cancel')"
         :title="$t('buttons.cancel')">{{ $t('buttons.cancel') }}</button>
+      <button class="flat"
+        @click="submit"
+        :aria-label="$t('buttons.create')"
+        :title="$t('buttons.create')">{{ $t('buttons.create') }}</button>
     </div>
   </div>
 </template>

assets/src/components/prompts/Rename.vue

@@ -1,18 +1,24 @@
 <template>
-  <div class="prompt">
+  <div class="card floating">
-    <h3>{{ $t('prompts.rename') }}</h3>
+    <div class="card-title">
-    <p>{{ $t('prompts.renameMessage') }} <code>{{ oldName() }}</code>:</p>
+      <h2>{{ $t('prompts.rename') }}</h2>
+    </div>
 
+    <div class="card-content">
+      <p>{{ $t('prompts.renameMessage') }} <code>{{ oldName() }}</code>:</p>
       <input autofocus type="text" @keyup.enter="submit" v-model.trim="name">
-    <div>
+    </div>
-      <button @click="submit"
+
-        type="submit"
+    <div class="card-action">
-        :aria-label="$t('buttons.rename')"
+      <button class="cancel flat"
-        :title="$t('buttons.rename')">{{ $t('buttons.rename') }}</button>
-      <button class="cancel"
         @click="$store.commit('closeHovers')"
         :aria-label="$t('buttons.cancel')"
         :title="$t('buttons.cancel')">{{ $t('buttons.cancel') }}</button>
+      <button @click="submit"
+        class="flat"
+        type="submit"
+        :aria-label="$t('buttons.rename')"
+        :title="$t('buttons.rename')">{{ $t('buttons.rename') }}</button>
     </div>
   </div>
 </template>

assets/src/components/prompts/Replace.vue

@@ -1,17 +1,22 @@
 <template>
-  <div class="prompt">
+  <div class="card floating">
-    <h3>{{ $t('prompts.replace') }}</h3>
+    <div class="card-title">
-    <p>{{ $t('prompts.replaceMessage') }}</p>
+      <h2>{{ $t('prompts.replace') }}</h2>
+    </div>
 
-    <div>
+    <div class="card-content">
-      <button class="ok"
+      <p>{{ $t('prompts.replaceMessage') }}</p>
-        @click="showConfirm"
+    </div>
-        :aria-label="$t('buttons.replace')"
+
-        :title="$t('buttons.replace')">{{ $t('buttons.replace') }}</button>
+    <div class="card-action">
-      <button class="cancel"
+      <button class="flat cancel"
         @click="$store.commit('closeHovers')"
         :aria-label="$t('buttons.cancel')"
         :title="$t('buttons.cancel')">{{ $t('buttons.cancel') }}</button>
+      <button class="flat"
+        @click="showConfirm"
+        :aria-label="$t('buttons.replace')"
+        :title="$t('buttons.replace')">{{ $t('buttons.replace') }}</button>
     </div>
   </div>
 </template>

assets/src/components/prompts/Schedule.vue

@@ -1,17 +1,23 @@
 <template>
-  <div class="prompt">
+  <div class="card floating">
-    <h3>{{ $t('prompts.schedule') }}</h3>
+    <div class="card-title">
+      <h2>{{ $t('prompts.schedule') }}</h2>
+    </div>
+
+    <div class="card-content">
       <p>{{ $t('prompts.scheduleMessage') }}</p>
       <input autofocus type="datetime-local" v-model="date">
-    <div>
+    </div>
-      <button class="ok"
+
-        @click="submit"
+    <div class="card-action">
-        :aria-label="$t('buttons.schedule')"
+      <button class="cancel flat"
-        :title="$t('buttons.schedule')">{{ $t('buttons.schedule') }}</button>
-      <button class="cancel"
         @click="close"
         :aria-label="$t('buttons.cancel')"
         :title="$t('buttons.cancel')">{{ $t('buttons.cancel') }}</button>
+      <button class="falt"
+        @click="submit"
+        :aria-label="$t('buttons.schedule')"
+        :title="$t('buttons.schedule')">{{ $t('buttons.schedule') }}</button>
     </div>
   </div>
 </template>

assets/src/components/prompts/Share.vue

@@ -1,7 +1,10 @@
 <template>
-  <div class="prompt" id="share">
+  <div class="card floating" id="share">
-    <h3>{{ $t('buttons.share') }}</h3>
+    <div class="card-title">
-    <p></p>
+      <h2>{{ $t('buttons.share') }}</h2>
+    </div>
+
+    <div class="card-content">
       <ul>
         <li v-if="!hasPermanent">
           <a @click="getPermalink" :aria-label="$t('buttons.permalink')">{{ $t('buttons.permalink') }}</a>
@@ -43,9 +46,10 @@
             :title="$t('buttons.create')"><i class="material-icons">add</i></button>
         </li>
       </ul>
+    </div>
 
-    <div>
+    <div class="card-action">
-      <button class="cancel"
+      <button class="flat"
         @click="$store.commit('closeHovers')"
         :aria-label="$t('buttons.close')"
         :title="$t('buttons.close')">{{ $t('buttons.close') }}</button>

assets/src/css/base.css

@@ -1,8 +1,8 @@
 body {
   font-family: 'Roboto', sans-serif;
   padding-top: 4em;
-  background-color: #f8f8f8;
+  background-color: #fafafa;
-  color: #212121;
+  color: #333333;
 }
 
 * {
@@ -65,6 +65,53 @@ button:hover {
   background-color: #1E88E5;
 }
 
+input[type="submit"].block,
+button.block {
+  display: block;
+  width: 100%;
+  margin: 0 0 1em;
+}
+
+button.delete {
+  background: #F44336;
+}
+
+button.delete:hover {
+  background: #D32F2F;
+}
+
+button.cancel {
+  background-color: #ECEFF1;
+  color: #37474F;
+}
+
+button.cancel:hover {
+  background-color: #e9eaeb;
+}
+
+button.flat,
+input[type="submit"].flat {
+  color: #1E88E5;
+  background: transparent;
+  box-shadow: 0 0 0;
+  border: 0;
+  margin-left: 0;
+  text-transform: uppercase;
+}
+
+button.flat:hover,
+input[type="submit"].flat:hover {
+  background: rgba(0,0,0,0.05)
+}
+
+button.flat.delete {
+  color: #F44336;
+}
+
+button.flat.cancel {
+  color: #ccc;
+}
+
 .mobile-only {
   display: none !important;
 }

assets/src/css/dashboard.css

@@ -1,64 +1,34 @@
 .dashboard {
   max-width: 600px;
-  box-shadow: rgba(0, 0, 0, 0.06) 0px 1px 3px, rgba(0, 0, 0, 0.12) 0px 1px 2px;
-  border-radius: .5em;
-  background: #fff;
-  padding: 1em;
   margin: 1em 0;
 }
 
-.dashboard a {
+a {
   color: inherit
 }
 
-.dashboard h1 button {
+select,
-  font-size: 0.5em;
+textarea,
-  float: right;
+input[type="text"],
-}
+input[type="password"] {
-
+  padding: 0.5em 0;
-.dashboard table {
+  line-height: 1;
-  width: 100%;
-}
-
-.dashboard table th {
-  font-weight: 500;
-  color: #757575;
-  text-align: left;
-}
-
-.dashboard table th,
-.dashboard table td {
-  padding: .5em 0;
-}
-
-.dashboard table td:last-child {
-  width: 1em
-}
-
-.dashboard > h1:first-of-type {
-  margin-top: 0;
-}
-
-.dashboard form > p:last-child,
-form.dashboard > p:last-child {
-  text-align: right
-}
-
-.dashboard > *:last-child {
-  margin-bottom: 0;
-}
-
-.dashboard select,
-.dashboard textarea,
-.dashboard input[type="text"],
-.dashboard input[type="password"] {
-  padding: 0;
-  line-height: 1.7;
   display: block;
   border: 0;
   border-bottom: 1px solid #dddddd;
   transition: .2s ease border;
   width: 100%;
+  background: transparent;
+}
+
+textarea {
+  line-height: 1.15;
+  padding: .5em;
+  border: 1px solid #ddd;
+  font-family: monospace;
+  min-height: 10em;
+  resize: none;
+  border-radius: 2px;
 }
 
 .dashboard #locale,
@@ -69,49 +39,32 @@ form.dashboard > p:last-child {
 }
 
 .dashboard #locale {
-  border: 1px solid #dddddd;
   margin-top: .5em;
 }
 
-.dashboard textarea:focus,
+textarea:focus,
-.dashboard textarea:hover,
+textarea:hover,
-.dashboard input[type="text"]:focus,
+input[type="text"]:focus,
-.dashboard input[type="password"]:focus,
+input[type="password"]:focus,
-.dashboard input[type="text"]:hover,
+input[type="text"]:hover,
-.dashboard input[type="password"]:hover {
+input[type="password"]:hover {
   border-color: #2979ff;
 }
 
-.dashboard input.red {
+input.red {
   border-color: red;
 }
 
-.dashboard input.green {
+input.green {
   border-color: green;
 }
 
-.dashboard button.delete {
-  background: #F44336;
-}
-
-.dashboard button.delete:hover {
-  background: #D32F2F;
-}
-
-.dashboard textarea {
-  line-height: 1.15;
-  padding: .5em;
-  border: 1px solid #ddd;
-  font-family: monospace;
-  min-height: 10em;
-  resize: vertical;
-}
-
 .dashboard p label {
   margin-bottom: .2em;
   display: block;
   font-size: .8em;
-  font-weight: bold;
+  font-weight: 500;
+  color: rgba(0, 0, 0, 0.57);
 }
 
 li code,
@@ -152,3 +105,256 @@ p code {
   font-size: 1em;
   vertical-align: middle;
 }
+
+table {
+  border-collapse: collapse;
+  width: 100%;
+}
+
+table tr {
+  border-bottom: 1px solid #ccc;
+}
+
+table tr:last-child {
+  border: 0;
+}
+
+table th {
+  font-weight: 500;
+  color: #757575;
+  text-align: left;
+}
+
+table th,
+table td {
+  padding: .5em 0;
+}
+
+table td.small {
+  width: 1em;
+}
+
+table tr>*:first-child {
+  padding-left: 1em;
+}
+
+table tr>*:last-child {
+  padding-right: 1em;
+}
+
+.card {
+  position: relative;
+  margin: .5rem 0 1rem 0;
+  background-color: #fff;
+  border-radius: 2px;
+  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
+}
+
+.card.floating {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 99999;
+  max-width: 25em;
+  width: 90%;
+  max-height: 95%;
+  z-index: 99999;
+  animation: .1s show forwards;
+}
+
+.card>*>*:first-child {
+  margin-top: 0;
+}
+
+.card>*>*:last-child {
+  margin-bottom: 0;
+}
+
+.card .card-title {
+  padding: 1.5em 1em 1em;
+  display: flex;
+}
+
+.card .card-title>*:first-child {
+  margin-right: auto;
+}
+
+.card>div {
+  padding: 1em 1em;
+}
+
+.card>div:first-child {
+  padding-top: 1.5em;
+}
+
+.card>div:last-child {
+  padding-bottom: 1.5em;
+}
+
+.card .card-title * {
+  margin: 0;
+}
+
+.card .card-action {
+  text-align: right;
+}
+
+.card .card-content.full {
+  padding-bottom: 0;
+}
+
+.card h2 {
+  font-weight: 500;
+}
+
+.card h3 {
+  color: rgba(0, 0, 0, 0.53);
+  font-size: 1em;
+  font-weight: 500;
+  margin: 2em 0 1em;
+}
+
+.card-content table {
+  margin: 0 -1em;
+  width: calc(100% + 2em);
+}
+
+.card code {
+  word-wrap: break-word;
+}
+
+.card#download {
+  max-width: 15em;
+}
+
+.card#share ul {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.card#share ul li {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.card#share ul li a {
+  color: #2196F3;
+  cursor: pointer;
+  margin-right: auto;
+}
+
+.card#share ul li .action i {
+  font-size: 1em;
+}
+
+.card#share ul li input,
+.card#share ul li select {
+  padding: .2em;
+  margin-right: .5em;
+  border: 1px solid #dadada;
+}
+
+.card#share .action.copy-clipboard::after {
+  content: 'Copied!';
+  position: absolute;
+  left: -25%;
+  width: 150%;
+  font-size: .6em;
+  text-align: center;
+  background: #44a6f5;
+  color: #fff;
+  padding: .5em .2em;
+  border-radius: .4em;
+  top: -2em;
+  transition: .1s ease opacity;
+  opacity: 0;
+}
+
+.card#share .action.copy-clipboard.active::after {
+  opacity: 1;
+}
+
+.overlay {
+  background-color: rgba(0, 0, 0, 0.5);
+  position: fixed;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
+  z-index: 9999;
+  animation: .1s show forwards;
+}
+
+
+/* * * * * * * * * * * * * * * *
+ *        PROMPT - MOVE        *
+ * * * * * * * * * * * * * * * */
+
+.file-list {
+  max-height: 50vh;
+  overflow: auto;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  width: 100%;
+}
+
+.file-list li {
+  width: 100%;
+  user-select: none;
+  border-radius: .2em;
+  padding: .3em;
+}
+
+.file-list li[aria-selected=true] {
+  background: #2196f3 !important;
+  color: #fff !important;
+  transition: .1s ease all;
+}
+
+.file-list li:hover {
+  background-color: #e9eaeb;
+  cursor: pointer;
+}
+
+.file-list li:before {
+  content: "folder";
+  color: #6f6f6f;
+  vertical-align: middle;
+  line-height: 1.4;
+  font-family: 'Material Icons';
+  font-size: 1.75em;
+  margin-right: .25em;
+}
+
+.file-list li[aria-selected=true]:before {
+  color: white;
+}
+
+.help {
+  max-width: 24em;
+}
+
+.help ul {
+  padding: 0;
+  margin: 1em 0;
+  list-style: none;
+}
+
+@keyframes show {
+  0% {
+    display: none;
+    opacity: 0;
+  }
+  1% {
+    display: block;
+    opacity: 0;
+  }
+  100% {
+    display: block;
+    opacity: 1;
+  }
+}

assets/src/css/header.css

@@ -122,8 +122,9 @@ header .search-button {
 #search input {
   width: 100%;
   border: 0;
-  outline: 0;
   background-color: transparent;
+  line-height: 0;
+  padding: 0;
 }
 
 #search #result {

assets/src/css/prompts.css

@@ -1,229 +0,0 @@
-.prompt {
-  position: fixed;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  background: #fff;
-  border: 1px solid rgba(0, 0, 0, 0.075);
-  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
-  padding: 2em;
-  max-width: 25em;
-  width: 90%;
-  max-height: 95%;
-  z-index: 99999;
-  animation: .1s show forwards;
-}
-
-.overlay {
-  background-color: rgba(0, 0, 0, 0.5);
-  position: fixed;
-  top: 0;
-  left: 0;
-  height: 100%;
-  width: 100%;
-  z-index: 9999;
-  animation: .1s show forwards;
-}
-
-.prompt h3 {
-  margin: 0;
-  font-weight: 500;
-  font-size: 1.5em;
-}
-
-.prompt p {
-  font-size: .9em;
-  color: rgba(0, 0, 0, 0.8);
-  margin: .5em 0 1em;
-}
-
-.prompt input:not([type="submit"]) {
-  width: 100%;
-  border: 1px solid #dadada;
-  line-height: 1;
-  padding: .3em;
-  margin: .3em 0;
-}
-
-.prompt code {
-  word-wrap: break-word;
-}
-
-.prompt div:last-of-type {
-  margin-top: 1em;
-  display: flex;
-  justify-content: flex-start;
-  flex-direction: row-reverse;
-}
-
-.prompt .cancel {
-  background-color: #ECEFF1;
-  color: #37474F;
-}
-
-.prompt .cancel:hover {
-  background-color: #e9eaeb;
-}
-
-.prompt.success i,
-.prompt.error i {
-  color: #F44336;
-  display: block;
-  margin: 0 auto .15em;
-  text-align: center;
-  font-size: 5em;
-}
-
-.prompt.success h3,
-.prompt.error h3 {
-  text-align: center;
-}
-
-.prompt.error button:not(.cancel) {
-  background-color: #F44336
-}
-
-.prompt.success i {
-  color: #8BC34A;
-}
-
-.prompt.success button {
-  background-color: #8BC34A;
-}
-
-
-/* * * * * * * * * * * * * * * *
- *        PROMPT - MOVE        *
- * * * * * * * * * * * * * * * */
-
-.file-list {
-  max-height: 50vh;
-  overflow: auto;
-  list-style: none;
-  margin: 0;
-  padding: 0;
-  width: 100%;
-}
-
-.file-list li {
-  width: 100%;
-  user-select: none;
-  border-radius: .2em;
-  padding: .3em;
-}
-
-.file-list li[aria-selected=true] {
-  background: #2196f3 !important;
-  color: #fff !important;
-  transition: .1s ease all;
-}
-
-.file-list li:hover {
-  background-color: #e9eaeb;
-  cursor: pointer;
-}
-
-.file-list li:before {
-  content: "folder";
-  color: #6f6f6f;
-  vertical-align: middle;
-  line-height: 1.4;
-  font-family: 'Material Icons';
-  font-size: 1.75em;
-  margin-right: .25em;
-}
-
-.file-list li[aria-selected=true]:before {
-  color: white;
-}
-
-.prompt#download {
-  max-width: 15em;
-}
-
-.prompt#download button {
-  width: 100%;
-  display: block;
-  margin: 0 0 1em;
-  background-color: #ECEFF1;
-  color: #37474F;
-}
-
-.prompt#download button:last-of-type {
-  margin-bottom: 0;
-}
-
-.help {
-  max-width: 24em;
-}
-
-.help ul {
-  padding: 0;
-  margin: 1em 0;
-  list-style: none;
-}
-
-@keyframes show {
-  0% {
-    display: none;
-    opacity: 0;
-  }
-  1% {
-    display: block;
-    opacity: 0;
-  }
-  100% {
-    display: block;
-    opacity: 1;
-  }
-}
-
-.prompt#share ul {
-  list-style: none;
-  padding: 0;
-  margin: 0;
-}
-
-.prompt#share ul li {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.prompt#share ul li a {
-  color: #2196F3;
-  cursor: pointer;
-  margin-right: auto;
-}
-
-.prompt#share ul li .action i {
-  font-size: 1em;
-}
-
-.prompt#share ul li input,
-.prompt#share ul li select {
-  padding: .2em;
-  margin-right: .5em;
-  border: 1px solid #dadada;
-}
-
-.prompt#share .action.copy-clipboard::after {
-  content: 'Copied!';
-  position: absolute;
-  left: -25%;
-  width: 150%;
-  font-size: .6em;
-  text-align: center;
-  background: #44a6f5;
-  color: #fff;
-  padding: .5em .2em;
-  border-radius: .4em;
-  top: -2em;
-  transition: .1s ease opacity;
-  opacity: 0;
-}
-
-.prompt#share .action.copy-clipboard.active::after {
-  opacity: 1;
-}
-

assets/src/css/styles.css

@@ -3,7 +3,6 @@
 @import "./fonts.css";
 @import "./base.css";
 @import "./header.css";
-@import "./prompts.css";
 @import "./listing.css";
 @import "./editor.css";
 @import "./dashboard.css";

assets/src/main.js

@@ -26,7 +26,6 @@ Vue.prototype.$showSuccess = function (message) {
 }
 
 Vue.prototype.$showError = function (error) {
-  // TODO: add btns: close and report issue
   let n = new Noty(Object.assign({}, notyDefault, {
     text: error,
     type: 'error',

assets/src/router/index.js

@@ -3,10 +3,11 @@ import Router from 'vue-router'
 import Login from '@/views/Login'
 import Layout from '@/views/Layout'
 import Files from '@/views/Files'
-import Users from '@/views/Users'
+import Users from '@/views/Settings/Users'
-import User from '@/views/User'
+import User from '@/views/Settings/User'
-import GlobalSettings from '@/views/GlobalSettings'
+import Settings from '@/views/Settings'
-import ProfileSettings from '@/views/ProfileSettings'
+import GlobalSettings from '@/views/settings/Global'
+import ProfileSettings from '@/views/settings/Profile'
 import Error403 from '@/views/errors/403'
 import Error404 from '@/views/errors/404'
 import Error500 from '@/views/errors/500'
@@ -46,6 +47,11 @@ const router = new Router({
           name: 'Files',
           component: Files
         },
+        {
+          path: '/settings',
+          name: 'Settings',
+          component: Settings,
+          children: [
             {
               path: '/settings',
               name: 'Settings',
@@ -66,6 +72,24 @@ const router = new Router({
                 requiresAdmin: true
               }
             },
+            {
+              path: '/settings/users',
+              name: 'Users',
+              component: Users,
+              meta: {
+                requiresAdmin: true
+              }
+            },
+            {
+              path: '/settings/users/*',
+              name: 'User',
+              component: User,
+              meta: {
+                requiresAdmin: true
+              }
+            }
+          ]
+        },
         {
           path: '/403',
           name: 'Forbidden',
@@ -81,22 +105,6 @@ const router = new Router({
           name: 'Internal Server Error',
           component: Error500
         },
-        {
-          path: '/users',
-          name: 'Users',
-          component: Users,
-          meta: {
-            requiresAdmin: true
-          }
-        },
-        {
-          path: '/users/*',
-          name: 'User',
-          component: User,
-          meta: {
-            requiresAdmin: true
-          }
-        },
         {
           path: '/files',
           redirect: {

assets/src/views/Settings.vue

@@ -0,0 +1,20 @@
+<template>
+  <div class="dashboard">
+    <ul id="nav" v-if="user.admin">
+      <li :class="{ active: $route.path === '/settings/profile' }"><router-link to="/settings/profile">{{ $t('settings.profileSettings') }}</router-link></li>
+      <li :class="{ active: $route.path === '/settings/global' }"><router-link to="/settings/global">{{ $t('settings.globalSettings') }}</router-link></li>
+      <li :class="{ active: $route.path === '/settings/users' }"><router-link to="/settings/users">{{ $t('settings.userManagement') }}</router-link></li>
+    </ul>
+
+    <router-view></router-view>
+  </div>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+
+export default {
+  name: 'settings',
+  computed: mapState([ 'user' ])
+}
+</script>

assets/src/views/Users.vue

@@ -1,48 +0,0 @@
-<template>
-  <div class="dashboard">
-    <ul id="nav">
-      <li><router-link to="/settings/profile">{{ $t('settings.profileSettings') }}</router-link></li>
-      <li><router-link to="/settings/global">{{ $t('settings.globalSettings') }}</router-link></li>
-      <li class="active"><router-link to="/users">{{ $t('settings.userManagement') }}</router-link></li>
-    </ul>
-
-    <h1>{{ $t('settings.users') }} <router-link to="/users/new"><button>{{ $t('buttons.new') }}</button></router-link></h1>
-
-    <table>
-      <tr>
-        <th>{{ $t('settings.username') }}</th>
-        <th>{{ $t('settings.admin') }}</th>
-        <th>{{ $t('settings.scope') }}</th>
-        <th></th>
-      </tr>
-
-      <tr v-for="user in users" :key="user.id">
-        <td>{{ user.username }}</td>
-        <td><i v-if="user.admin" class="material-icons">done</i><i v-else class="material-icons">close</i></td>
-        <td>{{ user.filesystem }}</td>
-        <td><router-link :to="'/users/' + user.ID"><i class="material-icons">mode_edit</i></router-link></td>
-      </tr>
-
-    </table>
-  </div>
-</template>
-
-<script>
-import * as api from '@/utils/api'
-
-export default {
-  name: 'users',
-  data: function () {
-    return {
-      users: []
-    }
-  },
-  created () {
-    api.getUsers().then(users => {
-      this.users = users
-    }).catch(error => {
-      this.$showError(error)
-    })
-  }
-}
-</script>

assets/src/views/settings/Global.vue

@@ -1,43 +1,54 @@
 <template>
   <div class="dashboard">
-    <ul id="nav">
+    <form class="card" @submit.prevent="saveStaticGen">
-      <li><router-link to="/settings/profile">{{ $t('settings.profileSettings') }}</router-link></li>
+      <div class="card-title">
-      <li class="active"><router-link to="/settings/global">{{ $t('settings.globalSettings') }}</router-link></li>
-      <li><router-link to="/users">{{ $t('settings.userManagement') }}</router-link></li>
-    </ul>
-
-    <h1>{{ $t('settings.globalSettings') }}</h1>
-
-    <form @submit="saveStaticGen" v-if="$store.state.staticGen.length > 0">
         <h2>{{ capitalize($store.state.staticGen) }}</h2>
+      </div>
 
+      <div class="card-content">
         <p v-for="field in staticGen" :key="field.variable">
           <label v-if="field.type !== 'checkbox'">{{ field.name }}</label>
           <input v-if="field.type === 'text'" type="text" v-model.trim="field.value">
           <input v-else-if="field.type === 'checkbox'" type="checkbox" v-model.trim="field.value">
           <template v-if="field.type === 'checkbox'">{{ capitalize(field.name, 'caps') }}</template>
         </p>
+      </div>
 
-      <p><input type="submit" value="Save"></p>
+      <div class="card-action">
+        <input class="flat" type="submit" :value="$t('buttons.update')">
+      </div>
     </form>
 
-    <form @submit="saveCSS">
+    <form class="card" @submit.prevent="saveCSS">
+      <div class="card-title">
         <h2>{{ $t('settings.customStylesheet') }}</h2>
+      </div>
+
+      <div class="card-content">
         <textarea v-model="css"></textarea>
-      <p><input type="submit" value="Save"></p>
+      </div>
+
+      <div class="card-action">
+        <input class="flat" type="submit" :value="$t('buttons.update')">
+      </div>
     </form>
 
-    <form @submit="saveCommands">
+    <form class="card" @submit.prevent="saveCommands">
+      <div class="card-title">
         <h2>{{ $t('settings.commands') }}</h2>
+      </div>
 
+      <div class="card-content">
         <p class="small">{{ $t('settings.commandsHelp') }}</p>
-
         <template v-for="command in commands">
           <h3>{{ capitalize(command.name) }}</h3>
           <textarea v-model.trim="command.value"></textarea>
         </template>
+      </div>
 
-      <p><input type="submit" value="Save"></p>
+      <div class="card-action">
+        <input class="flat" type="submit" :value="$t('buttons.update')">
+      </div>
     </form>
 
   </div>
@@ -90,8 +101,6 @@ export default {
       return name.slice(0, -1)
     },
     saveCommands (event) {
-      event.preventDefault()
-
       let commands = {}
 
       for (let command of this.commands) {
@@ -108,8 +117,6 @@ export default {
         .catch(this.$showError)
     },
     saveCSS (event) {
-      event.preventDefault()
-
       updateSettings(this.css, 'css')
         .then(() => {
           this.$showSuccess(this.$t('settings.settingsUpdated'))
@@ -120,7 +127,6 @@ export default {
         .catch(this.$showError)
     },
     saveStaticGen (event) {
-      event.preventDefault()
       let staticGen = {}
 
       for (let field of this.staticGen) {

assets/src/views/settings/Profile.vue

@@ -1,26 +1,35 @@
 <template>
   <div class="dashboard">
-    <ul id="nav" v-if="user.admin">
+     <form class="card" @submit="updateSettings">
-      <li class="active"><router-link to="/settings/profile">{{ $t('settings.profileSettings') }}</router-link></li>
+      <div class="card-title">
-      <li><router-link to="/settings/global">{{ $t('settings.globalSettings') }}</router-link></li>
+        <h2>{{ $t('settings.profileSettings') }}</h2>
-      <li><router-link to="/users">{{ $t('settings.userManagement') }}</router-link></li>
+      </div>
-    </ul>
 
-    <h1>{{ $t('settings.profileSettings') }}</h1>
+      <div class="card-content">
-
-    <form @submit="updateSettings">
         <h3>{{ $t('settings.language') }}</h3>
         <p><languages id="locale" :selected.sync="locale"></languages></p>
         <h3>{{ $t('settings.customStylesheet') }}</h3>
         <textarea v-model="css" name="css"></textarea>
-      <p><input type="submit" :value="$t('buttons.update')"></p>
+      </div>
+
+      <div class="card-action">
+        <input class="flat" type="submit" :value="$t('buttons.update')">
+      </div>
     </form>
 
-    <form v-if="!user.lockPassword" @submit="updatePassword">
+    <form class="card" v-if="!user.lockPassword" @submit="updatePassword">
-      <h3>{{ $t('settings.changePassword') }}</h3>
+      <div class="card-title">
+        <h2>{{ $t('settings.changePassword') }}</h2>
+      </div>
+
+      <div class="card-content">
         <p><input :class="passwordClass" type="password" :placeholder="$t('settings.newPassword')" v-model="password" name="password"></p>
         <p><input :class="passwordClass" type="password" :placeholder="$t('settings.newPasswordConfirm')" v-model="passwordConf" name="password"></p>
-      <p><input type="submit" :value="$t('buttons.update')"></p>
+      </div>
+
+      <div class="card-action">
+        <input class="flat" type="submit" :value="$t('buttons.update')">
+      </div>
     </form>
   </div>
 </template>

assets/src/views/settings/User.vue

@@ -1,14 +1,12 @@
 <template>
   <div>
-    <form @submit="save" class="dashboard">
+    <form @submit="save" class="card">
-      <ul id="nav">
+      <div class="card-title">
-        <li><router-link to="/settings/profile">{{ $t('settings.profileSettings') }}</router-link></li>
+        <h2 v-if="id === 0">{{ $t('settings.newUser') }}</h2>
-        <li><router-link to="/settings/global">{{ $t('settings.globalSettings') }}</router-link></li>
+        <h2 v-else>{{ $t('settings.user') }} {{ username }}</h2>
-        <li><router-link to="/users">{{ $t('settings.userManagement') }}</router-link></li>
+      </div>
-      </ul>
 
-      <h1 v-if="id === 0">{{ $t('settings.newUser') }}</h1>
+      <div class="card-content">
-      <h1 v-else>{{ $t('settings.user') }} {{ username }}</h1>
 
         <p><label for="username">{{ $t('settings.username') }}</label><input type="text" v-model="username" id="username"></p>
         <p><label for="password">{{ $t('settings.password') }}</label><input type="password" :placeholder="passwordPlaceholder" v-model="password" id="password"></p>
@@ -20,7 +18,7 @@
 
         <p><input type="checkbox" :disabled="admin" v-model="lockPassword"> {{ $t('settings.lockPassword') }}</p>
 
-      <h2>{{ $t('settings.permissions') }}</h2>
+        <h3>{{ $t('settings.permissions') }}</h3>
         <p class="small">{{ $t('settings.permissionsHelp') }}</p>
 
         <p><input type="checkbox" v-model="admin"> {{ $t('settings.administrator') }}</p>
@@ -33,7 +31,7 @@
         <p class="small">{{ $t('settings.userCommandsHelp') }} <i>git svn hg</i>.</p>
         <input type="text" v-model.trim="commands">
 
-      <h2>{{ $t('settings.rules') }}</h2>
+        <h3>{{ $t('settings.rules') }}</h3>
 
         <p class="small">{{ $t('settings.rulesHelp1') }}</p>
 
@@ -50,27 +48,34 @@
 
         <textarea v-model.trim="rules"></textarea>
 
-      <h2>{{ $t('settings.customStylesheet') }}</h2>
+        <h3>{{ $t('settings.customStylesheet') }}</h3>
 
         <textarea name="css"></textarea>
+      </div>
 
-      <p>
+      <div class="card-action">
-        <button v-if="id !== 0" @click.prevent="deletePrompt" type="button" class="delete" :aria-label="$t('buttons.delete')" :title="$t('buttons.delete')">{{ $t('buttons.delete') }}</button>
+        <button v-if="id !== 0" @click.prevent="deletePrompt" type="button" class="flat delete" :aria-label="$t('buttons.delete')" :title="$t('buttons.delete')">{{ $t('buttons.delete') }}</button>
-        <input type="submit" :value="$t('buttons.save')">
+        <input class="flat" type="submit" :value="$t('buttons.save')">
-      </p>
+      </div>
     </form>
 
-    <div v-if="$store.state.show === 'deleteUser'" class="prompt">
+    <div v-if="$store.state.show === 'deleteUser'" class="card floating">
-      <h3>Delete User</h3>
+      <div class="card-content">
         <p>Are you sure you want to delete this user?</p>
-      <div>
+      </div>
-        <button @click="deleteUser" autofocus>{{ $t('buttons.delete') }}</button>
+
-        <button class="cancel"
+      <div class="card-action">
+        <button class="cancel flat"
           @click="closeHovers"
+          autofocus
           :aria-label="$t('buttons.cancel')"
           :title="$t('buttons.cancel')">
           {{ $t('buttons.cancel') }}
         </button>
+        <button class="flat"
+          @click="deleteUser">
+          {{ $t('buttons.delete') }}
+        </button>
       </div>
     </div>
   </div>
@@ -105,7 +110,7 @@ export default {
   },
   computed: {
     passwordPlaceholder () {
-      if (this.$route.path === '/users/new') return ''
+      if (this.$route.path === '/settings/users/new') return ''
       return this.$t('settings.avoidChanges')
     }
   },
@@ -131,7 +136,7 @@ export default {
     fetchData () {
       let user = this.$route.params[0]
 
-      if (this.$route.path === '/users/new') {
+      if (this.$route.path === '/settings/users/new') {
         user = 'base'
       }
 
@@ -168,7 +173,7 @@ export default {
 
         this.rules = this.rules.trim()
       }).catch(() => {
-        this.$router.push({ path: '/users/new' })
+        this.$router.push({ path: '/settings/users/new' })
       })
     },
     capitalize (name) {
@@ -205,7 +210,7 @@ export default {
       event.preventDefault()
 
       deleteUser(this.id).then(location => {
-        this.$router.push({ path: '/users' })
+        this.$router.push({ path: '/settings/users' })
         this.$showSuccess(this.$t('settings.userDeleted'))
       }).catch(e => {
         this.$showError(e)
@@ -215,7 +220,7 @@ export default {
       event.preventDefault()
       let user = this.parseForm()
 
-      if (this.$route.path === '/users/new') {
+      if (this.$route.path === '/settings/users/new') {
         newUser(user).then(location => {
           this.$router.push({ path: location })
           this.$showSuccess(this.$t('settings.userCreated'))

assets/src/views/settings/Users.vue

@@ -0,0 +1,48 @@
+<template>
+  <div class="card">
+    <div class="card-title">
+      <h2>{{ $t('settings.users') }}</h2>
+      <router-link to="/settings/users/new"><button class="flat">{{ $t('buttons.new') }}</button></router-link>
+    </div>
+
+    <div class="card-content full">
+      <table>
+        <tr>
+          <th>{{ $t('settings.username') }}</th>
+          <th>{{ $t('settings.admin') }}</th>
+          <th>{{ $t('settings.scope') }}</th>
+          <th></th>
+        </tr>
+
+        <tr v-for="user in users" :key="user.id">
+          <td>{{ user.username }}</td>
+          <td><i v-if="user.admin" class="material-icons">done</i><i v-else class="material-icons">close</i></td>
+          <td>{{ user.filesystem }}</td>
+          <td class="small">
+            <router-link :to="'/settings/users/' + user.ID"><i class="material-icons">mode_edit</i></router-link>
+          </td>
+        </tr>
+      </table>
+    </div>
+  </div>
+</template>
+
+<script>
+import * as api from '@/utils/api'
+
+export default {
+  name: 'users',
+  data: function () {
+    return {
+      users: []
+    }
+  },
+  created () {
+    api.getUsers().then(users => {
+      this.users = users
+    }).catch(error => {
+      this.$showError(error)
+    })
+  }
+}
+</script>

http/users.go

@@ -194,7 +194,7 @@ func usersPostHandler(c *fm.Context, w http.ResponseWriter, r *http.Request) (in
 	}
 
 	// Set the Location header and return.
-	w.Header().Set("Location", "/users/"+strconv.Itoa(u.ID))
+	w.Header().Set("Location", "/settings/users/"+strconv.Itoa(u.ID))
 	w.WriteHeader(http.StatusCreated)
 	return 0, nil
 }