rzmk/learnhouse
1
0
Fork 0
mirror of https://github.com/rzmk/learnhouse.git synced 2025-12-19 04:19:25 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: init user settings

Browse source
This commit is contained in:
swve 2023-12-13 21:30:47 +01:00
parent 6fea7ec1af
commit 838a94eec1
17 changed files with 273 additions and 40 deletions
Download patch file Download diff file Expand all files Collapse all files

5
apps/web/app/orgs/[orgslug]/dash/courses/course/[courseuuid]/[subpage]/page.tsx
View file

@ -1,5 +1,5 @@
'use client';
import EditCourseStructure from '../../../../../../../../components/Dashboard/EditCourseStructure/EditCourseStructure'
import EditCourseStructure from '../../../../../../../../components/Dashboard/Course/EditCourseStructure/EditCourseStructure'
import BreadCrumbs from '@components/Dashboard/UI/BreadCrumbs'
import PageLoading from '@components/Objects/Loaders/PageLoading';
import ClientComponentSkeleton from '@components/Utils/ClientComp';
@ -13,7 +13,7 @@ import Link from 'next/link';
import { CourseOverviewTop } from '@components/Dashboard/UI/CourseOverviewTop';
import { CSSTransition } from 'react-transition-group';
import { motion } from 'framer-motion';
import EditCourseGeneral from '@components/Dashboard/EditCourseGeneral/EditCourseGeneral';
import EditCourseGeneral from '@components/Dashboard/Course/EditCourseGeneral/EditCourseGeneral';
import { GalleryVertical, GalleryVerticalEnd, Info } from 'lucide-react';
export type CourseOverviewParams = {
@ -33,7 +33,6 @@ function CourseOverviewPage({ params }: { params: CourseOverviewParams }) {
return (
<div className='h-full w-full bg-[#f8f8f8]'>
<CourseProvider courseuuid={getEntireCourseUUID(params.courseuuid)}>
<div className='pl-10 pr-10 tracking-tight bg-[#fcfbfc] shadow-[0px_4px_16px_rgba(0,0,0,0.02)]'>
<CourseOverviewTop params={params} />

6
apps/web/app/orgs/[orgslug]/dash/page.tsx
View file

@ -1,8 +1,12 @@
import PageLoading from '@components/Objects/Loaders/PageLoading'
import React from 'react'
function DashboardHome() {
return (
<div>DashboardHome</div>
<div className="flex items-center justify-center mx-auto min-h-screen flex-col space-x-3">
<PageLoading />
<div className='text-neutral-400 font-bold animate-pulse text-2xl'>This page is work in progress</div>
</div>
)
}

69
apps/web/app/orgs/[orgslug]/dash/user/settings/[subpage]/page.tsx Normal file
View file

@ -0,0 +1,69 @@
'use client';
import React, { useEffect } from 'react'
import { motion } from 'framer-motion';
import UserEditGeneral from '@components/Dashboard/User/UserEditGeneral/UserEditGeneral';
import UserEditPassword from '@components/Dashboard/User/UserEditPassword/UserEditPassword';
import Link from 'next/link';
import { getUriWithOrg } from '@services/config/config';
import { Info, Lock } from 'lucide-react';
import BreadCrumbs from '@components/Dashboard/UI/BreadCrumbs';
import { useAuth } from '@components/Security/AuthContext';
export type SettingsParams = {
subpage: string
orgslug: string
}
function SettingsPage({ params }: { params: SettingsParams }) {
const auth = useAuth() as any;
useEffect(() => {
}
, [auth])
return (
<div className='h-full w-full bg-[#f8f8f8]'>
<div className='pl-10 pr-10 tracking-tight bg-[#fcfbfc] shadow-[0px_4px_16px_rgba(0,0,0,0.02)]'>
<BreadCrumbs type='user' last_breadcrumb={auth?.user?.username} ></BreadCrumbs>
<div className='my-2 tracking-tighter'>
<div className='w-100 flex justify-between'>
<div className='pt-3 flex font-bold text-4xl'>Account Settings</div>
</div>
</div>
<div className='flex space-x-5 font-black text-sm'>
<Link href={getUriWithOrg(params.orgslug, "") + `/dash/user/settings/general`}>
<div className={`py-2 w-fit text-center border-black transition-all ease-linear ${params.subpage.toString() === 'general' ? 'border-b-4' : 'opacity-50'} cursor-pointer`}>
<div className='flex items-center space-x-2.5 mx-2'>
<Info size={16} />
<div>General</div>
</div>
</div>
</Link>
<Link href={getUriWithOrg(params.orgslug, "") + `/dash/user/settings/security`}>
<div className={`flex space-x-4 py-2 w-fit text-center border-black transition-all ease-linear ${params.subpage.toString() === 'security' ? 'border-b-4' : 'opacity-50'} cursor-pointer`}>
<div className='flex items-center space-x-2.5 mx-2'>
<Lock size={16} />
<div>Password</div>
</div>
</div>
</Link>
</div>
</div>
<div className='h-6'></div>
<motion.div
initial={{ opacity: 0, }}
animate={{ opacity: 1 }}
exit={{ opacity: 0 }}
transition={{ duration: 0.10, type: "spring", stiffness: 80 }}
>
{params.subpage == 'general' ? <UserEditGeneral /> : ''}
{params.subpage == 'security' ? <UserEditPassword /> : ''}
</motion.div>
</div>
)
}
export default SettingsPage

4
apps/web/app/orgs/[orgslug]/settings/account/profile/profile.tsx
View file

@ -6,6 +6,8 @@ import { updateProfile } from '@services/settings/profile';
function ProfileClient() {
const auth: any = React.useContext(AuthContext);
return (
<div>
@ -51,7 +53,7 @@ function ProfileClient() {
</label>
<Field
as="textarea"
className="w-full px-4 py-2 mb-4 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
className="w-full h-64 px-4 py-2 mb-4 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
type="textarea"
name="bio"
/>

2
apps/web/components/Dashboard/EditCourseGeneral/EditCourseGeneral.tsx → apps/web/components/Dashboard/Course/EditCourseGeneral/EditCourseGeneral.tsx
View file

@ -4,7 +4,7 @@ import { AlertTriangle } from 'lucide-react'
import * as Switch from '@radix-ui/react-switch';
import * as Form from '@radix-ui/react-form';
import React from 'react'
import { useCourse, useCourseDispatch } from '../../Contexts/CourseContext';
import { useCourse, useCourseDispatch } from '../../../Contexts/CourseContext';
type EditCourseStructureProps = {

0
apps/web/components/Dashboard/EditCourseStructure/Buttons/NewActivityButton.tsx → apps/web/components/Dashboard/Course/EditCourseStructure/Buttons/NewActivityButton.tsx
View file

0
apps/web/components/Dashboard/EditCourseStructure/DraggableElements/ActivityElement.tsx → apps/web/components/Dashboard/Course/EditCourseStructure/DraggableElements/ActivityElement.tsx
View file

0
apps/web/components/Dashboard/EditCourseStructure/DraggableElements/ChapterElement.tsx → apps/web/components/Dashboard/Course/EditCourseStructure/DraggableElements/ChapterElement.tsx
View file

0
apps/web/components/Dashboard/EditCourseStructure/EditCourseStructure.tsx → apps/web/components/Dashboard/Course/EditCourseStructure/EditCourseStructure.tsx
View file

5
apps/web/components/Dashboard/UI/BreadCrumbs.tsx
View file

@ -4,7 +4,7 @@ import Link from 'next/link'
import React, { use, useEffect } from 'react'
type BreadCrumbsProps = {
type: 'courses' | 'users'
type: 'courses' | 'user' | 'users',
last_breadcrumb?: string
}
@ -17,7 +17,8 @@ function BreadCrumbs(props: BreadCrumbsProps) {
<div className='text-gray-400 tracking-tight font-medium text-sm flex space-x-1'>
<div className='flex items-center space-x-1'>
{props.type == 'courses' ? <div className='flex space-x-2 items-center'> <Book className='text-gray' size={14}></Book><Link href='/dash/courses'>Courses</Link></div> : ''}
{props.type == 'users' ? <div> <User size={14}></User><Link href='/dash/users'>Users</Link></div> : ''}
{props.type == 'user' ? <div className='flex space-x-2 items-center'> <User className='text-gray' size={14}></User><Link href='/dash/user/settings/general'>Account Settings</Link></div> : ''}
<div className='flex items-center space-x-1 first-letter:uppercase'>
{props.last_breadcrumb ? <ChevronRight size={17} /> : ''}
<div className='first-letter:uppercase'> {props.last_breadcrumb}</div>

26
apps/web/components/Dashboard/UI/LeftMenu.tsx
View file

@ -35,12 +35,12 @@ function LeftMenu() {
className='flex flex-col w-24 bg-black h-screen text-white shadow-xl'>
<div className='flex flex-col h-full'>
<div className='flex h-20 mt-6'>
<Link className='mx-auto' href={"/dash"}>
<Link className='flex flex-col items-center mx-auto space-y-1' href={"/dash"}>
<Image alt="Learnhouse logo" width={40} src={LearnHouseDashboardLogo} />
</Link>
</div>
<div className='flex grow flex-col justify-center space-y-5 items-center mx-auto'>
<ToolTip content={"Back to " + org?.name} slateBlack sideOffset={8} side='right' >
<ToolTip content={"Back to " + org?.name + "'s Home"} slateBlack sideOffset={8} side='right' >
<Link className='bg-white text-black hover:text-white rounded-lg p-2 hover:bg-white/10 transition-all ease-linear' href={`/`} ><ArrowLeft className='hover:text-white' size={18} /></Link>
</ToolTip>
<ToolTip content={"Home"} slateBlack sideOffset={8} side='right' >
@ -51,15 +51,21 @@ function LeftMenu() {
</ToolTip>
</div>
<div className='flex flex-col mx-auto pb-7 space-y-2'>
<Link href={'/dash/user/settings'} className='py-3'>
<Settings className='mx-auto text-neutral-400 cursor-pointer' size={18} />
</Link>
<div className="flex items-center">
<div className="mx-auto shadow-lg">
<Avvvatars radius={3} border borderColor='white' borderSize={3} size={35} value={auth.user.user_uuid} style="shape" />
</div>
<ToolTip content={auth.user.username+ "'s Settings"} slateBlack sideOffset={8} side='right' >
<Link href={'/dash/user/settings/general'} className='py-3'>
<Settings className='mx-auto text-neutral-400 cursor-pointer' size={18} />
</Link>
</ToolTip>
<div className="flex items-center flex-col space-y-4">
<ToolTip content={auth.user.username} slateBlack sideOffset={8} side='right' >
<div className="mx-auto shadow-lg">
<Avvvatars radius={3} border borderColor='white' borderSize={3} size={35} value={auth.user.user_uuid} style="shape" />
</div>
</ToolTip>
<ToolTip content={'Learnhouse Version'} slateBlack sideOffset={8} side='right' >
<div className='py-1 px-3 bg-white/10 opacity-40 rounded-full text-[10px] uppercase justify-center text-center'>alpha</div>
</ToolTip>
</div>
<div className="text-xs px-4 text-gray-200 ">{auth.user.username}</div>
</div>
</div>

100
apps/web/components/Dashboard/User/UserEditGeneral/UserEditGeneral.tsx Normal file
View file

@ -0,0 +1,100 @@
import { useAuth } from '@components/Security/AuthContext';
import { updateProfile } from '@services/settings/profile';
import React, { useEffect } from 'react'
import { Formik, Form, Field, ErrorMessage } from 'formik';
function UserEditGeneral() {
const auth = useAuth() as any;
useEffect(() => {
}
, [auth, auth.user])
return (
<div className='ml-10 mr-10 mx-auto bg-white rounded-xl shadow-sm px-6 py-5'>
{auth.user && (
<Formik
enableReinitialize
initialValues={{
username: auth.user.username,
first_name: auth.user.first_name,
last_name: auth.user.last_name,
email: auth.user.email,
bio: auth.user.bio,
}}
onSubmit={(values, { setSubmitting }) => {
setTimeout(() => {
setSubmitting(false);
updateProfile(values,auth.user.id)
}, 400);
}}
>
{({ isSubmitting }) => (
<Form className="max-w-md">
<label className="block mb-2 font-bold" htmlFor="email">
Email
</label>
<Field
className="w-full px-4 py-2 mb-4 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
type="email"
name="email"
/>
<label className="block mb-2 font-bold" htmlFor="username">
Username
</label>
<Field
className="w-full px-4 py-2 mb-4 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
type="username"
name="username"
/>
<label className="block mb-2 font-bold" htmlFor="first_name">
First Name
</label>
<Field
className="w-full px-4 py-2 mb-4 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
type="first_name"
name="first_name"
/>
<label className="block mb-2 font-bold" htmlFor="last_name">
Last Name
</label>
<Field
className="w-full px-4 py-2 mb-4 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
type="last_name"
name="last_name"
/>
<label className="block mb-2 font-bold" htmlFor="bio">
Bio
</label>
<Field
className="w-full px-4 py-2 mb-4 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
type="bio"
name="bio"
/>
<button
type="submit"
disabled={isSubmitting}
className="px-6 py-3 text-white bg-black rounded-lg shadow-md hover:bg-black focus:outline-none focus:ring-2 focus:ring-blue-500"
>
Submit
</button>
</Form>
)}
</Formik>
)}
</div>
)
}
export default UserEditGeneral

66
apps/web/components/Dashboard/User/UserEditPassword/UserEditPassword.tsx Normal file
View file

@ -0,0 +1,66 @@
import { useAuth } from '@components/Security/AuthContext';
import { updatePassword } from '@services/settings/password';
import { Formik, Form, Field, ErrorMessage } from 'formik';
import React, { useEffect } from 'react'
function UserEditPassword() {
const auth = useAuth() as any;
const updatePasswordUI = async (values: any) => {
let user_id = auth.userInfo.user_object.user_id;
await updatePassword(user_id, values)
}
useEffect(() => {
}
, [auth])
return (
<div className='ml-10 mr-10 mx-auto bg-white rounded-xl shadow-sm px-6 py-5'>
<Formik
initialValues={{ old_password: '', new_password: '' }}
enableReinitialize
onSubmit={(values, { setSubmitting }) => {
setTimeout(() => {
setSubmitting(false);
updatePasswordUI(values)
}, 400);
}}
>
{({ isSubmitting }) => (
<Form className="max-w-md">
<label className="block mb-2 font-bold" htmlFor="old_password">
Old Password
</label>
<Field
className="w-full px-4 py-2 mb-4 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
type="password"
name="old_password"
/>
<label className="block mb-2 font-bold" htmlFor="new_password">
New Password
</label>
<Field
className="w-full px-4 py-2 mb-4 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
type="password"
name="new_password"
/>
<button
type="submit"
disabled={isSubmitting}
className="px-6 py-3 text-white bg-black rounded-lg shadow-md hover:bg-black focus:outline-none focus:ring-2 focus:ring-blue-500"
>
Submit
</button>
</Form>
)}
</Formik>
</div>
)
}
export default UserEditPassword

20
apps/web/components/Objects/Menu/ProfileArea.tsx
View file

@ -8,6 +8,7 @@ import { getNewAccessTokenUsingRefreshToken, getUserInfo } from "@services/auth/
import { usePathname } from "next/navigation";
import { useRouter } from "next/router";
import path from "path";
import { Settings } from "lucide-react";
export interface Auth {
access_token: string;
@ -92,7 +93,7 @@ function ProfileArea() {
<div>
<Avvvatars value={auth.userInfo.user_object.user_id} style="shape" />
</div>
<Link href={"/settings"}><GearIcon /></Link>
<Link href={"/dash"}><Settings /></Link>
</AccountArea>
)}
</ProfileAreaStyled>
@ -104,22 +105,7 @@ const AccountArea = styled.div`
display: flex;
place-items: center;
a{
// center the gear icon
display: flex;
place-items: center;
place-content: center;
width: 29px;
height: 29px;
border-radius: 19px;
background: #F5F5F5;
// hover effect
&:hover{
background: #E5E5E5;
}
}
div {
margin-right: 10px;

4
apps/web/components/Security/HeaderProfileBox.tsx
View file

@ -30,11 +30,11 @@ export const HeaderProfileBox = () => {
{auth.isAuthenticated && (
<AccountArea className="-space-x-2">
<div className="text-xs px-4 text-gray-600 p-1.5 rounded-full bg-gray-50">{auth.userInfo.username}</div>
<div className="flex -space-x-2 items-center">
<div className="flex items-center">
<div className="py-4">
<Avvvatars size={26} value={auth.userInfo.user_uuid} style="shape" />
</div>
<Link className="bg-gray-50 p-1.5 rounded-full" href={"/settings"}><GearIcon fontSize={26} /></Link>
<Link className="" href={"/dash"}><GearIcon fontSize={26} /></Link>
</div>
</AccountArea>
)}

2
apps/web/services/courses/chapters.ts
View file

@ -1,4 +1,4 @@
import { OrderPayload } from "@components/Dashboard/EditCourseStructure/EditCourseStructure";
import { OrderPayload } from "@components/Dashboard/Course/EditCourseStructure/EditCourseStructure";
import { getAPIUrl } from "@services/config/config";
import { RequestBody, RequestBodyWithAuthHeader, errorHandling } from "@services/utils/ts/requests";

4
apps/web/services/settings/profile.ts
View file

@ -6,8 +6,8 @@ import { RequestBody, errorHandling } from "@services/utils/ts/requests";
GET requests are called from the frontend using SWR (https://swr.vercel.app/)
*/
export async function updateProfile(data: any) {
const result: any = await fetch(`${getAPIUrl()}users/user_id/` + data.user_id, RequestBody("PUT", data, null))
export async function updateProfile(data: any,user_id: number) {
const result: any = await fetch(`${getAPIUrl()}users/` + user_id, RequestBody("PUT", data, null))
const res = await errorHandling(result);
return res;
}