Merge branch 'Product/224-loginPage' into 'master'

Product/224 login page

See merge request coscine/app/login!2

README.md

-# vue-template
+# Login Page
 
-This template includes:
-
-*  Vue.js application template
-*  Linting using TSLint and the Vue builders
-*  Automatic releases using semantic-release (ESLint Code Convention) and Gitlab CI / CD
-*  Automatic Unit tests using Mocha/Chai and the Vue cli
-*  Automatic documentation publishing using Gitlab CI / CD and a self written script which puts the docs in the docs folder to the wiki
-*  For public registry: Publishing of packages, for usage add the following lines to package.json, add the npm publish module in .releaserc and provide a   valid NPM token:
-```
-"publishConfig": {
-    "access": "public",
-    "registry": "https://registry.npmjs.org/",
-    "tag": "latest"
-}
-```
-
-## Project setup
-```
-npm install
-```
-
-### Compiles and hot-reloads for development
-```
-npm run serve
-```
-
-### Compiles and minifies for production
-```
-npm run build
-```
-
-### Run your tests
-```
-npm run test
-```
-
-### Lints and fixes files
-```
-npm run lint
-```
-
-### Run your unit tests
-```
-npm run test:unit
-```
-
-### Customize configuration
-See [Configuration Reference](https://cli.vuejs.org/config/).
+Component to handle Login to the Coscine portal.
\ No newline at end of file

package.json

@@ -12,7 +12,13 @@
     "test:unit": "vue-cli-service test:unit"
   },
   "dependencies": {
-    "vue": "^2.6.6"
+    "@itcenter-layout/bootstrap": "^1.4.3",
+    "@rwth-layout/itcenter-masterpage": "^0.3.0",
+    "@types/jquery": "^3.3.31",
+    "bootstrap-vue": "^2.0.0-rc.28",
+    "jquery": "^3.4.1",
+    "vue": "^2.6.6",
+    "vue-i18n": "^8.14.0"
   },
   "devDependencies": {
     "@semantic-release/commit-analyzer": "^6.1.0",
@@ -35,7 +41,7 @@
   },
   "repository": {
     "type": "git",
-    "url": "https://git.rwth-aachen.de/coscine/templates/vue-template.git"
+    "url": "https://git.rwth-aachen.de/coscine/app/login"
   },
   "license": "ISC"
 }

public/index.html

@@ -11,7 +11,7 @@
     <noscript>
       <strong>We're sorry but ts-template doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
     </noscript>
-    <div id="app"></div>
+    <div id="loginpage"></div>
     <!-- built files will be auto injected -->
   </body>
 </html>

src/App.vue

 <template>
   <div id="app">
-    <img alt="Vue logo" src="./assets/logo.png">
-    <HelloWorld msg="Welcome to Your Vue.js + TypeScript App"/>
+    <div class="container-fluid">
+      <div class="row">
+        <div class="col-xl-2"></div>
+        <div class="col-xl-8">
+          <h1 class="headline">
+            {{ $t('headline') }}
+            <img class="logo" :src="coscineImage" v-if="imageEnabled" alt />
+            <span class="keyword">CoScInE</span>
+          </h1>
+          <div class="row">
+            <div class="col-sm-12 col-md-7">
+              <div class="card bg-light mb-3 w-100">
+                <div class="card-body">
+                  <h5 class="card-title">{{ $t('description_headline') }}</h5>
+                  <p class="card-text">{{ $t('description_text') }}</p>
+                  <h5 class="card-title">{{ $t('description_help_headline') }}</h5>
+                  <p class="card-text">
+                    {{ $t('description_help') }}
+                    <a href="mailto:servicedesk@itc.rwth-aachen.de">Servicedesk</a>
+                  </p>
+                </div>
+              </div>
+            </div>
+            <div class="col-sm-12 col-md-5">
+              <div class="row">
+                <div class="card bg-light mb-3 w-100">
+                  <div class="card-body">
+                    <transition name="component-fade" mode="out-in">
+                      <component
+                        :is="currentInputCard"
+                        :returnUrl="this.returnUrl"
+                        @back="loginBack"
+                        @clickGetLoginForm="getLoginForm"
+                        @clickGetORCiDForm="getORCiDForm"
+                      />
+                    </transition>
+                  </div>
+                </div>
+              </div>
+              <div class="row">
+                <button
+                  hidden
+                  class="btn btn-secondary dropdown-toggle w-100"
+                  id="signup-toggle"
+                >{{ $t('signup') }}</button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="col-xl-2"></div>
+    </div>
   </div>
 </template>
 
 <script lang="ts">
 import Vue from 'vue';
