Skip to content

Commit

Permalink
Merge pull request #25 from danielhoward-me/dnh/sso
Browse files Browse the repository at this point in the history
Update to integrate with sso and backend
  • Loading branch information
danielnhoward authored Jan 5, 2024
2 parents ab6d4d0 + d459506 commit dff3787
Show file tree
Hide file tree
Showing 40 changed files with 2,134 additions and 176 deletions.
3 changes: 2 additions & 1 deletion .eslintrc.json
Original file line number Diff line number Diff line change
Expand Up @@ -58,6 +58,7 @@
{
"patterns": ["../*", "*types"]
}
]
],
"func-call-spacing": "off"
}
}
4 changes: 2 additions & 2 deletions .github/actions/initialise-project/action.yml
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
runs:
using: composite
steps:
- name: Setup Node v18.16.0
- name: Setup Node v20.10.0
uses: actions/setup-node@v3
with:
node-version: "18.16.0"
node-version: "20.10.0"
- name: Install Yarn
shell: bash
run: npm install -g yarn
Expand Down
4 changes: 4 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,9 @@
# Changelog

## [v2.1.0](/~https://github.com/danielhoward-me/chaos/tree/v2.1.0)

- Add presets, local and cloud saves through a backend and a login system

## [v2.0.1](/~https://github.com/danielhoward-me/chaos/tree/v2.0.1)

- Update links to reflect the new repository location
Expand Down
17 changes: 14 additions & 3 deletions TODO.md
Original file line number Diff line number Diff line change
Expand Up @@ -12,9 +12,6 @@

- [x] Write README
- [x] Write help menu
- [x] Add saves feature which allows a user to download and upload configurations
- [ ] This could be extended by using `localstorage` to save configurations
- [ ] Also allows presets to be created
- [ ] Vertex rule imrpovments
- [ ] Update vertex rules to add conditons to each rule using a unicode arrow
- [ ] Add an OR option to vertex rules
Expand All @@ -27,6 +24,20 @@
- [ ] Allow user to change the colour of the points, depending on the vertex they were generated from


## For release [v2.1.0](/~https://github.com/danielhoward-me/chaos/blob/main/CHANGELOG.md#v210)

### Bugs

- [x] Fix issue with random number generation not being random

### Features

- [x] Add saves feature which allows a user to download and upload configurations
- [x] This could be extended by using `localstorage` to save configurations
- [x] Also allows presets to be created
- [x] Integrate with a backend and login service to allow for online saves


## For release [v2.0.0](/~https://github.com/danielhoward-me/chaos/blob/main/CHANGELOG.md#v200)

### Bugs
Expand Down
4 changes: 2 additions & 2 deletions package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "chaos-game",
"version": "2.0.1",
"version": "2.1.0",
"main": "index.js",
"repository": "/~https://github.com/danielhoward-me/chaos",
"author": "Toffee1347 <danielnhoward93@gmail.com>",
Expand Down Expand Up @@ -38,6 +38,6 @@
"tool": "bash ./dev/run-tool"
},
"engines": {
"node": "18.x"
"node": "20.10.0"
}
}
134 changes: 134 additions & 0 deletions public/admin/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,134 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chaos Game Visualiser Admin</title>

<link rel="stylesheet" href="https://static.danielhoward.me/lib/bootstrap-5.0.2.min.css">
<link rel="stylesheet" href="https://static.danielhoward.me/lib/bootstrap-icons-1.11.0.min.css">
</head>
<body>
<div id="loading" class="center">
<div class="spinner-border" role="status" style="height: 15rem; width: 15rem;">
<span class="visually-hidden">Loading...</span>
</div>
</div>
<div id="login" class="center hidden">
<button id="loginButton" type="button" class="btn btn-primary"><i class="bi bi-cloud-fill"></i> Log in</button>
</div>
<div id="errorAlert" class="center hidden">
<div role="alert" class="alert alert-danger">
<h4 class="alert-heading">An error has occured</h4>
An error has occured whilst loading the page. Please try again later.
</div>
</div>
<div id="unauthorisedAlert" class="center hidden">
<div role="alert" class="alert alert-warning">
<h4 class="alert-heading">Unauthorised</h4>
You need to login with an admin account in order to view this page.
</div>
</div>
<div id="page" class="hidden">
<div class="settings-container">
<div class="container">
<div class="row">
<div class="col-12 col-lg-8">
<fieldset style="overflow-y: auto; overflow-x: hidden;">
<legend>Presets</legend>
<div style="display: flex; align-items: center; float: right;">
<span id="newPresetsError" class="error-text" style="margin-right: 5px;"></span>
<div class="btn-group">
<button id="newPresetButton" type="button" class="btn btn-primary"><i class="bi bi-upload"></i> Upload new preset</button>
</div>
</div>
<input id="newPresetInput" type="file" class="hidden" accept=".json">
<table class="table table-striped presets-table" style="table-layout: fixed;">
<thead>
<tr>
<th scope="col" style="width: 20%;">Name</th>
<th scope="col" style="width: 40%;">Screenshot</th>
<th scope="col" style="width: 40%;">Actions</th>
</tr>
</thead>
<tbody id="presetsTableBody"></tbody>
</table>
<div id="noPresetsMessage" class="grey-message hidden">
There aren't currently any presets saved.
</div>
</fieldset>
</div>
<div class="col-12 col-lg-4">
<fieldset>
<legend>Screenshots</legend>
<h3 style="text-align: center;">Screenshot Status</h3>

