Login-page and Register-page UI implemented.

2025-06-29 23:29:55 +03:30
parent c1b14a9159
commit 19fcf525ae
9 changed files with 469 additions and 91 deletions
@@ -0,0 +1,134 @@
+package org.to.telegramfinalproject.UI;
+
+import javafx.animation.PauseTransition;
+import javafx.fxml.FXML;
+import javafx.fxml.FXMLLoader;
+import javafx.scene.Scene;
+import javafx.scene.Parent;
+import javafx.scene.control.*;
+import javafx.stage.Stage;
+import javafx.util.Duration;
+import org.json.JSONObject;
+import org.to.telegramfinalproject.Client.ClientConnection;
+import org.to.telegramfinalproject.Database.userDatabase;
+import org.to.telegramfinalproject.Models.User;
+import org.to.telegramfinalproject.Security.PasswordHashing;
+
+import java.io.IOException;
+
+public class LoginController {
+
+    @FXML private TextField usernameField;
+
+    @FXML private PasswordField passwordField;
+    @FXML private TextField visiblePasswordField;
+
+    @FXML private Button togglePasswordBtn;
+    @FXML private Label errorLabel;
+
+    private ClientConnection connection;
+    private boolean passwordVisible = false;
+
+    @FXML
+    public void initialize() {
+        // Sync hidden and visible password fields
+        visiblePasswordField.textProperty().bindBidirectional(passwordField.textProperty());
+
+        try {
+            connection = new ClientConnection("localhost", 12345);
+        } catch (Exception e) {
+            System.out.println("Could not connect to server: " + e.getMessage());
+        }
+    }
+
+    @FXML
+    private void togglePasswordVisibility() {
+        passwordVisible = !passwordVisible;
+        visiblePasswordField.setVisible(passwordVisible);
+        visiblePasswordField.setManaged(passwordVisible);
+        passwordField.setVisible(!passwordVisible);
+        passwordField.setManaged(!passwordVisible);
+        togglePasswordBtn.setText(passwordVisible ? "👁" : "👁");
+    }
+
+    @FXML
+    private void handleLogin() {
+        String username = usernameField.getText();
+        String password = passwordField.getText();
+
+        // 1. Check for empty fields
+        if (username.isEmpty() || password.isEmpty()) {
+            showError("Please fill in all required fields.");
+            return;
+        }
+
+        // 2. Check if username exists
+        userDatabase userDb = new userDatabase();
+        if (!userDb.existsByUsername(username)) {
+            showError("This username doesn’t exist.");
+            return;
+        }
+
+        // 3. Check if password is correct
+        User user = userDb.findByUsername(username);
+        if (!PasswordHashing.verify(password, user.getPassword())) {
+            showError("Incorrect password.");
+            return;
+        }
+
+        // 4. Attempt to send to server
+        try {
+            JSONObject request = new JSONObject();
+            request.put("action", "login");
+            request.put("user_id", JSONObject.NULL);
+            request.put("username", username);
+            request.put("password", password);
+            request.put("profile_name", JSONObject.NULL);
+
+            if (connection != null) {
+                connection.send(request.toString());
+                String responseStr = connection.receive();
+                JSONObject response = new JSONObject(responseStr);
+                System.out.println("Status: " + response.getString("status"));
+                System.out.println("Message: " + response.getString("message"));
+
+                // Simulate successful login (since main.fxml isn’t ready)
+                Alert alert = new Alert(Alert.AlertType.INFORMATION, "Login successful!");
+                alert.show();
+            }
+
+        } catch (Exception ex) {
+            showError("Unable to connect to server. Please try again later.");
+        }
+    }
+
+    @FXML
+    private void switchToRegister() throws IOException {
+        switchScene("register_view.fxml");
+    }
+
+    private void switchScene(String fxmlFile) {
+        try {
+            FXMLLoader loader = new FXMLLoader(getClass().getResource("/org/to/telegramfinalproject/" + fxmlFile));
+            Parent root = loader.load();
+            Stage stage = (Stage) usernameField.getScene().getWindow();
+            stage.setScene(new Scene(root, 500, 700));
+            stage.show();
+        } catch (IOException e) {
+            e.printStackTrace();
+            showError("Could not load scene: " + fxmlFile);
+        }
+    }
+
+    private void showError(String message) {
+        errorLabel.setVisible(false);
+        errorLabel.setText("");  // Clear the label text
+
+        PauseTransition pause = new PauseTransition(Duration.millis(50));
+        pause.setOnFinished(event -> {
+            errorLabel.setText(message);
+            errorLabel.setVisible(true);
+        });
+        pause.play();
+    }
+}
@@ -0,0 +1,160 @@
+package org.to.telegramfinalproject.UI;
+
+import javafx.animation.PauseTransition;
+import javafx.fxml.FXML;
+import javafx.fxml.FXMLLoader;
+import javafx.scene.Parent;
+import javafx.scene.Scene;
+import javafx.scene.control.*;
+import javafx.stage.Stage;
+import javafx.util.Duration;
+import org.json.JSONObject;
+import org.to.telegramfinalproject.Client.ClientConnection;
+import org.to.telegramfinalproject.Database.userDatabase;
+
+import java.io.IOException;
+
+public class RegisterController {
+
+    @FXML private TextField userIdField;
+    @FXML private TextField usernameField;
+    @FXML private TextField profileNameField;
+
+    @FXML private PasswordField passwordField;
+    @FXML private TextField visiblePasswordField;
+
+    @FXML private PasswordField confirmPasswordField;
+    @FXML private TextField visibleConfirmPasswordField;
+
+    @FXML private Button togglePasswordBtn;
+    @FXML private Button toggleConfirmBtn;
+
+    @FXML private Label errorLabel;
+
+    private ClientConnection connection;
+
+    private boolean passwordVisible = false;
+    private boolean confirmVisible = false;
+
+    @FXML
+    public void initialize() {
+        // Sync password and confirm fields with their visible counterparts
+        visiblePasswordField.textProperty().bindBidirectional(passwordField.textProperty());
+        visibleConfirmPasswordField.textProperty().bindBidirectional(confirmPasswordField.textProperty());
+
+        try {
+            connection = new ClientConnection("localhost", 12345);
+        } catch (Exception e) {
+            System.out.println("Could not connect to server: " + e.getMessage());
+        }
+    }
+
+    @FXML
+    private void togglePasswordVisibility() {
+        passwordVisible = !passwordVisible;
+        visiblePasswordField.setVisible(passwordVisible);
+        visiblePasswordField.setManaged(passwordVisible);
+        passwordField.setVisible(!passwordVisible);
+        passwordField.setManaged(!passwordVisible);
+        togglePasswordBtn.setText(passwordVisible ? "👁" : "👁");
+    }
+
+    @FXML
+    private void toggleConfirmPasswordVisibility() {
+        confirmVisible = !confirmVisible;
+        visibleConfirmPasswordField.setVisible(confirmVisible);
+        visibleConfirmPasswordField.setManaged(confirmVisible);
+        confirmPasswordField.setVisible(!confirmVisible);
+        confirmPasswordField.setManaged(!confirmVisible);
+        toggleConfirmBtn.setText(confirmVisible ? "👁" : "👁");
+    }
+
+    @FXML
+    private void handleRegister() {
+        String userID = userIdField.getText().trim();
+        String username = usernameField.getText().trim();
+        String profileName = profileNameField.getText().trim();
+        String password = passwordField.getText();
+        String confirmPass = confirmPasswordField.getText();
+
+        userDatabase userDb = new userDatabase();
+        String passwordRegex = "\\b(?=[^\\s]*[A-Z])(?=[^\\s]*[a-z])(?=[^\\s]*\\d)(?=[^\\s]*[!@#$%^&*])[^\\s]{8,}\\b";
+
+        // 1. Empty fields
+        if (username.isEmpty() || profileName.isEmpty() || password.isEmpty() || confirmPass.isEmpty()) {
+            showError("Please fill in all required fields.");
+            return;
+        }
+
+        // 2. Username exists
+        if (userDb.existsByUsername(username)) {
+            showError("This username is already taken.");
+            return;
+        }
+
+        // 3. User ID exists (if entered)
+        if (!userID.isEmpty() && userDb.existsByUserId(userID)) {
+            showError("This user ID is already taken.");
+            return;
+        }
+
+        // 4. Password mismatch
+        if (!password.equals(confirmPass)) {
+            showError("Passwords do not match.");
+            return;
+        }
+
+        // 5. Weak password
+        if (!password.matches(passwordRegex)) {
+            showError("Password must be at least 8 characters, include a capital letter, a number, and a special character.");
+            return;
+        }
+
+        // 6. Attempt registration
+        try {
+            JSONObject request = new JSONObject();
+            request.put("action", "register");
+            request.put("user_id", userID.isEmpty() ? JSONObject.NULL : userID);
+            request.put("username", username);
+            request.put("password", password);
+            request.put("profile_name", profileName);
+            connection.send(request.toString());
+
+            Alert alert = new Alert(Alert.AlertType.INFORMATION, "Registration successful!");
+            alert.show();
+
+        } catch (Exception ex) {
+            showError("Failed to register. Please try again later.");
+        }
+    }
+
+    @FXML
+    private void switchToLogin() throws IOException {
+        switchScene("login_view.fxml");
+    }
+
+    private void switchScene(String fxmlFile) {
+        try {
+            FXMLLoader loader = new FXMLLoader(getClass().getResource("/org/to/telegramfinalproject/" + fxmlFile));
+            Parent root = loader.load();
+            Stage stage = (Stage) usernameField.getScene().getWindow(); // Or any node from your current scene
+            stage.setScene(new Scene(root, 500, 700));
+            stage.show();
+        } catch (IOException e) {
+            e.printStackTrace();
+            showError("Could not load scene: " + fxmlFile);
+        }
+    }
+
+    private void showError(String message) {
+        errorLabel.setVisible(false);
+        errorLabel.setText("");  // Clear the label text
+
+        PauseTransition pause = new PauseTransition(Duration.millis(50));
+        pause.setOnFinished(event -> {
+            errorLabel.setText(message);
+            errorLabel.setVisible(true);
+        });
+        pause.play();
+    }
+}
@@ -81,20 +81,14 @@ public class RegisterForm {
                alert.show();
            }
            else {
-                Alert alert = new Alert(Alert.AlertType.ERROR, "Password doesn't Strong enough");
+                Alert alert = new Alert(Alert.AlertType.ERROR, "Password isn't Strong enough");
                alert.show();
            }