-import HelloWorld from './components/HelloWorld.vue';
+import LoginMain from './components/LoginMain.vue';
+import LoginForm from './components/LoginForm.vue';
+
+import imagePath from './assets/RWTH_Piktogramm_Ich_statt_man.png';
+
+let scriptPath = '';
+let imageEnabled = false;
+if (document.currentScript !== undefined) {
+  scriptPath = (document.currentScript as any).src as string;
+  imageEnabled = true;
+}
+const scriptUrl = (scriptPath === '') ? '/' : scriptPath.substring(0, scriptPath.indexOf('app.js'));
+
+function getReturnUrl() {
+  const hookupElement = document.getElementById('loginpage');
+  const returnUrlParameters =
+    hookupElement != null ? hookupElement.getAttribute('returnUrl') : '';
+  const returnUrl = encodeURI(
+    '/coscine/api/Coscine.STS/Account/login?returnUrl=' + returnUrlParameters,
+  );
+  return returnUrl;
+}
+
+function getORCiDUrl() {
+  const hookupElement = document.getElementById('loginpage');
+  const orcidUrlString =
+    (hookupElement != null ? hookupElement.getAttribute('orcidUrl') : '') as string;
+  const orcidUrl = encodeURI(orcidUrlString);
+  return orcidUrl;
+}
 
 export default Vue.extend({
   name: 'app',
   components: {
-    HelloWorld,
+    LoginMain,
+    LoginForm,
+  },
+  data() {
+    return {
+      coscineImage: scriptUrl + imagePath.substring(1),
+      imageEnabled,
+      returnUrl: getReturnUrl(),
+      orcidUrl: getORCiDUrl(),
+      currentInputCard: 'LoginMain',
+    };
+  },
+  methods: {
+    loginBack() {
+      this.currentInputCard = 'LoginMain';
+    },
+    getLoginForm() {
+      this.currentInputCard = 'LoginForm';
+    },
+    getORCiDForm() {
+      window.location.href = this.orcidUrl;
+    },
   },
 });
 </script>
 
 <style>
 #app {
-  font-family: 'Avenir', Helvetica, Arial, sans-serif;
+  font-family: "Avenir", Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   text-align: center;
   color: #2c3e50;
   margin-top: 60px;
 }
+
+.headline {
+  text-align: left;
+  padding-left: 0.4em;
+  margin-bottom: 1em;
+}
+
+.logo {
+  width: 1.5em;
+  margin: 0.15em;
+}
+
+.keyword {
+  color: #00549f;
+}
+
+.card-title {
+  text-align: left;
+  padding: 0em 0.2em;
+}
+
+.card-text {
+  text-align: left;
+  padding: 0em 0.4em;
+}
+
+.component-fade-enter-active,
+.component-fade-leave-active {
+  transition: opacity 0.3s ease;
+}
+
+.component-fade-enter, .component-fade-leave-to
+/* .component-fade-leave-active below version 2.1.8 */ {
+  opacity: 0;
+}
+
+#signup-toggle {
+  margin: 0em;
+}
 </style>

src/components/HelloWorld.vue

