Aufgrund einer Wartung wird GitLab am 26.10. zwischen 8:00 und 9:00 Uhr kurzzeitig nicht zur Verfügung stehen. / Due to maintenance, GitLab will be temporarily unavailable on 26.10. between 8:00 and 9:00 am.

LoginApp.vue 10.8 KB
Newer Older
RWTH App's avatar
RWTH App committed
1
<template>
2
3
4
5
6
7
8
9
10
11
12
13
  <div id="wrap" :style="cssProps">
    <header>
      <nav id="nav-global" class="navbar rwth-black navbar-dark navbar-expand-md">
        <div class="app-header-container">
          <div id="DeltaSiteLogo">
            <a id="ctl00_onetidProjectPropertyTitleGraphic" title="Team Site" class="ms-siteicon-a" href="/">
              <img id="ctl00_onetidHeadbnnr2" class="ms-siteicon-img" name="onetidHeadbnnr0" :src="rwthImage" alt="Team Site" data-themekey="#">
            </a>
          </div>      
        </div>                        
        <div id="DeltaCoScInESiteLogo">
          <a id="ctl00_SPSimpleSiteLink1" title="Team Site" class="ms-siteicon-a coscineSiteIcon" href="/">
14
            <img id="ctl00_SiteLogoImage1" class="ms-siteicon-img" name="onetidHeadbnnr0" :src="coscineImageBlack" alt="Team Site" data-themekey="#">
15
16
17
18
19
20
21
22
23
24
25
26
27
          </a>
          <span class="coscineSiteIconLabel">CoScInE</span>        
        </div>
        <ul id="nav-langsearch" class="navbar-nav ml-auto">
          <li id="langToggle" class="next-lang" tabindex="0" aria-label="toggle language">
            <a class="nav-link lang" href="#" id="Lang" v-on:click="changeLocale()">
              <span id="langBox" class="language-box">{{ $t('otherLocale') }}</span>
            </a>
          </li>
        </ul>
      </nav>
    </header>
    <div class="container-fluid app-content">
Benedikt Heinrichs's avatar
Benedikt Heinrichs committed
28
29
30
31
32
      <div class="row">
        <div class="col-xl-2"></div>
        <div class="col-xl-8">
          <h1 class="headline">
            {{ $t('headline') }}
33
            <img class="logo" :src="coscineImageBlue" v-if="imageEnabled" alt />
Benedikt Heinrichs's avatar
Benedikt Heinrichs committed
34
35
            <span class="keyword">CoScInE</span>
          </h1>
36
37
          <div class="row">
            <div class="col-sm-12 col-md-7">
38
39
40
41
42
                <div class="alert alert-warning" role="alert">
                  <h5 class="alert-heading">{{ $t('alert_headline') }}</h5>
                  <p class="alert-title">{{ $t('alert_text1') }}
                  <a href="mailto:servicedesk@itc.rwth-aachen.de?subject=CoScInE%20Pilot%20Program">Servicedesk</a>
                  {{ $t('alert_text2') }}
Benedikt Heinrichs's avatar
Benedikt Heinrichs committed
43
                  </p>
44
                </div>
45
46
47
48
49
50
51
52
53
54
                <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>
55
56
              </div>
            </div>
57
           <div class="col-sm-12 col-md-5">
58
59
60
61
              <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
62
                      <component
63
                        :is="(logoutState) ? logoutComponent : currentInputCard"
Benedikt Heinrichs's avatar
Benedikt Heinrichs committed
64
                        :returnUrl="this.returnUrl"
65
                        :shibbolethReturnUrl="this.shibbolethReturnUrl"
66
67
                        :idpUrl="this.idpUrl"
                        :loggedInWithShibboleth="this.loggedInWithShibboleth"
Benedikt Heinrichs's avatar
Benedikt Heinrichs committed
68
69
                        @back="loginBack"
                        @clickGetLoginForm="getLoginForm"
70
                        @clickGetORCiDForm="getORCiDForm"
71
                        @changeLogoutState="changeLogoutState"
Benedikt Heinrichs's avatar
Benedikt Heinrichs committed
72
                      />
73
74
75
76
                    </transition>
                  </div>
                </div>
              </div>
