feat: add initial implementation

Author: mlopezFC

README.md

@@ -1,22 +1,23 @@
-[![Published on Vaadin Directory](https://img.shields.io/badge/Vaadin%20Directory-published-00b4f0.svg)](https://vaadin.com/directory/component/template-addon)
-[![Stars on vaadin.com/directory](https://img.shields.io/vaadin-directory/star/app-layout-addon.svg)](https://vaadin.com/directory/component/template-addon)
-[![Build Status](https://jenkins.flowingcode.com/job/template-addon/badge/icon)](https://jenkins.flowingcode.com/job/template-addon)
+[![Published on Vaadin Directory](https://img.shields.io/badge/Vaadin%20Directory-published-00b4f0.svg)](https://vaadin.com/directory/component/extended-login-addon)
+[![Stars on vaadin.com/directory](https://img.shields.io/vaadin-directory/star/extended-login-addon.svg)](https://vaadin.com/directory/component/extended-login-addon)
+[![Build Status](https://jenkins.flowingcode.com/job/extended-login-addon/badge/icon)](https://jenkins.flowingcode.com/job/extended-login-addon)
 
-# Template Add-on
+# Extended Login Add-on
 
-This is a template project for building new Vaadin 24 add-ons
+This is addon extends the Vaadin Login component adding new features
 
 ## Features
 
-* List the features of your add-on in here
+* Adds a LoginLayout that allows to create views with the same layout as the LoginOverlay
+* Adds an extended LoginOverlay that allows to customize the appearance with more features than the base version
 
 ## Online demo
 
-[Online demo here](http://addonsv24.flowingcode.com/template)
+[Online demo here](http://addonsv24.flowingcode.com/extended-login)
 
 ## Download release
 
-[Available in Vaadin Directory](https://vaadin.com/directory/component/template-addon)
+[Available in Vaadin Directory](https://vaadin.com/directory/component/extended-login-addon)
 
 ### Maven install
 
@@ -25,7 +26,7 @@ Add the following dependencies in your pom.xml file:
 ```xml
 <dependency>
    <groupId>org.vaadin.addons.flowingcode</groupId>
-   <artifactId>template-addon</artifactId>
+   <artifactId>extended-login-addon</artifactId>
    <version>X.Y.Z</version>
 </dependency>
 ```
@@ -49,7 +50,7 @@ To see the demo, navigate to http://localhost:8080/
 
 ## Release notes
 
-See [here](https://github.com/FlowingCode/TemplateAddon/releases)
+See [here](https://github.com/FlowingCode/ExtendedLoginAddon/releases)
 
 ## Issue tracking
 
@@ -74,13 +75,26 @@ Then, follow these steps for creating a contibution:
 
 This add-on is distributed under Apache License 2.0. For license terms, see LICENSE.txt.
 
-TEMPLATE_ADDON is written by Flowing Code S.A.
+Extended Login Addon is written by Flowing Code S.A.
 
 # Developer Guide
 
 ## Getting started
 
-Add your code samples in this section
+### Using the ExtendedLoginOverlay
+
+Just create it in the same way that you would do with original LoginOverlay, but you can call new methods for replacing content:
+
+    ExtendedLoginOverlay elo = new ExtendedLoginOverlay();
+    elo.replaceFormComponents(new TextField("Test", "test"), new ComboBox<String>("Test2"), new Button("Test3"));
+    elo.replaceHeaderComponent(new Image("/img/LogoChicoGlow.png", "Login image"));
+    elo.replaceForgotPassword(new Anchor("https://www.flowingcode.com","Flowing Code"));
+    elo.setOpened(true);
+    add(elo);
+
+### Using the LoginLayout
+
+The LoginLayout is like a regular RouterLayout that can be extended and then used in your views that you would like to have the same layout as the LoginOverlay. All the content will be inside the vaadin-login-form-wrapper. It also provides the same replace methods as the ExtendedLoginOverlay
 
 ## Special configuration when using Spring
 

assembly/assembly.xml

@@ -3,7 +3,7 @@
     xmlns="http://maven.apache.org/plugins/maven-assembly-plugin/assembly/1.1.2"
     xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
     xsi:schemaLocation="http://maven.apache.org/plugins/maven-assembly-plugin/assembly/1.1.2 http://maven.apache.org/xsd/assembly-1.1.2.xsd">
-    <id>flowing-addon</id>
+    <id>extended-login-addon</id>
 
     <formats>
         <format>zip</format>

drivers.xml

@@ -5,10 +5,11 @@
 	<modelVersion>4.0.0</modelVersion>
 
 	<groupId>org.vaadin.addons.flowingcode</groupId>
-	<artifactId>template-addon</artifactId>
+	<artifactId>extended-login</artifactId>
 	<version>1.0.0-SNAPSHOT</version>
-	<name>Template Add-on</name>
-	<description>Template Add-on for Vaadin Flow</description>
+	<name>Extended Login Add-on</name>
+	<description>Extended Login Add-on for Vaadin Flow</description>
+	<url>https://www.flowingcode.com/en/open-source/</url>
 
 	<properties>
         <vaadin.version>24.1.2</vaadin.version>
@@ -19,7 +20,7 @@
 		<project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
 		<drivers.dir>${project.basedir}/drivers</drivers.dir>
 		<jetty.version>11.0.12</jetty.version>
-		<flowingcode.commons.demo.version>3.6.0</flowingcode.commons.demo.version>
+		<flowingcode.commons.demo.version>3.7.0-SNAPSHOT</flowingcode.commons.demo.version>
 		<frontend.hotdeploy>true</frontend.hotdeploy>
 	</properties>
 
@@ -38,12 +39,20 @@
 	</licenses>
 
 	<scm>
-		<url>https://github.com/FlowingCode/AddonStarter24</url>
-		<connection>scm:git:git://github.com/FlowingCode/AddonStarter24.git</connection>
-		<developerConnection>scm:git:ssh://[email protected]:/FlowingCode/AddonStarter24.git</developerConnection>
+		<url>https://github.com/FlowingCode/ExtendedLoginAddon</url>
+		<connection>scm:git:git://github.com/FlowingCode/ExtendedLoginAddon.git</connection>
+		<developerConnection>scm:git:ssh://[email protected]:/FlowingCode/ExtendedLoginAddon.git</developerConnection>
 		<tag>master</tag>
 	</scm>
 
+    <developers>
+        <developer>
+            <id>flowingcode</id>
+            <organization>Flowing Code</organization>
+            <organizationUrl>https://www.flowingcode.com</organizationUrl>
+        </developer>
+    </developers>
+
 	<dependencyManagement>
 		<dependencies>
 			<dependency>
@@ -88,6 +97,10 @@
             <id>flowing-releases</id>
             <url>https://maven.flowingcode.com/releases</url>
         </repository>
+        <repository>
+            <id>flowing-snapshots</id>
+            <url>https://maven.flowingcode.com/snapshots</url>
+        </repository>
 	</repositories>
 
     <pluginRepositories>
@@ -206,7 +219,6 @@
             <plugin>
 				<groupId>org.apache.maven.plugins</groupId>
 				<artifactId>maven-surefire-plugin</artifactId>
-				<version>2.22.1</version>
 				<configuration>
 					<useSystemClassLoader>false</useSystemClassLoader>
 				</configuration>
@@ -381,34 +393,6 @@
 						</executions>
 					</plugin>
 
-					<plugin>
-						<groupId>com.lazerycode.selenium</groupId>
-						<artifactId>driver-binary-downloader-maven-plugin
-                        </artifactId>
-						<version>1.0.17</version>
-						<configuration>
-							<onlyGetDriversForHostOperatingSystem>
-								true
-							</onlyGetDriversForHostOperatingSystem>
-							<rootStandaloneServerDirectory>
-								${drivers.dir}/driver
-							</rootStandaloneServerDirectory>
-							<downloadedZipFileDirectory>
-								${drivers.dir}/driver_zips
-							</downloadedZipFileDirectory>
-							<customRepositoryMap>
-								${project.basedir}/drivers.xml
-							</customRepositoryMap>
-						</configuration>
-						<executions>
-							<execution>
-								<goals>
-									<goal>selenium</goal>
-								</goals>
-							</execution>
-						</executions>
-					</plugin>
-
 					<plugin>
 						<groupId>org.apache.maven.plugins</groupId>
 						<artifactId>maven-failsafe-plugin</artifactId>
@@ -424,12 +408,6 @@
 						<configuration>
 							<trimStackTrace>false</trimStackTrace>
 							<enableAssertions>true</enableAssertions>
-							<systemPropertyVariables>
-								<!-- Pass location of downloaded webdrivers to the tests -->
-								<webdriver.chrome.driver>
-									${webdriver.chrome.driver}
-								</webdriver.chrome.driver>
-							</systemPropertyVariables>
 						</configuration>
 					</plugin>
 					<plugin>

pom.xml

@@ -1,8 +1,8 @@
 /*-
  * #%L
- * Template Add-on
+ * Extended Login Add-on
  * %%
- * Copyright (C) 2023 Flowing Code
+ * Copyright (C) 2022 - 2023 Flowing Code
  * %%
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -17,16 +17,15 @@
  * limitations under the License.
  * #L%
  */
+package com.flowingcode.vaadin.addons.extendedlogin;
 
-package com.flowingcode.vaadin.addons.template;
-
-import com.vaadin.flow.component.Tag;
-import com.vaadin.flow.component.dependency.JsModule;
-import com.vaadin.flow.component.dependency.NpmPackage;
-import com.vaadin.flow.component.html.Div;
+import com.vaadin.flow.component.login.LoginOverlay;
 
+/**
+ * Special LoginOverlay that provides additional methods for replacing specific parts of the contents
+ * 
+ * @author mlopez
+ *
+ */
 @SuppressWarnings("serial")
-@NpmPackage(value = "@polymer/paper-input", version = "3.2.1")
-@JsModule("@polymer/paper-input/paper-input.js")
-@Tag("paper-input")
-public class TemplateAddon extends Div {}
+public class ExtendedLoginOverlay extends LoginOverlay implements ReplaceableLoginOverlay {}

…aadin/addons/template/TemplateAddon.java …/extendedlogin/ExtendedLoginOverlay.javasrc/main/java/com/flowingcode/vaadin/addons/template/TemplateAddon.java renamed to src/main/java/com/flowingcode/vaadin/addons/extendedlogin/ExtendedLoginOverlay.java src/main/java/com/flowingcode/vaadin/addons/template/TemplateAddon.java renamed to src/main/java/com/flowingcode/vaadin/addons/extendedlogin/ExtendedLoginOverlay.java

@@ -0,0 +1,62 @@
+/*-
+ * #%L
+ * Template Add-on
+ * %%
+ * Copyright (C) 2022 - 2023 Flowing Code
+ * %%
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * #L%
+ */
+
+package com.flowingcode.vaadin.addons.extendedlogin;
+
+import com.vaadin.flow.component.AttachEvent;
+import com.vaadin.flow.component.HasElement;
+import com.vaadin.flow.component.login.LoginOverlay;
+import com.vaadin.flow.router.RouterLayout;
+
+/**
+ * LoginOverlay based Layout that can be used to display views with a similar layout as the LoginOverlay
+ * It also provides methods for replacing part of the contents of the overlay
+ * 
+ * @author mlopez
+ *
+ */
+@SuppressWarnings("serial")
+public class LoginLayout extends LoginOverlay implements RouterLayout, ReplaceableLoginOverlay {
+  
+  private HasElement content;
+  
+  @Override
+  public void showRouterLayoutContent(HasElement content) {
+    RouterLayout.super.showRouterLayoutContent(content);
+    this.content = content;
+  }
+  
+  @Override
+  public void removeRouterLayoutContent(HasElement oldContent) {
+    RouterLayout.super.removeRouterLayoutContent(oldContent);
+    content = null;
+  }
+  
+  @Override
+  protected void onAttach(AttachEvent attachEvent) {
+    super.onAttach(attachEvent);
+    setOpened(true);
+    this.getElement().executeJs("setTimeout(()=>document.getElementById('vaadinLoginOverlayWrapper').getElementsByTagName('vaadin-login-form-wrapper')[0].replaceChildren())");
+    this.getElement().appendChild(content.getElement());
+    content.getElement().setAttribute("slot", "form");
+    this.content.getElement().executeJs("setTimeout(()=>document.getElementById('vaadinLoginOverlayWrapper').getElementsByTagName('vaadin-login-form-wrapper')[0].appendChild(this))");
+  }
+
+}

src/main/java/com/flowingcode/vaadin/addons/extendedlogin/LoginLayout.java

@@ -0,0 +1,53 @@
+/*-
+ * #%L
+ * Extended Login Add-on
+ * %%
+ * Copyright (C) 2022 - 2023 Flowing Code
+ * %%
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * #L%
+ */
+package com.flowingcode.vaadin.addons.extendedlogin;
+
+import com.vaadin.flow.component.HasElement;
+
+/**
+ * Mixin interface providing methods for replacing contents of the LoginOverlay
+ * 
+ * @author mlopez
+ *
+ */
+public interface ReplaceableLoginOverlay extends HasElement {
+  
+  default void replaceFormComponents(HasElement... withElement) {
+    this.getElement().executeJs("setTimeout(()=>document.getElementById('vaadinLoginOverlayWrapper').getElementsByTagName('vaadin-login-form-wrapper')[0].getElementsByTagName('form')[0].replaceChildren())");
+    for (HasElement we : withElement) {
+      getElement().appendChild(we.getElement());
+      this.getElement().executeJs("setTimeout(()=>document.getElementById('vaadinLoginOverlayWrapper').getElementsByTagName('vaadin-login-form-wrapper')[0].getElementsByTagName('form')[0].appendChild($0))", we.getElement());
+    }
+  }
+
+  default void replaceHeaderComponent(HasElement withElement) {
+    getElement().appendChild(withElement.getElement());
+    this.getElement().executeJs("setTimeout(()=>document.getElementById('vaadinLoginOverlayWrapper').shadowRoot.querySelector('[part=\"brand\"]').replaceChildren())");
+    this.getElement().executeJs("setTimeout(()=>document.getElementById('vaadinLoginOverlayWrapper').shadowRoot.querySelector('[part=\"brand\"]').appendChild($0))", withElement);
+  }
+
+  default void replaceForgotPassword(HasElement withElement) {
+    withElement.getElement().setAttribute("slot", "forgot-password");
+    getElement().appendChild(withElement.getElement());
+    this.getElement().executeJs("setTimeout(()=>document.getElementById('vaadinLoginOverlayWrapper').getElementsByTagName('vaadin-login-form-wrapper')[0].querySelector('[slot=\\\"forgot-password\\\"]').remove())");
+    this.getElement().executeJs("setTimeout(()=>document.getElementById('vaadinLoginOverlayWrapper').getElementsByTagName('vaadin-login-form-wrapper')[0].appendChild($0))", withElement);
+  }
+
+}