You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@openmeetings.apache.org by so...@apache.org on 2020/02/01 10:19:28 UTC

[openmeetings] branch csp updated: [OPENMEETINGS-2165] sign-in dialog is improved

This is an automated email from the ASF dual-hosted git repository.

solomax pushed a commit to branch csp
in repository https://gitbox.apache.org/repos/asf/openmeetings.git


The following commit(s) were added to refs/heads/csp by this push:
     new f5e286e  [OPENMEETINGS-2165] sign-in dialog is improved
f5e286e is described below

commit f5e286e74f6f4de24b816c36e5840da166eeedd9
Author: Maxim Solodovnik <so...@gmail.com>
AuthorDate: Sat Feb 1 17:19:15 2020 +0700

    [OPENMEETINGS-2165] sign-in dialog is improved
---
 .../apache/openmeetings/web/app/Application.java   | 17 ++++++-
 .../web/app/Application.properties.xml             |  1 +
 .../web/pages/auth/RegisterDialog.java             |  4 +-
 .../openmeetings/web/pages/auth/SignInDialog.html  | 57 ++++++++++++++--------
 .../openmeetings/web/pages/auth/SignInDialog.java  | 20 +++++---
 .../src/main/webapp/css/raw-general.css            | 15 +++++-
 pom.xml                                            |  2 +-
 7 files changed, 82 insertions(+), 34 deletions(-)

diff --git a/openmeetings-web/src/main/java/org/apache/openmeetings/web/app/Application.java b/openmeetings-web/src/main/java/org/apache/openmeetings/web/app/Application.java
index 988f386..70d9cfb 100644
--- a/openmeetings-web/src/main/java/org/apache/openmeetings/web/app/Application.java
+++ b/openmeetings-web/src/main/java/org/apache/openmeetings/web/app/Application.java
@@ -51,6 +51,7 @@ import org.apache.openmeetings.db.dao.basic.ConfigurationDao;
 import org.apache.openmeetings.db.dao.calendar.AppointmentDao;
 import org.apache.openmeetings.db.dao.label.LabelDao;
 import org.apache.openmeetings.db.dao.record.RecordingDao;
+import org.apache.openmeetings.db.dao.server.OAuth2Dao;
 import org.apache.openmeetings.db.dao.user.UserDao;
 import org.apache.openmeetings.db.entity.basic.Client;
 import org.apache.openmeetings.db.entity.calendar.Appointment;
@@ -103,6 +104,8 @@ import org.apache.wicket.authroles.authentication.AuthenticatedWebApplication;
 import org.apache.wicket.core.request.handler.BookmarkableListenerRequestHandler;
 import org.apache.wicket.core.request.handler.ListenerRequestHandler;
 import org.apache.wicket.core.request.mapper.MountedMapper;
+import org.apache.wicket.csp.CSPDirective;
+import org.apache.wicket.csp.CSPHeaderConfiguration;
 import org.apache.wicket.markup.head.IHeaderResponse;
 import org.apache.wicket.markup.head.filter.FilteringHeaderResponse;
 import org.apache.wicket.markup.html.IHeaderResponseDecorator;
@@ -179,6 +182,8 @@ public class Application extends AuthenticatedWebApplication implements IApplica
 	private ClientManager cm;
 	@Autowired
 	private AppointmentDao appointmentDao;
