{passwords : ["rectangle", "circle"]}

package com.example.LoginStuff;

import javax.servlet.annotation.WebServlet;

import com.vaadin.annotations.Theme;
import com.vaadin.annotations.VaadinServletConfiguration;
import com.vaadin.data.Property;
import com.vaadin.data.Property.ValueChangeEvent;
import com.vaadin.server.FontAwesome;
import com.vaadin.server.VaadinRequest;
import com.vaadin.server.VaadinServlet;
import com.vaadin.shared.ui.label.ContentMode;
import com.vaadin.shared.ui.slider.SliderOrientation;
import com.vaadin.ui.Alignment;
import com.vaadin.ui.Button;
import com.vaadin.ui.Button.ClickEvent;
import com.vaadin.ui.Button.ClickListener;
import com.vaadin.ui.Component;
import com.vaadin.ui.CssLayout;
import com.vaadin.ui.HorizontalLayout;
import com.vaadin.ui.Label;
import com.vaadin.ui.PopupView;
import com.vaadin.ui.ProgressBar;
import com.vaadin.ui.Slider;
import com.vaadin.ui.TextField;
import com.vaadin.ui.UI;
import com.vaadin.ui.VerticalLayout;


@Theme("mytheme")
public class MyUI extends UI {

    @Override
    protected void init(VaadinRequest vaadinRequest) {
        /*I start off defining the layouts */
        final VerticalLayout layout = new VerticalLayout();
        final CssLayout cssForBtns = new CssLayout(){
            protected String getCss(Component c){
                if(c instanceof Button){
                return "color: blue; font-size:35px;align:center;text-align:center;padding:10px;margin:20px;margin-left:60px;";
                }
                else return "";
            }

        };
        cssForBtns.setWidth("300px");
        cssForBtns.setHeight("150px"); /*
        here end the layouts. Begin the form.
        */
        final TextField userName = new TextField();
        userName.setCaption("Username:");
        final TextField password = new TextField();
        password.setCaption("Password:");/* here ends the form */

        /* button starts here */
        password.setIcon(FontAwesome.LOCK);
        userName.setIcon(FontAwesome.USER);
        Button logInBtn = new Button("Log in");
        logInBtn.setIcon(FontAwesome.LAPTOP);
        logInBtn.setWidth("60%");
        logInBtn.setHeight("50%");
        logInBtn.addClickListener( e -> {
            /* Here I'd make a method that actually checks whether the user is valid and stuff. So far, it only returns a warning that it's not. */
            logInBtn.setEnabled(false);

            if(password.getValue().equals("rectangle")){
                layout.removeAllComponents();
                CssLayout lay = new CssLayout(){
                    protected String getCss(Component c){
                        return "background:green";
                    }

                };
                int w = 400;
                int h = 400;
                Label rect = new Label(" ",ContentMode.HTML);
                rect.setWidth(Integer.toString(w)+"px");
                rect.setHeight(Integer.toString(h)+"px");
                lay.addComponent(rect);
                Slider vertSlider = new Slider(1,500);
                vertSlider.setOrientation(SliderOrientation.VERTICAL);

                vertSlider.addValueChangeListener(
                        new Property.ValueChangeListener() {
                        public void valueChange(ValueChangeEvent event) {
                            double value = (Double) vertSlider.getValue();
                          rect.setHeight(Double.toString(value)+"px");

                        }
                    });

                Slider horiSlider = new Slider(1,500);
                horiSlider.addValueChangeListener(
                        new Property.ValueChangeListener() {
                        public void valueChange(ValueChangeEvent event) {
                            double value = (Double) horiSlider.getValue();
                          rect.setWidth(Double.toString(value)+"px");

                        }
                    });
                vertSlider.setHeight("400px");
                horiSlider.setWidth("400px");
                HorizontalLayout horiLay = new HorizontalLayout();
                horiLay.addComponents(lay,vertSlider);
                layout.addComponents(horiLay,horiSlider);
                layout.setComponentAlignment(horiLay, Alignment.TOP_CENTER);
                layout.setComponentAlignment(horiSlider, Alignment.TOP_CENTER);

            }
            else if(password.getValue().equals("circle")){
                layout.removeAllComponents();
                TextField colorString = new TextField("","red");
                colorString.setCaption("enter a color and press enter:");

                /*
                 * checkbox1.addValueChangeListener(event -> // Java 8
                    checkbox2.setValue(! checkbox1.getValue()));
                 *
                 * */
                Label someLabel = new Label(" ",ContentMode.HTML);
                someLabel.setWidth("400px");
                someLabel.setHeight("400px");
                String defaultColor = "#00FAFA";
                CssLayout forCircle = new CssLayout(){
                    protected String getCss(Component c){

                        return "border-radius:100%;background:"+defaultColor+";background:"+colorString.getValue()+";";
                    }

                };
                forCircle.addComponents(someLabel);
                colorString.addValueChangeListener(event -> {//it HAS to be called event.
                    forCircle.removeAllComponents();
                    forCircle.addComponent(someLabel);
                });

                VerticalLayout vertiLay = new VerticalLayout();
                vertiLay.addComponents(colorString,new Label("<br/><br/>",ContentMode.HTML),forCircle);
                vertiLay.setComponentAlignment(forCircle, Alignment.BOTTOM_CENTER);
                vertiLay.setComponentAlignment(colorString, Alignment.BOTTOM_CENTER);
                layout.addComponent(vertiLay);
            }
            else {
                layout.removeAllComponents();
                ProgressBar bar = new ProgressBar(0.0f);
                layout.addComponent(bar);
                layout.setComponentAlignment(bar, Alignment.TOP_CENTER);
                layout.addComponent(new Button("Next",
                        new ClickListener() {
                        @Override
                        public void buttonClick(ClickEvent event) {
                            float current = bar.getValue();
                            if (current < 1.0f)
                                {bar.setValue(current + 0.34f);}
                            if(bar.getValue()>= 1.0f) {/* No use of else so that the click that fills the bar activates this sequence */
                                layout.removeAllComponents();
                                Label warningSign = new Label("<br/><div style=\"color:red;text-align:center;\">We're sorry, your username doesn't exist.</div>",ContentMode.HTML);
                                layout.addComponent(warningSign);
                                layout.setComponentAlignment(warningSign, Alignment.BOTTOM_CENTER);
                            }
                        }
                    }));
                layout.setComponentAlignment(layout.getComponent(1), Alignment.BOTTOM_CENTER);
                }

        });
        cssForBtns.addComponent(logInBtn);
        /* the button ends here */

        /* I start adding the stuff to the layout here. */
        layout.addComponents(userName,password, cssForBtns);
        layout.setComponentAlignment(userName, Alignment.MIDDLE_CENTER);
        layout.setComponentAlignment(password, Alignment.MIDDLE_CENTER);
        layout.setComponentAlignment(cssForBtns, Alignment.BOTTOM_CENTER);
        setContent(layout);
    }

    @WebServlet(urlPatterns = "/*", name = "MyUIServlet", asyncSupported = true)
    @VaadinServletConfiguration(ui = MyUI.class, productionMode = false)
    public static class MyUIServlet extends VaadinServlet {
    }
}