Commit 26545fe0 authored by David Schimmel's avatar David Schimmel
Browse files

"New: Add ui for login coscine/issues#230"

parent 75ac6d54
# 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
......@@ -12,7 +12,12 @@
"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",
"jquery": "^3.4.1",
"vue": "^2.6.6",
"vue-i18n": "^8.14.0"
},
"devDependencies": {
"@semantic-release/commit-analyzer": "^6.1.0",
......@@ -35,7 +40,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"
}
......@@ -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>
<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="./assets/RWTH_Piktogramm_Ich_statt_man.png" 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="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' v-bind:returnUrl='this.returnUrl' @back='loginBack' @clickGetLoginForm='getLoginForm' />
</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';
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;
}
export default Vue.extend({
name: 'app',
components: {
HelloWorld,
LoginMain,
LoginForm,
},
data() {
return {
returnUrl: getReturnUrl(),
currentInputCard: 'LoginMain',
};
},
methods: {
loginBack() {
this.currentInputCard = 'LoginMain';
},
getLoginForm() {
this.currentInputCard = 'LoginForm';
},
},
});
</script>
......@@ -26,4 +82,42 @@ export default Vue.extend({
color: #2c3e50;
margin-top: 60px;
}
.headline {
text-align: left;
padding-left: 0.4em;
margin-bottom: 1.0em;
}
.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 .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>
<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>
<template>
<div>
<form v-bind: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" name="UserId" type="text" value="" class="form-control">
</div>
<div class="row">
<input type="Submit" v-bind: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
<template>
<div>
<h5 class="card-title">{{ $t('login_headline') }}</h5>
<div class="row">
<!--<button class="btn btn-primary w-100" name="getLoginForm" @click.prevent="clickGetLoginForm">{{ $t('login_button_with_account') }}</button>-->
<button class="btn btn-primary w-100" name="getLoginForm" @click.prevent="clickGetLoginForm">
<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-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');
},
},
});
</script>
<style scoped>
</style>
\ No newline at end of file
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_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.',
};
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_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.',
};
import de from './de';
import en from './en';
export default {
de,
en,
};
import Vue from 'vue';
import App from './App.vue';
import jQuery from 'jquery';
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(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');
});
......@@ -2,3 +2,5 @@ declare module '*.vue' {
import Vue from 'vue';
export default Vue;
}
declare module '@itcenter-layout/bootstrap'
\ No newline at end of file
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment