- {userInfo === null ?
:
}
+
+
+ {userInfo === null ? (
+ <>
+
+
+ ) : (
+ <>
+
{t('profile')}
+
+
+ )}
+
{/* {useFeatureFlag('hostedLocations') &&
} */}
diff --git a/interface/components/Authentication.tsx b/interface/components/Authentication.tsx
new file mode 100644
index 000000000..639f08103
--- /dev/null
+++ b/interface/components/Authentication.tsx
@@ -0,0 +1,154 @@
+import { GoogleLogo, Icon } from '@phosphor-icons/react';
+import { Apple, Github } from '@sd/assets/svgs/brands';
+import { open } from '@tauri-apps/plugin-shell';
+import clsx from 'clsx';
+import { motion } from 'framer-motion';
+import { Dispatch, SetStateAction, useState } from 'react';
+import { getAuthorisationURLWithQueryParamsAndSetState } from 'supertokens-web-js/recipe/thirdparty';
+import { Button, Card, Divider, toast, Tooltip } from '@sd/ui';
+import { Icon as Logo } from '~/components';
+import { useIsDark } from '~/hooks';
+
+import Login from './Login';
+import Register from './Register';
+
+export const AccountTabs = ['Login', 'Register'] as const;
+
+export type SocialLogin = {
+ name: 'Github' | 'Google' | 'Apple';
+ icon: Icon;
+};
+
+export const SocialLogins: SocialLogin[] = [
+ { name: 'Github', icon: Github },
+ { name: 'Google', icon: GoogleLogo },
+ { name: 'Apple', icon: Apple }
+];
+
+export const Authentication = ({ reload }: { reload: Dispatch
> }) => {
+ const [activeTab, setActiveTab] = useState<'Login' | 'Register'>('Login');
+ const isDark = useIsDark();
+
+ const socialLoginHandlers = (name: SocialLogin['name']) => {
+ return {
+ Github: async () => {
+ try {
+ const authUrl = await getAuthorisationURLWithQueryParamsAndSetState({
+ thirdPartyId: 'github',
+ frontendRedirectURI: 'http://localhost:9420/api/auth/callback/github'
+ });
+ await open(authUrl);
+ } catch (err: any) {
+ if (err.isSuperTokensGeneralError === true) {
+ toast.error(err.message);
+ } else {
+ toast.error('Oops! Something went wrong.');
+ }
+ }
+ },
+ Google: async () => {
+ try {
+ const authUrl = await getAuthorisationURLWithQueryParamsAndSetState({
+ thirdPartyId: 'google',
+ frontendRedirectURI: 'spacedrive://-/auth'
+ });
+ await open(authUrl);
+ } catch (err: any) {
+ if (err.isSuperTokensGeneralError === true) {
+ toast.error(err.message);
+ } else {
+ toast.error('Oops! Something went wrong.');
+ }
+ }
+ },
+ Apple: async () => {
+ try {
+ const authUrl = await getAuthorisationURLWithQueryParamsAndSetState({
+ thirdPartyId: 'apple',
+ frontendRedirectURI: 'http://localhost:9420/api/auth/callback/apple'
+ });
+ await open(authUrl);
+ } catch (err: any) {
+ if (err.isSuperTokensGeneralError === true) {
+ toast.error(err.message);
+ } else {
+ toast.error('Oops! Something went wrong.');
+ }
+ }
+ }
+ }[name]();
+ };
+
+ return (
+
+
+ {AccountTabs.map((text) => (
+
setActiveTab(text)}
+ className={clsx(
+ 'relative flex-1 cursor-pointer border-b border-app-line p-3 text-center transition-colors duration-200',
+ text === 'Login' ? 'rounded-tl-lg' : 'rounded-tr-lg',
+ text === activeTab ? 'bg-app-background-alt' : ''
+ )}
+ >
+
+ {text}
+
+ {text === activeTab && (
+
+ )}
+
+ ))}
+
+
+
+ Spacedrive
+
+
+ {activeTab === 'Login' ?
:
}
+ {/* Optionally, uncomment the social login block when ready */}
+ {/*
+
+ {SocialLogins.map((social) => (
+
+ await socialLoginHandlers(social.name)}
+ className="rounded-full border border-app-line bg-app-input p-3"
+ >
+
+
+ ))}
+
*/}
+
+ );
+};
diff --git a/interface/components/Login.tsx b/interface/components/Login.tsx
new file mode 100644
index 000000000..699e756f1
--- /dev/null
+++ b/interface/components/Login.tsx
@@ -0,0 +1,167 @@
+import clsx from 'clsx';
+import { Dispatch, SetStateAction, useEffect, useState } from 'react';
+import { Controller } from 'react-hook-form';
+import { useNavigate } from 'react-router';
+import { signIn } from 'supertokens-web-js/recipe/emailpassword';
+import { nonLibraryClient, useZodForm } from '@sd/client';
+import { Button, Form, Input, toast, z } from '@sd/ui';
+import { useIsDark, useLocale } from '~/hooks';
+
+import ShowPassword from './ShowPassword';
+
+async function signInClicked(
+ email: string,
+ password: string,
+ reload: Dispatch>
+) {
+ try {
+ const response = await signIn({
+ formFields: [
+ {
+ id: 'email',
+ value: email
+ },
+ {
+ id: 'password',
+ value: password
+ }
+ ]
+ });
+
+ if (response.status === 'FIELD_ERROR') {
+ response.formFields.forEach((formField) => {
+ if (formField.id === 'email') {
+ toast.error(formField.error);
+ }
+ });
+ } else if (response.status === 'WRONG_CREDENTIALS_ERROR') {
+ toast.error('Email & password combination is incorrect.');
+ } else if (response.status === 'SIGN_IN_NOT_ALLOWED') {
+ toast.error(response.reason);
+ } else {
+ toast.success('Sign in successful');
+ reload(true);
+ }
+ } catch (err: any) {
+ if (err.isSuperTokensGeneralError === true) {
+ toast.error(err.message);
+ } else {
+ console.error(err);
+ toast.error('Oops! Something went wrong.');
+ }
+ }
+}
+
+const LoginSchema = z.object({
+ email: z.string().email(),
+ password: z.string().min(6)
+});
+
+const Login = ({ reload }: { reload: Dispatch> }) => {
+ const { t } = useLocale();
+ const isDark = useIsDark();
+ const [showPassword, setShowPassword] = useState(false);
+ const navigate = useNavigate(); // useNavigate hook
+ const form = useZodForm({
+ schema: LoginSchema,
+ defaultValues: {
+ email: '',
+ password: ''
+ }
+ });
+
+ return (
+
+ );
+};
+
+export default Login;
diff --git a/interface/components/Register.tsx b/interface/components/Register.tsx
new file mode 100644
index 000000000..89b4e19ab
--- /dev/null
+++ b/interface/components/Register.tsx
@@ -0,0 +1,211 @@
+import { zodResolver } from '@hookform/resolvers/zod';
+import clsx from 'clsx';
+import { useState } from 'react';
+import { Controller, useForm } from 'react-hook-form';
+import { signUp } from 'supertokens-web-js/recipe/emailpassword';
+import { Button, Form, Input, toast, z } from '@sd/ui';
+import { useIsDark, useLocale } from '~/hooks';
+
+import ShowPassword from './ShowPassword';
+
+const RegisterSchema = z
+ .object({
+ email: z.string().email(),
+ password: z.string().min(6),
+ confirmPassword: z.string().min(6)
+ })
+ .refine((data) => data.password === data.confirmPassword, {
+ message: 'Passwords do not match',
+ path: ['confirmPassword']
+ });
+type RegisterType = z.infer;
+
+async function signUpClicked(email: string, password: string) {
+ try {
+ const response = await signUp({
+ formFields: [
+ {
+ id: 'email',
+ value: email
+ },
+ {
+ id: 'password',
+ value: password
+ }
+ ]
+ });
+
+ if (response.status === 'FIELD_ERROR') {
+ // one of the input formFields failed validaiton
+ response.formFields.forEach((formField) => {
+ if (formField.id === 'email') {
+ // Email validation failed (for example incorrect email syntax),
+ // or the email is not unique.
+ toast.error(formField.error);
+ } else if (formField.id === 'password') {
+ // Password validation failed.
+ // Maybe it didn't match the password strength
+ toast.error(formField.error);
+ }
+ });
+ } else if (response.status === 'SIGN_UP_NOT_ALLOWED') {
+ // the reason string is a user friendly message
+ // about what went wrong. It can also contain a support code which users
+ // can tell you so you know why their sign up was not allowed.
+ toast.error(response.reason);
+ } else {
+ // sign up successful. The session tokens are automatically handled by
+ // the frontend SDK.
+ toast.success('Sign up successful');
+ // FIXME: This is a temporary workaround. We will provide a better way to handle this.
+ window.location.reload();
+ }
+ } catch (err: any) {
+ if (err.isSuperTokensGeneralError === true) {
+ // this may be a custom error message sent from the API by you.
+ toast.error(err.message);
+ } else {
+ toast.error('Oops! Something went wrong.');
+ }
+ }
+}
+
+const Register = () => {
+ const { t } = useLocale();
+ const isDark = useIsDark();
+ const [showPassword, setShowPassword] = useState(false);
+ // useZodForm seems to be out-dated or needs
+ //fixing as it does not support the schema using zod.refine
+ const form = useForm({
+ resolver: zodResolver(RegisterSchema),
+ defaultValues: {
+ email: '',
+ password: '',
+ confirmPassword: ''
+ }
+ });
+ return (
+
+ );
+};
+
+export default Register;
diff --git a/interface/components/ShowPassword.tsx b/interface/components/ShowPassword.tsx
new file mode 100644
index 000000000..d3e846da0
--- /dev/null
+++ b/interface/components/ShowPassword.tsx
@@ -0,0 +1,27 @@
+import { Eye, EyeClosed } from '@phosphor-icons/react';
+import { Button, Tooltip } from '@sd/ui';
+
+interface Props {
+ showPassword: boolean;
+ setShowPassword: (value: boolean) => void;
+}
+
+const ShowPassword = ({ showPassword, setShowPassword }: Props) => {
+ return (
+
+ setShowPassword(!showPassword)}
+ >
+ {!showPassword ?
+
+ );
+};
+
+export default ShowPassword;
diff --git a/interface/components/index.ts b/interface/components/index.ts
index edc3d5dc5..2f6420216 100644
--- a/interface/components/index.ts
+++ b/interface/components/index.ts
@@ -13,3 +13,4 @@ export * from './TextViewer';
export * from './TrafficLights';
export * from './TruncatedText';
export * from './Accordion';
+export * from './Authentication';
diff --git a/interface/locales/en/common.json b/interface/locales/en/common.json
index 0f97989b7..63e57208c 100644
--- a/interface/locales/en/common.json
+++ b/interface/locales/en/common.json
@@ -467,6 +467,7 @@
"log_out": "Log out",
"logged_in_as": "Logged in as {{email}}",
"logging_in": "Logging in...",
+ "login": "Login",
"logout": "Logout",
"manage_library": "Manage Library",
"managed": "Managed",
@@ -610,6 +611,7 @@
"regen_labels": "Regen Labels",
"regen_thumbnails": "Regen Thumbnails",
"regenerate_thumbs": "Regenerate Thumbs",
+ "register": "Register",
"reindex": "Re-index",
"reject": "Reject",
"reject_files": "Reject files",
@@ -692,9 +694,9 @@
"skip_login": "Skip login",
"software": "Software",
"sort_by": "Sort by",
- "spacedrive_account": "Spacedrive Account",
+ "spacedrive_account": "Account",
"spacedrive_cloud": "Spacedrive Cloud",
- "spacedrive_cloud_description": "Spacedrive is always local first, but we will offer our own optional cloud services in the future. For now, authentication is only used for the Feedback feature, otherwise it is not required.",
+ "spacedrive_cloud_description": "Spacedrive is always local first, but to access our Cloud features, users must register for an account. Note that an account is not required to use any of the base features of Spacedrive, and you can still connect devices to your library without an account.",
"spacedrop": "Spacedrop visibility",
"spacedrop_a_file": "Spacedrop a File",
"spacedrop_already_progress": "Spacedrop already in progress",
diff --git a/packages/ui/tsconfig.json b/packages/ui/tsconfig.json
index 8e080d56b..620b6ee89 100644
--- a/packages/ui/tsconfig.json
+++ b/packages/ui/tsconfig.json
@@ -4,5 +4,5 @@
"rootDir": "src",
"declarationDir": "dist"
},
- "include": ["src"]
+ "include": ["src", "../../interface/components/ShowPassword.tsx"]
}