LoginApp.vue 8.76 KB
Newer Older
RWTHApp Service's avatar
RWTHApp Service 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/>
RWTHApp Service's avatar
RWTHApp Service 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;
}
RWTHApp Service's avatar
RWTHApp Service 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');
}

RWTHApp Service's avatar
RWTHApp Service committed
165
export default Vue.extend({
166
  name: 'loginapp',
RWTHApp Service's avatar
RWTHApp Service 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;
    },
RWTHApp Service's avatar
RWTHApp Service 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;
}

RWTHApp Service's avatar
RWTHApp Service committed
276
#app {
Benedikt Heinrichs's avatar
Benedikt Heinrichs committed
277
  font-family: "Avenir", Helvetica, Arial, sans-serif;
RWTHApp Service's avatar
RWTHApp Service 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;
}
RWTHApp Service's avatar
RWTHApp Service committed
332
</style>