RSSNext
diff --git a/‎apps/desktop/layer/renderer/src/modules/auth/LoginModalContent.tsx
Copy file name to clipboard
+4-4Lines changed: 4 additions & 4 deletions b/‎apps/desktop/layer/renderer/src/modules/auth/LoginModalContent.tsx
Copy file name to clipboard
+4-4Lines changed: 4 additions & 4 deletions
diff --git a/‎apps/mobile/src/icons/left_small_sharp.tsx
Copy file name to clipboard
+24Lines changed: 24 additions & 0 deletions b/‎apps/mobile/src/icons/left_small_sharp.tsx
Copy file name to clipboard
+24Lines changed: 24 additions & 0 deletions
diff --git a/‎apps/mobile/src/icons/right_small_sharp.tsx
Copy file name to clipboard
+24Lines changed: 24 additions & 0 deletions b/‎apps/mobile/src/icons/right_small_sharp.tsx
Copy file name to clipboard
+24Lines changed: 24 additions & 0 deletions
diff --git a/‎apps/mobile/src/lib/auth.ts
Copy file name to clipboard
+10-1Lines changed: 10 additions & 1 deletion b/‎apps/mobile/src/lib/auth.ts
Copy file name to clipboard
+10-1Lines changed: 10 additions & 1 deletion
diff --git a/‎apps/mobile/src/modules/login/email.tsx
Copy file name to clipboard
+149-15Lines changed: 149 additions & 15 deletions b/‎apps/mobile/src/modules/login/email.tsx
Copy file name to clipboard
+149-15Lines changed: 149 additions & 15 deletions
@@ -76,7 +76,7 @@ export const LoginModalContent = (props: LoginModalContentProps) => {
                   loginHandler(key, "app")
                 }
               }}
-              className="center hover:bg-material-medium relative w-full gap-2 rounded-xl border p-2.5 pl-5 font-semibold duration-200"
+              className="center hover:bg-material-medium relative w-full gap-2 rounded-xl border py-3 pl-5 font-semibold duration-200"
             >
               <img
                 className="absolute left-9 h-5 dark:brightness-[0.85] dark:hue-rotate-180 dark:invert"
