feat(mobile): improve splash screen, add logo to login screen

SFTtech · Jan 4, 2024 · 9ee6207 · 9ee6207
1 parent 22c0124
commit 9ee6207
Show file tree

Hide file tree

Showing 8 changed files with 36 additions and 17 deletions.
diff --git a/frontend/apps/mobile/.gitignore b/frontend/apps/mobile/.gitignore
@@ -0,0 +1 @@
+assets
diff --git a/frontend/apps/mobile/project.json b/frontend/apps/mobile/project.json
@@ -4,9 +4,16 @@
     "sourceRoot": "apps/mobile/src",
     "projectType": "application",
     "targets": {
+        "collect-assets": {
+            "executor": "nx:run-commands",
+            "options": {
+                "commands": ["mkdir -p apps/mobile/src/assets", "cp -rf assets/* apps/mobile/src/assets/"],
+                "parallel": false
+            }
+        },
         "start": {
             "executor": "@nx/react-native:start",
-            "dependsOn": ["ensure-symlink", "sync-deps", "pod-install"],
+            "dependsOn": ["ensure-symlink", "sync-deps", "pod-install", "collect-assets"],
             "options": {
                 "port": 8081
             }
@@ -19,12 +26,12 @@
         },
         "run-ios": {
             "executor": "@nx/react-native:run-ios",
-            "dependsOn": ["ensure-symlink", "sync-deps", "pod-install"],
+            "dependsOn": ["ensure-symlink", "sync-deps", "pod-install", "collect-assets"],
             "options": {}
         },
         "bundle-ios": {
             "executor": "@nx/react-native:bundle",
-            "dependsOn": ["ensure-symlink"],
+            "dependsOn": ["ensure-symlink", "collect-assets"],
             "outputs": ["{options.bundleOutput}"],
             "options": {
                 "entryFile": "src/main.tsx",
@@ -34,7 +41,7 @@
         },
         "run-android": {
             "executor": "@nx/react-native:run-android",
-            "dependsOn": ["ensure-symlink", "sync-deps"],
+            "dependsOn": ["ensure-symlink", "sync-deps", "collect-assets"],
             "options": {}
         },
         "build-android": {
@@ -43,13 +50,13 @@
                 "{projectRoot}/android/app/build/outputs/bundle",
                 "{projectRoot}/android/app/build/outputs/apk"
             ],
-            "dependsOn": ["ensure-symlink", "sync-deps"],
+            "dependsOn": ["ensure-symlink", "sync-deps", "collect-assets"],
             "options": {}
         },
         "build-ios": {
             "executor": "@nx/react-native:build-ios",
             "outputs": ["{projectRoot}/ios/build/Build"],
-            "dependsOn": ["ensure-symlink", "sync-deps", "pod-install"],
+            "dependsOn": ["ensure-symlink", "sync-deps", "pod-install", "collect-assets"],
             "options": {}
         },
         "pod-install": {
@@ -58,7 +65,7 @@
         },
         "bundle-android": {
             "executor": "@nx/react-native:bundle",
-            "dependsOn": ["ensure-symlink"],
+            "dependsOn": ["ensure-symlink", "collect-assets"],
             "outputs": ["{options.bundleOutput}"],
             "options": {
                 "entryFile": "src/main.tsx",

diff --git a/frontend/apps/mobile/src/App.tsx b/frontend/apps/mobile/src/App.tsx
@@ -15,10 +15,10 @@ import { SafeAreaProvider } from "react-native-safe-area-context";
 import MaterialIcons from "react-native-vector-icons/MaterialIcons";
 import { ApiProvider } from "./core/ApiProvider";
 import { createApi } from "./core/api";
-import useColorScheme from "./hooks/useColorScheme";
+import { useColorScheme } from "./hooks/useColorScheme";
 import { Navigation } from "./navigation";
 import { NotificationProvider } from "./notifications";
-import SplashScreen from "./screens/SplashScreen";
+import { SplashScreen } from "./screens/SplashScreen";
 import {
     selectAuthSlice,
     selectSettingsSlice,

diff --git a/frontend/apps/mobile/src/AppWrapper.tsx b/frontend/apps/mobile/src/AppWrapper.tsx
@@ -3,7 +3,7 @@ import "react-native-gesture-handler";
 import { Provider } from "react-redux";
 import { PersistGate } from "redux-persist/integration/react";
 import { App } from "./App";
-import SplashScreen from "./screens/SplashScreen";
+import { SplashScreen } from "./screens/SplashScreen";
 import { persistor, store } from "./store";
 
 export const AppWrapper: React.FC = () => {

diff --git a/frontend/apps/mobile/src/hooks/useColorScheme.ts b/frontend/apps/mobile/src/hooks/useColorScheme.ts
@@ -6,5 +6,3 @@ import { ColorSchemeName, useColorScheme as _useColorScheme } from "react-native
 export const useColorScheme = (): NonNullable<ColorSchemeName> => {
     return _useColorScheme() as NonNullable<ColorSchemeName>;
 };
-
-export default useColorScheme;
diff --git a/frontend/apps/mobile/src/screens/Login.tsx b/frontend/apps/mobile/src/screens/Login.tsx
@@ -12,6 +12,7 @@ import { RootDrawerScreenProps } from "../navigation/types";
 import { notify } from "../notifications";
 import { useAppDispatch } from "../store";
 import { useTranslation } from "react-i18next";
+import LogoSvg from "../assets/logo.svg";
 
 const validationSchema = z.object({
     server: z.string({ required_error: "server is required" }).url({ message: "invalid server url" }),
@@ -66,6 +67,9 @@ export const LoginScreen: React.FC<RootDrawerScreenProps<"Login">> = ({ navigati
             <Appbar.Header theme={{ colors: { primary: theme.colors.surface } }}>
                 <Appbar.Content title={t("app.name")} />
             </Appbar.Header>
+            <View style={styles.logoContainer}>
+                <LogoSvg height="100%" />
+            </View>
             <Formik
                 validationSchema={toFormikValidationSchema(validationSchema)}
                 initialValues={initialValues}
@@ -149,6 +153,11 @@ export const LoginScreen: React.FC<RootDrawerScreenProps<"Login">> = ({ navigati
 };
 
 const styles = StyleSheet.create({
+    logoContainer: {
+        alignItems: "center",
+        justifyContent: "center",
+        height: 100,
+    },
     container: {
         padding: 8,
     },

diff --git a/frontend/apps/mobile/src/screens/SplashScreen.tsx b/frontend/apps/mobile/src/screens/SplashScreen.tsx
@@ -1,21 +1,24 @@
 import React from "react";
 import { StyleSheet, View } from "react-native";
-import { ActivityIndicator, Text } from "react-native-paper";
+import LogoSvg from "../assets/logo.svg";
 
 export const SplashScreen: React.FC = () => {
     return (
         <View style={styles.container}>
-            <ActivityIndicator animating={true} />
-            <Text>Splash screen</Text>
+            <View style={styles.logoContainer}>
+                <LogoSvg height="100%" />
+            </View>
         </View>
     );
 };
 
 const styles = StyleSheet.create({
     container: {
+        flex: 1,
         justifyContent: "center",
         alignItems: "center",
     },
+    logoContainer: {
+        height: 150,
+    },
 });
-
-export default SplashScreen;
diff --git a/frontend/apps/web/src/pages/auth/Register.tsx b/frontend/apps/web/src/pages/auth/Register.tsx
@@ -161,6 +161,7 @@ export const Register: React.FC = () => {
                                 required
                                 fullWidth
                                 type="password"
+                                name="password"
                                 label={t("common.password")}
                                 onBlur={handleBlur}
                                 onChange={handleChange}