This is the codeAbility Sharing Platform! Learn more about the codeAbility Sharing Platform.

Skip to content
Snippets Groups Projects
Commit ffb2c12c authored by Michael Breu's avatar Michael Breu :speech_balloon:
Browse files

Intermediate commit: working on Navbar

parent a8ceb532
2 merge requests!188Merging Peer Reviewing et. al to Master,!164211 peer reviewing functionality
Hide whitespace changes
Inline Side-by-side
src/main/webapp/app/layouts/main/main.component.html
+ 14
− 4
View file @ ffb2c12c
<jhi-page-ribbon></jhi-page-ribbon>
<div style="display: flex; flex-direction: column; min-height: 100vh;">
<!-- codeability bar -->
<div id="top-space">
<img src="/content/img/logo-top.png" alt="codeAbility" width="168px">
</div>
<div>
<router-outlet name="navbar"></router-outlet>
</div>
<div *ngFor="let m of getActiveMessages()">
<div class="alert alert-warning">{{m.message}}</div>
</div>
<div class="container-fluid">
<div class="card jh-card">
<div class="pagewrapper"></div>
<!-- Main content -->
<router-outlet></router-outlet>
<div class="pagewrapper"></div>
......@@ -13,5 +23,5 @@
<jhi-page-ribbon></jhi-page-ribbon>
</div>
<jhi-footer></jhi-footer>
<jhi-footer style="margin-top:auto"></jhi-footer>
</div>
src/main/webapp/app/layouts/navbar/navbar.component.html
+ 59
− 43
View file @ ffb2c12c
<!-- Navigation -->
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<div class="container-fluid">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<div class="navbar-nav" [ngSwitch]="isAuthenticated()">
<!-- Menu Home -->
<div class="nav-item">
<span class="nav-link">
<a routerLink="/">
<!-- Icon -->
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
class="bi bi-house-fill" viewBox="0 0 16 16">
<path fill-rule="evenodd"
d="M8 3.293l6 6V13.5a1.5 1.5 0 0 1-1.5 1.5h-9A1.5 1.5 0 0 1 2 13.5V9.293l6-6zm5-.793V6l-2-2V2.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5z" />
<path fill-rule="evenodd"
d="M7.293 1.5a1 1 0 0 1 1.414 0l6.647 6.646a.5.5 0 0 1-.708.708L8 2.207 1.354 8.854a.5.5 0 1 1-.708-.708L7.293 1.5z" />
</svg>
<!-- Icon End -->
<span jhiTranslate="global.menu.home">Home</span>
<nav class="navbar navbar-dark navbar-expand-md bg-primary">
<a class="navbar-brand logo" routerLink="/" (click)="collapseNavbar()">
<span class="logo-img"></span>
<span jhiTranslate="global.title" class="navbar-title">PluginDemo</span> <span class="navbar-version">{{ version }}</span>
</a>
<a class="navbar-toggler d-lg-none" href="javascript:void(0);" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation" (click)="toggleNavbar()">
<fa-icon icon="bars"></fa-icon>
</a>
<div class="navbar-collapse collapse" id="navbarResponsive" [ngbCollapse]="isNavbarCollapsed" [ngSwitch]="isAuthenticated()">
<ul class="navbar-nav ml-auto">
......@@ -118,6 +102,8 @@
</li>
</ul>
</li>
<!-- Login -->
<li ngbDropdown class="nav-item dropdown pointer" display="dynamic" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }">
<a class="nav-link dropdown-toggle" ngbDropdownToggle href="javascript:void(0);" id="account-menu">
<span *ngIf="!getImageUrl()">
......@@ -131,18 +117,18 @@
</span>
</a>
<ul class="dropdown-menu" ngbDropdownMenu aria-labelledby="account-menu">
<li *ngSwitchCase="true">
<a class="dropdown-item" routerLink="account/settings" routerLinkActive="active" (click)="collapseNavbar()">
<fa-icon icon="wrench" [fixedWidth]="true"></fa-icon>
<span jhiTranslate="global.menu.account.settings">Settings</span>
</a>
</li>
<li *ngSwitchCase="true">
<a class="dropdown-item" routerLink="account/password" routerLinkActive="active" (click)="collapseNavbar()">
<fa-icon icon="lock" [fixedWidth]="true"></fa-icon>
<span jhiTranslate="global.menu.account.password">Password</span>
</a>
<ng-container *ngSwitchCase="false">
<li *ngFor="let config of configs">
<img src="{{'oauth2.'+config.registrationId + '.icon'| translate}}"
alt="oAuth2Login" style="width: 50px;" />
<button [disabled]="!contentEditable" type="submit" class="btn btn-outline-secondary" *ngSwitchCase="false"
(click)="loginWithGitLab(config.registrationId)"
jhiTranslate="oauth2.{{config.registrationId}}.text">Sign in with GitLab
Account
</button>
</li>
</ng-container>
<li *ngSwitchCase="true">
<a class="dropdown-item" (click)="logout()" id="logout">
<fa-icon icon="sign-out-alt" [fixedWidth]="true"></fa-icon>
......@@ -150,16 +136,46 @@
</a>
</li>
<li *ngSwitchCase="false">
<a class="dropdown-item" (click)="login()" id="login">
<fa-icon icon="sign-in-alt" [fixedWidth]="true"></fa-icon>
<span jhiTranslate="global.menu.account.login">Sign in</span>
</a>
<form class="form" role="form" (ngSubmit)="login()" [formGroup]="loginForm">
<h5 style="color: #b3b3b3; margin-bottom: 25px;">Sign in locally</h5>
<div class="input-group mb-3">
<input type="text" class="form-control" name="username" id="username"
formControlName="username"
placeholder="{{ 'global.form.username.placeholder' | translate }}"
#username>
</div>
<div class="input-group mb-3">
<input type="password" class="form-control" formControlName="password"
name="password" id="password"
placeholder="{{ 'login.form.password.placeholder' | translate }}">
</div>
<div class="alert alert-danger" *ngIf="authenticationError"
jhiTranslate="login.messages.error.authentication">
<strong>Failed to sign in!</strong> Please check your credentials and try
again.
</div>
<button [disabled]="!contentEditable" type="submit" class="btn btn-outline-secondary" (click)="login()"
style="border-color: #d0d0d0" jhiTranslate="login.form.button">Sign in
</button>
<br>
<div class="" style="padding-top: 10pt;">
<label for="acceptTerms" class="form-check-label">
<input type="checkbox" (change)="toggleEditable($event)">
<a jhitranslate="login.form.acceptTerms" href="/datapolicy">{{'login.form.acceptTerms'| translate}}</a>
</label>
<div class="alert alert-danger" *ngIf="!contentEditable"
jhiTranslate="login.messages.error.terms">
Please accept the datapolicy terms to be able to log in.
</div>
</div>
</form>
</li>
<li *ngSwitchCase="false">
<a class="dropdown-item" routerLink="account/register" routerLinkActive="active" (click)="collapseNavbar()">
<fa-icon icon="user-plus" [fixedWidth]="true"></fa-icon>
<span jhiTranslate="global.menu.account.register">Register</span>
</a>
<li *ngSwitchCase="true" >
<a class="dropdown-item" routerLink="account/settings" routerLinkActive="active"
*ngSwitchCase="true" (click)="collapseNavbar()">
<fa-icon icon="wrench" [fixedWidth]="true"></fa-icon>
<span jhiTranslate="global.menu.account.settings">Settings</span>
</a>
</li>
</ul>
</li>
......
webpack/webpack.dev.js
+ 3
− 0
View file @ ffb2c12c
......@@ -20,6 +20,9 @@ module.exports = (options) => webpackMerge(commonConfig({ env: ENV }), {
proxy: [{
context: [
'/api',
'/oauth2Config',
'/oauth2',
'/login',
'/services',
'/management',
'/swagger-resources',
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment