.gitlab-ci.yml

+include:
+  - project: coscine/tools/gitlab-ci-templates
+    file: 
+      - /docker-runner.yml
+      - /nodejs.yml
+
 stages:
-  - test
+  - build
+# there are more stages in the imported file but we only want to import some
+#  - test
   - publish
-  - release
-  - pre_release
-
-before_script:
-    - npm install
-
-test:
-  stage: test
-  script:
-    - npm run build
-    - npm test
-  except:
-    refs:
-      - master
-      - tags
-    variables:
-      - $GITLAB_USER_ID == $GIT_BOT_USER_ID
 
-publish:
-  stage: publish
-  script:
-    - npm run build
-    - npm test
-    - npx semantic-release
-  only:
-    - master
-  except:
-    variables:
-      - $GITLAB_USER_ID == $GIT_BOT_USER_ID
+build-branch:
+  extends: .build-branch
 
-release:
-  stage: release
-  script:
-    - npm run build
-  artifacts:
-    paths:
-      - dist
-  only:
-    - tags
+build-npm-release:
+  extends: .build-npm-release
 
-pre_release:
-  stage: pre_release
-  script:
-    - npm run build
-  artifacts:
-    paths:
-      - dist
-  when: manual
-  except:
-    - tags
-    - master
+publish-gitlab:
+  extends: .publish-gitlab-release

.yarnrc.yml

+packageExtensions:
+  "@vue/cli-service@*":
+    peerDependencies:
+      "@vue/cli-plugin-babel": "*"
+      "@vue/cli-plugin-eslint": "*"
+      "@vue/cli-plugin-typescript": "*"
+  "@vue/cli-plugin-typescript@*":
+    peerDependencies:
+      "babel-loader": "*"
+  "fork-ts-checker-webpack-plugin@*":
+    dependencies:
+      "vue-template-compiler": "*"
+    peerDependencies:
+      "typescript": "*"
+  "vue-i18n@*":
+    dependencies:
+      "vue": "^2.6.12"
+  "vue-material-design-icons@*":
+    dependencies:
+      "vue": "^2.6.12"      
+  "vue-multiselect@*":
+    dependencies:
+      "vue": "^2.6.12" 
+  "vue-router@*":
+    dependencies:
+      "vue": "^2.6.12"
+  "vuex@*":
+    dependencies:
+      "vue": "^2.6.12"
+  "bootstrap-vue@*":
+    dependencies:
+      "vue": "^2.6.12"
+      "jquery": "*"

babel.config.js

-module.exports = {
-  presets: [
-    '@vue/app'
-  ]
-}