-
-
-
-
        });

        backButton.setOnAction(e -> {
            switchScene("login_view.fxml");
        });
-
-
    }

    private void switchScene(String fxmlFile) {
@@ -13,7 +13,7 @@ public class TelegramApplication extends Application {
    @Override
    public void start(Stage stage) throws IOException {
        FXMLLoader fxmlLoader = new FXMLLoader(TelegramApplication.class.getResource("/org/to/telegramfinalproject/Intro.fxml"));
-        Scene scene = new Scene(fxmlLoader.load(), 350, 500);
+        Scene scene = new Scene(fxmlLoader.load(), 1480, 820);
        stage.setTitle("Telegram");
        stage.setScene(scene);
        stage.show();
@@ -25,7 +25,7 @@ public class login_view {
        });

        registerButton.setOnAction(e -> {
-            switchScene("RegisterForm.fxml");
+            switchScene("register_view.fxml");
        });
    }

@@ -1,19 +1,31 @@
 <?xml version="1.0" encoding="UTF-8"?>

-<?import javafx.scene.image.ImageView?>
 <?import javafx.scene.control.*?>
 <?import javafx.scene.layout.*?>
 <?import javafx.geometry.Insets?>
+<?import javafx.scene.shape.Circle?>

-<AnchorPane xmlns:fx="http://javafx.com/fxml" fx:controller="org.to.telegramfinalproject.UI.IntroController">
-    <VBox spacing="20" alignment="CENTER" AnchorPane.topAnchor="0" AnchorPane.bottomAnchor="0" AnchorPane.leftAnchor="0" AnchorPane.rightAnchor="0">
-        <StackPane fx:id="imagePane" prefHeight="300" prefWidth="300"/>
+<StackPane xmlns:fx="http://javafx.com/fxml" fx:controller="org.to.telegramfinalproject.UI.IntroController">
+    <VBox fx:id="rootVBox" alignment="CENTER" spacing="15">
+        <padding>
+            <Insets top="40" right="40" bottom="40" left="40"/>
+        </padding>

-        <Label fx:id="caption" style="-fx-font-size: 14px; -fx-text-alignment: center;" wrapText="true" text=""/>
+        <StackPane fx:id="imagePane" maxWidth="400" maxHeight="250" VBox.vgrow="NEVER" />

-        <HBox fx:id="dotContainer" spacing="8" alignment="CENTER"/>
+        <Label fx:id="caption"
+               style="-fx-font-size: 16px; -fx-text-alignment: center;"
+               wrapText="true"
+               maxWidth="600"
+               alignment="CENTER" />

-        <Button fx:id="startButton" text="Start messaging" onAction="#handleStartMessaging"
-                style="-fx-background-color: #2AABEE; -fx-text-fill: white; -fx-font-weight: bold;"/>
+        <HBox fx:id="dotContainer" spacing="10" alignment="CENTER" />
+
+        <Button fx:id="startButton"
+                text="Start Messaging"
+                onAction="#handleStartMessaging"
+                style="-fx-background-color: #2AABEE; -fx-text-fill: white; -fx-font-weight: bold;"
+                maxWidth="200"
+                minHeight="40" />
    </VBox>
-</AnchorPane>
+</StackPane>
@@ -1,54 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-
-<?import javafx.scene.text.*?>
-<?import java.lang.*?>
-<?import java.util.*?>
-<?import javafx.scene.*?>
-<?import javafx.scene.control.*?>
-<?import javafx.scene.layout.*?>
-
-<AnchorPane prefHeight="709.0" prefWidth="600.0" style="-fx-background-color: linear-gradient(to right, #B39DDB, #81D4FA);" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1" fx:controller="org.to.telegramfinalproject.UI.RegisterForm">
-    <children>
-        <Label layoutX="223.0" layoutY="56.0" text="Register" textAlignment="CENTER" textFill="#fffefe">
-            <font>
-                <Font name="System Bold" size="40.0" />
-            </font>
-        </Label>
-        <Label layoutX="52.0" layoutY="160.0" text="User ID:" textFill="#f5f5f5">
-            <font>
-                <Font name="System Italic" size="36.0" />
-            </font>
-        </Label>
-        <Label layoutX="52.0" layoutY="249.0" text="Username:" textAlignment="CENTER" textFill="#f5efef">
-            <font>
-                <Font name="System Italic" size="36.0" />
-            </font>
-        </Label>
-        <Label layoutX="52.0" layoutY="348.0" text="Profile name:" textAlignment="CENTER" textFill="#f5f5f5">
-            <font>
-                <Font name="System Italic" size="36.0" />
-            </font>
-        </Label>
-        <Label layoutX="46.0" layoutY="442.0" text="Password:" textAlignment="CENTER" textFill="#fffafa">
-            <font>
-                <Font name="System Italic" size="36.0" />
-            </font>
-        </Label>
-        <Label layoutX="27.0" layoutY="535.0" text="Check password:" textFill="WHITE">
-            <font>
-                <Font name="System Italic" size="36.0" />
-            </font>
-        </Label>
-        <TextField fx:id="userIdField" layoutX="294.0" layoutY="167.0" />
-        <TextField fx:id="usernameField" layoutX="294.0" layoutY="256.0" />
-        <TextField fx:id="profileNameField" layoutX="294.0" layoutY="355.0" />
-        <PasswordField fx:id="passwordField" layoutX="294.0" layoutY="449.0" />
-        <PasswordField fx:id="confirmPasswordField" layoutX="294.0" layoutY="542.0" />
-        <Button fx:id="submitButton" layoutX="367.0" layoutY="626.0" mnemonicParsing="false" style="-fx-background-color: #f8bbd0; -fx-background-radius: 12; -fx-border-color: #6a1b9a; -fx-border-radius: 12;" text="Submit" textAlignment="CENTER" textFill="#79195c">
-            <font>
-                <Font name="System Bold" size="18.0" />
-            </font>
-        </Button>
-        <Button fx:id="backButton" layoutX="146.0" layoutY="626.0" mnemonicParsing="false" prefHeight="41.0" prefWidth="87.0" style="-fx-background-color: #f8bbd0; -fx-background-radius: 12; -fx-border-color: #6a1b9a; -fx-border-radius: 12;" text="Back" textFill="#79195c" />
-    </children>
-</AnchorPane>
@@ -1,30 +1,71 @@
 <?xml version="1.0" encoding="UTF-8"?>

-<?import java.lang.*?>
-<?import javafx.scene.text.*?>
-<?import javafx.scene.paint.*?>
+<?import javafx.geometry.Pos?>
 <?import javafx.scene.control.*?>
 <?import javafx.scene.layout.*?>

-<StackPane prefHeight="600.0" prefWidth="800.0" style="-fx-background-color: #f5f5f5;" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1" fx:controller="org.to.telegramfinalproject.UI.login_view">
+<AnchorPane prefHeight="600.0" prefWidth="800.0"
+            xmlns:fx="http://javafx.com/fxml"
+            fx:controller="org.to.telegramfinalproject.UI.LoginController">
+
    <children>
+        <VBox alignment="CENTER" spacing="20"
+              AnchorPane.topAnchor="0.0"
+              AnchorPane.bottomAnchor="0.0"
+              AnchorPane.leftAnchor="0.0"
+              AnchorPane.rightAnchor="0.0">

-        <VBox alignment="CENTER">
-            <children>
-                <AnchorPane prefHeight="596.0" prefWidth="800.0" style="-fx-background-color: linear-gradient(to right, #B39DDB, #81D4FA); -fx-background-radius: 15;">
-                    <children>
-                        <Label layoutX="448.0" layoutY="55.0" text="Telegarm" textAlignment="CENTER" textFill="#ffffff">
-                            <font>
-                                <Font name="System Bold" size="40.0" />
-                            </font>
-                        </Label>
+            <!-- Title -->
+            <Label text="Welcome Back"
+                   style="-fx-font-size: 24px; -fx-font-weight: bold;" />

-                        <Button fx:id="loginButton" layoutX="462.0" layoutY="170.0" prefHeight="50.0" prefWidth="150.0" style="-fx-background-color: #f8bbd0; -fx-text-fill: #6a1b9a; -fx-background-radius: 12; -fx-font-weight: bold;" text="Login" />
+            <!-- Username Field -->
+            <TextField fx:id="usernameField"
+                       promptText="Username"
+                       maxWidth="320"
+                       prefHeight="30"/>

-                        <Button fx:id="registerButton" layoutX="462.0" layoutY="267.0" prefHeight="50.0" prefWidth="150.0" style="-fx-background-color: #f8bbd0; -fx-text-fill: #6a1b9a; -fx-background-radius: 12; -fx-font-weight: bold;" text="Register" />
-                    </children>
-                </AnchorPane>
-            </children>
+            <!-- Password Field with toggle -->
+            <HBox alignment="CENTER" spacing="5" maxWidth="320">
+                <children>
+                    <StackPane>
+                        <children>
+                            <PasswordField fx:id="passwordField"
+                                           promptText="Password"
+                                           prefWidth="290"
+                                           prefHeight="30"/>
+                            <TextField fx:id="visiblePasswordField"
+                                       promptText="Password"
+                                       prefWidth="290"
+                                       prefHeight="30"
+                                       visible="false"
+                                       managed="false"/>
+                        </children>
+                    </StackPane>
+                    <Button fx:id="toggleVisibilityBtn"
+                            text="👁"
+                            prefWidth="30"
+                            prefHeight="30"
+                            style="-fx-background-color: transparent;"
+                            onAction="#togglePasswordVisibility"/>
+                </children>
+            </HBox>
+
+            <!-- Login Button -->
+            <Button text="Login"
+                    maxWidth="150"
+                    onAction="#handleLogin"
+                    style="-fx-background-color: #2AABEE; -fx-text-fill: white; -fx-font-weight: bold;" />
+
+            <!-- Error Label -->
+            <Label fx:id="errorLabel"
+                   textFill="red"
+                   visible="false"/>
+
+            <!-- Hyperlink to Register -->
+            <Hyperlink text="Don't have an account? Create one"
+                       onAction="#switchToRegister"
+                       style="-fx-font-size: 12px;" />
        </VBox>
    </children>
-</StackPane>
+</AnchorPane>
@@ -0,0 +1,91 @@
+<?xml version="1.0" encoding="UTF-8"?>
+
+<?import javafx.scene.control.*?>
+<?import javafx.scene.layout.*?>
+<?import javafx.geometry.Insets?>
+
+<AnchorPane xmlns:fx="http://javafx.com/fxml"
+            fx:controller="org.to.telegramfinalproject.UI.RegisterController"
+            prefWidth="800" prefHeight="600">
+
+    <VBox spacing="15" alignment="CENTER"
+          AnchorPane.topAnchor="0" AnchorPane.bottomAnchor="0"
+          AnchorPane.leftAnchor="0" AnchorPane.rightAnchor="0">
+
+        <Label text="Create Your Account"
+               style="-fx-font-size: 24px; -fx-font-weight: bold;" />
+
+        <TextField fx:id="userIdField"
+                   promptText="User ID (optional)"
+                   prefWidth="320" prefHeight="30"
+                   maxWidth="320"/>
+
+        <TextField fx:id="usernameField"
+                   promptText="Username"
+                   prefWidth="320" prefHeight="30"
+                   maxWidth="320"/>
+
+        <TextField fx:id="profileNameField"
+                   promptText="Profile Name"
+                   prefWidth="320" prefHeight="30"
+                   maxWidth="320"/>
+
+        <!-- Password -->
+        <HBox alignment="CENTER" spacing="5" maxWidth="320">
+            <children>
+                <StackPane>
+                    <children>
+                        <PasswordField fx:id="passwordField"
+                                       promptText="Password"
+                                       prefWidth="300" prefHeight="30"/>
+                        <TextField fx:id="visiblePasswordField"
+                                   promptText="Password"
+                                   prefWidth="300" prefHeight="30"
+                                   visible="false" managed="false"/>
+                    </children>
+                </StackPane>
+                <Button fx:id="togglePasswordBtn"
+                        text="👁"
+                        prefWidth="20" prefHeight="30"
+                        style="-fx-background-color: transparent; -fx-padding: 0;"
+                        onAction="#togglePasswordVisibility"/>
+            </children>
+        </HBox>
+
+        <!-- Confirm Password -->
+        <HBox alignment="CENTER" spacing="5" maxWidth="320">
+            <children>
+                <StackPane>
+                    <children>
+                        <PasswordField fx:id="confirmPasswordField"
+                                       promptText="Confirm Password"
+                                       prefWidth="300" prefHeight="30"/>
+                        <TextField fx:id="visibleConfirmPasswordField"
+                                   promptText="Confirm Password"
+                                   prefWidth="300" prefHeight="30"
+                                   visible="false" managed="false"/>
+                    </children>
+                </StackPane>
+                <Button fx:id="toggleConfirmBtn"
+                        text="👁"
+                        prefWidth="20" prefHeight="30"
+                        style="-fx-background-color: transparent; -fx-padding: 0;"
+                        onAction="#toggleConfirmPasswordVisibility"/>
+            </children>
+        </HBox>
+
+        <Button text="Register"
+                onAction="#handleRegister"
+                style="-fx-background-color: #2AABEE; -fx-text-fill: white; -fx-font-weight: bold;"
+                prefWidth="150" prefHeight="35"/>
+
+        <Label fx:id="errorLabel"
+               textFill="red"
+               visible="false"/>
+
+        <Hyperlink text="Already have an account? Login"
+                   onAction="#switchToLogin"
+                   style="-fx-font-size: 12px;"/>
+
+    </VBox>
+</AnchorPane>