Login Page redesign

resources/js/admin/mobile/LoginPage.tsx

@@ -123,10 +123,14 @@ export default function MobileLoginPage() {
     (mutation as { isPending?: boolean; isLoading?: boolean }).isPending ??
     (mutation as { isPending?: boolean; isLoading?: boolean }).isLoading ??
     false;
+  const isFormValid = login.trim().length > 0 && password.length > 0;
 
   const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
     event.preventDefault();
     setError(null);
+    if (!isFormValid) {
+      return;
+    }
     mutation.mutate({
       login,
       password,
@@ -228,7 +232,7 @@ export default function MobileLoginPage() {
 
               <Button
                 type="submit"
-                disabled={isSubmitting}
+                disabled={isSubmitting || !isFormValid}
                 height={52}
                 borderRadius={16}
                 backgroundColor={primary}

resources/js/admin/mobile/components/FormControls.tsx

@@ -48,15 +48,18 @@ type MobileSelectProps = React.ComponentPropsWithoutRef<'select'> & ControlProps
 };
 
 export const MobileInput = React.forwardRef<HTMLInputElement, React.ComponentPropsWithoutRef<'input'> & ControlProps>(
-  function MobileInput({ hasError = false, compact = false, style, onChange, ...props }, ref) {
+  function MobileInput({ hasError = false, compact = false, style, onChange, type, ...props }, ref) {
     const { border, surface, text, primary, danger } = useAdminTheme();
     const borderColor = hasError ? danger : border;
     const ringColor = hasError ? withAlpha(danger, 0.18) : withAlpha(primary, 0.18);
+    const isPassword = type === 'password';
 
     return (
       <Input
         ref={ref as React.Ref<any>}
         {...props}
+        type={type}
+        secureTextEntry={isPassword}
         onChangeText={(value) => {
           onChange?.({ target: { value } } as React.ChangeEvent<HTMLInputElement>);
         }}