LoginApp.vue 10.3 KB
Newer Older
RWTH App's avatar
RWTH App committed
1
<template>
2
  <div id="wrap" :style="cssProps">
3
    <coscine-page-header
Marcel Nellesen's avatar
Marcel Nellesen committed
4
      :rwthImage="rwthImage"
5
6
      :locale="this.$root.$i18n.locale"
      @changeLocale="changeLocale"/>
7
    <div class="container-fluid app-content">
Benedikt Heinrichs's avatar
Benedikt Heinrichs committed
8
9
10
11
12
      <div class="row">
        <div class="col-xl-2"></div>
        <div class="col-xl-8">
          <h1 class="headline">
            {{ $t('headline') }}
13
            <img class="logo" :src="coscineImageBlue" v-if="imageEnabled" alt />
Benedikt Heinrichs's avatar
Benedikt Heinrichs committed
14
          </h1>
Marcel Nellesen's avatar
Marcel Nellesen committed
15
          <div v-if="!tos" class="row">
16
            <div class="col-sm-12 col-md-7">
17
18
19
              <div class="alert alert-warning" role="alert">
                <h5 class="alert-heading">{{ $t('alert_headline') }}</h5>
                <p class="alert-title">{{ $t('alert_text1') }}
20
21
                  <a href="mailto:servicedesk@itc.rwth-aachen.de?subject=CoScInE%20Pilot%20Program">Servicedesk</a>
                  {{ $t('alert_text2') }}
22
23
24
25
26
27
                </p>
              </div>
              <div class="card bg-light mb-3 w-100">
                <div class="card-body">
                  <p class="card-text">
                    <vue-markdown :source="news"></vue-markdown>
Benedikt Heinrichs's avatar
Benedikt Heinrichs committed
28
                  </p>
29
30
31
                </div>
              </div>
            </div>
32
            <div class="col-sm-12 col-md-5">
33
34
35
36
              <div class="row">
                <div class="card bg-light mb-3 w-100">
                  <div class="card-body">
                    <transition name="component-fade" mode="out-in">
Benedikt Heinrichs's avatar
Benedikt Heinrichs committed
37
                      <component
38
                        :is="(logoutState) ? logoutComponent : currentInputCard"
Benedikt Heinrichs's avatar
Benedikt Heinrichs committed
39
                        :returnUrl="this.returnUrl"
40
                        :shibbolethReturnUrl="this.shibbolethReturnUrl"
41
42
                        :testShibbolethReturnUrl="this.testShibbolethReturnUrl"
                        :fhShibbolethReturnUrl="this.fhShibbolethReturnUrl"
43
44
                        :idpUrl="this.idpUrl"
                        :loggedInWithShibboleth="this.loggedInWithShibboleth"
45
                        :mergeReturnUrl="mergeReturnUrl"
Benedikt Heinrichs's avatar
Benedikt Heinrichs committed
46
                        @back="loginBack"
47
                        @clickGetORCiDForm="getORCiDForm"
48
                        @changeLogoutState="changeLogoutState"
Benedikt Heinrichs's avatar
Benedikt Heinrichs committed
49
                      />
50
51
52
53
                    </transition>
                  </div>
                </div>
              </div>
Benedikt Heinrichs's avatar
Benedikt Heinrichs committed
54
55
56
57
58
59
              <div class="row">
                <button
                  hidden
                  class="btn btn-secondary dropdown-toggle w-100"
                  id="signup-toggle"
                >{{ $t('signup') }}</button>
60
              </div>
61
62
63
64
65
66
67
68
69
70
71
72
73
              <div class="row">
                <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>
74
75
            </div>
          </div>
Marcel Nellesen's avatar
Marcel Nellesen committed
76
77
78
79
80
81
          <div v-else class="row">
            <div class="col-sm-12 col-md-12">
              <TOS
                :tosReturnUrl="this.tosReturnUrl"
                />
            </div>
82
          </div>
Marcel Nellesen's avatar
Marcel Nellesen committed
83
        </div>
84
85
      </div>
      <div class="col-xl-2"></div>
86
    </div>   
87
88
89
90
91
92
    <coscine-page-footer
    :contact="$t('contact')"    
    :disclaimer="$t('disclaimer')"
    :help="$t('help')"
    :imprint="$t('imprint')"
    />
RWTH App's avatar
RWTH App committed
93
94
95
96
97
  </div>
</template>

<script lang="ts">
import Vue from 'vue';
98
import VueMarkdown from 'vue-markdown';
99
import LoginMain from './components/LoginMain.vue';
100
import LogoutMain from './components/LogoutMain.vue';
Marcel Nellesen's avatar
Marcel Nellesen committed
101
import TOS from './components/TOS.vue';
102
import { CoscinePageHeader, CoscinePageFooter } from '@coscine/component-library';
103
import '@coscine/component-library/dist/index.css';
104

Kimia Beheshti's avatar
Kimia Beheshti committed
105
106
import coscineImageBluePath from './assets/rwth_coscine_rgb.svg';
import rwthImagePath from './assets/rwth_coscine_weiss_rgb.svg';
107
108
109
110
import linkWhitePath from './assets/link_white.svg';
import mailGreyPath from './assets/mail_grey.svg';
import phoneGreyPath from './assets/phone_grey.svg';
import faxGreyPath from './assets/fax_grey.svg';
111

112
113
import { NoticeApi } from '@coscine/api-connection';

Benedikt Heinrichs's avatar
Benedikt Heinrichs committed
114
let scriptPath = '';
115
let imageEnabled = false;
Benedikt Heinrichs's avatar
Benedikt Heinrichs committed
116
117
if (document.currentScript !== undefined) {
  scriptPath = (document.currentScript as any).src as string;
118
  imageEnabled = true;
Benedikt Heinrichs's avatar
Benedikt Heinrichs committed
119
120
}
const scriptUrl = (scriptPath === '') ? '/' : scriptPath.substring(0, scriptPath.indexOf('app.js'));
121
const rootUrl = (scriptPath.indexOf('/js') !== -1) ? scriptUrl.replace('/js', '') : scriptUrl;
122

123
function getReturnUrlParam() {
124
  const hookupElement = document.getElementById('loginpage');
Benedikt Heinrichs's avatar
Benedikt Heinrichs committed
125
126
  const returnUrlParameters =
    hookupElement != null ? hookupElement.getAttribute('returnUrl') : '';
127
128
129
  return returnUrlParameters;
}

130
131
132
133
134
135
function getReturnUrl(method: string, entityId: string = '') {
  let returnUrl = '/coscine/api/Coscine.Api.STS/' + method + '/login?returnUrl=' + getReturnUrlParam();
  if (entityId !== '') {
    returnUrl += '&entityId=' + entityId;
  }
  return encodeURI(returnUrl);
136
}
RWTH App's avatar
RWTH App committed
137

138
139
140
141
function getMergeReturnUrl() {
  return getReturnUrl('Merge');
}

Marcel Nellesen's avatar
Marcel Nellesen committed
142
143
144
145
function getTOSReturnUrl() {
  return encodeURI('' + getReturnUrlParam());
}

146
147
148
149
function getAccountReturnUrl() {
  return getReturnUrl('Account');
}

150
function getShibbolethReturnUrl() {
151
  return getReturnUrl('Shibboleth', 'https://login-test.rz.rwth-aachen.de/shibboleth');
152
153
154
}

function getIdpUrl() {
155
  const hookupElement = document.getElementById('loginpage');
156
157
158
  const idpUrl =
    hookupElement != null ? hookupElement.getAttribute('IdpUrl') : '';
  return idpUrl;
159
160
}

161
162
163
164
165
166
167
168
function getORCiDUrl() {
  const hookupElement = document.getElementById('loginpage');
  const orcidUrlString =
    (hookupElement != null ? hookupElement.getAttribute('orcidUrl') : '') as string;
  const orcidUrl = encodeURI(orcidUrlString);
  return orcidUrl;
}

169
170
171
172
173
function getIsLogout() {
  const urlParams = new URLSearchParams(window.location.search);
  return urlParams.has('logout');
}

Marcel Nellesen's avatar
Marcel Nellesen committed
174
175
176
177
178
function getIsTOS() {
  const urlParams = new URLSearchParams(window.location.search);
  return urlParams.has('tos');
}

179
180
181
182
183
function getLoggedInWithShibboleth() {
  const urlParams = new URLSearchParams(window.location.search);
  return urlParams.has('loggedInWithShibboleth');
}

