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 8.94 KB
Newer Older
RWTH App's avatar
RWTH App committed
1
<template>
2
  <div id="wrap" :style="cssProps">
Marcel Nellesen's avatar
Marcel Nellesen committed
3
4
5
    <RWTHHeader
      :rwthImage="rwthImage"
      :coscineImageBlack="coscineImageBlack"/>
6
    <div class="container-fluid app-content">
Benedikt Heinrichs's avatar
Benedikt Heinrichs committed
7
8
9
10
11
      <div class="row">
        <div class="col-xl-2"></div>
        <div class="col-xl-8">
          <h1 class="headline">
            {{ $t('headline') }}
12
            <img class="logo" :src="coscineImageBlue" v-if="imageEnabled" alt />
Benedikt Heinrichs's avatar
Benedikt Heinrichs committed
13
14
            <span class="keyword">CoScInE</span>
          </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
20
21
                <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
22
                  </p>
23
                </div>
24
25
26
27
28
29
30
31
32
33
                <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>
34
35
              </div>
            </div>
36
           <div class="col-sm-12 col-md-5">
37
38
39
40
              <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
41
                      <component
42
                        :is="(logoutState) ? logoutComponent : currentInputCard"
Benedikt Heinrichs's avatar
Benedikt Heinrichs committed
43
                        :returnUrl="this.returnUrl"
44
                        :shibbolethReturnUrl="this.shibbolethReturnUrl"
45
46
                        :idpUrl="this.idpUrl"
                        :loggedInWithShibboleth="this.loggedInWithShibboleth"
47
                        :mergeReturnUrl="mergeReturnUrl"
Benedikt Heinrichs's avatar
Benedikt Heinrichs committed
48
49
                        @back="loginBack"
                        @clickGetLoginForm="getLoginForm"
50
                        @clickGetORCiDForm="getORCiDForm"
51
                        @changeLogoutState="changeLogoutState"
Benedikt Heinrichs's avatar
Benedikt Heinrichs committed
52
                      />
53
54
55
56
                    </transition>
                  </div>
                </div>
              </div>
Benedikt Heinrichs's avatar
Benedikt Heinrichs committed
57
58
59
60
61
62
              <div class="row">
                <button
                  hidden
                  class="btn btn-secondary dropdown-toggle w-100"
                  id="signup-toggle"
                >{{ $t('signup') }}</button>
63
64
65
              </div>
            </div>
          </div>
Marcel Nellesen's avatar
Marcel Nellesen committed
66
67
68
69
70
71
          <div v-else class="row">
            <div class="col-sm-12 col-md-12">
              <TOS
                :tosReturnUrl="this.tosReturnUrl"
                />
            </div>
72
          </div>
Marcel Nellesen's avatar
Marcel Nellesen committed
73
        </div>
74
75
      </div>
      <div class="col-xl-2"></div>
76
    </div>   
Marcel Nellesen's avatar
Marcel Nellesen committed
77
    <RWTHFooter/>
RWTH App's avatar
RWTH App committed
78
79
80
81
82
  </div>
</template>

<script lang="ts">
import Vue from 'vue';
83
84
import LoginMain from './components/LoginMain.vue';
import LoginForm from './components/LoginForm.vue';
85
import LogoutMain from './components/LogoutMain.vue';
Marcel Nellesen's avatar
Marcel Nellesen committed
86
87
88
import TOS from './components/TOS.vue';
import RWTHHeader from './components/RWTHHeader.vue';
import RWTHFooter from './components/RWTHFooter.vue';
89

90
91
import coscineImageBlackPath from './assets/logo-coscine-black.png';
import coscineImageBluePath from './assets/logo-coscine-blue.png';
92
93
94
95
96
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';
97

Benedikt Heinrichs's avatar
Benedikt Heinrichs committed
98
let scriptPath = '';
99
let imageEnabled = false;
Benedikt Heinrichs's avatar
Benedikt Heinrichs committed
100
101
if (document.currentScript !== undefined) {
  scriptPath = (document.currentScript as any).src as string;
102
  imageEnabled = true;
Benedikt Heinrichs's avatar
Benedikt Heinrichs committed
103
104
}
const scriptUrl = (scriptPath === '') ? '/' : scriptPath.substring(0, scriptPath.indexOf('app.js'));
105
const rootUrl = (scriptPath.indexOf('/js') !== -1) ? scriptUrl.replace('/js', '') : scriptUrl;
106

107
function getReturnUrlParam() {
108
  const hookupElement = document.getElementById('loginpage');
Benedikt Heinrichs's avatar
Benedikt Heinrichs committed
109
110
  const returnUrlParameters =
    hookupElement != null ? hookupElement.getAttribute('returnUrl') : '';
111
112
113
114
  return returnUrlParameters;
}

function getReturnUrl(method: string) {
Benedikt Heinrichs's avatar
Benedikt Heinrichs committed
115
  const returnUrl = encodeURI(
116
    '/coscine/api/Coscine.Api.STS/' + method + '/login?returnUrl=' + getReturnUrlParam(),
Benedikt Heinrichs's avatar
Benedikt Heinrichs committed
117
  );
118
119
  return returnUrl;
}
RWTH App's avatar
RWTH App committed
120