package.json

 {
   "name": "@coscine/userprofile",
-  "version": "1.2.1",
+  "version": "1.3.0",
   "private": true,
   "directories": {
     "doc": "docs"
@@ -8,13 +8,12 @@
   "scripts": {
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",
-    "lint": "vue-cli-service lint",
-    "test:unit": "vue-cli-service test:unit"
+    "lint": "vue-cli-service lint"
   },
   "dependencies": {
-    "@coscine/api-connection": "^1.23.1",
-    "@coscine/app-util": "^1.7.1",
-    "@coscine/component-library": "1.4.1",
+    "@coscine/api-connection": "^1.24.2",
+    "@coscine/app-util": "^1.8.1",
+    "@coscine/component-library": "1.5.0",
     "@types/jquery": "^3.5.2",
     "@types/vuelidate": "^0.7.13",
     "@voerro/vue-tagsinput": "^2.4.0",
@@ -23,7 +22,6 @@
     "moment": "^2.29.1",
     "vue": "^2.6.12",
     "vue-i18n": "^8.22.0",
-    "vue-loading-overlay": "^3.4.2",
     "vue-multiselect": "^2.1.6",
     "vue-runtime-helpers": "^1.1.2",
     "vuejs-datepicker": "^1.6.2",
@@ -36,15 +34,15 @@
     "@semantic-release/gitlab": "^6.0.5",
     "@semantic-release/npm": "^7.0.6",
     "@semantic-release/release-notes-generator": "^9.0.1",
-    "@types/chai": "^4.2.13",
-    "@types/mocha": "^8.0.3",
-    "@vue/cli-plugin-babel": "^4.5.7",
+    "@types/node": "^14.14.20",
+    "@typescript-eslint/eslint-plugin": "^4.12.0",
+    "@typescript-eslint/parser": "^4.12.0",
     "@vue/cli-plugin-typescript": "^4.5.7",
-    "@vue/cli-plugin-unit-mocha": "^4.5.7",
     "@vue/cli-service": "^4.5.7",
-    "@vue/test-utils": "1.1.0",
-    "chai": "^4.2.0",
-    "semantic-release": "^17.3.0",
+    "conventional-changelog-eslint": "3.0.9",
+    "core-js": "^3.8.2",
+    "eslint": "^7.17.0",
+    "semantic-release": "^17.3.1",
     "typescript": "^4.0.3",
     "vue-template-compiler": "^2.6.12"
   },

postcss.config.js

-module.exports = {
-  plugins: {
-    autoprefixer: {}
-  }
-}

src/UserProfile.vue

@@ -189,15 +189,9 @@
             >{{ $t('save') }}</b-button
           >
         </b-form>
-        <loading
-          :active.sync="isWaitingForResponse"
-          :can-cancel="false"
-          :height="128"
-          :width="128"
-          :z-index="1500"
-          :color="color"
-          :is-full-page="true"
-        ></loading>
+        <coscine-loading-spinner 
+          :isWaitingForResponse="isWaitingForResponse"
+        />
       </div>
       <div class="col-sm-2"></div>
     </b-row>
@@ -219,8 +213,8 @@ import '@voerro/vue-tagsinput/dist/style.css';
 import Multiselect from 'vue-multiselect';
 import 'vue-multiselect/dist/vue-multiselect.min.css';
 
-import Loading from 'vue-loading-overlay';
-import 'vue-loading-overlay/dist/vue-loading.css';
+import { CoscineLoadingSpinner } from '@coscine/component-library';
+import '@coscine/component-library/dist/index.css';
 
 import AccessToken from './components/AccessToken.vue';
 Vue.use(BootstrapVue);
@@ -230,7 +224,7 @@ export default Vue.extend({
   name: 'UserProfile',
   components: {
     Multiselect,
-    Loading,
+    CoscineLoadingSpinner,
     AccessToken,
   },
   validations: {
@@ -268,7 +262,6 @@ export default Vue.extend({
       currentUserComponent: 'UserProfileComponent',
       isWaitingForResponse: false,
       externalUser: true,
-      color: '#00549F',
       disciplineLabel: 'displayNameEn',
       form: {
         Givenname: '',
@@ -435,7 +428,7 @@ export default Vue.extend({
       if (search.length < 3) {
         return;
       }
-      this.queryTimer = setTimeout(() => (this.fetchOrganizationOptions(search)), 1000);
+      this.queryTimer = window.setTimeout(() => (this.fetchOrganizationOptions(search)), 1000);
     },
     fetchOrganizationOptions(search: string) {
       this.loadingOrganizations = true;

src/components/AccessToken.vue

@@ -134,6 +134,7 @@ import Datepicker from 'vuejs-datepicker';
 import { de, en } from 'vuejs-datepicker/dist/locale';
 
 import { CoscineModal } from '@coscine/component-library';
+import '@coscine/component-library/dist/index.css';
 
 import moment from 'moment';
 

tsconfig.json

@@ -10,10 +10,13 @@
     "allowSyntheticDefaultImports": true,
     "sourceMap": true,
     "baseUrl": ".",
+    "skipLibCheck": true,
+    "outDir": "dist",
+    "declaration": true,
+    "declarationDir": "dist",
     "types": [
       "webpack-env",
-      "mocha",
-      "chai"
+      "node"
     ],
     "paths": {
       "@/*": [

tslint.json

-{
-  "defaultSeverity": "warning",
-  "extends": [
-    "tslint:recommended"
-  ],
-  "linterOptions": {
-    "exclude": [
-      "node_modules/**"
-    ]
-  },
-  "rules": {
-    "quotemark": [true, "single"],
-    "indent": [true, "spaces", 2],
-    "interface-name": false,
-    "ordered-imports": false,
-    "object-literal-sort-keys": false,
-    "no-consecutive-blank-lines": false
-  }
-}