improve auth ui

apps/mobile/src/screens/settings/client/AccountSettings/AccountLogin.tsx

@@ -1,16 +1,12 @@
-import { useNavigation } from '@react-navigation/native';
 import { MotiView } from 'moti';
 import { AppleLogo, GithubLogo, GoogleLogo, IconProps } from 'phosphor-react-native';
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
 import { Text, View } from 'react-native';
 import { LinearTransition } from 'react-native-reanimated';
-import { getAuthorisationURLWithQueryParamsAndSetState } from 'supertokens-web-js/recipe/thirdparty';
 import Card from '~/components/layout/Card';
 import ScreenContainer from '~/components/layout/ScreenContainer';
 import { Button } from '~/components/primitive/Button';
-import { toast } from '~/components/primitive/Toast';
 import { tw, twStyle } from '~/lib/tailwind';
-import { SettingsStackScreenProps } from '~/navigation/tabs/SettingsStack';
 
 import Login from './Login';
 import Register from './Register';
@@ -106,7 +102,7 @@ const AccountLogin = () => {
 		<ScreenContainer scrollview={false} style={tw`gap-2 px-6`}>
 			<View style={tw`flex flex-col justify-between gap-5 lg:flex-row`}>
 				<Card style={tw`relative flex w-full flex-col items-center justify-center !p-0`}>
-					<View style={tw`flex w-full flex-row gap-x-2`}>
+					<View style={tw`flex w-full flex-row gap-x-1.5`}>
 						{AccountTabs.map((text) => (
 							<Button
 								key={text}
@@ -114,16 +110,14 @@ const AccountLogin = () => {
 									setActiveTab(text);
 								}}
 								style={twStyle(
-									'relative flex-1 border-b border-app-line p-2.5 text-center',
+									'relative flex-1 border-b border-app-line/50 p-2 text-center',
 									text === 'Login' ? 'rounded-tl-md' : 'rounded-tr-md'
 								)}
 							>
 								<Text
 									style={twStyle(
-										'relative z-10 text-sm transition-colors duration-200',
-										text === activeTab
-											? 'font-medium text-ink'
-											: 'text-ink-faint'
+										'relative z-10 text-sm transition-colors',
+										text === activeTab ? 'font-bold text-ink' : 'text-ink-faint'
 									)}
 								>
 									{text}
@@ -134,16 +128,16 @@ const AccountLogin = () => {
 											borderRadius: text === 'Login' ? 0.3 : 0
 										}}
 										layout={LinearTransition.duration(200)}
-										style={tw`absolute inset-x-0 top-0 z-0 size-full bg-app-line/60`}
+										style={tw`absolute inset-x-0 top-0 z-0 bg-app-line/60`}
 									/>
 								)}
 							</Button>
 						))}
 					</View>
-					<View style={tw`flex w-full flex-col justify-center gap-1.5 p-5`}>
+					<View style={tw`mt-3 flex w-full flex-col justify-center gap-1.5`}>
 						{activeTab === 'Login' ? <Login /> : <Register />}
 						{/* Disabled for now */}
