add react native paper

.env

@@ -0,0 +1 @@
+EXPO_PUBLIC_API_URL: "http://127.0.0.1:8000/api"

.gitignore

@@ -33,3 +33,11 @@ yarn-error.*
 
 # typescript
 *.tsbuildinfo
+
+# @generated expo-cli sync-2b81b286409207a5da26e14c78851eb30d8ccbdb
+# The following patterns were generated by expo-cli
+
+expo-env.d.ts
+# @end expo-cli
+
+.gz

.prettierrc

@@ -0,0 +1,23 @@
+{
+  "arrowParens": "always",
+  "bracketSpacing": true,
+  "endOfLine": "lf",
+  "htmlWhitespaceSensitivity": "css",
+  "insertPragma": false,
+  "singleAttributePerLine": false,
+  "bracketSameLine": false,
+  "jsxBracketSameLine": false,
+  "jsxSingleQuote": false,
+  "printWidth": 80,
+  "proseWrap": "preserve",
+  "quoteProps": "as-needed",
+  "requirePragma": false,
+  "semi": true,
+  "singleQuote": false,
+  "tabWidth": 2,
+  "trailingComma": "es5",
+  "useTabs": true,
+  "embeddedLanguageFormatting": "auto",
+  "vueIndentScriptAndStyle": false,
+  "parser": "typescript"
+}

app/(for-not-verified)/_layout.tsx

@@ -5,9 +5,9 @@ import { Redirect, Slot } from "expo-router";
  * Use it on protected screens
  */
 export default function ProtectedLayout() {
-  const [access] = useAuth((state) => [state.access]);
+	const [access] = useAuth((state) => [state.access]);
 
-  if (access) return <Redirect href="/" />;
+	if (access) return <Redirect href="/" />;
 
-  return <Slot />;
+	return <Slot />;
 }

app/(for-not-verified)/login.tsx

@@ -1,10 +1,10 @@
 import {
-  ActivityIndicator,
-  StyleSheet,
-  TouchableOpacity,
-  View,
-  Text,
+	ActivityIndicator,
+	StyleSheet,
+	TouchableOpacity,
+	View,
 } from "react-native";
+import { Text, useTheme } from "react-native-paper";
 import { router } from "expo-router";
 import { useForm } from "react-hook-form";
 import ControlledInput from "../../components/ControlledInput";
@@ -13,80 +13,90 @@ import { CredentialsData } from "../../stores/auth/types";
 import { z } from "zod";
 import { zodResolver } from "@hookform/resolvers/zod";
 import CenteredLayout from "../../components/CenteredLayout/CenteredLayout";
+import { Button } from "react-native-paper";
 
 const defaultValues = { username: "", password: "" };
 
 const loginSchema = z.object({
-  username: z.string().min(1, "Pole jest wymagane"),
-  password: z.string().min(1, "Pole jest wymagane"),
+	username: z.string().min(1, "Pole jest wymagane"),
+	password: z.string().min(1, "Pole jest wymagane"),
 });
 
 export default function TabOneScreen() {
-  const { control, handleSubmit, setError } = useForm({
-    defaultValues,
-    resolver: zodResolver(loginSchema),
-  });
-  const [login, loading] = useAuth((state) => [state.login, state.loading]);
-  const onSubmit = async (credentials: CredentialsData) => {
-    try {
-      await login(credentials);
-    } catch (err) {
-      console.error(err);
-    }
-  };
+	const theme = useTheme();
+	const { control, handleSubmit, setError } = useForm({
+		defaultValues,
+		resolver: zodResolver(loginSchema),
+	});
+	const [login, loading] = useAuth((state) => [state.login, state.loading]);
+	const onSubmit = async (credentials: CredentialsData) => {
+		try {
+			await login(credentials);
+			router.replace("/home");
+		} catch (err) {
+			console.error(err);
+		}
+	};
 
-  return (
-    <CenteredLayout title="Sign in">
-      <ControlledInput
-        placeholder="Enter name"
-        control={control}
-        label="User name"
-        name="username"
-      />
-      <ControlledInput
-        control={control}
-        label="Password"
-        name="password"
-        placeholder="Enter password"
-        secure
-      />
-      <View style={{ alignItems: "flex-end", rowGap: 16 }}>
-        <TouchableOpacity style={{}} onPress={() => router.push("/register")}>
-          <Text style={{ color: "#10663F", justifyContent: "flex-end" }}>
-            Don't have an account?
-            <Text style={{ fontWeight: "bold", color: "#10663F" }}>
-              {" Sign up"}
-            </Text>
-          </Text>
-        </TouchableOpacity>
-        <TouchableOpacity
-          style={styles.button}
-          onPress={handleSubmit(onSubmit)}
-        >
-          <Text style={styles.buttonText}>Enter</Text>
-        </TouchableOpacity>
-        {loading ? <ActivityIndicator /> : null}
-      </View>
-    </CenteredLayout>
-  );
+	return (
+		<CenteredLayout title="Zaloguj się!">
+			<ControlledInput
+				placeholder="[email protected]"
+				control={control}
+				label="Nazwa użytkownika"
+				name="username"
+				iconName="email"
+			/>
+			<ControlledInput
+				control={control}
+				label="Hasło"
+				iconName="key"
+				name="password"
+				placeholder="Podaj hasło"
+				secure
+			/>
+			<View style={{ alignItems: "center", rowGap: 16 }}>
+				<Button
+					mode="contained-tonal"
+					labelStyle={{ fontSize: 20 }}
+					style={{ padding: 4 }}
+					onPress={handleSubmit(onSubmit)}
+				>
+					Gotowe!
+				</Button>
+				{loading ? <ActivityIndicator /> : null}
+				<TouchableOpacity style={{}} onPress={() => router.push("/register")}>
+					<Text variant="headlineSmall" style={{ justifyContent: "flex-end" }}>
+						Nie posiadasz konta?
+					</Text>
+					<Text
+						variant="headlineSmall"
+						style={{ fontWeight: "bold", color: theme.colors.primary }}
+					>
+						{"Zarejestruj się"}
+					</Text>
+				</TouchableOpacity>
+			</View>
+		</CenteredLayout>
+	);
 }
 
 const styles = StyleSheet.create({
-  button: {
-    backgroundColor: "#15CA78",
-    color: "#fff",
-    paddingHorizontal: 12,
-    paddingVertical: 8,
-    borderRadius: 16,
-    elevation: 4,
-    // boxShadow: "0px 4px 4px 0px rgba(0, 0, 0, 0.15)"
-  },
-  buttonText: {
-    color: "#fff",
-  },
-  separator: {
-    marginVertical: 30,
-    height: 1,
-    width: "80%",
-  },
+	button: {
+		backgroundColor: "#15CA78",
+		color: "#fff",
+		paddingHorizontal: 12,
+		paddingVertical: 8,
+		borderRadius: 16,
+		elevation: 4,
+		// boxShadow: "0px 4px 4px 0px rgba(0, 0, 0, 0.15)"
+	},
+	buttonText: {
+		color: "#fff",
+	},
+	separator: {
+		marginVertical: 30,
+		height: 1,
+		width: "80%",
+	},
 });