Skip to content
This repository was archived by the owner on Apr 22, 2022. It is now read-only.

Commit d64de52

Browse files
jjjj
jj
authored and
jj
committed
GUI and login improvements
1 parent c1e369e commit d64de52

File tree

13 files changed

+118
-63
lines changed

13 files changed

+118
-63
lines changed

‎src/main/webapp/css/app.css‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
html, body{
44
height:100%;
55
font: .87em Helvetica, arial, freesans, clean, sans-serif;
6+
overflow-y: scroll;
67
}
78

89
#contents{
@@ -48,6 +49,10 @@ a.navbar-brand:hover{
4849
background: none;
4950
}
5051

52+
.navbar .nav > li > div > button {
53+
margin-top:10px;
54+
}
55+
5156
.navbar .nav > li > a {
5257
color:#000000;
5358
text-shadow:none;
@@ -179,6 +184,16 @@ a.accordion-toggle:hover{
179184
height: 100%;
180185
width: 100%;
181186
}
187+
188+
body.modal-open {
189+
overflow-y: scroll;
190+
margin: 0;
191+
}
192+
193+
.modal {
194+
overflow: auto;
195+
}
196+
182197
/* Forms */
183198

184199
.InputForm{

‎src/main/webapp/index.html‎

Lines changed: 72 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,6 @@
99

1010
<!-- Le styles -->
1111
<link href="css/bootstrap.css" rel="stylesheet"/>
12-
<link href="css/bootstrap-modal-bs3patch.css" rel="stylesheet"/>
1312
<link href="css/bootstrap-modal.css" rel="stylesheet"/>
1413
<link href="css/app.css" rel="stylesheet"/>
1514

@@ -29,111 +28,139 @@
2928
-->
3029
</head>
3130

32-
<body ng-cloak ng-app="app">
33-
<div ng-controller="LoginCtrl">
31+
<body ng-cloak ng-app="app" ng-controller="LoginCtrl">
32+
3433
<div class="navbar navbar-static-top">
35-
<div class="container col-xs-12">
34+
<div class="col-xs-2">
35+
</div>
36+
<div class="col-xs-9">
3637
<a class="navbar-brand" href="#/"></a>
3738
<div ng-controller="NavbarCtrl">
3839
<ul class="nav navbar-nav navbar-left">
3940
<li ng-class="getClass('/home')"><a href="#/"><div class="glyphicon glyphicon-cog"></div> Workbench </a></li>
4041
<!-- <li ng-class="getClass('/batch')""><a href="#/batch"><div class="glyphicon glyphicon-list"></div> Batch job </a></li> -->
4142
<li ng-class="getClass('/settings')"><a href="#/settings"><div class="glyphicon glyphicon-wrench"></div> Settings </a></li>
43+
<li ng-class="getClass('/account')"><a href="#/account"><div class="glyphicon glyphicon-user"></div> Account </a></li>
4244
</ul>
45+
4346
<ul class="nav navbar-nav navbar-right">
4447
<li>
45-
<div>
46-
<form name="loginForm" class="form-inline navbar-form" role="form" ng-show="currentAccount.username==null">
47-
<div class="form-group">
48-
<label class="sr-only" for="login">Login or e-mail</label>
49-
<input type="text" class="form-control col-xs-3 input-sm" id="login" placeholder="Login or e-mail" ng-model="login.username" required>
48+
<div class="navbar-form" ng-show="currentAccount.username">
49+
<span class="strong">You are logged in as <strong>{{currentAccount.username}}</strong></span> <button class="btn-sm btn-success" ng-click="logout()">Logout</button>
50+
</div>
51+
<div ng-hide="loggedIn">
52+
<!-- ng-disabled="loginForm.$invalid" -->
53+
<button type="button" class="btn-sm btn-success navbar-left" data-toggle="modal" data-target="#modalLogin" ng-click="openModal()">Login</button>
54+
<button type="button" class="btn-xs btn-link navbar-left" data-toggle="modal" data-target="#modalSignUp" ng-click="new();">Register</button>
55+
<button type="button" class="btn-xs btn-link navbar-left" data-toggle="modal" data-target="#modalRestorePassword" ng-show="currentAccount.username==null">Forgot password?</button>
56+
</div>
57+
</li>
58+
<!-- <li><a href="http://geoknow.eu" target="_blanc"><div class="glyphicon glyphicon-info-sign"></div> About</a></li> -->
59+
</ul>
60+
</div>
61+
</div>
62+
</div>
63+
64+
<div class="modal fade" id="modalLogin">
65+
<div class="modal-dialog">
66+
<div class="modal-content">
67+
<form name="loginForm" class="form-horizontal InputForm" role="form" ng-show="currentAccount.username==null">
68+
<div class="modal-header">
69+
<button type="button" class="close" ng-click="close('#modalLogin')" aria-hidden="true">&times;</button>
70+
<h5 class="modal-title green bold">Login</h5>
71+
</div>
72+
<div class="modal-body">
73+
74+
<div class="form-group">
75+
<label class="sr-only" for="login">Username or e-mail</label>
76+
<input type="text" class="form-control col-xs-3 input-sm" id="login" placeholder="Username or e-mail address" ng-model="login.username" required>
5077
<div class="error" ng-show="loginForm.login.$dirty && loginForm.login.$invalid">
51-
<span ng-show="loginForm.login.$error.required">Enter your login</span>
78+
<span ng-show="loginForm.login.$error.required">Enter your username</span>
5279
</div>
5380
</div>
5481
<div class="form-group">
5582
<label class="sr-only" for="password">Password</label>
5683
<input type="password" class="form-control col-xs-3 input-sm" id="password" placeholder="Password" ng-model="login.password" required>
5784
</div>
5885
<div class="error" ng-show="loginForm.password.$dirty && loginForm.password.$invalid">
59-
<span ng-show="loginForm.password.$error.required">Enter your password</span>
86+
<span ng-show="loginForm.password.$error.required">Enter a password</span>
6087
</div>
61-
<button type="submit" class="btn-sm btn-success" ng-click="login();" ng-disabled="loginForm.$invalid">Sign in</button>
62-
<button type="button" class="btn-sm btn-success" data-toggle="modal" data-target="#modalSignUp" ng-click="new();">Sign up</button>
63-
</form>
64-
<button type="button" class="btn btn-link btn-xs col-xs-offset-3" data-toggle="modal" data-target="#modalRestorePassword" ng-show="currentAccount.username==null">Forgot password?</button>
65-
<div class="navbar-form" ng-show="currentAccount.username">
66-
<span class="strong">You are logged in as {{currentAccount.username}}</span> <button class="btn-sm btn-success" ng-click="logout()">Logout</button>
67-
</div>
68-
</div>
69-
</li>
70-
<li ng-class="getClass('/account')"><a href="#/account"><div class="glyphicon glyphicon-user"></div> Account </a></li>
71-
<li><a href="http://geoknow.eu" target="_blanc"><div class="glyphicon glyphicon-info-sign"></div> About</a></li>
72-
</ul>
73-
</div>
74-
</div>
88+
</div>
89+
90+
<div class="modal-footer">
91+
<button type="submit" class="btn-sm btn-success" ng-click="login();" ng-disabled="loginForm.$invalid">Sign in</button>
92+
<button type="button" class="btn-sm btn-default" ng-click="close('#modalLogin')">Cancel</button>
93+
</div>
94+
</form>
95+
</div>
96+
</div>
7597
</div>
7698

7799
<div class="modal fade" id="modalSignUp">
100+
<div class="modal-dialog">
101+
<div class="modal-content">
78102
<form name="signUpForm" class="form-horizontal InputForm" role="form">
79103
<div class="modal-header">
80-
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
81-
<h5 class="modal-title green bold">Sign up</h5>
104+
<button type="button" class="close" ng-click="close('#modalSignUp')" aria-hidden="true">&times;</button>
105+
<h5 class="modal-title green bold">Register</h5>
82106
</div>
83107
<div class="modal-body">
84108
<div class="form-group">
85-
<label for="username" class="col-lg-2 control-label">Login</label>
109+
<label for="username" class="col-lg-2 control-label">Username</label>
86110
<div class="col-lg-10">
87-
<input type="text" id="username" name="username" class="form-control" placeholder="Login" ng-model="signUp.username" required/>
111+
<input type="text" id="username" name="username" class="form-control" placeholder="Username" ng-model="signUp.username" required/>
88112
<div class="error" ng-show="signUpForm.username.$dirty && signUpForm.username.$invalid">Invalid:
89-
<span ng-show="signUpForm.username.$error.required">Specify a login</span>
113+
<span ng-show="signUpForm.username.$error.required">Enter a username</span>
90114
</div>
91115
</div>
92116
</div>
93117
<div class="form-group">
94118
<label for="email" class="col-lg-2 control-label">E-mail</label>
95119
<div class="col-lg-10">
96-
<input type="email" id="email" name="email" class="form-control" placeholder="E-mail" ng-model="signUp.email" required/>
120+
<input type="email" id="email" name="email" class="form-control" placeholder="E-mail address" ng-model="signUp.email" required/>
97121
<div class="error" ng-show="signUpForm.email.$dirty && signUpForm.email.$invalid">Invalid:
98-
<span ng-show="signUpForm.email.$error.required">Specify your email</span>
99-
<span ng-show="signUpForm.email.$error.email">This is not a valid email</span>
122+
<span ng-show="signUpForm.email.$error.required">Enter your email address</span>
123+
<span ng-show="signUpForm.email.$error.email">This is not a valid email address</span>
100124
</div>
101125
</div>
102126
</div>
103127
</div>
104128
<div class="modal-footer">
105-
<button type="submit" class="btn-sm btn-success" ng-click="createAccount();" ng-disabled="signUpForm.$invalid">Sign up</button>
106-
<button type="button" class="btn-sm btn-default" data-dismiss="modal">Cancel</button>
129+
<button type="submit" class="btn-sm btn-success" ng-click="createAccount();" ng-disabled="signUpForm.$invalid">Register</button>
130+
<button type="button" class="btn-sm btn-default" ng-click="close('#modalSignUp')">Cancel</button>
107131
</div>
108132
</form>
133+
</div>
134+
</div>
109135
</div>
110136

111137
<div class="modal fade" id="modalRestorePassword">
138+
<div class="modal-dialog">
139+
<div class="modal-content">
112140
<form name="restorePasswordForm" class="form-horizontal InputForm" role="form">
113141
<div class="modal-header">
114-
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
115-
<h5 class="modal-title green bold">Restore password</h5>
142+
<button type="button" class="close" ng-click="close('#modalRestorePassword')" aria-hidden="true">&times;</button>
143+
<h5 class="modal-title green bold">Request password</h5>
116144
</div>
117145
<div class="modal-body">
118146
<div class="form-group">
119-
<label for="username" class="col-lg-2 control-label">Login or e-mail</label>
147+
<label for="username" class="col-lg-2 control-label">Username or e-mail address</label>
120148
<div class="col-lg-10">
121-
<input type="text" id="username" name="username" class="form-control" placeholder="Login or e-mail" ng-model="restorePassword.username" required/>
149+
<input type="text" id="username" name="username" class="form-control" placeholder="Username or e-mail address" ng-model="restorePassword.username" required/>
122150
<div class="error" ng-show="restorePasswordForm.username.$dirty && restorePasswordForm.username.$invalid">Invalid:
123-
<span ng-show="restorePasswordForm.username.$error.required">Specify a login</span>
151+
<span ng-show="restorePasswordForm.username.$error.required">Enter your username or email address</span>
124152
</div>
125153
</div>
126154
</div>
127155
</div>
128156
<div class="modal-footer">
129-
<button type="submit" class="btn-sm btn-success" ng-click="restorePassword();" ng-disabled="restorePasswordForm.$invalid">Restore password</button>
130-
<button type="button" class="btn-sm btn-default" data-dismiss="modal">Cancel</button>
157+
<button type="submit" class="btn-sm btn-success" ng-click="restorePassword();" ng-disabled="restorePasswordForm.$invalid">Request password</button>
158+
<button type="button" class="btn-sm btn-default" ng-click="close('#modalRestorePassword')">Cancel</button>
131159
</div>
132160
</form>
133161
</div>
134-
</div>
135-
136-
162+
</div>
163+
</div>
137164

138165
<div id="contents" app-view-segment="0"></div>
139166

‎src/main/webapp/js/controllers.js‎

Lines changed: 17 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -105,6 +105,13 @@ function LoginCtrl($scope, flash, AccountService, LoginService, ServerErrorRespo
105105
$scope.login.password = null;
106106
});
107107
};
108+
109+
$scope.close = function(modalID) {
110+
$(modalID).modal('hide');
111+
$('body').removeClass('modal-open');
112+
$('.modal-backdrop').slideUp();
113+
$('.modal-scrollable').slideUp();
114+
};
108115