-<template>
-  <div class="hello">
-    <h1>{{ msg }}</h1>
-    <p>
-      For a guide and recipes on how to configure / customize this project,<br>
-      check out the
-      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
-    </p>
-    <h3>Installed CLI Plugins</h3>
-    <ul>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-typescript" target="_blank" rel="noopener">typescript</a></li>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-unit-mocha" target="_blank" rel="noopener">unit-mocha</a></li>
-    </ul>
-    <h3>Essential Links</h3>
-    <ul>
-      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
-      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
-      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
-      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
-      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
-    </ul>
-    <h3>Ecosystem</h3>
-    <ul>
-      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
-      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
-      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
-      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
-      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
-    </ul>
-  </div>
-</template>
-
-<script lang="ts">
-import Vue from 'vue';
-
-export default Vue.extend({
-  name: 'HelloWorld',
-  props: {
-    msg: String,
-  },
-});
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped>
-h3 {
-  margin: 40px 0 0;
-}
-ul {
-  list-style-type: none;
-  padding: 0;
-}
-li {
-  display: inline-block;
-  margin: 0 10px;
-}
-a {
-  color: #42b983;
-}
-</style>

src/components/LoginForm.vue

+<template>
+  <div>
+    <form :action="returnUrl" method="post">
+      <h5 class="card-title">{{ $t('login_form_headline') }}</h5>
+      <div class="row">
+        <input data-val="true" data-val-required="$t('login_form_id_required')" id="userId" placeholder="User ID" name="UserId" type="text" value="" class="form-control" />
+      </div>
+      <div style="height: 5.5px;">
+      </div>
+      <div class="row">
+        <input type="Submit" :value="$t('login_form_submit')" class="submit btn btn-primary w-100" />
+      </div>
+      <div class="row">
+        <button class="btn btn-secondary w-100" name="back" @click.prevent="clickBack">{{ $t('back') }}</button>
+      </div>
+      <input type="hidden" name="wa" value="wsignin1.0" />
+    </form>
+  </div>
+</template>
+
+<script lang='ts'>
+import Vue from 'vue';
+
+export default Vue.extend({
+  name: 'LoginForm',
+  data() {
+    return {
+      form: {
+      },
+    };
+  },
+  props: {
+    returnUrl: String,
+  },
+  methods: {
+    clickBack() {
+      this.$emit('back');
+    },
+  },
+});
+</script>
+
+<style scoped>
+  .form-control {
+      margin: 0em 0.35em;
+  }
+</style>
\ No newline at end of file

src/components/LoginMain.vue

+<template>
+  <div>
+    <h5 class="card-title">{{ $t('login_headline') }}</h5>
+    <div class="row">
+      <button class="btn btn-primary w-100" name="getORCiDForm" @click.prevent="clickGetORCiDForm">
+        <span>
+          <img alt="ORCID logo" id="orcid-id-logo" src="https://orcid.org/sites/default/files/images/orcid_24x24.png" width="25" height="25" />
+        </span>
+        <span>  {{ $t('login_button_orcid') }}</span>
+      </button>
+    </div>
+    <div class="row">
+      <button class="btn btn-primary w-100" name="getLoginForm" @click.prevent="clickGetLoginForm">
+        {{ $t('login_button_form') }}
+      </button>
+    </div>
+    <div class="row">
+      <button class="btn btn-secondary w-100" disabled>{{ $t('login_button_without_account') }}</button>
+    </div>
+  </div>
+</template>
+
+<script lang='ts'>
+import Vue from 'vue';
+
+export default Vue.extend({
+  name: 'LoginMain',
+  props: {
+    returnUrl: String,
+  },
+  methods: {
+    clickGetLoginForm() {
+      this.$emit('clickGetLoginForm');
+    },
+    clickGetORCiDForm() {
+      this.$emit('clickGetORCiDForm');
+    },
+  },
+});
+</script>
+
+<style scoped>
+</style>
\ No newline at end of file

src/locale/de.ts

+export default {
+    headline: 'Willkommen bei ',
+    description_headline: 'Informationen für CoScInE Nutzer',
+    description_text: `Sie können sich mit ihrem Nutzernamen (eg. ab1234567)
+                       und dem Passwort, das Sie für RWTH Single Sign-On benutzen,
+                       anmelden oder die Anmeldeinformationen anderer sozialer Netzwerke für den Login.`,
+    description_help_headline: 'Technische Fragen oder allgemeines Feedback?',
+    description_help: 'Schreiben Sie an ',
+    login_headline: 'Login',
+    login_button_with_account: 'Login-Zugang',
+    login_button_orcid: 'Anmelden mit ORCID ID',
+    login_button_form: 'Anmelden mit User ID',
+    login_button_without_account: 'Weiter ohne Login',
+    signup: 'Anmelden',
+    back: 'Zurück',
+    login_form_headline: 'Login mit Nutzer-ID',
+    login_form_submit: 'Senden',
+    login_form_id_required: 'Das UserId-Feld wird benötigt.',
+};

src/locale/en.ts

+export default {
+    headline: 'Welcome to ',
+    description_headline: 'Information for CoScInE users',
+    description_text: `You can log in using your username (eg. ab1234567)
+                       and the password yo use for RWTH Single Sign-On or signup
+                       using your credentials from other social network platforms.)`,
+    description_help_headline: 'Technical question or general feedback?',
+    description_help: 'Write us at ',
+    login_headline: 'Login',
+    login_button_with_account: 'Login Access',
+    login_button_orcid: 'Sign in with ORCID ID',
+    login_button_form: 'Sign in with a User ID',
+    login_button_without_account: 'Continue without Login',
+    signup: 'signup',
+    back: 'Back',
+    login_form_headline: 'Login with user ID',
+    login_form_submit: 'Submit',
+    login_form_id_required: 'The UserId field is required.',
+};

src/locale/locales.ts

+import de from './de';
+import en from './en';
+
+export default {
+    de,
+    en,
+};

src/main.ts

 import Vue from 'vue';
 import App from './App.vue';
+import jQuery from 'jquery';
+import BootstrapVue from 'bootstrap-vue';
+import '@itcenter-layout/bootstrap/dist/css/rwth-theme.css';
+import '@itcenter-layout/bootstrap/dist/css/material-icons.css';
+import locales from './locale/locales';
+import VueI18n from 'vue-i18n';
 
 Vue.config.productionTip = false;
 
-new Vue({
-  render: (h) => h(App),
-}).$mount('#app');
+Vue.use(BootstrapVue);
+Vue.use(VueI18n);
+
+jQuery(() => {
+  const i18n = new VueI18n({
+    locale: 'en', // set locale
+    messages: locales, // set locale messages
+    silentFallbackWarn: true,
+  });
+
+  new Vue({
+    render: (h) => h(App),
+    i18n,
+  }).$mount('#loginpage');
+});

src/shims-vue.d.ts

@@ -2,3 +2,9 @@ declare module '*.vue' {
   import Vue from 'vue';
   export default Vue;
 }
+
+declare module '@itcenter-layout/bootstrap'
+declare module "*.png" {
+  const value: any;
+  export default value;
+}
\ No newline at end of file

tests/unit/example.spec.ts

-import { expect } from 'chai';
-import { shallowMount } from '@vue/test-utils';
-import HelloWorld from '@/components/HelloWorld.vue';
-
-describe('HelloWorld.vue', () => {
-  it('renders props.msg when passed', () => {
-    const msg = 'new message';
-    const wrapper = shallowMount(HelloWorld, {
-      propsData: { msg },
-    });
-    expect(wrapper.text()).to.include(msg);
-  });
-});

vue.config.js

+module.exports = {
+    devServer: {
+        disableHostCheck: true,
+    },
+    configureWebpack: {
+        devtool: 'source-map',
+        devServer: {
+            port: 9432,
+        }
+    },
+}
\ No newline at end of file