changeset 11:e0b5dd98665e vue-cli

current frontend with asset server configured
author Thomas Junk <thomas.junk@intevation.de>
date Wed, 20 Jun 2018 14:43:48 +0200
parents 361ae8211991
children 000adddf74c8
files package.json src/main.js src/stores/language.js src/views/Login.vue vue.config.js yarn.lock
diffstat 6 files changed, 61 insertions(+), 48 deletions(-) [+]
line wrap: on
line diff
--- a/package.json	Mon Jun 18 12:11:35 2018 +0200
+++ b/package.json	Wed Jun 20 14:43:48 2018 +0200
@@ -12,6 +12,7 @@
   "dependencies": {
     "axios": "^0.18.0",
     "bootstrap": "^4.1.1",
+    "font-awesome": "^4.7.0",
     "vue": "^2.5.16",
     "vue-router": "^3.0.1",
     "vuex": "^3.0.1"
--- a/src/main.js	Mon Jun 18 12:11:35 2018 +0200
+++ b/src/main.js	Wed Jun 20 14:43:48 2018 +0200
@@ -3,6 +3,7 @@
 import router from "./router";
 import store from "./store";
 import "../node_modules/bootstrap/dist/css/bootstrap.min.css";
+import "../node_modules/font-awesome/css/font-awesome.min.css";
 
 Vue.config.productionTip = false;
 
--- a/src/stores/language.js	Mon Jun 18 12:11:35 2018 +0200
+++ b/src/stores/language.js	Wed Jun 20 14:43:48 2018 +0200
@@ -6,7 +6,7 @@
     passwordLabel: "Password",
     loginButtonLabel: "Log In",
     loginAttemptFailed: "Login Failed\n(try other email & passphrase)",
-    passPhraseForgotten: "Passphrase forgoten?"
+    passPhraseForgotten: "Passphrase forgotten?"
   },
   getters: {
     signinHeader: state => {
--- a/src/views/Login.vue	Mon Jun 18 12:11:35 2018 +0200
+++ b/src/views/Login.vue	Wed Jun 20 14:43:48 2018 +0200
@@ -11,21 +11,44 @@
         <div v-if="loginFailed" class="alert alert-danger" role="alert">
           <span class="loginerror">{{ loginAttemptFailed }}</span>
         </div>
-        <label for="inputEmail" class="sr-only">{{ emailLabel }}</label>
-        <input type="text" v-model="username" id="inputEmail" class="form-control" :placeholder="emailLabel" required autofocus>
-        <label for="inputPassword" class="sr-only">{{ passwordLabel }}</label>
-        <input type="password" v-model="password" id="inputPassword" class="form-control" :placeholder="passwordLabel" required>
+        <div class="input-group mb-3">
+          <div class="input-group-prepend">
+            <span class="input-group-text"><i class="fa fa-envelope-open-o mail-icon"></i></span>
+          </div>
+          <input type="text" v-model="username" id="inputEmail" class="form-control" :placeholder="emailLabel" required autofocus>
+        </div>
+        <div class="input-group mb-3">
+          <div class="input-group-prepend">
+            <span class="input-group-text"><span class="password-icon">*</span></span>
+          </div>
+          <input type="password" v-model="password" id="inputPassword" class="form-control" :placeholder="passwordLabel" required>
+          <div class="input-group-append">
+            <span class="input-group-text" id="basic-addon2"><i class="fa fa-eye"></i></span>
+          </div>
+        </div>
         <button class="btn btn-lg btn-success btn-block" :disabled="submitted" type="submit">{{ loginButtonLabel }}</button>
+        <div class="forgottenlink"><a href="#">{{ passPhraseForgotten }}</a></div>
       </form>
       <div class="secondary-logo"><img :src="secondaryLogo"></div>
     </div>
-    <div><a href="#">{{ passPhraseForgotten }}</a></div>
   </div>
 </template>
 
 <style lang="scss">
 $offset: 20px;
+$iconsize: 3em;
+$iconLineHeight: 0.25em;
+$iconwidth: 20px;
 
+.forgottenlink {
+  text-align: right;
+}
+#inputPassword {
+  border-right: none;
+}
+.input-group-text {
+  background-color: white !important;
+}
 .login {
   margin-top: 200px;
 }
@@ -40,10 +63,24 @@
   left: -85px;
   margin-bottom: $offset;
 }