<form id="screenshotStatusForm">
<div class="input-group">
<span class="input-group-text">Hash</span>
<input required class="form-control" type="text" id="screenshotStatusInput" placeholder="c286733bfae4fbaeea7d3f9a907949f8"/>
<button type="submit" id="screenshotStatusButton" class="btn btn-primary"><i class="bi bi-search"></i> Lookup</button>
</div>
<span id="screenshotStatusError" class="error-text" style="display: block; text-align: center;"></span>
</form>

<div style="margin-top: 10px; text-align: center; color: lightgray;">
<div id="screenshotStatusContainer">
<span id="screenshotStatusNotFound">Not Found</span>
<i class="bi bi-arrow-right"></i>
<span id="screenshotInQueue">In Queue</span>
<i class="bi bi-arrow-right"></i>
<span id="screenshotStatusGenerating">Generating</span>
<i class="bi bi-arrow-right"></i>
<span id="screenshotStatusGenerated">Generated</span>
</div>
<span id="screenshotStatusFailed">Failed</span>
</div>

<h3 style="margin-top: 25px; text-align: center;">New Screenshots</h3>

<div style="text-align: center; margin-top: 10px;">
<input id="generateScreenshotUpload" type="file" class="hidden" accept=".json">
<button id="generateScreenshotButton" type="button" class="btn btn-primary"><i class="bi bi-camera"></i> Request new screenshot</button>
<div style="display: block; text-align: center; margin-top: 10px;">
<span id="generateScreenshotHash" class="text-muted"></span>
<span id="generateScreenshotError" class="error-text"></span>
</div>
</div>
</fieldset>
<fieldset class="message-container">
<legend>Admins</legend>
<div id="adminSsoMessage" class="grey-message no-permission hidden">
You need to be an admin on sso to view admins.
</div>
<div id="adminListContainer" class="hidden">
<form id="newAdminForm">
<div class="input-group">
<span class="input-group-text">Username</span>
<input required class="form-control" type="text" id="newAdminUsername" placeholder="Rumpelstiltskin"/>
<button type="submit" id="newAdminButton" class="btn btn-primary"><i class="bi bi-plus-lg"></i></button>
</div>
<span id="newAdminError" class="error-text" style="display: block; text-align: center;"></span>
</form>

<table class="table table-striped">
<thead>
<tr>
<th scope="col">Username</th>
<th scope="col">Actions</th>
</tr>
</thead>
<tbody id="adminsTableBody"></tbody>
</table>
<div id="noAdminsMessage" class="grey-message hidden">
There aren't currently any admins.
</div>
</div>
</fieldset>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
29 changes: 29 additions & 0 deletions public/auth/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

<!-- Primary Meta Tags -->
<title>Logging you into your account...</title>

<link rel="stylesheet" href="https://static.danielhoward.me/lib/bootstrap-5.0.2.min.css">
<link rel="stylesheet" href="https://static.danielhoward.me/lib/bootstrap-icons-1.10.5.min.css">
</head>
<body>
<div class="center">
<div id="loadingSpinner">
<div class="spinner-border" style="width: 10rem; height: 10rem;" role="status">
<span class="visually-hidden">Loading...</span>
</div>
</div>
<div id="errorAlert" class="alert alert-danger hidden" role="alert">
<h4 class="alert-heading">An error has occured</h4>
</div>
<div id="success" class="hidden">
<i class="bi bi-check" style="font-size: 250px; color: green;"></i>
</div>
</div>
</body>
</html>
101 changes: 89 additions & 12 deletions public/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@
<meta property="twitter:image" content="https://chaos.danielhoward.me/static/img/sierpinski-triangle.jpg">