109116
$scope.logout = function() {
110117
LoginService.logout()
@@ -116,21 +123,21 @@ function LoginCtrl($scope, flash, AccountService, LoginService, ServerErrorRespo
116123
$scope.createAccount = function() {
117124
LoginService.createAccount($scope.signUp.username, $scope.signUp.email)
118125
.then(function(response) {
119-
$('#modalSignUp').modal('hide');
126+
$scope.close('#modalSignUp');
120127
flash.success = response.data.message;
121128
}, function(response) {
122-
$('#modalSignUp').modal('hide');
129+
$scope.close('#modalSignUp');
123130
flash.error = ServerErrorResponse.getMessage(response.status);
124131
});
125132
};
126133

127134
$scope.restorePassword = function() {
128135
LoginService.restorePassword($scope.restorePassword.username)
129136
.then(function(response) {
130-
$('#modalRestorePassword').modal('hide');
137+
$scope.close('#modalRestorePassword');
131138
flash.success = response.data.message;
132139
}, function(response) {
133-
$('#modalRestorePassword').modal('hide');
140+
$scope.close('#modalRestorePassword');
134141
flash.error = ServerErrorResponse.getMessage(response.status);
135142
});
136143
};
@@ -147,9 +154,15 @@ function AccountCtrl($scope, flash, AccountService, LoginService, ServerErrorRes
147154
LoginService.changePassword($scope.password.oldPassword, $scope.password.newPassword)
148155
.then(function(response) {
149156
$('#modalChangePassword').modal('hide');
157+
$('body').removeClass('modal-open');
158+
$('.modal-backdrop').slideUp();
159+
$('.modal-scrollable').slideUp();
150160
flash.success = response.data.message;
151161
}, function(response) {
152162
$('#modalChangePassword').modal('hide');
163+
$('body').removeClass('modal-open');
164+
$('.modal-backdrop').slideUp();
165+
$('.modal-scrollable').slideUp();
153166
flash.error = ServerErrorResponse.getMessage(response.status);
154167
});
155168
};

‎src/main/webapp/partials/account.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ <h5 ng-class="{selected:isSelected('{{item.url}}')}" class="panel-title">
1616

1717
<div class="col-lg-10" app-view-segment="1" ng-controller="AccountCtrl">
1818
<!-- Subscribe to all flash messages. -->
19-
<div flash-alert active-class="in" class="alert fade" duration="0">
19+
<div flash-alert active-class="in alert" class="fade" duration="0">
2020
<button type="button" class="close" ng-click="hide()">&times;</button>
2121
<span class="alert-message">{{flash.message}}</span>
2222
</div>

‎src/main/webapp/partials/default.html‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<div class="contents">
2-
<div class="col-sm-2 sidebar">
2+
<div class="col-xs-2 sidebar">
33

44
<div class="panel-group" id="accordion" ng-controller="StackMenuCtrl">
55
<div class="panel panel-default" ng-repeat="group in groups">
@@ -20,8 +20,8 @@ <h6><a class="list-group-item" target="{{item.target}}" href="{{item.route}}">{{
2020

2121
</div>
2222

23-
<div class="col-sm-10 contents" app-view-segment="1">
24-
<div class="col-sm-8">
23+
<div class="col-xs-10 contents" app-view-segment="1">
24+
<div class="col-xs-8">
2525
<h3 class="green bold">Welcome to the GeoKnow Generator</h3>
2626
<br>
2727
</div>

‎src/main/webapp/partials/enriching-and-cleaning/geolift-result.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<div class="contents" ng-controller="GeoliftCtrl" ng-init="StartGeoLift()">
22
<!-- Subscribe to all flash messages. -->
3-
<div flash-alert active-class="in" class="alert fade" duration="0">
3+
<div flash-alert active-class="in alert" class="fade" duration="0">
44
<button type="button" class="close" ng-click="hide()">&times;</button>
55
<span class="alert-message">{{flash.message}}</span>
66
</div>

‎src/main/webapp/partials/enriching-and-cleaning/geolift.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<div class="contents" ng-controller="GeoliftCtrl">
22
<!-- Subscribe to all flash messages. -->
3-
<div flash-alert active-class="in" class="alert fade" duration="10000">
3+
<div flash-alert active-class="in alert" class="fade" duration="10000">
44
<button type="button" class="close" ng-click="hide()">&times;</button>
55
<span class="alert-message">{{flash.message}}</span>
66
</div>

‎src/main/webapp/partials/extraction-and-loading/import-rdf.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ <h3 class="green bold">Import RDF Data</h3>
22

33

44
<!-- Subscribe to all flash messages. -->
5-
<div flash-alert active-class="in" class="alert fade" duration="0">
5+
<div flash-alert active-class="in alert" class="fade" duration="0">
66
<button type="button" class="close" ng-click="hide()">&times;</button>
77
<span class="alert-message">{{flash.message}}</span>
88
</div>

‎src/main/webapp/partials/extraction-and-loading/triplegeo-result.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<div class="contents" ng-controller="TripleGeoCtrl" ng-init="startTripleGeo()">
22
<!-- Subscribe to all flash messages. -->
3-
<div flash-alert active-class="in" class="alert fade" duration="0">
3+
<div flash-alert active-class="in alert" class="fade" duration="0">
44
<button type="button" class="close" ng-click="hide()">&times;</button>
55
<span class="alert-message">{{flash.message}}</span>
66
</div>

‎src/main/webapp/partials/extraction-and-loading/triplegeo.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<div class="contents" ng-controller="TripleGeoCtrl">
22
<!-- Subscribe to all flash messages. -->
3-
<div flash-alert active-class="in" class="alert fade" duration="0">
3+
<div flash-alert active-class="in alert" class="fade" duration="0">
44
<button type="button" class="close" ng-click="hide()">&times;</button>
55
<span class="alert-message">{{flash.message}}</span>
66
</div>

0 commit comments

Comments
 (0)