feat(login): add local users functionality (#591)

src/assets/useradd.svg

@@ -0,0 +1 @@
+<svg class="w-6 h-6" fill="currentColor" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z"></path></svg>

src/components/Login/LocalLogin.tsx

@@ -0,0 +1,143 @@
+import React, { useState } from 'react';
+import { defineMessages, useIntl } from 'react-intl';
+import Button from '../Common/Button';
+import { Field, Form, Formik } from 'formik';
+import * as Yup from 'yup';
+import axios from 'axios';
+
+const messages = defineMessages({
+  email: 'Email Address',
+  password: 'Password',
+  validationemailrequired: 'Not a valid email address',
+  validationpasswordrequired: 'Password required',
+  loginerror: 'Something went wrong when trying to sign in',
+  loggingin: 'Logging in...',
+  login: 'Login',
+  goback: 'Go back',
+});
+
+interface LocalLoginProps {
+  goBack: () => void;
+  revalidate: () => void;
+}
+
+const LocalLogin: React.FC<LocalLoginProps> = ({ goBack, revalidate }) => {
+  const intl = useIntl();
+  const [loginError, setLoginError] = useState<string | null>(null);
+
+  const LoginSchema = Yup.object().shape({
+    email: Yup.string()
+      .email()
+      .required(intl.formatMessage(messages.validationemailrequired)),
+    password: Yup.string().required(
+      intl.formatMessage(messages.validationpasswordrequired)
+    ),
+  });
+
+  return (
+    <Formik
+      initialValues={{
+        email: '',
+        password: '',
+      }}
+      validationSchema={LoginSchema}
+      onSubmit={async (values) => {
+        try {
+          await axios.post('/api/v1/auth/local', {
+            email: values.email,
+            password: values.password,
+          });
+        } catch (e) {
+          setLoginError(intl.formatMessage(messages.loginerror));
+        } finally {
+          revalidate();
+        }
+      }}
+    >
+      {({ errors, touched, isSubmitting, isValid }) => {
+        return (
+          <>
+            <Form>
+              <div className="sm:border-t sm:border-gray-800">
+                <label
+                  htmlFor="email"
+                  className="block my-1 text-sm font-medium leading-5 text-gray-400 sm:mt-px"
+                >
+                  {intl.formatMessage(messages.email)}
+                </label>
+                <div className="mt-1 mb-2 sm:mt-0 sm:col-span-2">
+                  <div className="flex max-w-lg rounded-md shadow-sm">
+                    <Field
+                      id="email"
+                      name="email"
+                      type="text"
+                      placeholder="name@example.com"
+                      className="text-white flex-1 block w-full min-w-0 transition duration-150 ease-in-out bg-gray-700 border border-gray-500 rounded-md form-input sm:text-sm sm:leading-5"
+                    />
+                  </div>
+                  {errors.email && touched.email && (
+                    <div className="mt-2 text-red-500">{errors.email}</div>
+                  )}
+                </div>
+                <label
+                  htmlFor="password"
+                  className="block my-1 text-sm font-medium leading-5 text-gray-400 sm:mt-px"
+                >
+                  {intl.formatMessage(messages.password)}
+                </label>
+                <div className="mt-1 mb-2 sm:mt-0 sm:col-span-2">
+                  <div className="flex max-w-lg rounded-md shadow-sm">
+                    <Field
+                      id="password"
+                      name="password"
+                      type="password"
+                      placeholder={intl.formatMessage(messages.password)}
+                      className="text-white flex-1 block w-full min-w-0 transition duration-150 ease-in-out bg-gray-700 border border-gray-500 rounded-md form-input sm:text-sm sm:leading-5"
+                    />
+                  </div>
+                  {errors.password && touched.password && (
+                    <div className="mt-2 text-red-500">{errors.password}</div>
+                  )}
+                </div>
+                {loginError && (
+                  <div className="mt-1 mb-2 sm:mt-0 sm:col-span-2">
+                    <div className="mt-2 text-red-500">{loginError}</div>
+                  </div>
+                )}
+              </div>
+              <div className="pt-5 mt-8 border-t border-gray-700">
+                <div className="flex justify-end">
+                  <span className="inline-flex ml-3 rounded-md shadow-sm">
+                    <Button
+                      buttonType="ghost"
+                      type="reset"
+                      onClick={(e) => {
+                        e.preventDefault();
+                        goBack();
+                      }}
+                    >
+                      {intl.formatMessage(messages.goback)}
+                    </Button>
+                  </span>
+                  <span className="inline-flex ml-3 rounded-md shadow-sm">
+                    <Button
+                      buttonType="primary"
+                      type="submit"
+                      disabled={isSubmitting || !isValid}
+                    >
+                      {isSubmitting
+                        ? intl.formatMessage(messages.loggingin)
+                        : intl.formatMessage(messages.login)}
+                    </Button>
+                  </span>
+                </div>
+              </div>
+            </Form>
+          </>
+        );
+      }}
+    </Formik>
+  );
+};
+
+export default LocalLogin;

src/components/Login/index.tsx

@@ -4,17 +4,22 @@ import { useUser } from '../../hooks/useUser';
 import axios from 'axios';
 import { useRouter } from 'next/dist/client/router';
 import ImageFader from '../Common/ImageFader';
-import { defineMessages, FormattedMessage } from 'react-intl';
+import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 import Transition from '../Transition';
 import LanguagePicker from '../Layout/LanguagePicker';
+import Button from '../Common/Button';
+import LocalLogin from './LocalLogin';
 
 const messages = defineMessages({
   signinplex: 'Sign in to continue',
+  signinwithoverseerr: 'Sign in with Overseerr',
 });
 
 const Login: React.FC = () => {
+  const intl = useIntl();
   const [error, setError] = useState('');
   const [isProcessing, setProcessing] = useState(false);
+  const [localLogin, setLocalLogin] = useState(false);
   const [authToken, setAuthToken] = useState<string | undefined>(undefined);
   const { user, revalidate } = useUser();
   const router = useRouter();
@@ -80,42 +85,67 @@ const Login: React.FC = () => {
           className="px-4 py-8 bg-gray-800 bg-opacity-50 shadow sm:rounded-lg"
           style={{ backdropFilter: 'blur(5px)' }}
         >
-          <Transition
-            show={!!error}
-            enter="opacity-0 transition duration-300"
-            enterFrom="opacity-0"
-            enterTo="opacity-100"
-            leave="opacity-100 transition duration-300"
-            leaveFrom="opacity-100"
-            leaveTo="opacity-0"
-          >
-            <div className="p-4 mb-4 bg-red-600 rounded-md">
-              <div className="flex">
-                <div className="flex-shrink-0">
-                  <svg
-                    className="w-5 h-5 text-red-300"
-                    xmlns="http://www.w3.org/2000/svg"
-                    viewBox="0 0 20 20"
-                    fill="currentColor"
-                    aria-hidden="true"
-                  >
-                    <path
-                      fillRule="evenodd"
-                      d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z"
-                      clipRule="evenodd"
-                    />
-                  </svg>
-                </div>
-                <div className="ml-3">
-                  <h3 className="text-sm font-medium text-red-300">{error}</h3>
+          {!localLogin ? (
+            <>
+              <Transition
+                show={!!error}
+                enter="opacity-0 transition duration-300"
+                enterFrom="opacity-0"
+                enterTo="opacity-100"
+                leave="opacity-100 transition duration-300"
+                leaveFrom="opacity-100"
+                leaveTo="opacity-0"
+              >
+                <div className="p-4 mb-4 bg-red-600 rounded-md">
+                  <div className="flex">
+                    <div className="flex-shrink-0">
+                      <svg
+                        className="w-5 h-5 text-red-300"
+                        xmlns="http://www.w3.org/2000/svg"
+                        viewBox="0 0 20 20"
+                        fill="currentColor"
+                        aria-hidden="true"
+                      >
+                        <path
+                          fillRule="evenodd"
+                          d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z"
+                          clipRule="evenodd"
+                        />
+                      </svg>
+                    </div>
+                    <div className="ml-3">
+                      <h3 className="text-sm font-medium text-red-300">
+                        {error}
+                      </h3>
+                    </div>
+                  </div>
                 </div>
+              </Transition>
+              <div className="pb-4">
+                <PlexLoginButton
+                  isProcessing={isProcessing}
+                  onAuthToken={(authToken) => setAuthToken(authToken)}
+                />
               </div>
-            </div>
-          </Transition>
-          <PlexLoginButton
-            isProcessing={isProcessing}
-            onAuthToken={(authToken) => setAuthToken(authToken)}
-          />
+              <span className="block w-full rounded-md shadow-sm">
+                <Button
+                  buttonType="primary"
+                  className="w-full"
+                  // type="button"
+                  onClick={() => {
+                    setLocalLogin(true);
+                  }}
+                >
+                  {intl.formatMessage(messages.signinwithoverseerr)}
+                </Button>
+              </span>
+            </>
+          ) : (
+            <LocalLogin
+              goBack={() => setLocalLogin(false)}
+              revalidate={revalidate}
+            />
+          )}
         </div>
       </div>
     </div>

src/components/UserList/index.tsx

@@ -6,7 +6,7 @@ import Badge from '../Common/Badge';
 import { FormattedDate, defineMessages, useIntl } from 'react-intl';
 import Button from '../Common/Button';
 import { hasPermission } from '../../../server/lib/permissions';
-import { Permission } from '../../hooks/useUser';
+import { Permission, UserType } from '../../hooks/useUser';
 import { useRouter } from 'next/router';
 import Header from '../Common/Header';
 import Table from '../Common/Table';
@@ -15,6 +15,10 @@ import Modal from '../Common/Modal';
 import axios from 'axios';
 import { useToasts } from 'react-toast-notifications';
 import globalMessages from '../../i18n/globalMessages';
+import { Field, Form, Formik } from 'formik';
+import * as Yup from 'yup';
+import AddUserIcon from '../../assets/useradd.svg';
+import Alert from '../Common/Alert';
 
 const messages = defineMessages({
   userlist: 'User List',
@@ -38,6 +42,22 @@ const messages = defineMessages({
   userdeleteerror: 'Something went wrong deleting the user',
   deleteconfirm:
     'Are you sure you want to delete this user? All existing request data from this user will be removed.',
+  localuser: 'Local User',
+  createlocaluser: 'Create Local User',
+  createuser: 'Create User',
+  creating: 'Creating',
+  create: 'Create',
+  validationemailrequired: 'Must enter a valid email address.',
+  validationpasswordminchars:
+    'Password is too short - should be 8 chars minimum.',
+  usercreatedfailed: 'Something went wrong when trying to create the user',
+  usercreatedsuccess: 'Successfully created the user',
+  email: 'Email Address',
+  password: 'Password',
+  passwordinfo: 'Password Info',
+  passwordinfodescription:
+    'Email notification settings need to be enabled and setup in order to use the auto generated passwords',
+  autogeneratepassword: 'Automatically generate password',
 });
 
 const UserList: React.FC = () => {
@@ -53,6 +73,11 @@ const UserList: React.FC = () => {
   }>({
     isOpen: false,
   });
+  const [createModal, setCreateModal] = useState<{
+    isOpen: boolean;
+  }>({
+    isOpen: false,
+  });
 
   const deleteUser = async () => {
     setDeleting(true);
@@ -107,6 +132,15 @@ const UserList: React.FC = () => {
     return <LoadingSpinner />;
   }
 
+  const CreateUserSchema = Yup.object().shape({
+    email: Yup.string()
+      .email()
+      .required(intl.formatMessage(messages.validationemailrequired)),
+    password: Yup.lazy((value) =>
+      !value ? Yup.string() : Yup.string().min(8)
+    ),
+  });
+
   return (
     <>
       <Transition
@@ -149,16 +183,157 @@ const UserList: React.FC = () => {
           {intl.formatMessage(messages.deleteconfirm)}
         </Modal>
       </Transition>
-      <div className="flex items-center justify-between">
-        <Header>{intl.formatMessage(messages.userlist)}</Header>
-        <Button
-          className="mx-4 my-8"
-          buttonType="primary"
-          disabled={isImporting}
-          onClick={() => importFromPlex()}
+      <Transition
+        enter="opacity-0 transition duration-300"
+        enterFrom="opacity-0"
+        enterTo="opacity-100"
+        leave="opacity-100 transition duration-300"
+        leaveFrom="opacity-100"
+        leaveTo="opacity-0"
+        show={createModal.isOpen}
+      >
+        <Formik
+          initialValues={{
+            email: '',
+            password: '',
+            genpassword: true,
+          }}
+          validationSchema={CreateUserSchema}
+          onSubmit={async (values) => {
+            try {
+              await axios.post('/api/v1/user', {
+                email: values.email,
+                password: values.genpassword ? null : values.password,
+                permissions: Permission.REQUEST,
+                userType: UserType.LOCAL,
+              });
+              addToast(intl.formatMessage(messages.usercreatedsuccess), {
+                appearance: 'success',
+                autoDismiss: true,
+              });
+              setCreateModal({ isOpen: false });
+            } catch (e) {
+              addToast(intl.formatMessage(messages.usercreatedfailed), {
+                appearance: 'error',
+                autoDismiss: true,
+              });
+            } finally {
+              revalidate();
+            }
+          }}
         >
-          {intl.formatMessage(messages.importfromplex)}
-        </Button>
+          {({
+            errors,
+            touched,
+            isSubmitting,
+            values,
+            isValid,
+            setFieldValue,
+            handleSubmit,
+          }) => {
+            return (
+              <Modal
+                title={intl.formatMessage(messages.createuser)}
+                iconSvg={<AddUserIcon className="h-6" />}
+                onOk={() => handleSubmit()}
+                okText={
+                  isSubmitting
+                    ? intl.formatMessage(messages.creating)
+                    : intl.formatMessage(messages.create)
+                }
+                okDisabled={isSubmitting || !isValid}
+                okButtonType="primary"
+                onCancel={() => setCreateModal({ isOpen: false })}
+              >
+                <Alert title={intl.formatMessage(messages.passwordinfo)}>
+                  {intl.formatMessage(messages.passwordinfodescription)}
+                </Alert>
+                <Form>
+                  <div className="mt-6 sm:mt-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-800">
+                    <label
+                      htmlFor="email"
+                      className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px"
+                    >
+                      {intl.formatMessage(messages.email)}
+                    </label>
+                    <div className="mt-1 sm:mt-0 sm:col-span-2">
+                      <div className="flex max-w-lg rounded-md shadow-sm">
+                        <Field
+                          id="email"
+                          name="email"
+                          type="text"
+                          placeholder="name@example.com"
+                          className="flex-1 block w-full min-w-0 transition duration-150 ease-in-out bg-gray-700 border border-gray-500 rounded-md form-input sm:text-sm sm:leading-5"
+                        />
+                      </div>
+                      {errors.email && touched.email && (
+                        <div className="mt-2 text-red-500">{errors.email}</div>
+                      )}
+                    </div>
+                    <label
+                      htmlFor="genpassword"
+                      className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px"
+                    >
+                      {intl.formatMessage(messages.autogeneratepassword)}
+                    </label>
+                    <div className="mt-1 sm:mt-0 sm:col-span-2">
+                      <Field
+                        type="checkbox"
+                        id="genpassword"
+                        name="genpassword"
+                        className="w-6 h-6 text-indigo-600 transition duration-150 ease-in-out rounded-md form-checkbox"
+                        onClick={() => setFieldValue('password', '')}
+                      />
+                    </div>
+                    <label
+                      htmlFor="password"
+                      className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px"
+                    >
+                      {intl.formatMessage(messages.password)}
+                    </label>
+                    <div className="mt-1 sm:mt-0 sm:col-span-2">
+                      <div className="flex max-w-lg rounded-md shadow-sm">
+                        <Field
+                          id="password"
+                          name="password"
+                          type="password"
+                          disabled={values.genpassword}
+                          placeholder={intl.formatMessage(messages.password)}
+                          className="flex-1 block w-full min-w-0 transition duration-150 ease-in-out bg-gray-700 border border-gray-500 rounded-md form-input sm:text-sm sm:leading-5"
+                        />
+                      </div>
+                      {errors.password && touched.password && (
+                        <div className="mt-2 text-red-500">
+                          {errors.password}
+                        </div>
+                      )}
+                    </div>
+                  </div>
+                </Form>
+              </Modal>
+            );
+          }}
+        </Formik>
+      </Transition>
+      <div className="flex-col sm:flex-row flex justify-between">
+        <Header>{intl.formatMessage(messages.userlist)}</Header>
+        <div className="flex">
+          <Button
+            className="mx-4 my-8 outline"
+            buttonType="primary"
+            onClick={() => setCreateModal({ isOpen: true })}
+          >
+            {intl.formatMessage(messages.createlocaluser)}
+          </Button>
+          <Button
+            className="mx-4 my-8"
+            buttonType="primary"
+            disabled={isImporting}
+            onClick={() => importFromPlex()}
+          >
+            {intl.formatMessage(messages.importfromplex)}
+          </Button>
+        </div>
       </div>
       <Table>
         <thead>
@@ -198,9 +373,15 @@ const UserList: React.FC = () => {
                 <div className="text-sm leading-5">{user.requestCount}</div>
               </Table.TD>
               <Table.TD>
-                <Badge badgeType="warning">
-                  {intl.formatMessage(messages.plexuser)}
-                </Badge>
+                {user.userType === UserType.PLEX ? (
+                  <Badge badgeType="warning">
+                    {intl.formatMessage(messages.plexuser)}
+                  </Badge>
+                ) : (
+                  <Badge badgeType="default">
+                    {intl.formatMessage(messages.localuser)}
+                  </Badge>
+                )}
               </Table.TD>
               <Table.TD>
                 {hasPermission(Permission.ADMIN, user.permissions)

src/hooks/useUser.ts

@@ -1,12 +1,18 @@
 import useSwr from 'swr';
 import { hasPermission, Permission } from '../../server/lib/permissions';
 
+export enum UserType {
+  PLEX = 1,
+  LOCAL = 2,
+}
+
 export interface User {
   id: number;
   username: string;
   email: string;
   avatar: string;
   permissions: number;
+  userType: number;
 }
 
 export { Permission };

src/i18n/locale/en.json

@@ -26,7 +26,16 @@
   "components.Layout.Sidebar.users": "Users",
   "components.Layout.UserDropdown.signout": "Sign Out",
   "components.Layout.alphawarning": "This is ALPHA software. Almost everything is bound to be nearly broken and/or unstable. Please report issues to the Overseerr GitHub!",
+  "components.Login.email": "Email Address",
+  "components.Login.goback": "Go back",
+  "components.Login.loggingin": "Logging in...",
+  "components.Login.login": "Login",
+  "components.Login.loginerror": "Something went wrong when trying to sign in",
+  "components.Login.password": "Password",
   "components.Login.signinplex": "Sign in to continue",
+  "components.Login.signinwithoverseerr": "Sign in with Overseerr",
+  "components.Login.validationemailrequired": "Not a valid email address",
+  "components.Login.validationpasswordrequired": "Password required",
   "components.MovieDetails.MovieCast.fullcast": "Full Cast",
   "components.MovieDetails.MovieCrew.fullcrew": "Full Crew",
   "components.MovieDetails.approve": "Approve",
@@ -445,24 +454,38 @@
   "components.UserEdit.vote": "Vote",
   "components.UserEdit.voteDescription": "Grants permission to vote on requests (voting not yet implemented)",
   "components.UserList.admin": "Admin",
+  "components.UserList.autogeneratepassword": "Automatically generate password",
+  "components.UserList.create": "Create",
   "components.UserList.created": "Created",
+  "components.UserList.createlocaluser": "Create Local User",
+  "components.UserList.createuser": "Create User",
+  "components.UserList.creating": "Creating",
   "components.UserList.delete": "Delete",
   "components.UserList.deleteconfirm": "Are you sure you want to delete this user? All existing request data from this user will be removed.",
   "components.UserList.deleteuser": "Delete User",
   "components.UserList.edit": "Edit",
+  "components.UserList.email": "Email Address",
   "components.UserList.importedfromplex": "{userCount, plural, =0 {No new users} one {# new user} other {# new users}} imported from Plex",
   "components.UserList.importfromplex": "Import Users From Plex",
   "components.UserList.importfromplexerror": "Something went wrong importing users from Plex",
   "components.UserList.lastupdated": "Last Updated",
+  "components.UserList.localuser": "Local User",
+  "components.UserList.password": "Password",
+  "components.UserList.passwordinfo": "Password Info",
+  "components.UserList.passwordinfodescription": "Email notification settings need to be enabled and setup in order to use the auto generated passwords",
   "components.UserList.plexuser": "Plex User",
   "components.UserList.role": "Role",
   "components.UserList.totalrequests": "Total Requests",
   "components.UserList.user": "User",
+  "components.UserList.usercreatedfailed": "Something went wrong when trying to create the user",
+  "components.UserList.usercreatedsuccess": "Successfully created the user",
   "components.UserList.userdeleted": "User deleted",
   "components.UserList.userdeleteerror": "Something went wrong deleting the user",
   "components.UserList.userlist": "User List",
   "components.UserList.username": "Username",
   "components.UserList.usertype": "User Type",
+  "components.UserList.validationemailrequired": "Must enter a valid email address.",
+  "components.UserList.validationpasswordminchars": "Password is too short - should be 8 chars minimum.",
   "i18n.approve": "Approve",
   "i18n.approved": "Approved",
   "i18n.available": "Available",