Auth screens UI

JoyboyCommunity/src/assets/icons.tsx

@@ -189,3 +189,39 @@ export const SendIcon: React.FC<SvgProps> = (props) => {
     </Svg>
   );
 };
+
+export const CopyIconStack: React.FC<SvgProps> = (props: SvgProps) => (
+  <Svg width={24} height={24} fill="none" {...props} viewBox="0 0 24 24">
+    <Path
+      opacity="0.4"
+      d="M16.0549 8.25C17.4225 8.24998 18.5248 8.24996 19.3918 8.36652C20.2919 8.48754 21.0497 8.74643 21.6517 9.34835C22.2536 9.95027 22.5125 10.7081 22.6335 11.6083C22.75 12.4752 22.75 13.5775 22.75 14.9451V16.0549C22.75 17.4225 22.75 18.5248 22.6335 19.3918C22.5125 20.2919 22.2536 21.0497 21.6517 21.6517C21.0497 22.2536 20.2919 22.5125 19.3918 22.6335C18.5248 22.75 17.4225 22.75 16.0549 22.75H14.9451C13.5775 22.75 12.4752 22.75 11.6082 22.6335C10.7081 22.5125 9.95027 22.2536 9.34835 21.6516C8.74643 21.0497 8.48754 20.2919 8.36652 19.3918C8.24996 18.5248 8.24998 17.4225 8.25 16.0549V14.9451C8.24998 13.5775 8.24996 12.4752 8.36652 11.6082C8.48754 10.7081 8.74643 9.95027 9.34835 9.34835C9.95027 8.74643 10.7081 8.48754 11.6083 8.36652C12.4752 8.24996 13.5775 8.24998 14.9451 8.25H16.0549Z"
+      fill={props.color}
+    />
+    <Path
+      d="M6.75 14.8569C6.74991 13.5627 6.74983 12.3758 6.8799 11.4084C7.0232 10.3425 7.36034 9.21504 8.28769 8.28769C9.21504 7.36034 10.3425 7.0232 11.4084 6.8799C12.3758 6.74983 13.5627 6.74991 14.8569 6.75H17.0931C17.3891 6.75 17.5371 6.75 17.6261 6.65419C17.7151 6.55838 17.7045 6.4142 17.6833 6.12584C17.6648 5.87546 17.6412 5.63892 17.6111 5.41544C17.4818 4.45589 17.2232 3.6585 16.6718 2.98663C16.4744 2.74612 16.2539 2.52558 16.0134 2.3282C15.3044 1.74638 14.4557 1.49055 13.4248 1.36868C12.4205 1.24998 11.1512 1.24999 9.54893 1.25H9.45109C7.84883 1.24999 6.57947 1.24998 5.57525 1.36868C4.54428 1.49054 3.69558 1.74638 2.98663 2.3282C2.74612 2.52558 2.52558 2.74612 2.3282 2.98663C1.74638 3.69558 1.49055 4.54428 1.36868 5.57525C1.24998 6.57947 1.24999 7.84882 1.25 9.45108V9.54891C1.24999 11.1512 1.24998 12.4205 1.36868 13.4247C1.49054 14.4557 1.74638 15.3044 2.3282 16.0134C2.52558 16.2539 2.74612 16.4744 2.98663 16.6718C3.6585 17.2232 4.45589 17.4818 5.41544 17.6111C5.63892 17.6412 5.87546 17.6648 6.12584 17.6833C6.4142 17.7045 6.55838 17.7151 6.65419 17.6261C6.75 17.5371 6.75 17.3891 6.75 17.0931V14.8569Z"
+      fill={props.color}
+    />
+  </Svg>
+);
+
+export const InfoIcon = (props: SvgProps) => (
+  <Svg width={18} height={18} fill="none" {...props} viewBox="0 0 18 18">
+    <Path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M9.04763 0.45813C10.8732 0.458119 12.3071 0.45811 13.4266 0.608625C14.5738 0.762864 15.4841 1.08539 16.1992 1.80056C16.9144 2.51572 17.2369 3.42594 17.3912 4.57315C17.5417 5.69265 17.5417 7.12654 17.5416 8.9521V8.95212V8.95214V8.95216V9.04744V9.04746V9.04748V9.0475C17.5417 10.8731 17.5417 12.3069 17.3912 13.4264C17.2369 14.5737 16.9144 15.4839 16.1992 16.199C15.4841 16.9142 14.5738 17.2367 13.4266 17.391C12.3071 17.5415 10.8732 17.5415 9.04768 17.5415H9.04766H9.04764H9.04762H8.95234H8.95232H8.9523H8.95228C7.12672 17.5415 5.69284 17.5415 4.57333 17.391C3.42612 17.2367 2.51591 16.9142 1.80074 16.199C1.08558 15.4839 0.763047 14.5737 0.608808 13.4264C0.458293 12.3069 0.458302 10.873 0.458313 9.04744V8.95215C0.458302 7.12656 0.458293 5.69266 0.608808 4.57315C0.763047 3.42594 1.08558 2.51572 1.80074 1.80056C2.51591 1.08539 3.42612 0.762864 4.57333 0.608625C5.69285 0.45811 7.12675 0.458119 8.95233 0.45813H9.04763ZM8.16665 12.7498C8.16665 12.2896 8.53807 11.9165 8.99625 11.9165H9.00371C9.46189 11.9165 9.83331 12.2896 9.83331 12.7498C9.83331 13.21 9.46189 13.5831 9.00371 13.5831H8.99625C8.53807 13.5831 8.16665 13.21 8.16665 12.7498ZM8.16675 9.41646C8.16675 9.8767 8.53984 10.2498 9.00008 10.2498C9.46032 10.2498 9.83342 9.8767 9.83342 9.41646V6.08313C9.83342 5.62289 9.46032 5.2498 9.00008 5.2498C8.53984 5.2498 8.16675 5.62289 8.16675 6.08313V9.41646Z"
+      fill={props.color}
+    />
+  </Svg>
+);
+
+export const LockIcon = (props: SvgProps) => (
+  <Svg width={32} height={32} fill="none" {...props} viewBox="0 0 32 32">
+    <Path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M16 1.66663C8.08388 1.66663 1.66663 8.08388 1.66663 16C1.66663 23.9161 8.08388 30.3333 16 30.3333C23.9161 30.3333 30.3333 23.9161 30.3333 16C30.3333 8.08388 23.9161 1.66663 16 1.66663ZM12.6666 14.3333C12.6666 12.4923 14.159 11 16 11C17.8409 11 19.3333 12.4923 19.3333 14.3333C19.3333 15.7002 18.5106 16.8749 17.3333 17.3893V21C17.3333 21.7364 16.7364 22.3333 16 22.3333C15.2636 22.3333 14.6666 21.7364 14.6666 21V17.3893C13.4893 16.8749 12.6666 15.7002 12.6666 14.3333Z"
+      fill={props.color}
+    />
+  </Svg>
+);

