ForgotPasswordPage (#998)

Signed-off-by: Aleksandr Muravja <[email protected]>

frontend/css/axe_form_styles.css

@@ -6,6 +6,15 @@
     width: 100%;
 }
 
-.form-input {
+.vertically-compact {
+    padding-top: 1px;
+    padding-bottom: 1px;
+}
+
+.axe-fields > * {
     min-width: min(70vw, 300px);
+}
+
+.space-after-fields {
+    max-width: min(70vw, 300px);
 }

frontend/css/common_styles.css

@@ -209,3 +209,7 @@ vaadin-drawer-toggle {
 vaadin-icon[icon="vaadin:sign-in"] {
     padding-left: 0 !important;
 }
+
+.green {
+    color: green;
+}

frontend/css/forgot_password_page.css

@@ -0,0 +1,3 @@
+.result-span {
+    padding-left: 1rem;
+}

frontend/css/login_page.css

@@ -2,8 +2,3 @@
     text-align: center;
     width: 100%;
 }
-
-.vertically-compact {
-    padding-top: 1px;
-    padding-bottom: 1px;
-}

src/main/java/pm/axe/ui/layouts/AxeFormLayout.java

@@ -20,7 +20,7 @@ public class AxeFormLayout extends AxeBaseLayout {
     private final H2 formTitle = new H2();
     private final Div formSubTitle = new Div();
 
-    private final Div fields = new Div();
+    private final VerticalLayout fields = new VerticalLayout();
     private final Div spaceAfterFields = new Div();
     private final Hr separator = new Hr();
 
@@ -102,6 +102,10 @@ private void applyStyle() {
         formSubTitle.setClassName("axe-form-subtitle");
 
         fields.setClassName("axe-fields");
+        fields.setSpacing(false);
+        fields.addClassName("vertically-compact");
+
+        spaceAfterFields.addClassName("space-after-fields");
 
         separator.addClassName("separator");
 

src/main/java/pm/axe/ui/pages/user/ForgotPasswordPage.java

@@ -0,0 +1,140 @@
+package pm.axe.ui.pages.user;
+
+import com.vaadin.flow.component.ClickEvent;
+import com.vaadin.flow.component.Key;
+import com.vaadin.flow.component.button.Button;
+import com.vaadin.flow.component.dependency.CssImport;
+import com.vaadin.flow.component.details.Details;
+import com.vaadin.flow.component.html.Anchor;
+import com.vaadin.flow.component.html.Span;
+import com.vaadin.flow.component.orderedlayout.VerticalLayout;
+import com.vaadin.flow.component.textfield.TextField;
+import com.vaadin.flow.router.BeforeEnterEvent;
+import com.vaadin.flow.router.BeforeEnterObserver;
+import com.vaadin.flow.router.PageTitle;
+import com.vaadin.flow.router.Route;
+import com.vaadin.flow.spring.annotation.SpringComponent;
+import com.vaadin.flow.spring.annotation.UIScope;
+import lombok.RequiredArgsConstructor;
+import lombok.extern.slf4j.Slf4j;
+import org.apache.commons.lang3.StringUtils;
+import pm.axe.Axe;
+import pm.axe.Endpoint;
+import pm.axe.ui.MainView;
+import pm.axe.ui.layouts.AxeFormLayout;
+import pm.axe.utils.AppUtils;
+
+@Slf4j
+@SpringComponent
+@UIScope
+@RequiredArgsConstructor
+@CssImport(value = "./css/forgot_password_page.css")
+@Route(value = Endpoint.UI.FORGOT_PASSWORD_PAGE, layout = MainView.class)
+@PageTitle("Forgot Password - Axe.pm")
+public class ForgotPasswordPage extends AxeFormLayout implements BeforeEnterObserver {
+    private static final String TAG = "[" + ForgotPasswordPage.class.getSimpleName() + "]";
+    private final AppUtils appUtils;
+
+    private final TextField usernameInput = new TextField();
+    private Span contactKyberorgSpan;
+    private final Span successSpan = getSuccessSpan();
+
+    private Details nothingLinkedDetails;
+
+    private boolean pageAlreadyInitialized = false;
+
+    @Override
+    public void beforeEnter(final BeforeEnterEvent beforeEnterEvent) {
+        if (pageAlreadyInitialized) return;
+        pageInit();
+        applyState();
+        pageAlreadyInitialized = true;
+    }
+
+    private void pageInit() {
+        setCompactMode();
+        setFormTitle("Forgot Password?");
+
+        usernameInput.setLabel("Username/Email");
+        usernameInput.setClearButtonVisible(true);
+        setFormFields(usernameInput);
+
+        contactKyberorgSpan = getContactKyberorgSpan();
+        setComponentsAfterFields(getRecoveryNote());
+        setSubmitButtonText("Submit");
+        getSubmitButton().addClickShortcut(Key.ENTER);
+        getSubmitButton().addClickListener(this::onSubmit);
+    }
+
+    private void applyState() {
+        usernameInput.focus();
+        nothingLinkedDetails.setOpened(false);
+    }
+
+    private void onSubmit(final ClickEvent<Button> event) {
+        if (nothingLinkedDetails.isOpened()) nothingLinkedDetails.setOpened(false);
+
+        final String username = usernameInput.getValue();
+        if (StringUtils.isBlank(username)) {
+            usernameInput.setInvalid(true);
+            usernameInput.setErrorMessage("Please enter username");
+            return;
+        }
+        log.info("{} Password reset attempt. Username: '{}'", TAG, username);
+        cleanAnHideInput();
+        showSuccessMessage();
+    }
+
+    private void cleanAnHideInput() {
+        usernameInput.setValue("");
+        usernameInput.setVisible(false);
+    }
+
+    private void showSuccessMessage() {
+        replaceSubmitButtonWithComponents(successSpan);
+    }
+
+    private VerticalLayout getRecoveryNote() {
+        VerticalLayout recoveryNote = new VerticalLayout();
+        Span infoSpan = new Span("We will send password reset link to contact point (email etc.) " +
+                "linked with given account.");
+
+        VerticalLayout nothingLinkedContent = getAccordionContent();
+
+        nothingLinkedDetails = new Details("Nothing linked with account?", nothingLinkedContent);
+
+        recoveryNote.add(infoSpan, nothingLinkedDetails);
+        return recoveryNote;
+    }
+    private VerticalLayout getAccordionContent() {
+        VerticalLayout content = new VerticalLayout();
+        Span manualWaySpan = new Span("Manual way is an only way to recover it.");
+        content.add(manualWaySpan, contactKyberorgSpan);
+        return content;
+    }
+
+    private Span getContactKyberorgSpan() {
+        Span contact = new Span("Contact");
+        Span spaceSpan = new Span(" ");
+
+        String kyberorg = "kyberorg";
+        String telegramLink = String.format("%s%s", Axe.Telegram.TELEGRAM_URL, kyberorg);
+        Anchor tgLink = new Anchor(telegramLink, "@" + kyberorg);
+
+        Span dropEmailText = new Span("or drop email to");
+        String axeEmail = appUtils.getEmailFromAddress();
+        String mailTo = String.format("mailto:%s", axeEmail);
+        Anchor emailLink = new Anchor(mailTo, axeEmail);
+
+        return new Span(contact, spaceSpan, tgLink, spaceSpan, dropEmailText, spaceSpan, emailLink);
+    }
+
+    private Span getSuccessSpan() {
+        Span successSpan = new Span();
+        successSpan.setClassName("green");
+        successSpan.addClassName("result-span");
+        successSpan.setText("Sent");
+        return successSpan;
+    }
+}
+

src/main/java/pm/axe/ui/pages/user/LoginPage.java

@@ -9,7 +9,6 @@
 import com.vaadin.flow.component.html.Section;
 import com.vaadin.flow.component.html.Span;
 import com.vaadin.flow.component.notification.Notification;
-import com.vaadin.flow.component.orderedlayout.VerticalLayout;
 import com.vaadin.flow.component.textfield.PasswordField;
 import com.vaadin.flow.component.textfield.TextField;
 import com.vaadin.flow.router.BeforeEnterEvent;
@@ -35,7 +34,6 @@ public class LoginPage extends AxeFormLayout implements BeforeEnterObserver {
     private final Span spaceSpan = new Span();
     private final Anchor subTitleLink = new Anchor();
 
-    private final VerticalLayout fields = new VerticalLayout();
     private final TextField usernameInput = new TextField();
     private final PasswordField passwordInput = new PasswordField();
     private final Checkbox forgotMe = new Checkbox();
@@ -64,12 +62,8 @@ private void init() {
         usernameInput.setLabel("Username/Email");
         passwordInput.setLabel("Password");
         forgotMe.setLabel("Log me out after");
-        fields.add(usernameInput, passwordInput, forgotMe);
-        fields.getChildren().forEach(component -> component.getElement().setAttribute("class", "form-input"));
-        fields.setSpacing(false);
-        fields.addClassName("vertically-compact");
 
-        setFormFields(fields);
+        setFormFields(usernameInput, passwordInput, forgotMe);
 
         setSubmitButtonText("Jump in");
         getSubmitButton().addClickShortcut(Key.ENTER);
@@ -82,11 +76,6 @@ private void init() {
         forgotPasswordSection.setClassName("forgot-password-section");
 
         setComponentsAfterSubmitButton(forgotPasswordSection);
-
-        //TODO small screen only
-        getCentralLayout().getStyle().set("padding-left", "1px");
-        getCentralLayout().getStyle().set("padding-right", "1px");
-
     }
 
     private void onLogin(final ClickEvent<Button> event) {