@@ -89,11 +89,11 @@ export const LoginModalContent = (props: LoginModalContentProps) => {
       )}
       <Divider className="mb-5 mt-6" />
       {isEmail ? (
-        <div className="pb-2 text-center" onClick={() => setIsEmail(false)}>
-          Back
+        <div className="pb-2 text-center font-medium" onClick={() => setIsEmail(false)}>
+          {t("login.back")}
         </div>
       ) : (
-        <div className="pb-2 text-center" onClick={() => setIsRegister(!isRegister)}>
+        <div className="pb-2 text-center font-medium" onClick={() => setIsRegister(!isRegister)}>
           <Trans
             t={t}
             i18nKey={isRegister ? "login.have_account" : "login.no_account"}
 
@@ -0,0 +1,24 @@
+import * as React from "react"
+import Svg, { Path } from "react-native-svg"
+
+interface LeftSmallSharpIconProps {
+  width?: number
+  height?: number
+  color?: string
+}
+
+export const LeftSmallSharpIcon = ({
+  width = 24,
+  height = 24,
+  color = "#10161F",
+}: LeftSmallSharpIconProps) => {
+  return (
+    <Svg width={width} height={height} fill="none" viewBox="0 0 24 24">
+      <Path
+        d="M11.22 10.24 9.46 12l1.77 1.77L13 15.54l.35-.35.35-.35-1.42-1.42L10.86 12l1.42-1.42 1.419-1.419-.339-.341a4.49 4.49 0 0 0-.359-.34c-.012 0-.813.792-1.781 1.76"
+        fill={color}
+        fillRule="evenodd"
+      />
+    </Svg>
+  )
+}
@@ -0,0 +1,24 @@
+import * as React from "react"
+import Svg, { Path } from "react-native-svg"
+
+interface RightSmallSharpIconProps {
+  width?: number
+  height?: number
+  color?: string
+}
+
+export const RightSmallSharpIcon = ({
+  width = 24,
+  height = 24,
+  color = "#10161F",
+}: RightSmallSharpIconProps) => {
+  return (
+    <Svg width={width} height={height} fill="none" viewBox="0 0 24 24">
+      <Path
+        d="m10.64 8.82-.339.341 1.419 1.419L13.14 12l-1.42 1.42-1.42 1.42.35.35.35.35 1.77-1.77L14.54 12l-1.76-1.76c-.968-.968-1.769-1.76-1.781-1.76a4.49 4.49 0 0 0-.359.34"
+        fill={color}
+        fillRule="evenodd"
+      />
+    </Svg>
+  )
+}
@@ -5,6 +5,7 @@ import { inferAdditionalFields, twoFactorClient } from "better-auth/client/plugi
 import { createAuthClient } from "better-auth/react"
 import type { BetterAuthClientPlugin } from "better-auth/types"
 import * as SecureStore from "expo-secure-store"
+import { Platform } from "react-native"
 
 import { isNewUserQueryKey } from "../store/user/constants"
 import { whoamiQueryKey } from "../store/user/hooks"
@@ -91,12 +92,20 @@ export interface AuthProvider {
   id: string
   color: string
   icon: string
+  icon64: string
+  iconDark64?: string
 }
 
 export const useAuthProviders = () => {
   return useQuery({
     queryKey: ["providers"],
-    queryFn: async () => (await getProviders()).data,
+    queryFn: async () => {
+      const data = (await getProviders()).data as Record<string, AuthProvider>
+      if (Platform.OS !== "ios") {
+        delete data.apple
+      }
+      return data
+    },
   })
 }
 
 
@@ -1,18 +1,22 @@
 import { tracker } from "@follow/tracker"
+import { zodResolver } from "@hookform/resolvers/zod"
 import { useMutation } from "@tanstack/react-query"
 import { useCallback, useRef } from "react"
+import type { Control } from "react-hook-form"
+import { useController, useForm } from "react-hook-form"
+import type { TextInputProps } from "react-native"
 import { Alert, Text, TouchableOpacity, View } from "react-native"
 import { KeyboardController } from "react-native-keyboard-controller"
 import { z } from "zod"
 
 import { SubmitButton } from "@/src/components/common/SubmitButton"
 import { PlainTextField } from "@/src/components/ui/form/TextField"
-import { signIn } from "@/src/lib/auth"
+import { signIn, signUp } from "@/src/lib/auth"
 import { useNavigation } from "@/src/lib/navigation/hooks"
 import { Navigation } from "@/src/lib/navigation/Navigation"
+import { toast } from "@/src/lib/toast"
 import { getTokenHeaders } from "@/src/lib/token"
 import { ForgetPasswordScreen } from "@/src/screens/(modal)/ForgetPasswordScreen"
-import { SignUpScreen } from "@/src/screens/(modal)/SignUpScreen"
 import { TwoFactorAuthScreen } from "@/src/screens/(modal)/TwoFactorAuthScreen"
 import { accentColor } from "@/src/theme/colors"
 
@@ -117,24 +121,154 @@ export function EmailLogin() {
         </View>
       </View>
 
+      <TouchableOpacity
+        className="mx-auto my-5"
+        onPress={() => navigation.presentControllerView(ForgetPasswordScreen)}
+      >
+        <Text className="text-secondary-label text-sm">Forgot password?</Text>
+      </TouchableOpacity>
+      <SubmitButton isLoading={submitMutation.isPending} onPress={onLogin} title="Continue" />
+    </View>
+  )
+}
+
+// Signup
+
+const signupFormSchema = z
+  .object({
+    email: z.string().email(),
+    password: z.string().min(8).max(128),
+    confirmPassword: z.string(),
+  })
+  .refine((data) => data.password === data.confirmPassword, {
+    message: "Passwords don't match",
+    path: ["confirmPassword"],
+  })
+
+type SignupFormValue = z.infer<typeof signupFormSchema>
+
+function SignupInput({
+  control,
+  name,
+  ...rest
+}: TextInputProps & {
+  control: Control<SignupFormValue>
+  name: keyof SignupFormValue
+}) {
+  const { field } = useController({
+    control,
+    name,
+  })
+  return (
+    <PlainTextField
+      selectionColor={accentColor}
+      {...rest}
+      value={field.value}
+      onChangeText={field.onChange}
+    />
+  )
+}
+
+export function EmailSignUp() {
+  const { control, handleSubmit, formState } = useForm<SignupFormValue>({
+    resolver: zodResolver(signupFormSchema),
+    defaultValues: {
+      email: "",
+      password: "",
+      confirmPassword: "",
+    },
+  })
+
+  const submitMutation = useMutation({
+    mutationFn: async (values: SignupFormValue) => {
+      await signUp
+        .email(
+          {
+            email: values.email,
+            password: values.password,
+            name: values.email.split("@")[0] ?? "",
+          },
+          {
+            headers: await getTokenHeaders(),
+          },
+        )
+        .then((res) => {
+          if (res.error?.message) {
+            toast.error(res.error.message)
+          } else {
+            toast.success("Sign up successful")
+            tracker.register({ type: "email" })
+            Navigation.rootNavigation.back()
+          }
+        })
+    },
+  })
+
+  const signup = handleSubmit((values) => {
+    submitMutation.mutate(values)
+  })
+
+  return (
+    <View className="mx-auto flex w-full max-w-sm">
+      <View className="bg-secondary-system-background gap-4 rounded-2xl px-6 py-4">
+        <View className="flex-row">
+          <SignupInput
+            hitSlop={20}
+            autoCapitalize="none"
+            autoCorrect={false}
+            keyboardType="email-address"
+            autoComplete="email"
+            control={control}
+            name="email"
+            placeholder="Email"
+            className="text-text flex-1"
+            returnKeyType="next"
+            onSubmitEditing={() => {
+              KeyboardController.setFocusTo("next")
+            }}
+          />
+        </View>
+        <View className="border-b-opaque-separator border-b-hairline" />
+        <View className="flex-row">
+          <SignupInput
+            hitSlop={20}
+            autoCapitalize="none"
+            autoCorrect={false}
+            autoComplete="password-new"
+            control={control}
+            name="password"
+            placeholder="Password"
+            className="text-text flex-1"
+            secureTextEntry
+            returnKeyType="next"
+          />
+        </View>
+        <View className="border-b-opaque-separator border-b-hairline" />
+        <View className="flex-row">
+          <SignupInput
+            hitSlop={20}
+            autoCapitalize="none"
+            autoCorrect={false}
+            autoComplete="password-new"
+            control={control}
+            name="confirmPassword"
+            placeholder="Confirm Password"
+            className="text-text flex-1"
+            secureTextEntry
+            returnKeyType="go"
+            onSubmitEditing={() => {
+              signup()
+            }}
+          />
+        </View>
+      </View>
       <SubmitButton
+        disabled={submitMutation.isPending || !formState.isValid}
         isLoading={submitMutation.isPending}
-        onPress={onLogin}
+        onPress={signup}
         title="Continue"
         className="mt-8"
       />
-      <TouchableOpacity
-        className="mx-auto mt-10"
-        onPress={() => navigation.presentControllerView(SignUpScreen)}
-      >
-        <Text className="text-accent m-1 text-[15px]">Don't have an account?</Text>
-      </TouchableOpacity>
-      <TouchableOpacity
-        className="mx-auto mt-4"
-        onPress={() => navigation.presentControllerView(ForgetPasswordScreen)}
-      >
-        <Text className="text-secondary-label m-[6] text-[15px]">Forgot password?</Text>
-      </TouchableOpacity>
     </View>
   )
 }