Project

General

Profile

« Previous | Next » 

Revision 58618

[Library | Trunk]: Change login to circle

View differences:

modules/uoa-services-library/trunk/ng-openaire-library/src/app/login/userMini.component.ts
8 8

  
9 9
// declare var logoutClicked;
10 10
@Component({
11
    selector: 'user-mini',
12
    template: `
13
      <ng-container *ngIf="!dashboard">
11
  selector: 'user-mini',
12
  template: `
13
    <ng-container *ngIf="!dashboard">
14 14

  
15
        <ul *ngIf="!mobileView" class="uk-navbar-nav">
16
          <li class="uk-parent">
15
      <ul *ngIf="!mobileView" class="uk-navbar-nav">
16
        <li class="uk-parent">
17
          <a *ngIf="loggedIn" class="login">
18
            <svg height="60" width="60">
19
              <circle cx="30" cy="30" r="20" stroke-width="2"></circle>
20
              <text *ngIf="firstLetters" x="50%" y="50%" text-anchor="middle" dy=".4em"
21
                    font-size="16">
22
                {{firstLetters}}
23
              </text>
24
              <svg *ngIf="!firstLetters" ratio="1" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" width="20"
25
                   x="20">
26
                <circle cx="9.9" cy="6.4" r="4.4" stroke-width="1.1"></circle>
27
                <path d="M1.5,19 C2.3,14.5 5.8,11.2 10,11.2 C14.2,11.2 17.7,14.6 18.5,19.2" stroke-width="1.1"></path>
28
              </svg>
29
            </svg>
30
          </a>
31
          <a *ngIf="!loggedIn" class="loginLink" (click)="logIn()">Sign in <span
32
              class=" uk-margin-small-left uk-margin-small-right uk-icon"><svg width="20" height="20"
33
                                                                               viewBox="0 0 20 20"
34
                                                                               xmlns="http://www.w3.org/2000/svg"
35
                                                                               ratio="1"><circle fill="none"
36
                                                                                                 stroke="#000"
37
                                                                                                 stroke-width="1.1"
38
                                                                                                 cx="9.9" cy="6.4"
39
                                                                                                 r="4.4"></circle><path
40
              fill="none" stroke="#000" stroke-width="1.1"
41
              d="M1.5,19 C2.3,14.5 5.8,11.2 10,11.2 C14.2,11.2 17.7,14.6 18.5,19.2"></path></svg> </span>
42
          </a>
17 43

  
18
            <a *ngIf="loggedIn">
19
              <span>{{user.fullname + " "}} <span class="uk-margin-small-right uk-icon"><svg width="20" height="20"
20
                                                                                             viewBox="0 0 20 20"
21
                                                                                             xmlns="http://www.w3.org/2000/svg"
22
                                                                                             ratio="1"><circle
23
                  fill="none" stroke="#000" stroke-width="1.1" cx="9.9" cy="6.4" r="4.4"></circle><path fill="none"
24
                                                                                                        stroke="#000"
25
                                                                                                        stroke-width="1.1"
26
                                                                                                        d="M1.5,19 C2.3,14.5 5.8,11.2 10,11.2 C14.2,11.2 17.7,14.6 18.5,19.2"></path></svg></span></span>
27
            </a>
28
            <a *ngIf="!loggedIn" class="loginLink" (click)="logIn()">Sign in <span
29
                class=" uk-margin-small-left uk-margin-small-right uk-icon"><svg width="20" height="20"
30
                                                                                 viewBox="0 0 20 20"
31
                                                                                 xmlns="http://www.w3.org/2000/svg"
32
                                                                                 ratio="1"><circle fill="none"
33
                                                                                                   stroke="#000"
34
                                                                                                   stroke-width="1.1"
35
                                                                                                   cx="9.9" cy="6.4"
36
                                                                                                   r="4.4"></circle><path
37
                fill="none" stroke="#000" stroke-width="1.1"
38
                d="M1.5,19 C2.3,14.5 5.8,11.2 10,11.2 C14.2,11.2 17.7,14.6 18.5,19.2"></path></svg> </span>
39
            </a>
40 44

  
41

  
42
            <div *ngIf="loggedIn" class="uk-navbar-dropdown uk-navbar-dropdown-bottom-left" id="userMenu"
43
                 (click)="onClick('userMenu')">
44
              <div class="uk-navbar-dropdown-grid uk-child-width-1-1 uk-grid uk-grid-stack" uk-grid="">
45
                <div class="uk-first-column uk-height-max-medium uk-overflow-auto">
46
                  <ul class="uk-nav uk-navbar-dropdown-nav">
47
                    <!--li><a href="" >My profile</a></li>
48
                    <li><a   routerLinkActive="uk-link" routerLink="/myclaims">My Claims</a></li>
49
                    <li *ngIf="isAuthorized"><a   routerLinkActive="uk-link" routerLink="/claims">Manage all Claims</a></li-->
50
                    <ng-container *ngFor="let item of userMenuItems ">
51
                      <li *ngIf="item.needsAuthorization && isAuthorized || !item.needsAuthorization">
52
                        <a *ngIf="item.route.length > 0" routerLink="{{item.route}}"
53
                           [queryParams]=item.params>{{item.title}}</a>
54
                        <a *ngIf="item.route.length == 0 && item.url.length > 0" href="{{item.url}}"
55
                           target="_blank">{{item.title}}</a>
56
                      </li>
57
                    </ng-container>
58
                    <li *ngIf="userMenuItems.length > 0" class="uk-nav-divider"></li>
59
                    <li><a (click)="logOut()" id="logout">Log out</a></li>
60
                  </ul>
61
                </div>
62
                <div id="logout1"></div>
45
          <div *ngIf="loggedIn" class="uk-navbar-dropdown uk-navbar-dropdown-bottom-left" id="userMenu"
46
               (click)="onClick('userMenu')">
47
            <div class="uk-navbar-dropdown-grid uk-child-width-1-1 uk-grid uk-grid-stack" uk-grid="">
48
              <div class="uk-first-column uk-height-max-medium uk-overflow-auto">
49
                <ul class="uk-nav uk-navbar-dropdown-nav">
50
                  <!--li><a href="" >My profile</a></li>
51
                  <li><a   routerLinkActive="uk-link" routerLink="/myclaims">My Claims</a></li>
52
                  <li *ngIf="isAuthorized"><a   routerLinkActive="uk-link" routerLink="/claims">Manage all Claims</a></li-->
53
                  <ng-container *ngFor="let item of userMenuItems ">
54
                    <li *ngIf="item.needsAuthorization && isAuthorized || !item.needsAuthorization">
55
                      <a *ngIf="item.route.length > 0" routerLink="{{item.route}}"
56
                         [queryParams]=item.params>{{item.title}}</a>
57
                      <a *ngIf="item.route.length == 0 && item.url.length > 0" href="{{item.url}}"
58
                         target="_blank">{{item.title}}</a>
59
                    </li>
60
                  </ng-container>
61
                  <li *ngIf="userMenuItems.length > 0" class="uk-nav-divider"></li>
62
                  <li><a (click)="logOut()" id="logout">Log out</a></li>
63
                </ul>
63 64
              </div>
65
              <div id="logout1"></div>
64 66
            </div>
65
          </li>
66
        </ul>
67
      </ng-container>
67
          </div>
68
        </li>
69
      </ul>
70
    </ng-container>
68 71

  
69
      <ng-container *ngIf="!dashboard">
72
    <ng-container *ngIf="!dashboard">
70 73

  
71
        <li *ngIf="mobileView" class="uk-nav-header uk-parent ">
74
      <li *ngIf="mobileView" class="uk-nav-header uk-parent ">
72 75
          
73
          <span *ngIf="loggedIn">
74
            <span>{{user.fullname + " "}}<span class="uk-margin-small-right uk-icon"><svg width="20" height="20"
75
                                                                                          viewBox="0 0 20 20"
76
                                                                                          xmlns="http://www.w3.org/2000/svg"
77
                                                                                          ratio="1"><circle fill="none"
78
                                                                                                            stroke="#000"
79
                                                                                                            stroke-width="1.1"
80
                                                                                                            cx="9.9"
81
                                                                                                            cy="6.4"
82
                                                                                                            r="4.4"></circle><path
76
          <span *ngIf="loggedIn" class="uk-flex uk-flex-middle">
77
            <span>{{user.fullname + " "}}</span>
78
            <span class="uk-margin-small-right uk-icon"><svg width="20" height="20"
79
                                                             viewBox="0 0 20 20"
80
                                                             xmlns="http://www.w3.org/2000/svg"
81
                                                             ratio="1"><circle fill="none"
82
                                                                               stroke="#000"
83
                                                                               stroke-width="1.1"
84
                                                                               cx="9.9"
85
                                                                               cy="6.4"
86
                                                                               r="4.4"></circle><path
83 87
                fill="none" stroke="#000" stroke-width="1.1"
84
                d="M1.5,19 C2.3,14.5 5.8,11.2 10,11.2 C14.2,11.2 17.7,14.6 18.5,19.2"></path></svg></span></span>
88
                d="M1.5,19 C2.3,14.5 5.8,11.2 10,11.2 C14.2,11.2 17.7,14.6 18.5,19.2"></path></svg>
89
            </span>
85 90
          </span>
86
          <span *ngIf="!loggedIn">
91
        <span *ngIf="!loggedIn">
87 92
              <a class="loginLink" (click)="logIn()">Sign in <span class="uk-margin-small-right uk-icon"><svg width="20"
88 93
                                                                                                              height="20"
89 94
                                                                                                              viewBox="0 0 20 20"
......
96 101
              </a>
97 102
         </span>
98 103

  
99
          <ul *ngIf="loggedIn" class="uk-nav-sub">
100
            <!--li><a href="" >My profile</a></li>
101
            <li><a   routerLinkActive="uk-link" routerLink="/myclaims">My Claims</a></li>
102
            <li *ngIf="isAuthorized"><a   routerLinkActive="uk-link" routerLink="/claims">Manage all Claims</a></li-->
103
            <ng-container *ngFor="let item of userMenuItems ">
104
              <li *ngIf="item.needsAuthorization && isAuthorized || !item.needsAuthorization">
105
                <a *ngIf="item.route.length > 0" routerLink="{{item.route}}">{{item.title}}</a>
106
                <a *ngIf="item.route.length == 0 && item.url.length > 0" href="{{item.url}}">{{item.title}}</a>
107
              </li>
108
            </ng-container>
109
            <li *ngIf="userMenuItems.length > 0" class="uk-nav-divider"></li>
110
            <li><a (click)="logOut()" id="logout">Log out</a></li>
111
          </ul>
112
        </li>
113
      </ng-container>
114
      <ng-container *ngIf="dashboard">
115
        <a *ngIf="!loggedIn" class="login" (click)="logIn()">
116
          Sign in <span class="uk-margin-small-left uk-margin-small-right uk-icon">
104
        <ul *ngIf="loggedIn" class="uk-nav-sub">
105
          <!--li><a href="" >My profile</a></li>
106
          <li><a   routerLinkActive="uk-link" routerLink="/myclaims">My Claims</a></li>
107
          <li *ngIf="isAuthorized"><a   routerLinkActive="uk-link" routerLink="/claims">Manage all Claims</a></li-->
108
          <ng-container *ngFor="let item of userMenuItems ">
109
            <li *ngIf="item.needsAuthorization && isAuthorized || !item.needsAuthorization">
110
              <a *ngIf="item.route.length > 0" routerLink="{{item.route}}">{{item.title}}</a>
111
              <a *ngIf="item.route.length == 0 && item.url.length > 0" href="{{item.url}}">{{item.title}}</a>
112
            </li>
113
          </ng-container>
114
          <li *ngIf="userMenuItems.length > 0" class="uk-nav-divider"></li>
115
          <li><a (click)="logOut()" id="logout">Log out</a></li>
116
        </ul>
117
      </li>
118
    </ng-container>
119
    <ng-container *ngIf="dashboard">
120
      <a *ngIf="!loggedIn" class="login" (click)="logIn()">
121
        Sign in <span class="uk-margin-small-left uk-margin-small-right uk-icon">
117 122
            <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" ratio="1">
118 123
              <circle cx="9.9" cy="6.4" r="4.4" stroke-width="1.1"></circle>
119 124
              <path d="M1.5,19 C2.3,14.5 5.8,11.2 10,11.2 C14.2,11.2 17.7,14.6 18.5,19.2" stroke-width="1.1"></path>
120 125
            </svg></span>
121
        </a>
122
        <a *ngIf="loggedIn" class="uk-icon">
123
          <svg height="60" width="60">
124
            <circle cx="30" cy="30" r="20" stroke-width="2"></circle>
125
            <text *ngIf="firstLetters" x="50%" y="50%" text-anchor="middle" dy=".4em"
126
                  font-size="16">
127
              {{firstLetters}}
128
            </text>
129
            <svg *ngIf="!firstLetters" ratio="1" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" width="20"
130
                 x="20">
131
              <circle  cx="9.9" cy="6.4" r="4.4" stroke-width="1.1"></circle>
132
              <path d="M1.5,19 C2.3,14.5 5.8,11.2 10,11.2 C14.2,11.2 17.7,14.6 18.5,19.2" stroke-width="1.1"></path>
133
            </svg>
126
      </a>
127
      <a *ngIf="loggedIn" class="uk-icon">
128
        <svg height="60" width="60">
129
          <circle cx="30" cy="30" r="20" stroke-width="2"></circle>
130
          <text *ngIf="firstLetters" x="50%" y="50%" text-anchor="middle" dy=".4em"
131
                font-size="16">
132
            {{firstLetters}}
133
          </text>
134
          <svg *ngIf="!firstLetters" ratio="1" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" width="20"
135
               x="20">
136
            <circle cx="9.9" cy="6.4" r="4.4" stroke-width="1.1"></circle>
137
            <path d="M1.5,19 C2.3,14.5 5.8,11.2 10,11.2 C14.2,11.2 17.7,14.6 18.5,19.2" stroke-width="1.1"></path>
134 138
          </svg>
135
        </a>
136
        <div *ngIf="loggedIn" uk-dropdown="mode: click; offset: -2; delay-hide: 0; flip: false; pos: bottom-right"
137
             #userMenu
138
             class="uk-padding-remove-horizontal">
139
          <ul class="uk-nav uk-dropdown-nav">
140
            <ng-container *ngFor="let item of userMenuItems ">
141
              <li *ngIf="item.needsAuthorization && isAuthorized || !item.needsAuthorization">
142
                <a *ngIf="item.route.length > 0" routerLink="{{item.route}}"
143
                   [queryParams]=item.params>{{item.title}}</a>
144
                <a *ngIf="item.route.length == 0 && item.url.length > 0" href="{{item.url}}"
145
                   target="_blank">{{item.title}}</a>
146
              </li>
147
            </ng-container>
148
            <li *ngIf="userMenuItems.length > 0" class="uk-nav-divider"></li>
149
            <li><a (click)="logOut()" id="logout">Log out</a></li>
150
          </ul>
151
        </div>
152
      </ng-container>
139
        </svg>
140
      </a>
141
      <div *ngIf="loggedIn" uk-dropdown="mode: click; offset: -2; delay-hide: 0; flip: false; pos: bottom-right"
142
           #userMenu
143
           class="uk-padding-remove-horizontal">
144
        <ul class="uk-nav uk-dropdown-nav">
145
          <ng-container *ngFor="let item of userMenuItems ">
146
            <li *ngIf="item.needsAuthorization && isAuthorized || !item.needsAuthorization">
147
              <a *ngIf="item.route.length > 0" routerLink="{{item.route}}"
148
                 [queryParams]=item.params>{{item.title}}</a>
149
              <a *ngIf="item.route.length == 0 && item.url.length > 0" href="{{item.url}}"
150
                 target="_blank">{{item.title}}</a>
151
            </li>
152
          </ng-container>
153
          <li *ngIf="userMenuItems.length > 0" class="uk-nav-divider"></li>
154
          <li><a (click)="logOut()" id="logout">Log out</a></li>
155
        </ul>
156
      </div>
157
    </ng-container>
153 158

  
154
      <div id="logout2"></div>
155
    `
159
    <div id="logout2"></div>
160
  `
156 161
})
157 162

  
158 163
export class UserMiniComponent implements OnInit, OnChanges {
159
    @Input() user: User;
160
    public loggedIn: boolean = false;
161
    public isAuthorized: boolean = false;
162
    @Input() public mobileView: boolean = false;
163
    public firstLetters: string = "";
164
    @Input() public dashboard: boolean = false;
165
    public server: boolean = true;
166
    public routerHelper: RouterHelper = new RouterHelper();
167
    @Input() userMenuItems;
168
    @Input() logInUrl;
169
    @Input() logOutUrl;
170
    @Input() cookieDomain;
171
    @Input() redirectUrl: string;
172
    search: string = '';
173
    sub: any;
174

  
175
    constructor(private router: Router, private  route: ActivatedRoute, private location: Location) {
164
  @Input() user: User;
165
  public loggedIn: boolean = false;
166
  public isAuthorized: boolean = false;
167
  @Input() public mobileView: boolean = false;
168
  public firstLetters: string = "";
169
  @Input() public dashboard: boolean = false;
170
  public server: boolean = true;
171
  public routerHelper: RouterHelper = new RouterHelper();
172
  @Input() userMenuItems;
173
  @Input() logInUrl;
174
  @Input() logOutUrl;
175
  @Input() cookieDomain;
176
  @Input() redirectUrl: string;
177
  search: string = '';
178
  sub: any;
179
  
180
  constructor(private router: Router, private  route: ActivatedRoute, private location: Location) {
181
  }
182
  
183
  ngOnInit() {
184
    
185
    if (typeof document !== 'undefined') {
186
      this.server = false;
176 187
    }
177

  
178
    ngOnInit() {
179

  
180
        if (typeof document !== 'undefined') {
181
            this.server = false;
182
        }
183
        this.initialize();
184
        this.sub = this.route.queryParams.subscribe(params => {
185
            this.initialize();
186
        });
187

  
188

  
188
    this.initialize();
189
    this.sub = this.route.queryParams.subscribe(params => {
190
      this.initialize();
191
    });
192
    
193
    
194
  }
195
  
196
  ngOnChanges(changes: SimpleChanges): void {
197
    if (changes.user) {
198
      this.initialize();
189 199
    }
190

  
191
    ngOnChanges(changes: SimpleChanges): void {
192
        if (changes.user) {
193
            this.initialize();
194
        }
200
  }
201
  
202
  ngOnDestroy() {
203
    if (this.sub) {
204
      this.sub.unsubscribe();
195 205
    }
196

  
197
    ngOnDestroy() {
198
        if (this.sub) {
199
            this.sub.unsubscribe();
200
        }
206
  }
207
  
208
  initialize() {
209
    if (!this.redirectUrl && typeof location !== 'undefined') {
210
      this.redirectUrl = location.pathname;
211
      this.search = location.search;
201 212
    }
202

  
203
    initialize() {
204
        if (!this.redirectUrl && typeof location !== 'undefined') {
205
            this.redirectUrl = location.pathname;
206
            this.search = location.search;
207
        }
208
        if (this.user) {
209
            this.loggedIn = true;
210
            this.parseName();
211
            this.isAuthorized = Session.isClaimsCurator(this.user) || Session.isPortalAdministrator(this.user);
212

  
213
        } else {
214
            this.loggedIn = false;
215
            this.isAuthorized = false;
216
            this.user = null;
217
        }
218

  
213
    if (this.user) {
214
      this.loggedIn = true;
215
      this.parseName();
216
      this.isAuthorized = Session.isClaimsCurator(this.user) || Session.isPortalAdministrator(this.user);
217
      
218
    } else {
219
      this.loggedIn = false;
220
      this.isAuthorized = false;
221
      this.user = null;
219 222
    }
220

  
221
    logOut() {
222
        if (this.user) {
223
            Session.removeUser();
224
            window.location.href = this.logOutUrl + StringUtils.URIEncode(location.href);
225

  
226
        }
227
        this.loggedIn = false;
228
        this.isAuthorized = false;
229
        this.user = new User();
223
    
224
  }
225
  
226
  logOut() {
227
    if (this.user) {
228
      Session.removeUser();
229
      window.location.href = this.logOutUrl + StringUtils.URIEncode(location.href);
230
      
230 231
    }
231

  
232
    logIn() {
233
        Session.setReloadUrl(location.protocol + "//" + location.host, this.redirectUrl, this.search);
234
        window.location.href = this.logInUrl;
232
    this.loggedIn = false;
233
    this.isAuthorized = false;
234
    this.user = new User();
235
  }
236
  
237
  logIn() {
238
    Session.setReloadUrl(location.protocol + "//" + location.host, this.redirectUrl, this.search);
239
    window.location.href = this.logInUrl;
240
  }
241
  
242
  onClick(id: string) {
243
    let el: HTMLElement = document.getElementById(id);
244
    el.classList.remove('uk-open');
245
  }
246
  
247
  parseName() {
248
    this.firstLetters = "";
249
    if (this.user && this.user.firstname) {
250
      this.firstLetters += this.user.firstname.substr(0, 1);
235 251
    }
236

  
237
    onClick(id: string) {
238
        let el: HTMLElement = document.getElementById(id);
239
        el.classList.remove('uk-open');
252
    if (this.user && this.user.lastname) {
253
      this.firstLetters += this.user.lastname.substr(0, 1);
240 254
    }
241

  
242
    parseName() {
243
        this.firstLetters = "";
244
        if (this.user && this.user.firstname) {
245
            this.firstLetters += this.user.firstname.substr(0, 1);
246
        }
247
        if (this.user && this.user.lastname) {
248
            this.firstLetters += this.user.lastname.substr(0, 1);
249
        }
250
        if (!this.firstLetters && this.user && this.user.fullname) {
251
            let matches = this.user.fullname.match(/\b(\w)/g);
252
            this.firstLetters += matches.join('');
253
        }
255
    if (!this.firstLetters && this.user && this.user.fullname) {
256
      let matches = this.user.fullname.match(/\b(\w)/g);
257
      this.firstLetters += matches.join('');
254 258
    }
259
  }
255 260
}

Also available in: Unified diff