-.title {
+.mail-icon {
+  line-height: $iconLineHeight;
+  font-size: $iconsize;
+  width: $iconwidth;
+}
+.password-icon {
+  position: relative;
+  top: 10px;
+  font-size: $iconsize;
+  line-height: $iconLineHeight;
+  width: $iconwidth;
+}
+.secondary-logo {
+  position: relative;
+  top: -$offset;
   margin-left: $offset;
 }
-.secondary-logo {
+.title {
   margin-left: $offset;
 }
 </style>
--- a/vue.config.js	Mon Jun 18 12:11:35 2018 +0200
+++ b/vue.config.js	Wed Jun 20 14:43:48 2018 +0200
@@ -1,10 +1,13 @@
 module.exports = {
-  outputDir: "web",
   devServer: {
     proxy: {
       "/api/*": {
         target: "http://localhost:8000",
         secure: false
+      },
+      "/assets/*": {
+        target: "http://localhost:5000",
+        secure: false
       }
     }
   }
--- a/yarn.lock	Mon Jun 18 12:11:35 2018 +0200
+++ b/yarn.lock	Wed Jun 20 14:43:48 2018 +0200
@@ -1137,10 +1137,6 @@
   version "0.0.7"
   resolved "https://registry.yarnpkg.com/ansi-html/-/ansi-html-0.0.7.tgz#813584021962a9e9e6fd039f940d12f56ca7859e"
 
-ansi-regex@^0.2.0, ansi-regex@^0.2.1:
-  version "0.2.1"
-  resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-0.2.1.tgz#0d8e946967a3d8143f93e24e298525fc1b2235f9"
-
 ansi-regex@^2.0.0:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-2.1.1.tgz#c3b33ab5ee360d86e0e628f0468ae7ef27d654df"
@@ -1149,10 +1145,6 @@
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-3.0.0.tgz#ed0317c322064f79466c02966bddb605ab37d998"
 
-ansi-styles@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-1.1.0.tgz#eaecbf66cd706882760b2f4691582b8f55d7a7de"
-
 ansi-styles@^2.2.1:
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-2.2.1.tgz#b432dd3358b634cf75e1e4664368240533c1ddbe"
@@ -1965,16 +1957,6 @@
     align-text "^0.1.3"
     lazy-cache "^1.0.3"
 
-chalk@0.5.1:
-  version "0.5.1"
-  resolved "https://registry.yarnpkg.com/chalk/-/chalk-0.5.1.tgz#663b3a648b68b55d04690d49167aa837858f2174"
-  dependencies:
-    ansi-styles "^1.1.0"
-    escape-string-regexp "^1.0.0"
-    has-ansi "^0.1.0"
-    strip-ansi "^0.3.0"
-    supports-color "^0.2.0"
-
 chalk@^1.1.1, chalk@^1.1.3:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/chalk/-/chalk-1.1.3.tgz#a8115c55e4a702fe4d150abd3872822a7e09fc98"
@@ -2242,13 +2224,14 @@
     typedarray "^0.0.6"
 
 concurrently@^3.5.1:
-  version "3.5.1"
-  resolved "https://registry.yarnpkg.com/concurrently/-/concurrently-3.5.1.tgz#ee8b60018bbe86b02df13e5249453c6ececd2521"
-  dependencies:
-    chalk "0.5.1"
+  version "3.6.0"
+  resolved "https://registry.yarnpkg.com/concurrently/-/concurrently-3.6.0.tgz#c25e34b156a9d5bd4f256a0d85f6192438ae481f"
+  dependencies:
+    chalk "^2.4.1"
     commander "2.6.0"
     date-fns "^1.23.0"
     lodash "^4.5.1"
+    read-pkg "^3.0.0"
     rx "2.3.24"
     spawn-command "^0.0.2-1"
     supports-color "^3.2.3"
@@ -2971,7 +2954,7 @@
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/escape-html/-/escape-html-1.0.3.tgz#0258eae4d3d0c0974de1c169188ef0051d1d1988"
 
-escape-string-regexp@^1.0.0, escape-string-regexp@^1.0.2, escape-string-regexp@^1.0.5:
+escape-string-regexp@^1.0.2, escape-string-regexp@^1.0.5:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz#1b61c0562190a8dff6ae3bb2cf0200ca130b86d4"
 
@@ -3488,6 +3471,10 @@
   dependencies:
     debug "^3.1.0"
 
+font-awesome@^4.7.0:
+  version "4.7.0"
+  resolved "https://registry.yarnpkg.com/font-awesome/-/font-awesome-4.7.0.tgz#8fa8cf0411a1a31afd07b06d2902bb9fc815a133"
+
 for-in@^0.1.3:
   version "0.1.8"
   resolved "https://registry.yarnpkg.com/for-in/-/for-in-0.1.8.tgz#d8773908e31256109952b1fdb9b3fa867d2775e1"
@@ -3831,12 +3818,6 @@
     ajv "^5.1.0"
     har-schema "^2.0.0"
 
-has-ansi@^0.1.0:
-  version "0.1.0"
-  resolved "https://registry.yarnpkg.com/has-ansi/-/has-ansi-0.1.0.tgz#84f265aae8c0e6a88a12d7022894b7568894c62e"
-  dependencies:
-    ansi-regex "^0.2.0"
-
 has-ansi@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/has-ansi/-/has-ansi-2.0.0.tgz#34f5049ce1ecdf2b0649af3ef24e45ed35416d91"
@@ -7601,12 +7582,6 @@
   version "0.0.6"
   resolved "https://registry.yarnpkg.com/stringstream/-/stringstream-0.0.6.tgz#7880225b0d4ad10e30927d167a1d6f2fd3b33a72"
 
-strip-ansi@^0.3.0:
-  version "0.3.0"
-  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-0.3.0.tgz#25f48ea22ca79187f3174a4db8759347bb126220"
-  dependencies:
-    ansi-regex "^0.2.1"
-
 strip-ansi@^3.0.0, strip-ansi@^3.0.1:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-3.0.1.tgz#6a385fb8853d952d5ff05d0e8aaf94278dc63dcf"
@@ -7647,10 +7622,6 @@
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-2.0.1.tgz#3c531942e908c2697c0ec344858c286c7ca0a60a"
 
-supports-color@^0.2.0:
-  version "0.2.0"
-  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-0.2.0.tgz#d92de2694eb3f67323973d7ae3d8b55b4c22190a"
-
 supports-color@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-2.0.0.tgz#535d045ce6b6363fa40117084629995e9df324c7"