121
122
123
124
function getMergeReturnUrl() {
  return getReturnUrl('Merge');
}

Marcel Nellesen's avatar
Marcel Nellesen committed
125
126
127
128
function getTOSReturnUrl() {
  return encodeURI('' + getReturnUrlParam());
}

129
130
131
132
function getAccountReturnUrl() {
  return getReturnUrl('Account');
}

133
function getShibbolethReturnUrl() {
134
135
136
137
  return getReturnUrl('Shibboleth');
}

function getIdpUrl() {
138
  const hookupElement = document.getElementById('loginpage');
139
140
141
  const idpUrl =
    hookupElement != null ? hookupElement.getAttribute('IdpUrl') : '';
  return idpUrl;
142
143
}

144
145
146
147
148
149
150
151
function getORCiDUrl() {
  const hookupElement = document.getElementById('loginpage');
  const orcidUrlString =
    (hookupElement != null ? hookupElement.getAttribute('orcidUrl') : '') as string;
  const orcidUrl = encodeURI(orcidUrlString);
  return orcidUrl;
}

152
153
154
155
156
function getIsLogout() {
  const urlParams = new URLSearchParams(window.location.search);
  return urlParams.has('logout');
}

Marcel Nellesen's avatar
Marcel Nellesen committed
157
158
159
160
161
function getIsTOS() {
  const urlParams = new URLSearchParams(window.location.search);
  return urlParams.has('tos');
}

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

RWTH App's avatar
RWTH App committed
167
168
169
export default Vue.extend({
  name: 'app',
  components: {
170
171
    LoginMain,
    LoginForm,
172
    LogoutMain,
Marcel Nellesen's avatar
Marcel Nellesen committed
173
174
175
    TOS,
    RWTHHeader,
    RWTHFooter,
176
  },
177
178
179
  computed: {
    cssProps() {
      return {
180
181
182
183
        '--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',
184
185
186
      };
    },
  },
187
188
  data() {
    return {
189
190
      coscineImageBlack: rootUrl + coscineImageBlackPath,
      coscineImageBlue: rootUrl + coscineImageBluePath,
191
      rwthImage: rootUrl + rwthImagePath,
192
      imageEnabled,
193
      returnUrl: getAccountReturnUrl(),
194
      shibbolethReturnUrl: getShibbolethReturnUrl(),
Marcel Nellesen's avatar
Marcel Nellesen committed
195
      tosReturnUrl: getTOSReturnUrl(),
196
      mergeReturnUrl: getMergeReturnUrl(),
197
      idpUrl: getIdpUrl(),
198
      orcidUrl: getORCiDUrl(),
199
200
      logoutState: getIsLogout(),
      loggedInWithShibboleth: getLoggedInWithShibboleth(),
201
      currentInputCard: 'LoginMain',
202
      logoutComponent: 'LogoutMain',
Marcel Nellesen's avatar
Marcel Nellesen committed
203
      tos: getIsTOS(),
204
205
206
207
208
209
210
211
212
    };
  },
  methods: {
    loginBack() {
      this.currentInputCard = 'LoginMain';
    },
    getLoginForm() {
      this.currentInputCard = 'LoginForm';
    },
213
214
215
    getORCiDForm() {
      window.location.href = this.orcidUrl;
    },
216
217
218
    changeLogoutState() {
      this.logoutState = !this.logoutState;
    },
RWTH App's avatar
RWTH App committed
219
220
221
222
223
  },
});
</script>

<style>
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264

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

265
266
267
268
269
270
.coscineSiteIcon img {
  margin-left: 8px;
  height: 36px;
  width: 36px;
}

271
272
273
274
275
276
277
278
279
280
281
.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
282
#app {
Benedikt Heinrichs's avatar
Benedikt Heinrichs committed
283
  font-family: "Avenir", Helvetica, Arial, sans-serif;
RWTH App's avatar
RWTH App committed
284
285
286
287
288
289
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
290
291
292
293

.headline {
  text-align: left;
  padding-left: 0.4em;
Benedikt Heinrichs's avatar
Benedikt Heinrichs committed
294
  margin-bottom: 1em;
295
296
297
298
299
300
301
302
}

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

.keyword {
Benedikt Heinrichs's avatar
Benedikt Heinrichs committed
303
  color: #00549f;
304
305
306
307
308
309
310
}

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

Benedikt Heinrichs's avatar
Benedikt Heinrichs committed
311
.card-text {
312
313
314
315
  text-align: left;
  padding: 0em 0.4em;
}

Benedikt Heinrichs's avatar
Benedikt Heinrichs committed
316
317
318
.component-fade-enter-active,
.component-fade-leave-active {
  transition: opacity 0.3s ease;
319
320
321
322
323
324
325
326
327
328
}

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

#signup-toggle {
  margin: 0em;
}
329
330
331
332
333
334
335
336
337

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