<link rel="stylesheet" href="https://static.danielhoward.me/lib/bootstrap-5.0.2.min.css">
<link rel="stylesheet" href="https://static.danielhoward.me/lib/bootstrap-icons-1.10.5.min.css">
<link rel="stylesheet" href="https://static.danielhoward.me/lib/bootstrap-icons-1.11.0.min.css">
</head>
<body>
<% function playbackSettingsBar() { %>
Expand Down Expand Up @@ -55,6 +55,67 @@
</button>
<h3 style="text-align: center;">Settings</h3>

<div class="settings-stage" style="margin-top: 15px;">
<div style="display: flex; flex-direction: column; gap: 5px;">
<button id="loginButton" type="button" class="btn btn-primary"><i class="bi bi-cloud-fill"></i> Log in</button>
<div id="loginLoading" style="color: #6c757d;" class="hidden">
<div class="spinner-border spinner-border-sm" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<span id="loginLoadingText"></span>
</div>
<div id="loginError" class="error-text hidden"></div>
<div id="loggedInView" class="hidden">
<div style="display: flex; align-items: center; position: relative;">
<div>
<img id="profilePicture" style="border-radius: 50%; margin-right: 10px;" width="50" height="50" alt="User Profile Picture"/>
<span id="username"></span>
</div>
<div id="profileButtons" class="btn-group" style="position: absolute; right: 0;">
<a id="accountButton" target="_blank" class="btn btn-primary"><i class="bi bi-person"></i></a>
<button id="logoutButton" class="btn btn-danger">Log out</button>
</div>
</div>
</div>
</div>
</div>

<div class="btn-group" style="width: 100%; margin-bottom: 0.5rem; margin-top: 0.5rem;">
<button id="presetSavesButton" type="button" class="btn btn-outline-primary"><i class="bi bi-sliders"></i> Presets</button>
<button id="localSavesButton" type="button" class="btn btn-outline-primary"><i class="bi bi-floppy"></i> Local Saves</button>
<button id="cloudSavesButton" type="button" class="btn btn-outline-primary"><i class="bi bi-cloud"></i> Cloud Saves</button>
</div>

<div id="presetSaves" style="margin-bottom: 0.5rem;" class="settings-stage hidden">
<div id="presetsLoading" style="color: #6c757d;">
<div class="spinner-border spinner-border-sm" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<span>Fetching presets from the server</span>
</div>
<div id="presetsError" class="error-text hidden"></div>
<div class="saves-container"></div>
</div>
<div id="localSaves" style="margin-bottom: 0.5rem;" class="settings-stage hidden">
<input type="file" class="hidden" id="localSaveFileInput" accept=".json"/>
<div style="text-align: right; margin-bottom: 5px;">
<button id="uploadLocalSaveButton" type="button" class="btn btn-primary">
<div id="uploadLocalSaveLoading" class="spinner-border spinner-border-sm hidden" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<i class="bi bi-upload"></i> Upload local save
</button>
</div>
<div id="localSaveError" class="error-text hidden"></div>
<div class="saves-container"></div>
</div>
<div id="cloudSaves" style="margin-bottom: 0.5rem;" class="settings-stage hidden">
<div id="viewCloudSavesRequireLogin" class="text-muted">
To view cloud saves, you need log in by clicking the button at the top of the settings box
</div>
<div class="saves-container"></div>
</div>

<div data-setup-stage="1">
<% const shapeTypes = [
'polygon',
Expand Down Expand Up @@ -272,24 +333,40 @@ <h6><a class="settings-help-link" href="#help-playback-settings"><i class="bi bi
</div>
</div>

<br/>

<div style="text-align: center;">
<input type="file" class="hidden" id="configUploadInput" accept=".json"/>
<div style="text-align: center; margin-top: 0.5rem;">
<div style="margin-bottom: 10px;" id="saveButtons">
<div class="btn-group">
<button id="downloadConfigButton" type="button" class="btn btn-primary"><i class="bi bi-download"></i> Save</button>
<button id="uploadConfigButton" type="button" class="btn btn-primary"><i class="bi bi-download"></i> Load</button>
<div class="btn-group" style="width: 100%;">
<button id="downloadConfigButton" type="button" class="btn btn-outline-primary"><i class="bi bi-download"></i></button>
<button id="saveLocalButton" type="button" class="btn btn-outline-primary"><i class="bi bi-floppy"></i> Save Locally</button>
<button id="saveCloudButton" type="button" class="btn btn-outline-primary"><i class="bi bi-cloud"></i> Save to the Cloud</button>
</div>
<div style="margin-top: 5px;">
<div id="createSaveContainer" class="settings-stage hidden">
<div id="cloudSavesRequireLogin" class="text-muted">
To make cloud saves, you need log in by clicking the button at the top of the settings box
</div>
<form id="createSaveForm" class="input-group hidden">
<span class="input-group-text">
Name
</span>
<input class="form-control" type="text" id="saveNameInput" placeholder="Fractal"/>
<button id="createSaveButton" class="btn btn-primary" type="submit">
<div id="createSaveLoading" class="spinner-border spinner-border-sm hidden" role="status">
<span class="visually-hidden">Loading...</span>
</div>
Save
</button>
</form>
</div>
<span class="error-text hidden" id="createSaveError"></span>
</div>
<div class="invalid-feedback" id="configError"></div>
</div>
<div class="btn-group">
<button type="button" class="btn btn-primary" id="openHelpButton"><i class="bi bi-info-circle"></i> Help</button>
<button type="button" class="btn btn-danger" id="resetButton"><i class="bi bi-x-square"></i> Reset</button>
</div>
</div>
<br/>
<div style="text-align: center;">
<div style="text-align: center; margin-top: 10px;">
<small class="form-text">
<% if (isDevelopment) { %>
<span>development</span>
Expand Down Expand Up @@ -659,7 +736,7 @@ <h5 style="text-align: center;"><i class="bi bi-4-circle-fill"></i> Playback Set

<canvas id="canvas" class="canvas"></canvas>

<div class="zoom">
<div id="zoom" class="zoom">
<div class="btn-group-vertical">
<button class="btn btn-light" id="zoomInButton">
<i class="bi bi-zoom-in"></i>
Expand Down
Loading

0 comments on commit dff3787

Please sign in to comment.