Commit d05f3cf1 authored by Benedikt Heinrichs's avatar Benedikt Heinrichs
Browse files

Refactoring

parent ea99a605
<template>
<div id="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" alt=""> <span class="keyword">CoScInE</span></h1>
<div class="row">
<div class="col-xl-2"></div>
<div class="col-xl-8">
<h1 class="headline">
{{ $t('headline') }}
<img class="logo" :src="coscineImage" 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">
......@@ -12,7 +16,10 @@
<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>
<p class="card-text">
{{ $t('description_help') }}
<a href="servicedesk@itc.rwth-aachen.de">Servicedesk</a>
</p>
</div>
</div>
</div>
......@@ -21,13 +28,22 @@
<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' />
<component
:is="currentInputCard"
: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 class="row">
<button
hidden
class="btn btn-secondary dropdown-toggle w-100"
id="signup-toggle"
>{{ $t('signup') }}</button>
</div>
</div>
</div>
......@@ -45,13 +61,19 @@ import LoginForm from './components/LoginForm.vue';
import imagePath from './assets/RWTH_Piktogramm_Ich_statt_man.png';
const scriptPath = (document.currentScript as any).src as string;
const scriptUrl = scriptPath.substring(0, scriptPath.indexOf('app.js'));
let scriptPath = '';
if (document.currentScript !== undefined) {
scriptPath = (document.currentScript as any).src as string;
}
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);
const returnUrlParameters =
hookupElement != null ? hookupElement.getAttribute('returnUrl') : '';
const returnUrl = encodeURI(
'/coscine/api/Coscine.STS/Account/login?returnUrl=' + returnUrlParameters,
);
return returnUrl;
}
......@@ -81,7 +103,7 @@ export default Vue.extend({
<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;
......@@ -92,7 +114,7 @@ export default Vue.extend({
.headline {
text-align: left;
padding-left: 0.4em;
margin-bottom: 1.0em;
margin-bottom: 1em;
}
.logo {
......@@ -101,7 +123,7 @@ export default Vue.extend({
}
.keyword {
color: #00549F
color: #00549f;
}
.card-title {
......@@ -109,13 +131,14 @@ export default Vue.extend({
padding: 0em 0.2em;
}
.card-text{
.card-text {
text-align: left;
padding: 0em 0.4em;
}
.component-fade-enter-active, .component-fade-leave-active {
transition: opacity .3s ease;
.component-fade-enter-active,
.component-fade-leave-active {
transition: opacity 0.3s ease;
}
.component-fade-enter, .component-fade-leave-to
......
<template>
<div>
<form v-bind:action='returnUrl' method="post">
<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" name="UserId" type="text" value="" class="form-control">
<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">
<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">
<input type="hidden" name="wa" value="wsignin1.0" />
</form>
</div>
</template>
......
......@@ -2,11 +2,12 @@
<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>
<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>
......
......@@ -12,7 +12,6 @@ export default {
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.',
......
......@@ -12,7 +12,6 @@ export default {
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.',
......
module.exports = {
devServer: {
disableHostCheck: true,
},
configureWebpack: {
devtool: 'source-map'
},
}
\ 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