Benedikt Heinrichs's avatar
Benedikt Heinrichs committed
77
78
79
80
81
82
              <div class="row">
                <button
                  hidden
                  class="btn btn-secondary dropdown-toggle w-100"
                  id="signup-toggle"
                >{{ $t('signup') }}</button>
83
84
85
              </div>
            </div>
          </div>
86
          </div>
87
88
      </div>
      <div class="col-xl-2"></div>
89
    </div>   
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
    <footer id="footer">
      <div class="row container">
        <div id="servicecol" class="col-xs-12 col-sm-6">
          <div class="list-group">
            <h2>Service</h2>
            <a href="http://www.rwth-aachen.de/cms/root/Footer/Services/~cesv/Disclaimer/?lidx=1" class="list-group-item list-group-item-action">{{ $t('help') }}</a>
            <a href="https://www.rwth-aachen.de/cms/root/Footer/Services/~cesv/Disclaimer/" class="list-group-item list-group-item-action">{{ $t('disclaimer') }}</a>
            <a href="http://www.itc.rwth-aachen.de/cms/IT-Center/Footer/Service/~epvv/Impressum/" class="list-group-item list-group-item-action">{{ $t('imprint') }}</a>
          </div>
        </div>
        <div id="contactcol" class="col-xs-12 col-sm-6">
          <div id="contact-list" class="list-group">
            <h2 id="footerContact">{{ $t('contact') }}</h2>
            <a id="mail" href="mailto:servicedesk@itc.rwth-aachen.de" class="list-group-item list-group-item-action">
              servicedesk@itc.rwth-aachen.de
            </a>
            <span id="phone" class="list-group-item">
              +49 241 / 80-24680
            </span>
            <span id="fax" class="list-group-item">
              +49 241 / 80-22981
            </span>
          </div>
        </div>
      </div>
    </footer>

RWTH App's avatar
RWTH App committed
117
118
119
120
121
  </div>
</template>

<script lang="ts">
import Vue from 'vue';
122
123
import LoginMain from './components/LoginMain.vue';
import LoginForm from './components/LoginForm.vue';
124
import LogoutMain from './components/LogoutMain.vue';
125

126
127
import coscineImageBlackPath from './assets/logo-coscine-black.png';
import coscineImageBluePath from './assets/logo-coscine-blue.png';
128
129
130
131
132
import rwthImagePath from './assets/logo-rwth.png';
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';
133

Benedikt Heinrichs's avatar
Benedikt Heinrichs committed
134
let scriptPath = '';
135
let imageEnabled = false;
Benedikt Heinrichs's avatar
Benedikt Heinrichs committed
136
137
if (document.currentScript !== undefined) {
  scriptPath = (document.currentScript as any).src as string;
138
  imageEnabled = true;
Benedikt Heinrichs's avatar
Benedikt Heinrichs committed
139
140
}
const scriptUrl = (scriptPath === '') ? '/' : scriptPath.substring(0, scriptPath.indexOf('app.js'));
141
const rootUrl = (scriptPath.indexOf('/js') !== -1) ? scriptUrl.replace('/js', '') : scriptUrl;
142

143
function getReturnUrlParam() {
144
  const hookupElement = document.getElementById('loginpage');
Benedikt Heinrichs's avatar
Benedikt Heinrichs committed
145
146
  const returnUrlParameters =
    hookupElement != null ? hookupElement.getAttribute('returnUrl') : '';
147
148
149
150
  return returnUrlParameters;
}

function getReturnUrl(method: string) {
Benedikt Heinrichs's avatar
Benedikt Heinrichs committed
151
  const returnUrl = encodeURI(
152
    '/coscine/api/Coscine.Api.STS/' + method + '/login?returnUrl=' + getReturnUrlParam(),
Benedikt Heinrichs's avatar
Benedikt Heinrichs committed
153
  );
154
155
  return returnUrl;
}
RWTH App's avatar
RWTH App committed
156

157
158
159
160
function getAccountReturnUrl() {
  return getReturnUrl('Account');
}

161
function getShibbolethReturnUrl() {
162
163
164
165
  return getReturnUrl('Shibboleth');
}

