Login-page and Register-page UI implemented.

This commit is contained in:
Asal Lotfi
2025-06-29 23:29:55 +03:30
parent c1b14a9159
commit 19fcf525ae
9 changed files with 469 additions and 91 deletions
@@ -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>