Merge pull request #64 from SolidLabResearch/loginpage-polishing

♻️ loginpage polishing

solid-watchparty/src/components/SWLoginButton.jsx

@@ -1,14 +1,12 @@
 /* libary imports */
 import { LoginButton } from '@inrupt/solid-ui-react';
 import PropTypes from 'prop-types';
+import { FaChevronRight } from 'react-icons/fa';
 
 function SWLoginButton(props)
 {
  return (
- <LoginButton authOptions={props.authOptions} oidcIssuer={props.oidcIssuer}
- redirectUrl={props.redirectUrl} onError={console.error}>
- <button className={"sw-btn rgb-bg-3 rgb-3" + ' ' + props.className}>Log In</button>
- </LoginButton>
+ <></>
  );
 }
 

solid-watchparty/src/components/SWMenu.jsx

@@ -29,10 +29,10 @@ MenuBar.propTypes = {
 }
 
 
-export function MenuItem({children, onClick}) {
+export function MenuItem({children, onClick, href}) {
  return (
  <button className="flex flex-row" onClick={onClick}>
- <a>{children}</a>
+ <a href={href}>{children}</a>
  </button>
  );
 }

solid-watchparty/src/components/SWNavbar.jsx

@@ -1,15 +1,22 @@
 import { useState, useEffect } from "react";
 import { useSession } from "@inrupt/solid-ui-react";
 import { FaUserCircle } from "react-icons/fa";
+import { useNavigate } from "react-router-dom";
 
+/* component imports */
+import { MenuBar, MenuItem } from '../components/SWMenu';
 import LoadingIcon from "./SWLoadingIcon";
 
+/* config imports */
+import config from '../../config';
+
 import UserSolidService from "../services/user.solidservice";
 
 function SWNavbar()
 {
  const sessionContext = useSession();
  const [username, setUsername] = useState(null);
+ const navigateTo = useNavigate();
 
  useEffect(() => {
  if (!sessionContext.session.info.isLoggedIn || sessionContext.sessionRequestInProgress) {
@@ -21,18 +28,14 @@ function SWNavbar()
  }, [sessionContext.sessionRequestInProgress, sessionContext.session]);
 
  if (!sessionContext.session.info.isLoggedIn) {
- return (
- <div className="w-full flex justify-center p-8">
- <div className="flex sw-fw-1 items-center">
- <p>Watchparty</p>
- </div>
- </div>
- );
+ return (<></>);
  }
 
  return (
  <div className="w-full flex p-8 grow-0">
- <label className="sw-fw-1 basis-1/3 text-left">solid-watchparty-v0</label>
+ <div className="flex items-center basis-1/3">
+ <label className="sw-fw-1 text-left sw-text-gradient">solid-watchparty</label>
+ </div>
  <div className="flex sw-fw-1 basis-1/3 justify-center items-center">
  <p>Solid Watchparty</p>
  </div>

solid-watchparty/src/pages/LandingPage.jsx

@@ -34,14 +34,14 @@ export default function LandingPage()
  <div className={
  "flex grow justify-between items-baseline grid grid-cols-3"
  + " top-0 left-0 fixed w-full px-12 py-6 z-10"
- + " border-b border-[#333] bg-[#000]"
+ + " rgb-bg-1"
  }>
  <h1 className="sw-fw-1 mb-5">Solid Watch Party</h1>
  <div className="flex justify-center">
  <MenuBar>
- <MenuItem><a href="#home">Home</a></MenuItem>
- <MenuItem><a href="#about">About</a></MenuItem>
- <MenuItem><a href="#solid">Solid</a></MenuItem>
+ <MenuItem href="#home">Home</MenuItem>
+ <MenuItem href="#about">About</MenuItem>
+ <MenuItem href="#solid">Solid</MenuItem>
  </MenuBar>
  </div>
  <div className="flex justify-end">
@@ -50,12 +50,11 @@ export default function LandingPage()
  </div>
  </div>
  <div className="w-full h-full">
- {/* navbar */}
  <div className="h-full">
  <Banner name="home" className="text-center" showArrow={true}>
- <p className="mt-40 sw-fw-1 sw-fs-1 mb-2 bg-gradient-to-r from-indigo-500 to-[#d9a12A] bg-clip-text text-[#fff0]">
- solid-watchparty
- </p>
+ <div className="flex justify-center">
+ <p className="mt-40 sw-fw-1 sw-fs-1 mb-2 sw-text-gradient">solid-watchparty</p>
+ </div>
  <p className="sw-fs-3 sw-fw-1 rgb-2">
  Watching videos with friends and familiy in a private and secure manner
  </p>

solid-watchparty/src/pages/LoginPage.jsx

@@ -1,6 +1,9 @@
 /* Libary imports */
 import { useState, } from 'react';
 import { useLocation } from 'react-router-dom';
+import { FaChevronLeft, FaQuestionCircle } from "react-icons/fa";
+import { LoginButton } from '@inrupt/solid-ui-react';
+import { FaChevronRight } from 'react-icons/fa';
 
 /* Component imports */
 import SWPageWrapper from '../components/SWPageWrapper'
@@ -10,27 +13,109 @@ import SWLoginButton from '../components/SWLoginButton'
 import config from '../../config';
 
 const authOptions = {
- clientName: "solid-watchparty",
+  clientName: "solid-watchparty",
 };
 
 export default function LoginPage()
 {
- const [oidcIssuer, setOidcIssuer] = useState("");
- const currentLocation = useLocation();
- const redirectLocation = (currentLocation.state?.from || `${config.baseDir}/menu`);
- return (
- <SWPageWrapper className="flex justify-center items-center" mustBeAuthenticated={false}>
- <div className="w-1/2">
- <h1 className="sw-fs-2 sw-fw-1 mb-5">Login</h1>
- <input className="sw-input w-full" type="url" name="oidcIssuerField"
- value={oidcIssuer} placeholder="oidcIssuer"
- onChange={(e) => setOidcIssuer(e.target.value)}/>
- <SWLoginButton className="my-4 w-fit"
- authOptions={authOptions}
- oidcIssuer={oidcIssuer}
- redirectUrl={window.location.protocol + '//' + window.location.host + redirectLocation}
- onError={console.error}/>
- </div>
- </SWPageWrapper>
- )
+ const [oidcIssuer, setOidcIssuer] = useState("");
+ const currentLocation = useLocation();
+ const redirectLocation = (currentLocation.state?.from || `${config.baseDir}/menu`);
+ const [error, setError] = useState("");
+
+ const handleLoginError = (e) => {
+ if (e.message === "Failed to fetch") {
+ setError("Failed to reach provider");
+ return;
+ }
+ setError("Invalid provider");
+ }
+
+ return (
+ <div className="w-full h-full">
+ <a href={config.baseDir + '/'} className="flex gap-2 items-center fixed top-12 left-12">
+ <FaChevronLeft className="w-3 h-3 rgb-2"/>
+ <p className="sw-fw-1">Home</p>
+ </a>
+ <div className="w-full flex justify-center items-center">
+ <div className="rounded">
+ <div className="h-screen flex flex-col justify-center sw-bg-gradient-2 items-center">
+ <div className="w-1/3">
+ <h1 className="sw-fs-2 sw-fw-1 sw-text-gradient">Login to solid-watchparty</h1>
+ <div className="my-6">
+ <p className="sw-fs-4 sw-fw-1 my-2 rgb-2 flex items-center gap-2">
+ Your solid pod provider
+ <a href="#faq">
+ <FaQuestionCircle className="hover:rgb-1"/>
+ </a>
+ </p>
+ <div className={`flex w-full justify-between border sw-input${error === "" ? "" : "-error"}`}>
+ <input name="oidcIssuerField" className="w-full"
+ value={oidcIssuer} placeholder="https://your.pod.provider"
+ onChange={(e) => {
+ setOidcIssuer(e.target.value);
+ setError("");
+ }}/>
+ <SWLoginButton className="w-fit"
+ authOptions={authOptions}
+ oidcIssuer={oidcIssuer}
+ onError={console.error}/>
+ <LoginButton authOptions={authOptions}
+ oidcIssuer={oidcIssuer}
+ redirectUrl={window.location.protocol + '//' + window.location.host + redirectLocation}
+ onError={handleLoginError}>
+ <button className={"sw-btn w-fit"}>
+ <FaChevronRight className="w-4 h-4 "/>
+ </button>
+ </LoginButton>
+ </div>
+ <div className="h-12 mt-3 rgb-alert sw-fw-1">
+ <label>{error}</label>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div className="h-screen flex justify-center">
+ <div className="flex flex-col justify-center gap-12 w-1/3">
+ <a name="faq"></a>
+ <h1 className="sw-fs-2 sw-fw-1">FAQ</h1>
+ <div>
+ <h1 className="sw-fs-2 sw-fw-1">How do I login with my pod?</h1>
+ <p className="sw-fs-3 my-2 rgb-2 text-justify">
+ Every pod provider has a url that you can use to login.
+ This url is called the OIDC issuer. In order to login, you have to fill in the OIDC issuer.
+ </p>
+ </div>
+ <div>
+ <h1 className="sw-fs-2 sw-fw-1">I don't have a pod, what now?</h1>
+ <p className="sw-fs-3 my-2 rgb-2 text-justify">
+ <a href="https://solidproject.org/users/get-a-pod" className="underline">Get a pod</a> from one of the many pod providers.
+ </p>
+ </div>
+ <div>
+ <h1 className="sw-fs-2 sw-fw-1">What is a pod?</h1>
+ <p className="sw-fs-3 my-2 rgb-2 text-justify">
+ A pod is a personal online storage space
+ where you can store your files, photos, documents, and application data. This pod is controlled by you,
+ and you can decide who has access to your data. This is in contrast to most
+ other online services, like social media platforms and cloud storage services, where your data is stored
+ on servers controlled by others.
+ </p>
+ </div>
+ <div>
+ <p className="underline">
+ <a href="https://solidproject.org/">Learn more about pods</a>
+ </p>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div className="">
+ <div className="flex justify-center items-center">
+ <p className="my-8">© 2024 IDLab</p>
+ </div>
+ </div>
+ </div>
+ )
 }

solid-watchparty/src/styles/colors.css

@@ -8,8 +8,8 @@
  --col-fg3: #000;
  --col-fg4: #555;
 
- --col-bg1: #000;
- --col-bg2: #121216;
+ --col-bg1: #1A1B20;
+ --col-bg2: #131419;
  --col-bg3: #fff;
  --col-bg4: #bbb;
  --col-bg5: #050F16;

solid-watchparty/src/styles/general.css

@@ -46,6 +46,7 @@ html, body
  font-size: 13px;
  background-color: var(--col-bg1);
  color: var(--col-fg1);
+ scroll-behavior: smooth;
 }
 
 input, button, a
@@ -134,9 +135,45 @@ a:hover
  box-sizing: border-box;
 }
 
+.sw-input-error
+{
+ border: 1px solid var(--col-alert);
+ text-align: left;
+ background-color: var(--col-bg2);
+ border-radius: 3px;
+ padding: 4px 6px;
+ margin: 0;
+ box-sizing: border-box;
+}
+
 .sw-hr
 {
  padding: 0px 0px;
  margin: 12px 0px;
  border: 1px solid var(--col-bg4);
 }
+
+.sw-text-gradient
+{
+ @apply bg-gradient-to-r;
+ @apply from-indigo-500;
+ @apply to-[#d9a12A];
+ @apply bg-clip-text;
+ @apply text-[#aaa8];
+ @apply inline-block;
+ @apply w-fit;
+}
+
+.sw-bg-gradient-1
+{
+ @apply bg-gradient-to-r;
+ @apply from-indigo-500;
+ @apply to-[#d9a12A];
+}
+
+.sw-bg-gradient-2
+{
+ @apply bg-gradient-to-br;
+ @apply from-[#000];
+ @apply to-[#131419];
+}