function getIdpUrl() {
166
  const hookupElement = document.getElementById('loginpage');
167
168
169
  const idpUrl =
    hookupElement != null ? hookupElement.getAttribute('IdpUrl') : '';
  return idpUrl;
170
171
}

172
173
174
175
176
177
178
179
function getORCiDUrl() {
  const hookupElement = document.getElementById('loginpage');
  const orcidUrlString =
    (hookupElement != null ? hookupElement.getAttribute('orcidUrl') : '') as string;
  const orcidUrl = encodeURI(orcidUrlString);
  return orcidUrl;
}

180
181
182
183
184
185
186
187
188
189
function getIsLogout() {
  const urlParams = new URLSearchParams(window.location.search);
  return urlParams.has('logout');
}

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

RWTH App's avatar
RWTH App committed
190
191
192
export default Vue.extend({
  name: 'app',
  components: {
193
194
    LoginMain,
    LoginForm,
195
    LogoutMain,
196
  },
197
198
199
  computed: {
    cssProps() {
      return {
200
201
202
203
        '--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',
204
205
206
      };
    },
  },
207
208
  data() {
    return {
209
210
      coscineImageBlack: rootUrl + coscineImageBlackPath,
      coscineImageBlue: rootUrl + coscineImageBluePath,
211
      rwthImage: rootUrl + rwthImagePath,
212
      imageEnabled,
213
      returnUrl: getAccountReturnUrl(),
214
      shibbolethReturnUrl: getShibbolethReturnUrl(),
215
      idpUrl: getIdpUrl(),
216
      orcidUrl: getORCiDUrl(),
217
218
      logoutState: getIsLogout(),
      loggedInWithShibboleth: getLoggedInWithShibboleth(),
219
      currentInputCard: 'LoginMain',
220
      logoutComponent: 'LogoutMain',
221
222
223
224
225
226
227
228
229
    };
  },
  methods: {
    loginBack() {
      this.currentInputCard = 'LoginMain';
    },
    getLoginForm() {
      this.currentInputCard = 'LoginForm';
    },
230
231
232
    getORCiDForm() {
      window.location.href = this.orcidUrl;
    },
233
234
235
236
237
238
239
    changeLocale() {
      if (this.$root.$i18n.locale === 'en') {
        this.$root.$i18n.locale = 'de';
      } else {
        this.$root.$i18n.locale = 'en';
      }
    },
240
241
242
    changeLogoutState() {
      this.logoutState = !this.logoutState;
    },
RWTH App's avatar
RWTH App committed
243
244
245
246
247
  },
});
</script>

<style>
248
249
250
251
252
253
254
255
256
257
258
259
260
261
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

.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;
}

289
290
291
292
293
294
.coscineSiteIcon img {
  margin-left: 8px;
  height: 36px;
  width: 36px;
}

295
296
297
298
299
300
301
302
303
304
305
.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
306
#app {
Benedikt Heinrichs's avatar
Benedikt Heinrichs committed
307
  font-family: "Avenir", Helvetica, Arial, sans-serif;
RWTH App's avatar
RWTH App committed
308
309
310
311
312
313
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
314
315
316
317

.headline {
  text-align: left;
  padding-left: 0.4em;
Benedikt Heinrichs's avatar
Benedikt Heinrichs committed
318
  margin-bottom: 1em;
319
320
321
322
323
324
325
326
}

.logo {
  width: 1.5em;
  margin: 0.15em;
}

.keyword {
Benedikt Heinrichs's avatar
Benedikt Heinrichs committed
327
  color: #00549f;
328
329
330
331
332
333
334
}

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

Benedikt Heinrichs's avatar
Benedikt Heinrichs committed
335
.card-text {
336
337
338
339
  text-align: left;
  padding: 0em 0.4em;
}

Benedikt Heinrichs's avatar
Benedikt Heinrichs committed
340
341
342
.component-fade-enter-active,
.component-fade-leave-active {
  transition: opacity 0.3s ease;
343
344
345
346
347
348
349
350
351
352
}

.component-fade-enter, .component-fade-leave-to
/* .component-fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}

#signup-toggle {
  margin: 0em;
}
353
354
355
356
357
358
359
360
361

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