-						{/* <View style={tw`my-2 flex w-full items-center gap-3`}>
+						{/* <View style={tw`flex items-center w-full gap-3 my-2`}>
 							<Divider />
 							<Text style={tw`text-xs text-ink-faint`}>OR</Text>
 							<Divider />
@@ -154,7 +148,7 @@ const AccountLogin = () => {
 									variant="outline"
 									onPress={async () => await socialLoginHandlers(social.name)}
 									key={social.name}
-									style={tw`rounded-full border border-app-line bg-app-input p-3`}
+									style={tw`p-3 border rounded-full border-app-line bg-app-input`}
 								>
 									<social.icon style={tw`text-white`} weight="bold" />
 								</Button>

apps/mobile/src/screens/settings/client/AccountSettings/AccountProfile.tsx

@@ -30,6 +30,7 @@ const AccountProfile = () => {
 	const emailName = userInfo ? userInfo.email.split('@')[0] : '';
 	const capitalizedEmailName = (emailName?.charAt(0).toUpperCase() ?? '') + emailName?.slice(1);
 	const navigator = useNavigation<SettingsStackScreenProps<'AccountLogin'>['navigation']>();
+
 	function signOut() {
 		fetch(`${AUTH_SERVER_URL}/api/auth/signout`, {
 			method: 'POST'

apps/mobile/src/screens/settings/client/AccountSettings/Login.tsx

@@ -8,7 +8,7 @@ import { useZodForm } from '@sd/client';
 import { Button } from '~/components/primitive/Button';
 import { Input } from '~/components/primitive/Input';
 import { toast } from '~/components/primitive/Toast';
-import { tw } from '~/lib/tailwind';
+import { tw, twStyle } from '~/lib/tailwind';
 import { SettingsStackScreenProps } from '~/navigation/tabs/SettingsStack';
 import { AUTH_SERVER_URL } from '~/utils';
 
@@ -109,15 +109,18 @@ const Login = () => {
 					control={form.control}
 					name="email"
 					render={({ field }) => (
-						<View style={tw`relative flex items-center justify-end`}>
+						<View style={tw`relative flex items-start`}>
 							<Input
 								{...field}
 								placeholder="Email"
-								style={tw`w-full`}
+								style={twStyle(
+									`w-full`,
+									form.formState.errors.email && 'border-red-500'
+								)}
 								onChangeText={field.onChange}
 							/>
 							{form.formState.errors.email && (
-								<Text style={tw`text-xs text-red-500`}>
+								<Text style={tw`my-1 text-xs text-red-500`}>
 									{form.formState.errors.email.message}
 								</Text>
 							)}
@@ -128,16 +131,19 @@ const Login = () => {
 					control={form.control}
 					name="password"
 					render={({ field }) => (
-						<View style={tw`relative flex items-center justify-end`}>
+						<View style={tw`relative flex items-start`}>
 							<Input
 								{...field}
 								placeholder="Password"
-								style={tw`w-full`}
+								style={twStyle(
+									`w-full`,
+									form.formState.errors.password && 'border-red-500'
+								)}
 								onChangeText={field.onChange}
 								secureTextEntry={!showPassword}
 							/>
 							{form.formState.errors.password && (
-								<Text style={tw`text-xs text-red-500`}>
+								<Text style={tw`my-1 text-xs text-red-500`}>
 									{form.formState.errors.password.message}
 								</Text>
 							)}
@@ -156,7 +162,7 @@ const Login = () => {
 					})}
 					disabled={form.formState.isSubmitting}
 				>
-					<Text>Submit</Text>
+					<Text style={tw`font-bold text-white`}>Submit</Text>
 				</Button>
 			</View>
 		</View>

apps/mobile/src/screens/settings/client/AccountSettings/Register.tsx

@@ -3,13 +3,11 @@ import { useNavigation } from '@react-navigation/native';
 import { useState } from 'react';
 import { Controller, useForm } from 'react-hook-form';
 import { Text, View } from 'react-native';
-import { signUp } from 'supertokens-web-js/recipe/emailpassword';
 import { z } from 'zod';
-import { telemetryState } from '@sd/client';
 import { Button } from '~/components/primitive/Button';
 import { Input } from '~/components/primitive/Input';
 import { toast } from '~/components/primitive/Toast';
-import { tw } from '~/lib/tailwind';
+import { tw, twStyle } from '~/lib/tailwind';
 import { SettingsStackScreenProps } from '~/navigation/tabs/SettingsStack';
 import { AUTH_SERVER_URL } from '~/utils';
 
@@ -108,7 +106,12 @@ const Register = () => {
 				control={form.control}
 				name="email"
 				render={({ field }) => (
-					<Input {...field} placeholder="Email" onChangeText={field.onChange} />
+					<Input
+						{...field}
+						style={twStyle(`w-full`, form.formState.errors.email && 'border-red-500')}
+						placeholder="Email"
+						onChangeText={field.onChange}
+					/>
 				)}
 			/>
 			{form.formState.errors.email && (
@@ -122,7 +125,10 @@ const Register = () => {
 						<Input
 							{...field}
 							placeholder="Password"
-							style={tw`w-full`}
+							style={twStyle(
+								`w-full`,
+								form.formState.errors.password && 'border-red-500'
+							)}
 							onChangeText={field.onChange}
 							secureTextEntry={!showPassword}
 						/>
@@ -138,14 +144,22 @@ const Register = () => {
 				control={form.control}
 				name="confirmPassword"
 				render={({ field }) => (
-					<View style={tw`relative flex items-center justify-center`}>
+					<View style={tw`relative flex items-start`}>
 						<Input
 							{...field}
 							placeholder="Confirm Password"
-							style={tw`w-full`}
+							style={twStyle(
+								`w-full`,
+								form.formState.errors.confirmPassword && 'border-red-500'
+							)}
 							onChangeText={field.onChange}
 							secureTextEntry={!showPassword}
 						/>
+						{form.formState.errors.confirmPassword && (
+							<Text style={tw`my-1 text-xs text-red-500`}>
+								{form.formState.errors.confirmPassword.message}
+							</Text>
+						)}
 						<ShowPassword
 							showPassword={showPassword}
 							setShowPassword={setShowPassword}
@@ -154,21 +168,15 @@ const Register = () => {
 					</View>
 				)}
 			/>
-			{form.formState.errors.confirmPassword && (
-				<Text style={tw`text-xs text-red-500`}>
-					{form.formState.errors.confirmPassword.message}
-				</Text>
-			)}
 			<Button
 				style={tw`mx-auto mt-2 w-full`}
 				variant="accent"
-				onPress={form.handleSubmit(async (data) => {
-					console.log(data);
-					await signUpClicked(data.email, data.password, navigator);
-				})}
+				onPress={form.handleSubmit(
+					async (data) => await signUpClicked(data.email, data.password, navigator)
+				)}
 				disabled={form.formState.isSubmitting}
 			>
-				<Text>Submit</Text>
+				<Text style={tw`font-bold text-white`}>Submit</Text>
 			</Button>
 		</View>
 	);

apps/mobile/src/screens/settings/client/AccountSettings/ShowPassword.tsx

@@ -1,5 +1,5 @@
 import { Eye, EyeClosed } from 'phosphor-react-native';
-import { Text, View } from 'react-native';
+import { Text } from 'react-native';
 import { Button } from '~/components/primitive/Button';
 import { tw } from '~/lib/tailwind';
 
@@ -11,20 +11,18 @@ interface Props {
 
 const ShowPassword = ({ showPassword, setShowPassword, plural }: Props) => {
 	return (
-		<View style={tw`pt-2`}>
-			<Button
-				variant="gray"
-				style={tw`flex size-6 flex-row items-center justify-center gap-2 !p-0`}
-				onPressIn={() => setShowPassword(!showPassword)}
-			>
-				{!showPassword ? (
-					<EyeClosed size={12} color="white" />
-				) : (
-					<Eye size={12} color="white" />
-				)}
-				<Text style={tw`text-ink`}>Show Password{plural ? 's' : ''}</Text>
-			</Button>
-		</View>
+		<Button
+			variant="gray"
+			style={tw`mt-1.5 flex w-full flex-row items-center justify-center gap-2`}
+			onPressIn={() => setShowPassword(!showPassword)}
+		>
+			{!showPassword ? (
+				<EyeClosed size={14} color="white" />
+			) : (
+				<Eye size={14} color="white" />
+			)}
+			<Text style={tw`font-bold text-ink`}>Show Password{plural ? 's' : ''}</Text>
+		</Button>
 	);
 };