Login-page and Register-page UI implemented.
This commit is contained in:
@@ -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>
|
||||
Reference in New Issue
Block a user