LoginApp.vue 8.76 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
                        @back="loginBack"
49
                        @clickGetORCiDForm="getORCiDForm"
50
                        @changeLogoutState="changeLogoutState"
Benedikt Heinrichs's avatar
Benedikt Heinrichs committed
51
                      />
52
53
54
55
                    </transition>
                  </div>
                </div>
              </div>
Benedikt Heinrichs's avatar
Benedikt Heinrichs committed
56
57
58
59
60
61
              <div class="row">
                <button
                  hidden
                  class="btn btn-secondary dropdown-toggle w-100"
                  id="signup-toggle"
                >{{ $t('signup') }}</button>
62
63
64
              </div>
            </div>
          </div>
Marcel Nellesen's avatar
Marcel Nellesen committed
65
66
67
68
69
70
          <div v-else class="row">
            <div class="col-sm-12 col-md-12">
              <TOS
                :tosReturnUrl="this.tosReturnUrl"
                />
            </div>
71
          </div>
Marcel Nellesen's avatar
Marcel Nellesen committed
72
        </div>
73
74
      </div>
      <div class="col-xl-2"></div>
75
    </div>   
Marcel Nellesen's avatar
Marcel Nellesen committed
76
    <RWTHFooter/>
RWTH App's avatar
RWTH App committed
77
78
79
80
81
  </div>
</template>

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

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

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

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

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

119
120
121
122
function getMergeReturnUrl() {
  return getReturnUrl('Merge');
}

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

127
128
129
130
function getAccountReturnUrl() {
  return getReturnUrl('Account');
}

131
function getShibbolethReturnUrl() {
132
133
134
135
  return getReturnUrl('Shibboleth');
}

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

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

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

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

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

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

<style>
218
219
220
221
222
223
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

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

259
260
261
262
263
264
.coscineSiteIcon img {
  margin-left: 8px;
  height: 36px;
  width: 36px;
}

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

.headline {
  text-align: left;
  padding-left: 0.4em;
Benedikt Heinrichs's avatar
Benedikt Heinrichs committed
288
  margin-bottom: 1em;
289
290
291
292
293
294
295
296
}

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

.keyword {
Benedikt Heinrichs's avatar
Benedikt Heinrichs committed
297
  color: #00549f;
298
299
300
301
302
303
304
}

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

Benedikt Heinrichs's avatar
Benedikt Heinrichs committed
305
.card-text {
306
307
308
309
  text-align: left;
  padding: 0em 0.4em;
}

Benedikt Heinrichs's avatar
Benedikt Heinrichs committed
310
311
312
.component-fade-enter-active,
.component-fade-leave-active {
  transition: opacity 0.3s ease;
313
314
315
316
317
318
319
320
321
322
}

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

#signup-toggle {
  margin: 0em;
}
323
324
325
326
327
328
329
330
331

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