JoyboyCommunity/src/screens/Auth/CreateAccount.tsx

@@ -0,0 +1,28 @@
+import {useState} from 'react';
+
+import {Button, Input, TextButton} from '../../components';
+import {Auth} from '../../modules/auth';
+
+export const CreateAccount: React.FC = () => {
+  const [username, setUsername] = useState(null);
+  const [displayname, setDisplayname] = useState(null);
+
+  return (
+    <Auth title="Create Account">
+      <Input placeholder="@ username" value={username} onChangeText={setUsername} />
+      <Input placeholder="Display name" value={displayname} onChangeText={setDisplayname} />
+
+      {username && displayname ? (
+        <Button block disabled={!username || !displayname}>
+          Continue
+        </Button>
+      ) : (
+        <Button block disabled={!username || !displayname}>
+          Create account
+        </Button>
+      )}
+
+      <TextButton>Login</TextButton>
+    </Auth>
+  );
+};

JoyboyCommunity/src/screens/Auth/Login.tsx

@@ -1,12 +1,22 @@
+import {useState} from 'react';
+
+import {LockIcon} from '../../assets/icons';
 import {Button, Input, TextButton} from '../../components';
 import {Auth} from '../../modules/auth';
 
 export const Login: React.FC = () => {
+  const [loginKey, setLoginKey] = useState(null);
+
   return (
     <Auth title="Login">
-      <Input placeholder="Enter your login key" />
+      <Input
+        left={<LockIcon color="#EC796B" style={{marginLeft: 10}} />}
+        placeholder="Enter your login key"
+        value={loginKey}
+        onChangeText={setLoginKey}
+      />
 
-      <Button block disabled>
+      <Button block disabled={!loginKey?.length}>
         Login
       </Button>
 

JoyboyCommunity/src/screens/Auth/SaveKeys.tsx

@@ -0,0 +1,88 @@
+import {useState} from 'react';
+import {View} from 'react-native';
+import {TouchableOpacity} from 'react-native-gesture-handler';
+
+import {CopyIconStack} from '../../assets/icons';
+import {InfoIcon} from '../../assets/icons';
+import {Button, Input} from '../../components';
+import {Auth} from '../../modules/auth';
+import {Text} from '../../modules/login/styled';
+
+export const SaveKeys: React.FC = () => {
+  const [secretKey, setSecretKey] = useState('nsec65fefewfweehfhewbhvbwehbewhfbewbfhewbfhew');
+  const [publicKey, setPublicKey] = useState('nsec65fefewfweehfhewbhvbwehbewhfbewbfhewbfhew');
+
+  const handleCopy = () => {
+    // Add your copy functionality here
+    console.log('Copied to clipboard:', 'Copied value');
+  };
+
+  return (
+    <Auth title="Save your keys">
+      <Text style={{color: 'rgba(107, 107, 140, 1)', fontWeight: 600, marginLeft: 5}}>
+        Your secret key
+      </Text>
+      <Input
+        value={secretKey}
+        editable={false}
+        right={
+          <TouchableOpacity
+            onPress={handleCopy}
+            style={{
+              marginRight: 10,
+            }}
+          >
+            <CopyIconStack color="#EC796B" />
+          </TouchableOpacity>
+        }
+      />
+
+      <Text style={{color: 'rgba(107, 107, 140, 1)', fontWeight: 600, marginLeft: 5}}>
+        Your public key
+      </Text>
+      <Input
+        value={publicKey}
+        editable={false}
+        right={
+          <TouchableOpacity
+            onPress={handleCopy}
+            style={{
+              marginRight: 10,
+            }}
+          >
+            <CopyIconStack color="#EC796B" />
+          </TouchableOpacity>
+        }
+      />
+
+      <View
+        style={{
+          width: 361,
+          backgroundColor: 'rgba(236, 121, 107, 0.1)',
+          borderRadius: 40,
+          paddingHorizontal: 20,
+          paddingVertical: 15,
+          display: 'flex',
+          flexDirection: 'row',
+          justifyContent: 'center',
+          alignItems: 'center',
+          gap: 5,
+        }}
+      >
+        <InfoIcon color="#EC796B" />
+        <Text
+          style={{
+            fontSize: 13,
+            color: 'rgba(236, 121, 107, 1)',
+            fontWeight: 500,
+          }}
+        >
+          Your private key is your password, if you lose this key, you will lose access to your
+          account.
+        </Text>
+      </View>
+
+      <Button block>Create account</Button>
+    </Auth>
+  );
+};