Add admin panel and user roles (#189)

Author: alxlion

.gitignore

@@ -30,16 +30,21 @@ claper-*.tar
 # Ignore digested assets cache.
 /priv/static/cache_manifest.json
 
+# Env files except sample
+.env*
+!.env.sample
+
 # In case you use Node.js/npm, you want to ignore these.
 npm-debug.log
 /assets/node_modules/
 
 priv/static/images/.DS_Store
 priv/static/.DS_Store
-.env
 priv/static/fonts/.DS_Store
 test/e2e/node_modules
 .DS_Store
 priv/static/.well-known/apple-developer-merchantid-domain-association
 priv/static/loaderio-eb3b956a176cdd4f54eb8570ce8bbb06.txt
 .elixir_ls
+
+tailwind.config.js

CHANGELOG.md

@@ -2,9 +2,12 @@
 
 ### Features
 
+- Add Admin Panel to manage users and presentations
+- Add user roles: user, admin
 - Add `LANGUAGES` setting to configure available languages in the app
-- Add Latvian language support (@possible-im)
-- Add Hungarian language support (@bpisch)
+- Add hideable presenter attendee count (#183 #155)
+- Add Hungarian translation (#161)
+- Add Latvian translation (#163)
 
 ### Fixes and improvements
 
@@ -15,7 +18,10 @@
 - Fix event name validation to be required
 - Docker image is now using Ubuntu instead of Alpine for better dependencies support
 - Fix scrollbar not showing in event manager when no presentation file (#164) (@aryel780)
-- Fix settings scroll for small screen (#168) (@ChayanDass)
+- Fix settings scroll for small screen (#168)
+- Fix duplicate key quiz when duplicate (#182)
+- Fix email change confirmation (#172)
+- Fix italian translation (#179)
 
 ### v.2.3.2
 

CLAUDE.md

@@ -0,0 +1,112 @@
+# CLAUDE.md
+
+This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
+
+## Common Development Commands
+
+### Setup and Dependencies
+```bash
+# Install dependencies
+mix deps.get
+mix setup  # Runs deps.get + ecto.setup
+
+# Setup database
+mix ecto.setup  # Creates DB, runs migrations, seeds
+mix ecto.reset  # Drops DB and runs ecto.setup
+
+# Install frontend dependencies
+cd assets && npm install && cd ..
+```
+
+### Running the Application
+```bash
+# Start Phoenix server
+mix phx.server
+
+# Or inside IEx
+iex -S mix phx.server
+```
+
+### Testing
+```bash
+# Run tests
+mix test
+
+# Run specific test file
+mix test test/path/to/test_file.exs
+
+# Run test with specific line number
+mix test test/path/to/test_file.exs:42
+```
+
+### Code Quality
+```bash
+# Format code
+mix format
+
+# Run Credo for code analysis
+mix credo
+```
+
+### Building Assets
+```bash
+# For production deployment
+mix assets.deploy
+```
+
+## High-Level Architecture
+
+Claper is an interactive presentation platform built with Phoenix Framework and Elixir. It enables real-time audience interaction during presentations through polls, forms, messages, and quizzes.
+
+### Core Components
+
+1. **Phoenix LiveView Architecture**
+   - Real-time updates without JavaScript through WebSocket connections
+   - LiveView modules in `lib/claper_web/live/` handle interactive UI
+   - Presence tracking for real-time user counts
+
+2. **Main Domain Contexts** (in `lib/claper/`)
+   - `Accounts` - User management, authentication, OIDC integration
+   - `Events` - Core presentation/event management
+   - `Posts` - Audience messages and reactions
+   - `Polls` - Interactive polls with real-time voting
+   - `Forms` - Custom forms for audience feedback
+   - `Quizzes` - Quiz functionality with LTI support
+   - `Presentations` - Slide management and state tracking
+   - `Embeds` - External content embedding
+
+3. **Authentication & Authorization**
+   - Multiple auth methods: email/password, OIDC
+   - Role-based access control with admin panel
+   - LTI 1.3 support for educational platforms
+
+4. **Real-time Features**
+   - Phoenix PubSub for broadcasting updates
+   - Phoenix Presence for tracking online users
+   - LiveView for reactive UI without custom JavaScript
+
+5. **Background Jobs**
+   - Oban for background job processing
+   - Email sending
+
+6. **Frontend Stack**
+   - Tailwind CSS for styling (with DaisyUI components)
+   - Alpine.js for minimal JavaScript interactions
+   - esbuild for JavaScript bundling
+   - Separate admin and user interfaces
+
+7. **Key LiveView Modules**
+   - `EventLive.Show` - Attendee view
+   - `EventLive.Presenter` - Presenter control view
+   - `EventLive.Manage` - Event management interface
+   - `AdminLive.*` - Admin panel components
+
+8. **Database Structure**
+   - PostgreSQL with Ecto
+   - Key models: User, Event, Post, Poll, Quiz, PresentationState
+   - Soft deletes for users
+   - UUID-based public identifiers
+
+9. **LTI Integration**
+   - LTI 1.3 support for quizzes, publish score to LMS
+   - LTI launch handling in `LtiController`

assets/css/admin.css

@@ -0,0 +1,63 @@
+@import "tailwindcss";
+@plugin "daisyui";
+
+@utility btn {
+  @apply rounded-full !font-display text-small-body;
+}
+
+@utility input {
+  @apply rounded-full focus:outline-none focus-within:outline-none focus:border-2 focus-within:border-2 !font-display text-small-body transition-all;
+}
+
+@utility select {
+  @apply rounded-full focus:outline-none focus-within:outline-none focus:border-2 focus-within:border-2 !font-display text-small-body transition-all;
+}
+
+@utility label {
+  @apply ml-2;
+}
+
+@utility fieldset-legend {
+  @apply ml-3;
+}
+
+@plugin "daisyui/theme" {
+  name: "claper";
+  default: true; /* set as default */
+  prefersdark: false; /* set as default dark mode (prefers-color-scheme:dark) */
+  color-scheme: light; /* color of browser-provided UI */
+
+  --color-primary: #140753;
+  --color-primary-content: #ffffff;
+  --color-secondary: #f4f4f4;
+  --color-secondary-content: #140553;
+  --color-accent: #8611ed;
+  --color-accent-content: #ffffff;
+  --color-neutral: #000000;
+  --color-neutral-content: #ffffff;
+  --color-info: #79bfe2;
+  --color-info-content: #0e3649;
+  --color-success: #3cb957;
+  --color-success-content: #143e1d;
+  --color-warning: #ffb62e;
+  --color-warning-content: #523500;
+  --color-error: #e7000b;
+  --color-error-content: #fff;
+  /* border radius */
+  --radius-selector: 1rem;
+  --radius-field: 0.25rem;
+  --radius-box: 0.5rem;
+
+  /* base sizes */
+  --size-selector: 0.25rem;
+  --size-field: 0.25rem;
+
+  /* border size */
+  --border: 1px;
+
+  /* effects */
+  --depth: 1;
+  --noise: 0;
+}
+
+@import "./modern.css" layer(theme);

assets/css/app.css

@@ -2,7 +2,7 @@
 @import 'animate.css/animate.min.css';
 
 @import 'tailwindcss';
-@import './theme.css';
+@import './theme.css' layer(theme);
 
 @layer base {
   *,
@@ -302,6 +302,20 @@
        url('/fonts/Roboto/roboto-v29-latin-900italic.svg#Roboto') format('svg'); /* Legacy iOS */
 }
 
+@font-face {
+  font-family: 'Montserrat';
+  font-style: normal;
+  font-weight: 100 300 400 500 700 900;
+  src: url('/fonts/Montserrat/Montserrat-VariableFont_wght.ttf');
+}
+
+@font-face {
+  font-family: 'Montserrat';
+  font-style: italic;
+  font-weight: 100 300 400 500 700 900;
+  src: url('/fonts/Montserrat/Montserrat-Italic-VariableFont_wght.ttf');
+}
+
 .bg-gradient-animate {
   background: linear-gradient(-45deg, var(--color-secondary-500), var(--color-secondary-600), var(--color-primary-400), var(--color-primary-400));
   background-size: 400% 400%;