JZUVjWiX

1import android.os.Bundle
2import android.widget.Toast
3import androidx.activity.ComponentActivity
4import androidx.activity.compose.setContent
5import androidx.compose.foundation.layout.*
6import androidx.compose.foundation.text.KeyboardOptions
7import androidx.compose.material3.*
8import androidx.compose.runtime.Composable
9import androidx.compose.runtime.*
10import androidx.compose.ui.Alignment
11import androidx.compose.ui.Modifier
12import androidx.compose.ui.platform.LocalContext
13import androidx.compose.ui.res.painterResource
14import androidx.compose.ui.text.input.KeyboardType
15import androidx.compose.ui.text.input.PasswordVisualTransformation
16import androidx.compose.ui.text.input.VisualTransformation
17import androidx.compose.ui.unit.*
18import edu.example.lecture.ui.theme.LectureTheme
19
20class MainActivity : ComponentActivity() {
21    override fun onCreate(savedInstanceState: Bundle?) {
22        super.onCreate(savedInstanceState)
23        setContent {
24            LectureTheme {
25                Surface {
26                    SignUpScreen()
27                }
28            }
29        }
30    }
31}
32
33@Composable
34fun SignUpScreen() {
35    var username by remember { mutableStateOf("") }
36    var email by remember { mutableStateOf("") }
37    var password by remember { mutableStateOf("") }
38    var confirmPassword by remember { mutableStateOf("") }
39    var passwordVisible by remember { mutableStateOf(false) }
40    var confirmPasswordVisible by remember { mutableStateOf(false) }
41
42    val context = LocalContext.current
43
44    Column(
45        modifier = Modifier
46            .fillMaxSize()
47            .padding(24.dp),
48        horizontalAlignment = Alignment.CenterHorizontally
49    ) {
50        Spacer(modifier = Modifier.height(48.dp))
51
52        // Title
53        Text(
54            text = "Sign Up",
55            fontSize = 24.sp,
56            style = MaterialTheme.typography.headlineLarge,
57            color = MaterialTheme.colorScheme.primary,
58            modifier = Modifier.padding(bottom = 32.dp),
59        )
60
61        // Input Fields
62        OutlinedTextField(
63            value = username,
64            onValueChange = { username = it },
65            label = { Text("Username") },
66            modifier = Modifier.fillMaxWidth()
67        )
68
69        Spacer(modifier = Modifier.height(16.dp))
70
71        OutlinedTextField(
72            value = email,
73            onValueChange = { email = it },
74            label = { Text("Email") },
75            keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Email),
76            modifier = Modifier.fillMaxWidth()
77        )
78
79        Spacer(modifier = Modifier.height(16.dp))
80
81        OutlinedTextField(
82            value = password,
83            onValueChange = { password = it },
84            label = { Text("Password") },
85            visualTransformation = if (passwordVisible) VisualTransformation.None else PasswordVisualTransformation(),
86            trailingIcon = {
87                TextButton(
88                    onClick = { passwordVisible = !passwordVisible },
89                    contentPadding = PaddingValues(horizontal = 8.dp)
90                ) {
91                    Text(
92                        text = if (passwordVisible) "Hide" else "Show",
93                        style = MaterialTheme.typography.bodyMedium
94                    )
95                }
96            },
97            modifier = Modifier.fillMaxWidth()
98        )
99
100        Spacer(modifier = Modifier.height(16.dp))
101
102        OutlinedTextField(
103            value = confirmPassword,
104            onValueChange = { confirmPassword = it },
105            label = { Text("Confirm Password") },
106            visualTransformation = if (confirmPasswordVisible) VisualTransformation.None else PasswordVisualTransformation(),
107            trailingIcon = {
108                TextButton(
109                    onClick = { confirmPasswordVisible = !confirmPasswordVisible },
110                    contentPadding = PaddingValues(horizontal = 8.dp)
111                ) {
112                    Text(
113                        text = if (confirmPasswordVisible) "Hide" else "Show",
114                        style = MaterialTheme.typography.bodyMedium
115                    )
116                }
117            },
118            modifier = Modifier.fillMaxWidth()
119        )
120
121        Spacer(modifier = Modifier.height(32.dp))
122
123        // Sign Up Button
124        Button(
125            onClick = {
126                Toast.makeText(context, "Not Implemented", Toast.LENGTH_SHORT).show()
127            },
128            modifier = Modifier.fillMaxWidth()
129        ) {
130            Text("Sign Up")
131        }
132
133        Spacer(modifier = Modifier.height(24.dp))
134
135        // "or with" divider
136        Row(
137            verticalAlignment = Alignment.CenterVertically,
138            modifier = Modifier.fillMaxWidth()
139        ) {
140            HorizontalDivider(modifier = Modifier.weight(1f))
141            Text(
142                text = "or with",
143                modifier = Modifier.padding(horizontal = 50.dp),
144            )
145            HorizontalDivider(modifier = Modifier.weight(1f))
146        }
147
148        Spacer(modifier = Modifier.height(24.dp))
149
150        Row(
151            horizontalArrangement = Arrangement.spacedBy(24.dp),
152            modifier = Modifier.padding(bottom = 24.dp)
153        ) {
154            // Social login buttons here
155            SocialIcons(R.drawable.ic_google, "Google")
156            SocialIcons(R.drawable.ic_facebook, "Facebook")
157            SocialIcons(R.drawable.ic_x, "Twitter")
158        }
159
160        Row(
161            modifier = Modifier.padding(top = 8.dp),
162            verticalAlignment = Alignment.CenterVertically
163        ) {
164            Text("Already have an account? ")
165            TextButton(
166                onClick = {
167                    Toast.makeText(context, "Not Implemented", Toast.LENGTH_SHORT).show()
168                }
169            ) {
170                Text("Sign In")
171            }
172        }
173    }
174}
175
176@Composable
177fun SocialIcons(icon: Int, description: String) {
178    Icon(
179        painter = painterResource(id = icon),
180        contentDescription = description,
181        modifier = Modifier.size(32.dp),
182        tint = MaterialTheme.colorScheme.primary
183    )
184}