From 6537af06fa50b4a3fa9f44649bb21612661fed1a Mon Sep 17 00:00:00 2001 From: swve Date: Sat, 22 Jul 2023 18:48:33 +0200 Subject: [PATCH] feat: init new sign up page --- front/app/orgs/[orgslug]/login/login.tsx | 11 +- front/app/orgs/[orgslug]/signup/page.tsx | 126 +++----------- front/app/orgs/[orgslug]/signup/signup.tsx | 188 +++++++++++++++++++++ front/services/auth/auth.ts | 21 +-- 4 files changed, 226 insertions(+), 120 deletions(-) create mode 100644 front/app/orgs/[orgslug]/signup/signup.tsx diff --git a/front/app/orgs/[orgslug]/login/login.tsx b/front/app/orgs/[orgslug]/login/login.tsx index 06b662d1..d8f32cb8 100644 --- a/front/app/orgs/[orgslug]/login/login.tsx +++ b/front/app/orgs/[orgslug]/login/login.tsx @@ -10,6 +10,8 @@ import React from "react"; import { loginAndGetToken } from "@services/auth/auth"; import { AlertTriangle } from "lucide-react"; import { useRouter } from "next/navigation"; +import Link from "next/link"; +import { getUriWithOrg } from "@services/config/config"; interface LoginClientProps { org: any; @@ -50,13 +52,13 @@ const LoginClient = (props: LoginClientProps) => { onSubmit: async values => { setIsSubmitting(true); let res = await loginAndGetToken(values.email, values.password); - console.log(res.status); + let message = await res.json(); if (res.status == 200) { router.push(`/`); setIsSubmitting(false); } else if (res.status == 401 || res.status == 400 || res.status == 404 || res.status == 409) { - setError("Invalid email or password"); + setError(message.detail); setIsSubmitting(false); } else { @@ -70,8 +72,9 @@ const LoginClient = (props: LoginClientProps) => {
- -
+ + +
Login to
diff --git a/front/app/orgs/[orgslug]/signup/page.tsx b/front/app/orgs/[orgslug]/signup/page.tsx index 29e13ff8..dd70b7f4 100644 --- a/front/app/orgs/[orgslug]/signup/page.tsx +++ b/front/app/orgs/[orgslug]/signup/page.tsx @@ -1,115 +1,33 @@ -"use client"; + import React from "react"; -import { signup } from "../../../../services/auth/auth"; -import { useRouter } from "next/navigation"; +import SignUpClient from "./signup"; +import { Metadata } from "next"; +import { getOrganizationContextInfo } from "@services/organizations/orgs"; -const SignUp = (params: any) => { - const org_slug = params.params.orgslug; - const router = useRouter(); - const [email, setEmail] = React.useState(""); - const [password, setPassword] = React.useState(""); - const [username, setUsername] = React.useState(""); +type MetadataProps = { + params: { orgslug: string, courseid: string }; + searchParams: { [key: string]: string | string[] | undefined }; +}; - const handleSubmit = (e: any) => { - e.preventDefault(); - console.log({ email, password, username, org_slug }); - alert(JSON.stringify({ email, password, username, org_slug })); - try { - signup({ email, password, username, org_slug }); - router.push("/"); - } - catch (err) { - console.log(err); - } +export async function generateMetadata( + { params }: MetadataProps, +): Promise { + const orgslug = params.orgslug; + // Get Org context information + const org = await getOrganizationContextInfo(orgslug, { revalidate: 1800, tags: ['organizations'] }); + + return { + title: 'Sign up' + ` — ${org.name}`, }; +} - const handleEmailChange = (e: any) => { - setEmail(e.target.value); - }; - - const handlePasswordChange = (e: any) => { - setPassword(e.target.value); - }; - - const handleUsernameChange = (e: any) => { - setUsername(e.target.value); - }; +const SignUp = async (params: any) => { + const orgslug = params.params.orgslug; + const org = await getOrganizationContextInfo(orgslug, { revalidate: 1800, tags: ['organizations'] }); return (
-
-
Sign up
- -
-
-
-
- - - - - - - - - - - - - - - Already have an account? Login - - - - Home - - - -
-
- -
-
-
+
); }; diff --git a/front/app/orgs/[orgslug]/signup/signup.tsx b/front/app/orgs/[orgslug]/signup/signup.tsx new file mode 100644 index 00000000..102af86c --- /dev/null +++ b/front/app/orgs/[orgslug]/signup/signup.tsx @@ -0,0 +1,188 @@ +"use client"; +import { useFormik } from 'formik'; +import { useRouter } from 'next/navigation'; +import learnhouseIcon from "public/learnhouse_bigicon_1.png"; +import React from 'react' +import FormLayout, { ButtonBlack, FormField, FormLabel, FormLabelAndMessage, FormMessage, Input, Textarea } from '@components/StyledElements/Form/Form' +import Image from 'next/image'; +import * as Form from '@radix-ui/react-form'; +import { getOrgLogoMediaDirectory } from '@services/media/media'; +import { AlertTriangle } from 'lucide-react'; +import Link from 'next/link'; +import { signup } from '@services/auth/auth'; +import { getUriWithOrg } from '@services/config/config'; + + +interface SignUpClientProps { + org: any; +} + +const validate = (values: any) => { + const errors: any = {}; + + if (!values.email) { + errors.email = 'Required'; + } + else if ( + !/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i.test(values.email) + ) { + errors.email = 'Invalid email address'; + } + + if (!values.password) { + errors.password = 'Required'; + } + else if (values.password.length < 8) { + errors.password = 'Password must be at least 8 characters'; + } + + if (!values.username) { + errors.username = 'Required'; + } + + if (!values.username || values.username.length < 4) { + errors.username = 'Username must be at least 4 characters'; + } + + if (!values.full_name) { + errors.full_name = 'Required'; + } + + if (!values.bio) { + errors.bio = 'Required'; + } + + + return errors; +}; + + +function SignUpClient(props: SignUpClientProps) { + const [isSubmitting, setIsSubmitting] = React.useState(false); + const router = useRouter(); + const [error, setError] = React.useState(''); + const formik = useFormik({ + initialValues: { + org_slug: props.org?.slug, + email: '', + password: '', + username: '', + bio: '', + full_name: '', + }, + validate, + onSubmit: async values => { + setIsSubmitting(true); + let res = await signup(values); + let message = await res.json(); + if (res.status == 200) { + router.push(`/`); + setIsSubmitting(false); + } + else if (res.status == 401 || res.status == 400 || res.status == 404 || res.status == 409) { + setError(message.detail); + setIsSubmitting(false); + } + else { + setError("Something went wrong"); + setIsSubmitting(false); + } + + }, + }); + + return ( +
+
+
+ + + +
+
+
+
Join
+
+ {props.org?.logo ? ( + Learnhouse + ) : ( + + )} +
+
{props.org?.name}
+
+
+
+
+
+ {error && ( +
+ +
{error}
+
+ )} + + + + + + + + {/* for password */} + + + + + + + + {/* for username */} + + + + + + + + + {/* for full name */} + + + + + + + + + + {/* for bio */} + + + + +