RWTH App's avatar
RWTH App committed
184
export default Vue.extend({
185
  name: 'loginapp',
RWTH App's avatar
RWTH App committed
186
  components: {
187
    LoginMain,
188
    LogoutMain,
Marcel Nellesen's avatar
Marcel Nellesen committed
189
    TOS,
190
    VueMarkdown,
191
192
    CoscinePageHeader,
    CoscinePageFooter,
193
  },
194
195
196
  computed: {
    cssProps() {
      return {
197
198
199
200
        '--linkWhite': 'url(' + rootUrl + linkWhitePath + ') 1px 9px no-repeat',
        '--mailGrey': 'url(' + rootUrl + mailGreyPath + ') 0px 6px no-repeat',
        '--phoneGrey': 'url(' + rootUrl + phoneGreyPath + ') 0px 6px no-repeat',
        '--faxGrey': 'url(' + rootUrl + faxGreyPath + ') 0px 6px no-repeat',
201
202
203
      };
    },
  },
204
205
  data() {
    return {
206
      coscineImageBlue: rootUrl + coscineImageBluePath,
207
      rwthImage: rootUrl + rwthImagePath,
208
      imageEnabled,
209
      returnUrl: getAccountReturnUrl(),
210
211
212
      shibbolethReturnUrl: getReturnUrl('Shibboleth', 'https://login.rz.rwth-aachen.de/shibboleth'),
      testShibbolethReturnUrl: getReturnUrl('Shibboleth', 'https://login-test.rz.rwth-aachen.de/shibboleth'),
      fhShibbolethReturnUrl: getReturnUrl('Shibboleth', 'https://login.fh-aachen.de/idp/shibboleth'),
Marcel Nellesen's avatar
Marcel Nellesen committed
213
      tosReturnUrl: getTOSReturnUrl(),
214
      mergeReturnUrl: getMergeReturnUrl(),
215
      idpUrl: getIdpUrl(),
216
      orcidUrl: getORCiDUrl(),
217
218
      logoutState: getIsLogout(),
      loggedInWithShibboleth: getLoggedInWithShibboleth(),
219
      currentInputCard: 'LoginMain',
220
      logoutComponent: 'LogoutMain',
Marcel Nellesen's avatar
Marcel Nellesen committed
221
      tos: getIsTOS(),
222
      news: '',
223
224
    };
  },
225
226
227
228
229
  watch: {
    '$i18n.locale'() {
      this.retrieveNotices();
    },
  },
230
  methods: {
231
232
233
234
235
236
237
    retrieveNotices() {
      NoticeApi.getNotices('changelog', this.$i18n.locale, (response: any) => {
        let splitArray = response.data.data.body.split(/\s(?:#{3})\s/g, 5);
        splitArray = splitArray.join('### ');
        this.news = splitArray.toString();
      });
    },
238
239
240
    loginBack() {
      this.currentInputCard = 'LoginMain';
    },
241
242
243
    getORCiDForm() {
      window.location.href = this.orcidUrl;
    },
244
245
246
    changeLogoutState() {
      this.logoutState = !this.logoutState;
    },
247
248
249
250
251
252
253
    changeLocale() {
      if (this.$root.$i18n.locale === 'en') {
        this.$root.$i18n.locale = 'de';
      } else {
        this.$root.$i18n.locale = 'en';
      }
    },
RWTH App's avatar
RWTH App committed
254
  },
255
256
257
  created() {
    this.retrieveNotices();
  },
RWTH App's avatar
RWTH App committed
258
259
260
261
});
</script>

<style>
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302

.list-group-item-action {
  background: var(--linkWhite)!important;
}

#mail.list-group-item-action{
  background: var(--mailGrey)!important;
}
#phone.list-group-item {
  background: var(--phoneGrey)!important;
}
#fax.list-group-item {
  background: var(--faxGrey)!important;
}

#wrap .navbar .lang {
  padding-top: .5rem!important;
}

.siteIcon {
  height: 0px;
  width: 0px;
  overflow: visible;
  margin-left: 150px;
  line-height: 0px;
  margin-top: -20px;
}

.coscineSiteIcon {
  height: 0px;
  width: 0px;
  overflow: visible;
  line-height: 0px;        
}

.coscineSiteIcon img {
  margin-left: 8px;
  height: 36px;
  width: 36px;
}

303
304
305
306
307
308
.coscineSiteIcon img {
  margin-left: 8px;
  height: 36px;
  width: 36px;
}

309
310
311
312
313
314
315
316
317
318
319
.coscineSiteIconLabel {
  margin-left: 8px;
  vertical-align: middle;
  color: white;
  font-size: 22px;
}

.navbar .app-header-container a img.ms-siteicon-img {
  border: 0px;
}

RWTH App's avatar
RWTH App committed
320
#app {
Benedikt Heinrichs's avatar
Benedikt Heinrichs committed
321
  font-family: "Avenir", Helvetica, Arial, sans-serif;
RWTH App's avatar
RWTH App committed
322
323
324
325
326
327
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
328
329
330
331

.headline {
  text-align: left;
  padding-left: 0.4em;
Benedikt Heinrichs's avatar
Benedikt Heinrichs committed
332
  margin-bottom: 1em;
333
334
335
}

.logo {
Kimia Beheshti's avatar
Kimia Beheshti committed
336
337
  margin-bottom: 0.16em;
  width: 3.5em;
338
339
340
}

.keyword {
Benedikt Heinrichs's avatar
Benedikt Heinrichs committed
341
  color: #00549f;
342
343
344
345
346
347
348
}

.card-title {
  text-align: left;
  padding: 0em 0.2em;
}

Benedikt Heinrichs's avatar
Benedikt Heinrichs committed
349
.card-text {
350
351
352
353
  text-align: left;
  padding: 0em 0.4em;
}

Benedikt Heinrichs's avatar
Benedikt Heinrichs committed
354
355
356
.component-fade-enter-active,
.component-fade-leave-active {
  transition: opacity 0.3s ease;
357
358
}

359
.component-fade-enter, .component-fade-leave-to {
360
361
362
363
364
365
  opacity: 0;
}

#signup-toggle {
  margin: 0em;
}
366
367
368
369
370
371
372
373
374

.alert-heading {
  text-align: left;
  border-radius: .2rem;
}
.alert-title {
  text-align: left;
  border-radius: .2rem;
}
RWTH App's avatar
RWTH App committed
375
</style>