+	@Autowired
+	private OAuth2Dao oauthDao;
 
 	@Override
 	protected void init() {
@@ -241,7 +246,7 @@ public class Application extends AuthenticatedWebApplication implements IApplica
 		//chain of Resource Loaders, if not found it will search in Wicket's internal
 		//Resource Loader for a the property key
 		getResourceSettings().getStringResourceLoaders().add(0, new LabelResourceLoader());
-		getCsp().blocking().strict();
+		final CSPHeaderConfiguration cspConfig = getcspConfig().strict();
 		getRequestCycleListeners().add(new WebSocketAwareCsrfPreventionRequestCycleListener() {
 			@Override
 			public void onEndRequest(RequestCycle cycle) {
@@ -327,6 +332,12 @@ public class Application extends AuthenticatedWebApplication implements IApplica
 			Version.logOMStarted();
 			recordingDao.resetProcessingStatus(); //we are starting so all processing recordings are now errors
 
+			oauthDao.getActive().forEach(oauth -> {
+				if (!Strings.isEmpty(oauth.getIconUrl())) {
+					getCsp().blocking().add(CSPDirective.IMG_SRC, oauth.getIconUrl()); //FIXME TODO
+					cspConfig.add(CSPDirective.IMG_SRC, oauth.getIconUrl());
+				}
+			});
 			setInitComplete(true);
 		} catch (Exception err) {
 			log.error("[appStart]", err);
@@ -357,6 +368,10 @@ public class Application extends AuthenticatedWebApplication implements IApplica
 		}
 	}
 
+	public CSPHeaderConfiguration getcspConfig() {
+		return getCsp().reporting();
+	}
+
 	public static OmAuthenticationStrategy getAuthenticationStrategy() {
 		return (OmAuthenticationStrategy)get().getSecuritySettings().getAuthenticationStrategy();
 	}
diff --git a/openmeetings-web/src/main/java/org/apache/openmeetings/web/app/Application.properties.xml b/openmeetings-web/src/main/java/org/apache/openmeetings/web/app/Application.properties.xml
index 2bef142..97d75f0 100644
--- a/openmeetings-web/src/main/java/org/apache/openmeetings/web/app/Application.properties.xml
+++ b/openmeetings-web/src/main/java/org/apache/openmeetings/web/app/Application.properties.xml
@@ -1003,4 +1003,5 @@ see https://openmeetings.apache.org/LanguageEditor.html for Details
 	<entry key="admin.room.wait-moderator.info"><![CDATA[No one can use room until moderator will join]]></entry>
 	<entry key="admin.room.wait-moderator.label"><![CDATA[Wait moderator]]></entry>
 	<entry key="wait-moderator.title"><![CDATA[Please be patient ...]]></entry>
+	<entry key="lbl.or"><![CDATA[or]]></entry>
 </properties>
diff --git a/openmeetings-web/src/main/java/org/apache/openmeetings/web/pages/auth/RegisterDialog.java b/openmeetings-web/src/main/java/org/apache/openmeetings/web/pages/auth/RegisterDialog.java
index 581fad4..95a986b 100644
--- a/openmeetings-web/src/main/java/org/apache/openmeetings/web/pages/auth/RegisterDialog.java
+++ b/openmeetings-web/src/main/java/org/apache/openmeetings/web/pages/auth/RegisterDialog.java
@@ -56,7 +56,7 @@ import de.agilecoders.wicket.core.markup.html.bootstrap.button.BootstrapAjaxLink
 import de.agilecoders.wicket.core.markup.html.bootstrap.button.Buttons;
 import de.agilecoders.wicket.core.markup.html.bootstrap.common.NotificationPanel;
 import de.agilecoders.wicket.core.markup.html.bootstrap.dialog.Modal;
-import de.agilecoders.wicket.extensions.markup.html.bootstrap.ladda.LaddaAjaxButton;
+import de.agilecoders.wicket.extensions.markup.html.bootstrap.spinner.SpinnerAjaxButton;
 
 public class RegisterDialog extends Modal<String> {
 	private static final long serialVersionUID = 1L;
@@ -95,7 +95,7 @@ public class RegisterDialog extends Modal<String> {
 		setUseCloseHandler(true);
 		setBackdrop(Backdrop.STATIC);
 
-		addButton(new LaddaAjaxButton("button", new ResourceModel("121"), form, Buttons.Type.Primary)); // register
+		addButton(new SpinnerAjaxButton("button", new ResourceModel("121"), form, Buttons.Type.Primary)); // register
 		addButton(new BootstrapAjaxLink<>("button", Model.of(""), Buttons.Type.Secondary, new ResourceModel("lbl.cancel")) {
 			private static final long serialVersionUID = 1L;
 
diff --git a/openmeetings-web/src/main/java/org/apache/openmeetings/web/pages/auth/SignInDialog.html b/openmeetings-web/src/main/java/org/apache/openmeetings/web/pages/auth/SignInDialog.html
index d510a92..369e416 100644
--- a/openmeetings-web/src/main/java/org/apache/openmeetings/web/pages/auth/SignInDialog.html
+++ b/openmeetings-web/src/main/java/org/apache/openmeetings/web/pages/auth/SignInDialog.html
@@ -22,37 +22,52 @@
 <html xmlns:wicket="http://wicket.apache.org">
 <wicket:extend>
 	<form wicket:id="signin" class="signin">
-		<div class="row no-gutters">
-			<div wicket:id="credentials">
-				<div class="row form-group no-gutters">
-					<div class="desc col-6"><label wicket:for="login"><wicket:message key="109"/></label></div>
-					<div class="col-5"><input wicket:id="login" type="text" value=""/></div>
-				</div>
-				<div class="row form-group no-gutters">
-					<div class="desc col-6"><label wicket:for="pass"><wicket:message key="110"/></label></div>
-					<div class="col-5"><input wicket:id="pass" type="password" value=""/></div>
+		<div wicket:id="credentials">
+			<div class="form-group no-gutters">
+				<div class="input-group">
+					<div class="input-group-prepend">
+						<span class="input-group-text"><i class="fa fa-user"></i></span>
+					</div>
+					<input wicket:id="login" class="form-control" type="text" value="" wicket:message="placeholder:109,title:109"/>
 				</div>
-				<div class="row form-group no-gutters" wicket:id="ldap">
-					<div class="desc col-6"><label wicket:for="domain"><wicket:message key="1118"/></label></div>
-					<div class="col-5"><select wicket:id="domain"></select></div>
+			</div>
+			<div class="form-group no-gutters">
+				<div class="input-group">
+					<div class="input-group-prepend">
+						<span class="input-group-text"><i class="fa fa-lock"></i></span>
+					</div>
+					<input wicket:id="pass" class="form-control" type="password" value="" wicket:message="placeholder:110,title:110"/>
 				</div>
-				<div class="row form-group no-gutters">
-					<div class="col-6"></div>
-					<div class="col-5 remember">
-						<input wicket:id="rememberMe" type="checkbox" />
-						<label wicket:for="rememberMe"><wicket:message key="288" /></label>
+			</div>
+			<div class="form-group no-gutters" wicket:id="ldap">
+				<div class="input-group">
+					<div class="input-group-prepend">
+						<span class="input-group-text"><i class="fa fa-users"></i></span>
 					</div>
+					<select wicket:id="domain" class="form-control" wicket:message="title:1118"></select>
 				</div>
 			</div>
-			<div wicket:id="oauth" class="oauth-section col-4">
-				<div wicket:id="oauthList">
-					<button wicket:id="oauthBtn"><span class="provider" wicket:id="label"></span></button>
+			<div class="row form-group no-gutters">
+				<div class="col-6 remember">
+					<input wicket:id="rememberMe" type="checkbox" />
+					<label wicket:for="rememberMe"><wicket:message key="288" /></label>
+				</div>
+				<div class="col-5">
+					<a class="text-primary" wicket:id="forget"><wicket:message key="311"/></a>
 				</div>
 			</div>
 		</div>
+		<div wicket:id="oauth" class="oauth-section">
+			<div class="or-seperator">
+				<i><wicket:message key="lbl.or"/></i>
+			</div>
+			<div wicket:id="oauthList">
+				<button wicket:id="oauthBtn" class="btn btn-outline-info"><span class="provider" wicket:id="label"></span></button>
+			</div>
+		</div>
 		<div wicket:id="feedback" class="error"></div>
 		<div class="row no-gutters">
-			<div class="col-6"><a class="text-primary" wicket:id="forget"><wicket:message key="311"/></a></div>
+			<div class="col-6"></div>
 			<div class="col-5"><a class="text-primary" wicket:id="netTest" target="_blank"><wicket:message key="1527"/></a></div>
 		</div>
 		<input type="submit" wicket:id="submit" class="invisible-form-component"/>
diff --git a/openmeetings-web/src/main/java/org/apache/openmeetings/web/pages/auth/SignInDialog.java b/openmeetings-web/src/main/java/org/apache/openmeetings/web/pages/auth/SignInDialog.java
index 88f3bc2..9b72502 100644
--- a/openmeetings-web/src/main/java/org/apache/openmeetings/web/pages/auth/SignInDialog.java
+++ b/openmeetings-web/src/main/java/org/apache/openmeetings/web/pages/auth/SignInDialog.java
@@ -44,6 +44,8 @@ import org.apache.wicket.RestartResponseException;
 import org.apache.wicket.ajax.AjaxRequestTarget;
 import org.apache.wicket.ajax.markup.html.AjaxLink;
 import org.apache.wicket.ajax.markup.html.form.AjaxButton;
+import org.apache.wicket.markup.head.CssHeaderItem;
+import org.apache.wicket.markup.head.IHeaderResponse;
 import org.apache.wicket.markup.html.WebMarkupContainer;
 import org.apache.wicket.markup.html.basic.Label;
 import org.apache.wicket.markup.html.form.CheckBox;
@@ -72,7 +74,7 @@ import de.agilecoders.wicket.core.markup.html.bootstrap.button.BootstrapAjaxLink
 import de.agilecoders.wicket.core.markup.html.bootstrap.button.Buttons;
 import de.agilecoders.wicket.core.markup.html.bootstrap.common.NotificationPanel;
 import de.agilecoders.wicket.core.markup.html.bootstrap.dialog.Modal;
-import de.agilecoders.wicket.extensions.markup.html.bootstrap.ladda.LaddaAjaxButton;
+import de.agilecoders.wicket.extensions.markup.html.bootstrap.spinner.SpinnerAjaxButton;
 
 public class SignInDialog extends Modal<String> {
 	private static final long serialVersionUID = 1L;
@@ -113,7 +115,7 @@ public class SignInDialog extends Modal<String> {
 				register.show(target);
 			}
 		});
-		addButton(new LaddaAjaxButton("button", new ResourceModel("112"), form, Buttons.Type.Primary)); // Login
+		addButton(new SpinnerAjaxButton("button", new ResourceModel("112"), form, Buttons.Type.Primary)); // Login
 
 		super.onInitialize();
 	}
@@ -176,7 +178,7 @@ public class SignInDialog extends Modal<String> {
 			};
 			add(ab);
 			setDefaultButton(ab);
-			add(new AjaxLink<Void>("forget") {
+			credentials.add(new AjaxLink<Void>("forget") {
 				private static final long serialVersionUID = 1L;
 
 				@Override
@@ -202,16 +204,20 @@ public class SignInDialog extends Modal<String> {
 							public void onSubmit() {
 								showAuth(s);
 							}
+
+							@Override
+							public void renderHead(IHeaderResponse response) {
+								if (!Strings.isEmpty(s.getIconUrl())) {
+									response.render(CssHeaderItem.forCSS("#" + this.getMarkupId() + " .provider {background-image: url(" + s.getIconUrl() + ")}", this.getMarkupId()));
+								}
+							}
 						};
 						Component lbl = new Label("label", s.getName());
-						if (!Strings.isEmpty(s.getIconUrl())) {
-							lbl.add(AttributeModifier.replace("style", String.format("background-image: url(%s)", s.getIconUrl())));
-						}
 						btn.add(lbl);
 						item.add(btn.setDefaultFormProcessing(false)); //skip all rules, go to redirect
+						item.setRenderBodyOnly(true);
 					}
 				}).setVisible(showOauth));
-			credentials.add(AttributeModifier.append("class", showOauth ? "col-8" : "col-12"));
 			if (showOauth) {
 				add(AttributeModifier.append("class", "wide"));
 			}
diff --git a/openmeetings-web/src/main/webapp/css/raw-general.css b/openmeetings-web/src/main/webapp/css/raw-general.css
index b054b4e..d734e6a 100644
--- a/openmeetings-web/src/main/webapp/css/raw-general.css
+++ b/openmeetings-web/src/main/webapp/css/raw-general.css
@@ -22,8 +22,7 @@ html, body {
 	box-sizing: initial; /*reset bootstrap box sizing*/
 }
 .signin .oauth-section {
-	border-left: 2px dotted;
-	padding-left: 5px;
+	padding-bottom: 20px;
 }
 .signin .oauth-section .provider {
 	background-position: 0 0;
@@ -34,6 +33,18 @@ html, body {
 .signin .remember {
 	white-space: nowrap;
 }
+.signin .or-seperator {
+	margin-top: 20px;
+	text-align: center;
+	border-top: 1px solid #cccccc;
+}
+.signin .or-seperator i {
+	padding: 0 10px;
+	background: #ffffff;
+	position: relative;
+	top: -11px;
+	z-index: 1;
+}
 .signin-forget .form-check-label {
 	padding-right: 10px;
 }
diff --git a/pom.xml b/pom.xml
index aaf39e5..6364945 100644
--- a/pom.xml
+++ b/pom.xml
@@ -77,7 +77,7 @@
 		<wicket.version>9.0.0-M5-SNAPSHOT</wicket.version>
 		<wicketju.version>9.0.0-SNAPSHOT</wicketju.version>
 		<wickets.version>9.0.0-M5-SNAPSHOT</wickets.version>
-		<wicket-bootstrap.version>4.0.0-M1-SNAPSHOT</wicket-bootstrap.version>
+		<wicket-bootstrap.version>5.0.0-M1-SNAPSHOT</wicket-bootstrap.version>
 		<red5-client.version>1.2.3</red5-client.version>
 		<spring.version>5.2.3.RELEASE</spring.version>
 		<mina.version>2.1.3</mina.version>