mirror of
https://github.com/supabase/supabase.git
synced 2026-10-05 01:15:03 +03:00
Apply Prettier changes
This commit is contained in:
kiwicopple authored and GitHub Actions committed
1 parent
594b8dc403
commit
cd9958319c
204 files changed
+45350
-47727
No files matched your search
@@ -66,12 +66,12 @@ Our client library is modular. Each sub-library is a standalone implementation f
|
||||
- `realtime-{lang}`: Client library to work with [Realtime](https://github.com/supabase/realtime)
|
||||
- `gotrue-{lang}`: Client library to work with [GoTrue](https://github.com/netlify/gotrue)
|
||||
|
||||
| Repo | Official | Community |
|
||||
| --------------------- | ------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| **`supabase-{lang}`** | [`JS`](https://github.com/supabase/supabase-js) | [`C#`](https://github.com/supabase/supabase-csharp) \| [`Dart`](https://github.com/supabase/supabase-dart) \| [`Python`](https://github.com/supabase/supabase-py) \| `Rust` \| [`Ruby`](https://github.com/supabase/supabase-rb)
|
||||
| `postgrest-{lang}` | [`JS`](https://github.com/supabase/postgrest-js) | [`C#`](https://github.com/supabase/postgrest-csharp) \| [`Dart`](https://github.com/supabase/postgrest-dart) \| [`Python`](https://github.com/supabase/postgrest-py) \| [`Rust`](https://github.com/supabase/postgrest-rs) \| [`Ruby`](https://github.com/supabase/postgrest-rb)
|
||||
| `realtime-{lang}` | [`JS`](https://github.com/supabase/realtime-js) | [`C#`](https://github.com/supabase/realtime-csharp) \| [`Dart`](https://github.com/supabase/realtime-dart) \| [`Python`](https://github.com/supabase/realtime-py) \| `Rust` \| `Ruby` |
|
||||
| `gotrue-{lang}` | [`JS`](https://github.com/supabase/gotrue-js) | [`C#`](https://github.com/supabase/gotrue-csharp) \| [`Dart`](https://github.com/supabase/gotrue-dart) \| [`Python`](https://github.com/supabase/gotrue-py) \| `Rust` \| `Ruby` |
|
||||
| Repo | Official | Community |
|
||||
| --------------------- | ------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| **`supabase-{lang}`** | [`JS`](https://github.com/supabase/supabase-js) | [`C#`](https://github.com/supabase/supabase-csharp) \| [`Dart`](https://github.com/supabase/supabase-dart) \| [`Python`](https://github.com/supabase/supabase-py) \| `Rust` \| [`Ruby`](https://github.com/supabase/supabase-rb) |
|
||||
| `postgrest-{lang}` | [`JS`](https://github.com/supabase/postgrest-js) | [`C#`](https://github.com/supabase/postgrest-csharp) \| [`Dart`](https://github.com/supabase/postgrest-dart) \| [`Python`](https://github.com/supabase/postgrest-py) \| [`Rust`](https://github.com/supabase/postgrest-rs) \| [`Ruby`](https://github.com/supabase/postgrest-rb) |
|
||||
| `realtime-{lang}` | [`JS`](https://github.com/supabase/realtime-js) | [`C#`](https://github.com/supabase/realtime-csharp) \| [`Dart`](https://github.com/supabase/realtime-dart) \| [`Python`](https://github.com/supabase/realtime-py) \| `Rust` \| `Ruby` |
|
||||
| `gotrue-{lang}` | [`JS`](https://github.com/supabase/gotrue-js) | [`C#`](https://github.com/supabase/gotrue-csharp) \| [`Dart`](https://github.com/supabase/gotrue-dart) \| [`Python`](https://github.com/supabase/gotrue-py) \| `Rust` \| `Ruby` |
|
||||
|
||||
<!--- Remove this list if you're traslating to another language, it's hard to keep updated across multiple files-->
|
||||
<!--- Keep only the link to the list of translation files-->
|
||||
|
||||
+2
-4
@@ -2,24 +2,22 @@
|
||||
|
||||
## Supported Versions
|
||||
|
||||
|
||||
| Version | Supported |
|
||||
| ------- | ------------------ |
|
||||
| All | :white_check_mark: |
|
||||
| All | :white_check_mark: |
|
||||
|
||||
## Reporting a Vulnerability
|
||||
|
||||
Contact: security@supabase.io
|
||||
Canonical: https://supabase.io/.well-known/security.txt
|
||||
|
||||
|
||||
At Supabase, we consider the security of our systems a top priority. But no matter how much effort we put into system security, there can still be vulnerabilities present.
|
||||
|
||||
If you discover a vulnerability, we would like to know about it so we can take steps to address it as quickly as possible. We would like to ask you to help us better protect our clients and our systems.
|
||||
|
||||
Please do the following:
|
||||
|
||||
- E-mail your findings to security@supabase.io.
|
||||
- E-mail your findings to security@supabase.io.
|
||||
- Do not take advantage of the vulnerability or problem you have discovered, for example by downloading more data than necessary to demonstrate the vulnerability or deleting or modifying other people's data,
|
||||
- Do not reveal the problem to others until it has been resolved,
|
||||
- Do not use attacks on physical security, social engineering, distributed denial of service, spam or applications of third parties, and
|
||||
|
||||
@@ -13,9 +13,7 @@
|
||||
"updates": {
|
||||
"fallbackToCacheTimeout": 0
|
||||
},
|
||||
"assetBundlePatterns": [
|
||||
"**/*"
|
||||
],
|
||||
"assetBundlePatterns": ["**/*"],
|
||||
"ios": {
|
||||
"supportsTablet": true
|
||||
},
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
module.exports = function(api) {
|
||||
api.cache(true);
|
||||
module.exports = function (api) {
|
||||
api.cache(true)
|
||||
return {
|
||||
presets: ['babel-preset-expo'],
|
||||
plugins: ['inline-dotenv'],
|
||||
}
|
||||
};
|
||||
}
|
||||
@@ -7,9 +7,8 @@ How to sign up and login using supabase and supabase-js using HTML and JavaScrip
|
||||
<img width="558" alt="image" src="https://user-images.githubusercontent.com/458736/88377414-b6fb4180-cdd1-11ea-8061-103ec4577b7b.png">
|
||||
|
||||
### running
|
||||
|
||||
`npm run dev` (requires npx to be installed)
|
||||
|
||||
if you want to make changes without restarting the server run this in a different terminal window:
|
||||
`npm run watch`
|
||||
|
||||
|
||||
@@ -1,77 +1,63 @@
|
||||
import { useEffect, useState, useRef, useMemo, useCallback } from "react";
|
||||
import { MapContainer, TileLayer, Marker, Popup, Circle } from "react-leaflet";
|
||||
import { RoundToFixDecimals } from "lib/utils";
|
||||
import { supabase } from "lib/api";
|
||||
import TextLog from "components/TextLog";
|
||||
import { useEffect, useState, useRef, useMemo, useCallback } from 'react'
|
||||
import { MapContainer, TileLayer, Marker, Popup, Circle } from 'react-leaflet'
|
||||
import { RoundToFixDecimals } from 'lib/utils'
|
||||
import { supabase } from 'lib/api'
|
||||
import TextLog from 'components/TextLog'
|
||||
|
||||
function DraggableMarker({ initialPos, addCircle }) {
|
||||
const [position, setPosition] = useState(initialPos);
|
||||
const markerRef = useRef(null);
|
||||
const [position, setPosition] = useState(initialPos)
|
||||
const markerRef = useRef(null)
|
||||
const eventHandlers = useMemo(
|
||||
() => ({
|
||||
dragend() {
|
||||
const marker = markerRef.current;
|
||||
const pos = marker.getLatLng();
|
||||
if (addCircle) addCircle(pos);
|
||||
if (marker) setPosition(pos);
|
||||
const marker = markerRef.current
|
||||
const pos = marker.getLatLng()
|
||||
if (addCircle) addCircle(pos)
|
||||
if (marker) setPosition(pos)
|
||||
},
|
||||
}),
|
||||
[addCircle]
|
||||
);
|
||||
)
|
||||
|
||||
return (
|
||||
<Marker
|
||||
draggable={true}
|
||||
eventHandlers={eventHandlers}
|
||||
position={position}
|
||||
ref={markerRef}
|
||||
>
|
||||
<Marker draggable={true} eventHandlers={eventHandlers} position={position} ref={markerRef}>
|
||||
<Popup minWidth={90}>
|
||||
{`lat: ${position.lat}`}
|
||||
<br />
|
||||
{`long: ${position.lng}`}
|
||||
</Popup>
|
||||
</Marker>
|
||||
);
|
||||
)
|
||||
}
|
||||
|
||||
function MapInput({ clientRef, center, zoom }) {
|
||||
const [log, setLog] = useState(undefined);
|
||||
const [circles, setCircles] = useState([]);
|
||||
const [log, setLog] = useState(undefined)
|
||||
const [circles, setCircles] = useState([])
|
||||
|
||||
useEffect(() => {
|
||||
let newLog = `Ref: ${clientRef}\nReady to send location...`;
|
||||
let newLog = `Ref: ${clientRef}\nReady to send location...`
|
||||
newLog += circles.map((item) => {
|
||||
return `\nsent lat=${RoundToFixDecimals(
|
||||
item.lat
|
||||
)} long=${RoundToFixDecimals(item.lng)}`;
|
||||
});
|
||||
setLog(newLog);
|
||||
}, [circles, clientRef]);
|
||||
return `\nsent lat=${RoundToFixDecimals(item.lat)} long=${RoundToFixDecimals(item.lng)}`
|
||||
})
|
||||
setLog(newLog)
|
||||
}, [circles, clientRef])
|
||||
|
||||
const onAddCircle = useCallback(
|
||||
async (pos) => {
|
||||
setCircles([...circles, pos]);
|
||||
setCircles([...circles, pos])
|
||||
|
||||
// insert new location
|
||||
await supabase
|
||||
.from("locations")
|
||||
.insert([
|
||||
{ latitude: pos.lat, longitude: pos.lng, user_id: clientRef },
|
||||
]);
|
||||
.from('locations')
|
||||
.insert([{ latitude: pos.lat, longitude: pos.lng, user_id: clientRef }])
|
||||
},
|
||||
[setCircles, circles, supabase, clientRef]
|
||||
);
|
||||
)
|
||||
|
||||
function renderCircles() {
|
||||
return circles.map((item, index) => (
|
||||
<Circle
|
||||
key={`${index}`}
|
||||
center={item}
|
||||
pathOptions={{ fillColor: "blue" }}
|
||||
radius={20}
|
||||
/>
|
||||
));
|
||||
<Circle key={`${index}`} center={item} pathOptions={{ fillColor: 'blue' }} radius={20} />
|
||||
))
|
||||
}
|
||||
|
||||
return (
|
||||
@@ -96,6 +82,6 @@ function MapInput({ clientRef, center, zoom }) {
|
||||
}
|
||||
`}</style>
|
||||
</div>
|
||||
);
|
||||
)
|
||||
}
|
||||
export default MapInput;
|
||||
export default MapInput
|
||||
@@ -1,49 +1,43 @@
|
||||
import { useEffect, useReducer } from "react";
|
||||
import { MapContainer, TileLayer, Polyline } from "react-leaflet";
|
||||
import { RoundToFixDecimals } from "lib/utils";
|
||||
import { supabase } from "lib/api";
|
||||
import TextLog from "components/TextLog";
|
||||
import { useEffect, useReducer } from 'react'
|
||||
import { MapContainer, TileLayer, Polyline } from 'react-leaflet'
|
||||
import { RoundToFixDecimals } from 'lib/utils'
|
||||
import { supabase } from 'lib/api'
|
||||
import TextLog from 'components/TextLog'
|
||||
|
||||
export default function MapView({ center, zoom }) {
|
||||
const [state, dispatch] = useReducer(mapReducer, initialState);
|
||||
const [state, dispatch] = useReducer(mapReducer, initialState)
|
||||
|
||||
useEffect(() => {
|
||||
// Listen to INSERT event on locations table
|
||||
const subscription = supabase
|
||||
.from("locations")
|
||||
.on("INSERT", (payload) => {
|
||||
console.log("New Position received!", payload);
|
||||
dispatch({ payload: payload.new });
|
||||
.from('locations')
|
||||
.on('INSERT', (payload) => {
|
||||
console.log('New Position received!', payload)
|
||||
dispatch({ payload: payload.new })
|
||||
})
|
||||
.subscribe();
|
||||
.subscribe()
|
||||
|
||||
return () => {
|
||||
if (subscription) supabase.removeSubscription(subscription);
|
||||
};
|
||||
}, []);
|
||||
if (subscription) supabase.removeSubscription(subscription)
|
||||
}
|
||||
}, [])
|
||||
|
||||
function drawPolylines() {
|
||||
let result = Object.keys(state.userPositions).map((key, idx) => {
|
||||
const item = state.userPositions[key];
|
||||
if (!item) return;
|
||||
const item = state.userPositions[key]
|
||||
if (!item) return
|
||||
|
||||
const { color, data } = item;
|
||||
const { color, data } = item
|
||||
const polyline = data.map((item) => {
|
||||
if (!item) return;
|
||||
const { lat, lng } = item;
|
||||
return [lat, lng];
|
||||
});
|
||||
if (!item) return
|
||||
const { lat, lng } = item
|
||||
return [lat, lng]
|
||||
})
|
||||
|
||||
return (
|
||||
<Polyline
|
||||
key={`line-${idx}`}
|
||||
pathOptions={{ color: color }}
|
||||
positions={polyline}
|
||||
/>
|
||||
);
|
||||
});
|
||||
return <Polyline key={`line-${idx}`} pathOptions={{ color: color }} positions={polyline} />
|
||||
})
|
||||
|
||||
return result;
|
||||
return result
|
||||
}
|
||||
|
||||
return (
|
||||
@@ -57,35 +51,35 @@ export default function MapView({ center, zoom }) {
|
||||
</MapContainer>
|
||||
<TextLog log={state.log} />
|
||||
</div>
|
||||
);
|
||||
)
|
||||
}
|
||||
|
||||
function randomColor() {
|
||||
var array = ["black", "magenta", "blue", "indigo", "green", "blueviolet"];
|
||||
return array[Math.floor(Math.random() * array.length)];
|
||||
var array = ['black', 'magenta', 'blue', 'indigo', 'green', 'blueviolet']
|
||||
return array[Math.floor(Math.random() * array.length)]
|
||||
}
|
||||
|
||||
const initialState = {
|
||||
log: "Start listerning...",
|
||||
log: 'Start listerning...',
|
||||
userPositions: {},
|
||||
};
|
||||
}
|
||||
|
||||
const mapReducer = (state, action) => {
|
||||
const { id, user_id, latitude: lat, longitude: lng } = action.payload;
|
||||
const position = { id, user_id, lat, lng };
|
||||
const { id, user_id, latitude: lat, longitude: lng } = action.payload
|
||||
const position = { id, user_id, lat, lng }
|
||||
|
||||
let positions = state.userPositions[user_id];
|
||||
if (positions) positions.data = [...positions.data, position];
|
||||
else positions = { color: randomColor(), data: [position] };
|
||||
const userPositions = { ...state.userPositions, [user_id]: positions };
|
||||
let positions = state.userPositions[user_id]
|
||||
if (positions) positions.data = [...positions.data, position]
|
||||
else positions = { color: randomColor(), data: [position] }
|
||||
const userPositions = { ...state.userPositions, [user_id]: positions }
|
||||
|
||||
let log = state.log;
|
||||
log += `\nuser_id=${user_id}`;
|
||||
log += ` lat=${RoundToFixDecimals(lat)}`;
|
||||
log += ` long=${RoundToFixDecimals(lng)}`;
|
||||
let log = state.log
|
||||
log += `\nuser_id=${user_id}`
|
||||
log += ` lat=${RoundToFixDecimals(lat)}`
|
||||
log += ` long=${RoundToFixDecimals(lng)}`
|
||||
|
||||
return {
|
||||
log,
|
||||
userPositions,
|
||||
};
|
||||
};
|
||||
}
|
||||
}
|
||||
@@ -1,4 +1,4 @@
|
||||
import Head from "next/head";
|
||||
import Head from 'next/head'
|
||||
|
||||
export default function PageLayout({ title, children }) {
|
||||
return (
|
||||
@@ -10,10 +10,9 @@ export default function PageLayout({ title, children }) {
|
||||
|
||||
<footer className="footer">
|
||||
<a href="https://supabase.io" target="_blank" rel="noopener noreferrer">
|
||||
Powered by{" "}
|
||||
<img src="/supabase.svg" alt="Supabase Logo" className="logo" />
|
||||
Powered by <img src="/supabase.svg" alt="Supabase Logo" className="logo" />
|
||||
</a>
|
||||
</footer>
|
||||
</div>
|
||||
);
|
||||
)
|
||||
}
|
||||
@@ -1,14 +1,14 @@
|
||||
import React, { useState } from "react";
|
||||
import { supabase } from "lib/api";
|
||||
import React, { useState } from 'react'
|
||||
import { supabase } from 'lib/api'
|
||||
|
||||
/**
|
||||
* Sign in with username and password
|
||||
*
|
||||
* @param {String} role DRIVER/MANAGER. default as DRIVER
|
||||
*/
|
||||
export default function SignIn({ role = "DRIVER" }) {
|
||||
const [formData, updateFormData] = useState({ role });
|
||||
const [action, setAction] = useState(null);
|
||||
export default function SignIn({ role = 'DRIVER' }) {
|
||||
const [formData, updateFormData] = useState({ role })
|
||||
const [action, setAction] = useState(null)
|
||||
|
||||
function onChange(e) {
|
||||
updateFormData({
|
||||
@@ -16,37 +16,37 @@ export default function SignIn({ role = "DRIVER" }) {
|
||||
|
||||
// Trimming any whitespace
|
||||
[e.target.name]: e.target.value.trim(),
|
||||
});
|
||||
})
|
||||
}
|
||||
|
||||
async function updateUserRole(user) {
|
||||
if (!user || user.user_metadata?.role) return;
|
||||
if (!user || user.user_metadata?.role) return
|
||||
|
||||
// update user role
|
||||
await supabase.auth.update({
|
||||
data: { role },
|
||||
});
|
||||
})
|
||||
}
|
||||
|
||||
async function onSubmit(event) {
|
||||
event.preventDefault();
|
||||
event.preventDefault()
|
||||
|
||||
try {
|
||||
if (action === "SIGNUP") {
|
||||
const { email, password, role } = formData;
|
||||
const { error, user } = await supabase.auth.signUp({ email, password });
|
||||
if (error) throw error;
|
||||
if (action === 'SIGNUP') {
|
||||
const { email, password, role } = formData
|
||||
const { error, user } = await supabase.auth.signUp({ email, password })
|
||||
if (error) throw error
|
||||
|
||||
// update user role
|
||||
await supabase.auth.update({
|
||||
data: { role },
|
||||
});
|
||||
} else if (action === "LOGIN") {
|
||||
const { error } = await supabase.auth.signIn(formData);
|
||||
if (error) throw error;
|
||||
})
|
||||
} else if (action === 'LOGIN') {
|
||||
const { error } = await supabase.auth.signIn(formData)
|
||||
if (error) throw error
|
||||
}
|
||||
} catch (error) {
|
||||
alert(error.message);
|
||||
alert(error.message)
|
||||
}
|
||||
}
|
||||
|
||||
@@ -60,10 +60,10 @@ export default function SignIn({ role = "DRIVER" }) {
|
||||
Password
|
||||
<input name="password" type="password" onChange={onChange} />
|
||||
</label>
|
||||
<button type="submit" onClick={() => setAction("SIGNUP")}>
|
||||
<button type="submit" onClick={() => setAction('SIGNUP')}>
|
||||
Sign up
|
||||
</button>
|
||||
<button type="submit" onClick={() => setAction("LOGIN")}>
|
||||
<button type="submit" onClick={() => setAction('LOGIN')}>
|
||||
Login
|
||||
</button>
|
||||
<style jsx>{`
|
||||
@@ -93,5 +93,5 @@ export default function SignIn({ role = "DRIVER" }) {
|
||||
}
|
||||
`}</style>
|
||||
</form>
|
||||
);
|
||||
)
|
||||
}
|
||||
@@ -4,7 +4,7 @@ export default function TextLog({ log }) {
|
||||
const textLog = useRef(null)
|
||||
|
||||
useEffect(() => {
|
||||
textLog.current.scrollTop = textLog.current.scrollHeight;
|
||||
textLog.current.scrollTop = textLog.current.scrollHeight
|
||||
}, [log])
|
||||
|
||||
return (
|
||||
@@ -18,4 +18,4 @@ export default function TextLog({ log }) {
|
||||
`}</style>
|
||||
</>
|
||||
)
|
||||
}
|
||||
}
|
||||
@@ -2,4 +2,4 @@
|
||||
"compilerOptions": {
|
||||
"baseUrl": "."
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,10 +1,4 @@
|
||||
import { createClient } from "@supabase/supabase-js";
|
||||
import {
|
||||
NEXT_PUBLIC_SUPABASE_URL,
|
||||
NEXT_PUBLIC_SUPABASE_KEY,
|
||||
} from "./constants";
|
||||
import { createClient } from '@supabase/supabase-js'
|
||||
import { NEXT_PUBLIC_SUPABASE_URL, NEXT_PUBLIC_SUPABASE_KEY } from './constants'
|
||||
|
||||
export const supabase = createClient(
|
||||
NEXT_PUBLIC_SUPABASE_URL,
|
||||
NEXT_PUBLIC_SUPABASE_KEY
|
||||
);
|
||||
export const supabase = createClient(NEXT_PUBLIC_SUPABASE_URL, NEXT_PUBLIC_SUPABASE_KEY)
|
||||
@@ -1,8 +1,8 @@
|
||||
import { createContext } from "react";
|
||||
import { createContext } from 'react'
|
||||
|
||||
export const NEXT_PUBLIC_SUPABASE_URL = process.env.NEXT_PUBLIC_SUPABASE_URL;
|
||||
export const NEXT_PUBLIC_SUPABASE_KEY = process.env.NEXT_PUBLIC_SUPABASE_KEY;
|
||||
export const NEXT_PUBLIC_SUPABASE_URL = process.env.NEXT_PUBLIC_SUPABASE_URL
|
||||
export const NEXT_PUBLIC_SUPABASE_KEY = process.env.NEXT_PUBLIC_SUPABASE_KEY
|
||||
|
||||
export const DEFAULT_AVATARS_BUCKET = "avatars";
|
||||
export const DEFAULT_AVATARS_BUCKET = 'avatars'
|
||||
|
||||
export const AppContext = createContext();
|
||||
export const AppContext = createContext()
|
||||
@@ -1,12 +1,12 @@
|
||||
export function RoundToFixDecimals(value, numDecimals = 5) {
|
||||
function addZero(s, size) {
|
||||
while (s.length <= (size || 2)) {
|
||||
s = s + "0";
|
||||
s = s + '0'
|
||||
}
|
||||
return s;
|
||||
return s
|
||||
}
|
||||
|
||||
const temp = addZero("1", numDecimals);
|
||||
const tempNum = parseInt(temp, 10);
|
||||
return Math.round((value + Number.EPSILON) * tempNum) / tempNum;
|
||||
const temp = addZero('1', numDecimals)
|
||||
const tempNum = parseInt(temp, 10)
|
||||
return Math.round((value + Number.EPSILON) * tempNum) / tempNum
|
||||
}
|
||||
@@ -1,25 +1,25 @@
|
||||
import "../styles/globals.css";
|
||||
import React, { useState, useEffect } from "react";
|
||||
import { supabase } from "lib/api";
|
||||
import { AppContext } from "lib/constants";
|
||||
import '../styles/globals.css'
|
||||
import React, { useState, useEffect } from 'react'
|
||||
import { supabase } from 'lib/api'
|
||||
import { AppContext } from 'lib/constants'
|
||||
|
||||
function MyApp({ Component, pageProps }) {
|
||||
const [session, setSession] = useState(null);
|
||||
const [session, setSession] = useState(null)
|
||||
|
||||
useEffect(() => {
|
||||
setSession(supabase.auth.session());
|
||||
setSession(supabase.auth.session())
|
||||
|
||||
supabase.auth.onAuthStateChange((_event, session) => {
|
||||
setSession(session);
|
||||
console.log("session state change", session);
|
||||
});
|
||||
}, []);
|
||||
setSession(session)
|
||||
console.log('session state change', session)
|
||||
})
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<AppContext.Provider value={{ session: session }}>
|
||||
<Component {...pageProps} />
|
||||
</AppContext.Provider>
|
||||
);
|
||||
)
|
||||
}
|
||||
|
||||
export default MyApp;
|
||||
export default MyApp
|
||||
@@ -1,4 +1,4 @@
|
||||
import Document, { Html, Head, Main, NextScript } from "next/document";
|
||||
import Document, { Html, Head, Main, NextScript } from 'next/document'
|
||||
|
||||
class MyDocument extends Document {
|
||||
render() {
|
||||
@@ -23,8 +23,8 @@ class MyDocument extends Document {
|
||||
<NextScript />
|
||||
</body>
|
||||
</Html>
|
||||
);
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
export default MyDocument;
|
||||
export default MyDocument
|
||||
@@ -1,12 +1,12 @@
|
||||
import { useContext, useEffect, useState } from "react";
|
||||
import { AppContext } from "lib/constants";
|
||||
import { supabase } from "lib/api";
|
||||
import dynamic from "next/dynamic";
|
||||
import styles from "styles/Map.module.css";
|
||||
import SignIn from "components/SignIn";
|
||||
import PageLayout from "components/PageLayout";
|
||||
import { useContext, useEffect, useState } from 'react'
|
||||
import { AppContext } from 'lib/constants'
|
||||
import { supabase } from 'lib/api'
|
||||
import dynamic from 'next/dynamic'
|
||||
import styles from 'styles/Map.module.css'
|
||||
import SignIn from 'components/SignIn'
|
||||
import PageLayout from 'components/PageLayout'
|
||||
|
||||
const MapInput = dynamic(() => import("components/MapInput"), { ssr: false });
|
||||
const MapInput = dynamic(() => import('components/MapInput'), { ssr: false })
|
||||
|
||||
function randomPosition() {
|
||||
var array = [
|
||||
@@ -30,25 +30,25 @@ function randomPosition() {
|
||||
lat: 1.35454,
|
||||
lng: 103.69746,
|
||||
},
|
||||
];
|
||||
return array[Math.floor(Math.random() * array.length)];
|
||||
]
|
||||
return array[Math.floor(Math.random() * array.length)]
|
||||
}
|
||||
const center = randomPosition();
|
||||
const zoomLevel = 14;
|
||||
const center = randomPosition()
|
||||
const zoomLevel = 14
|
||||
|
||||
export default function Page() {
|
||||
const { session } = useContext(AppContext);
|
||||
const [userRole, setRole] = useState(null);
|
||||
const [username, setUsername] = useState(null);
|
||||
const { session } = useContext(AppContext)
|
||||
const [userRole, setRole] = useState(null)
|
||||
const [username, setUsername] = useState(null)
|
||||
|
||||
useEffect(() => {
|
||||
setRole(session?.user?.user_metadata?.role);
|
||||
setUsername(session?.user?.user_metadata?.username);
|
||||
}, [session]);
|
||||
setRole(session?.user?.user_metadata?.role)
|
||||
setUsername(session?.user?.user_metadata?.username)
|
||||
}, [session])
|
||||
|
||||
async function onSignOut() {
|
||||
const { error } = await supabase.auth.signOut();
|
||||
if (error) console.log("Error logging out:", error.message);
|
||||
const { error } = await supabase.auth.signOut()
|
||||
if (error) console.log('Error logging out:', error.message)
|
||||
}
|
||||
|
||||
return (
|
||||
@@ -63,17 +63,11 @@ export default function Page() {
|
||||
{!session && <SignIn />}
|
||||
{session && (
|
||||
<div className={styles.card}>
|
||||
{userRole?.toUpperCase() == "DRIVER" && (
|
||||
<MapInput
|
||||
clientRef={session.user?.id}
|
||||
center={center}
|
||||
zoom={zoomLevel}
|
||||
/>
|
||||
{userRole?.toUpperCase() == 'DRIVER' && (
|
||||
<MapInput clientRef={session.user?.id} center={center} zoom={zoomLevel} />
|
||||
)}
|
||||
{userRole?.toUpperCase() == "MANAGER" && (
|
||||
<p className={styles.error}>
|
||||
Sorry, You need to sign in as driver
|
||||
</p>
|
||||
{userRole?.toUpperCase() == 'MANAGER' && (
|
||||
<p className={styles.error}>Sorry, You need to sign in as driver</p>
|
||||
)}
|
||||
<div className={styles.profile_container}>
|
||||
Signed in as {username} [{userRole}]<br />
|
||||
@@ -85,5 +79,5 @@ export default function Page() {
|
||||
)}
|
||||
</div>
|
||||
</PageLayout>
|
||||
);
|
||||
)
|
||||
}
|
||||
@@ -1,26 +1,23 @@
|
||||
import { useContext, useEffect } from "react";
|
||||
import { AppContext } from "lib/constants";
|
||||
import Link from "next/link";
|
||||
import styles from "styles/Home.module.css";
|
||||
import PageLayout from "components/PageLayout";
|
||||
import { useContext, useEffect } from 'react'
|
||||
import { AppContext } from 'lib/constants'
|
||||
import Link from 'next/link'
|
||||
import styles from 'styles/Home.module.css'
|
||||
import PageLayout from 'components/PageLayout'
|
||||
|
||||
export default function Page() {
|
||||
const { session } = useContext(AppContext);
|
||||
const { session } = useContext(AppContext)
|
||||
|
||||
useEffect(() => {
|
||||
console.log("session: ", session);
|
||||
}, []);
|
||||
console.log('session: ', session)
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<PageLayout title="Live Tracker">
|
||||
<h1 className={styles.title}>Live Tracker</h1>
|
||||
|
||||
<p className={styles.description}>
|
||||
Get started by choosing your role as Driver or Manager.
|
||||
</p>
|
||||
<p className={styles.description}>Get started by choosing your role as Driver or Manager.</p>
|
||||
<p className={styles.sub_description}>
|
||||
You can only login 1 role at a time. Please use incognito mode to test
|
||||
multi users.
|
||||
You can only login 1 role at a time. Please use incognito mode to test multi users.
|
||||
</p>
|
||||
|
||||
<div className={styles.grid}>
|
||||
@@ -38,5 +35,5 @@ export default function Page() {
|
||||
</Link>
|
||||
</div>
|
||||
</PageLayout>
|
||||
);
|
||||
)
|
||||
}
|
||||
@@ -1,31 +1,31 @@
|
||||
import { useContext, useEffect, useState } from "react";
|
||||
import { AppContext } from "lib/constants";
|
||||
import { supabase } from "lib/api";
|
||||
import styles from "styles/Map.module.css";
|
||||
import dynamic from "next/dynamic";
|
||||
import SignIn from "components/SignIn";
|
||||
import PageLayout from "components/PageLayout";
|
||||
import { useContext, useEffect, useState } from 'react'
|
||||
import { AppContext } from 'lib/constants'
|
||||
import { supabase } from 'lib/api'
|
||||
import styles from 'styles/Map.module.css'
|
||||
import dynamic from 'next/dynamic'
|
||||
import SignIn from 'components/SignIn'
|
||||
import PageLayout from 'components/PageLayout'
|
||||
|
||||
const MapView = dynamic(() => import("components/MapView"), { ssr: false });
|
||||
const MapView = dynamic(() => import('components/MapView'), { ssr: false })
|
||||
const center = {
|
||||
lat: 1.3489728457596013,
|
||||
lng: 103.77043978311998,
|
||||
};
|
||||
const zoomLevel = 12;
|
||||
}
|
||||
const zoomLevel = 12
|
||||
|
||||
export default function Page() {
|
||||
const { session } = useContext(AppContext);
|
||||
const [userRole, setRole] = useState(null);
|
||||
const [username, setUsername] = useState(null);
|
||||
const { session } = useContext(AppContext)
|
||||
const [userRole, setRole] = useState(null)
|
||||
const [username, setUsername] = useState(null)
|
||||
|
||||
useEffect(() => {
|
||||
setRole(session?.user?.user_metadata?.role);
|
||||
setUsername(session?.user?.user_metadata?.username);
|
||||
}, [session]);
|
||||
setRole(session?.user?.user_metadata?.role)
|
||||
setUsername(session?.user?.user_metadata?.username)
|
||||
}, [session])
|
||||
|
||||
async function onSignOut() {
|
||||
const { error } = await supabase.auth.signOut();
|
||||
if (error) console.log("Error logging out:", error.message);
|
||||
const { error } = await supabase.auth.signOut()
|
||||
if (error) console.log('Error logging out:', error.message)
|
||||
}
|
||||
|
||||
return (
|
||||
@@ -33,21 +33,16 @@ export default function Page() {
|
||||
<h1 className={styles.title}>Manager View</h1>
|
||||
|
||||
<p className={styles.description}>
|
||||
As manager, you can view all drivers' locations as long as the drivers
|
||||
are ONLINE
|
||||
As manager, you can view all drivers' locations as long as the drivers are ONLINE
|
||||
</p>
|
||||
|
||||
<div className={styles.grid}>
|
||||
{!session && <SignIn role="MANAGER" />}
|
||||
{session && (
|
||||
<div className={styles.card}>
|
||||
{userRole?.toUpperCase() == "MANAGER" && (
|
||||
<MapView center={center} zoom={zoomLevel} />
|
||||
)}
|
||||
{userRole?.toUpperCase() == "DRIVER" && (
|
||||
<p className={styles.error}>
|
||||
Sorry, you need to sign in as manager
|
||||
</p>
|
||||
{userRole?.toUpperCase() == 'MANAGER' && <MapView center={center} zoom={zoomLevel} />}
|
||||
{userRole?.toUpperCase() == 'DRIVER' && (
|
||||
<p className={styles.error}>Sorry, you need to sign in as manager</p>
|
||||
)}
|
||||
<div className={styles.profile_container}>
|
||||
Signed in as {username} [{userRole}]<br />
|
||||
@@ -59,5 +54,5 @@ export default function Page() {
|
||||
)}
|
||||
</div>
|
||||
</PageLayout>
|
||||
);
|
||||
)
|
||||
}
|
||||
@@ -2,8 +2,8 @@ html,
|
||||
body {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
|
||||
Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
|
||||
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell,
|
||||
Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
|
||||
}
|
||||
|
||||
* {
|
||||
|
||||
@@ -4,33 +4,31 @@ import Router from 'next/router'
|
||||
import UserContext from 'lib/UserContext'
|
||||
import { supabase } from 'lib/Store'
|
||||
|
||||
export default function SupabaseSlackClone({Component, pageProps}){
|
||||
export default function SupabaseSlackClone({ Component, pageProps }) {
|
||||
const [userLoaded, setUserLoaded] = useState(false)
|
||||
const [user, setUser] = useState(null)
|
||||
const [session, setSession] = useState(null);
|
||||
const [session, setSession] = useState(null)
|
||||
|
||||
useEffect(() => {
|
||||
const session = supabase.auth.session();
|
||||
setSession(session);
|
||||
setUser(session?.user ?? null);
|
||||
const session = supabase.auth.session()
|
||||
setSession(session)
|
||||
setUser(session?.user ?? null)
|
||||
setUserLoaded(session ? true : false)
|
||||
if (user) {
|
||||
signIn(user.id, user.email)
|
||||
Router.push('/channels/[id]', '/channels/1')
|
||||
}
|
||||
|
||||
const { data: authListener } = supabase.auth.onAuthStateChange(
|
||||
async (event, session) => {
|
||||
setSession(session);
|
||||
const currentUser = session?.user
|
||||
setUser(currentUser ?? null);
|
||||
setUserLoaded(!!currentUser)
|
||||
if (currentUser) {
|
||||
signIn(currentUser.id, currentUser.email)
|
||||
Router.push('/channels/[id]', '/channels/1')
|
||||
}
|
||||
const { data: authListener } = supabase.auth.onAuthStateChange(async (event, session) => {
|
||||
setSession(session)
|
||||
const currentUser = session?.user
|
||||
setUser(currentUser ?? null)
|
||||
setUserLoaded(!!currentUser)
|
||||
if (currentUser) {
|
||||
signIn(currentUser.id, currentUser.email)
|
||||
Router.push('/channels/[id]', '/channels/1')
|
||||
}
|
||||
)
|
||||
})
|
||||
|
||||
return () => {
|
||||
authListener.unsubscribe()
|
||||
@@ -47,11 +45,11 @@ export default function SupabaseSlackClone({Component, pageProps}){
|
||||
? await supabase.from('users').update({ id, username }).match({ id }).single()
|
||||
: await supabase.from('users').insert([{ id, username }]).single()
|
||||
}
|
||||
|
||||
|
||||
const signOut = async () => {
|
||||
const result = await supabase.auth.signOut()
|
||||
Router.push('/')
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<UserContext.Provider
|
||||
@@ -59,7 +57,7 @@ export default function SupabaseSlackClone({Component, pageProps}){
|
||||
userLoaded,
|
||||
user,
|
||||
signIn,
|
||||
signOut
|
||||
signOut,
|
||||
}}
|
||||
>
|
||||
<Component {...pageProps} />
|
||||
|
||||
@@ -9,17 +9,16 @@ const Home = () => {
|
||||
|
||||
const handleLogin = async (type, username, password) => {
|
||||
try {
|
||||
const { error, user } =
|
||||
const { error, user } =
|
||||
type === 'LOGIN'
|
||||
? await supabase.auth.signIn({email: username, password})
|
||||
: await supabase.auth.signUp({email: username, password})
|
||||
? await supabase.auth.signIn({ email: username, password })
|
||||
: await supabase.auth.signUp({ email: username, password })
|
||||
// If the user doesn't exist here and an error hasn't been raised yet,
|
||||
// that must mean that a confirmation email has been sent.
|
||||
// NOTE: Confirming your email address is required by default.
|
||||
if (error) {
|
||||
alert('Error with auth: ' + error.message)
|
||||
}
|
||||
else if (!user) alert('Signup successful, confirmation mail should be sent soon!')
|
||||
} else if (!user) alert('Signup successful, confirmation mail should be sent soon!')
|
||||
} catch (error) {
|
||||
console.log('error', error)
|
||||
alert(error.error_description || error)
|
||||
|
||||
@@ -26,7 +26,9 @@
|
||||
|
||||
/* Your own custom utilities */
|
||||
|
||||
html, body, #__next {
|
||||
html,
|
||||
body,
|
||||
#__next {
|
||||
height: 100vh;
|
||||
min-height: 100vh;
|
||||
}
|
||||
@@ -35,4 +37,4 @@ h1 {
|
||||
font-size: 4rem;
|
||||
font-weight: bold;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
@@ -7,7 +7,7 @@ This demonstrates how to use:
|
||||
- User signups using Supabase [Auth](https://supabase.io/auth).
|
||||
- User avatar images using Supabase [Storage](https://supabase.io/storage).
|
||||
- Public profiles restricted with [Policies](https://supabase.io/docs/guides/auth#policies).
|
||||
- Frontend using [Next.js]([nextjs.org/](https://nextjs.org/)).
|
||||
- Frontend using [Next.js](<[nextjs.org/](https://nextjs.org/)>).
|
||||
|
||||
## Technologies used
|
||||
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
export default function Footer({ }) {
|
||||
export default function Footer({}) {
|
||||
return (
|
||||
<div className="footer">
|
||||
<div className=""></div>
|
||||
|
||||
@@ -8,7 +8,9 @@ export default function ProfileCard({ profile }: { profile: Profile }) {
|
||||
<Avatar url={profile.avatar_url} size={100} />
|
||||
<div className="userInfo">
|
||||
<p className="username">{profile.username}</p>
|
||||
<a className="website" href={profile.website} target="_blank">{profile.website}</a>
|
||||
<a className="website" href={profile.website} target="_blank">
|
||||
{profile.website}
|
||||
</a>
|
||||
<p>
|
||||
<small>
|
||||
Last updated{' '}
|
||||
|
||||
@@ -27,7 +27,7 @@ const handleDatabaseEvent = (state: State, action: Action) => {
|
||||
}
|
||||
} else if (action.type === 'set') {
|
||||
return {
|
||||
profiles: action.payload
|
||||
profiles: action.payload,
|
||||
}
|
||||
}
|
||||
return { profiles: [] }
|
||||
|
||||
@@ -41,7 +41,7 @@ export default function Home() {
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="container" style={{padding: '50px 0 100px 0'}}>
|
||||
<div className="container" style={{ padding: '50px 0 100px 0' }}>
|
||||
{!session ? (
|
||||
<Auth />
|
||||
) : (
|
||||
@@ -50,7 +50,7 @@ export default function Home() {
|
||||
<h3>Account</h3>
|
||||
<Account key={session.user.id} session={session} />
|
||||
</div>
|
||||
<div className="col-6" >
|
||||
<div className="col-6">
|
||||
<h3>Public Profiles</h3>
|
||||
<ProfileList profiles={profiles} />
|
||||
</div>
|
||||
|
||||
@@ -43,7 +43,7 @@ body,
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
.row [class^="col"] {
|
||||
.row [class^='col'] {
|
||||
float: left;
|
||||
margin: 0.5rem 2%;
|
||||
min-height: 0.125rem;
|
||||
@@ -99,21 +99,23 @@ body,
|
||||
width: 96%;
|
||||
}
|
||||
.row::after {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both;
|
||||
content: '';
|
||||
display: table;
|
||||
clear: both;
|
||||
}
|
||||
.hidden-sm {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 33.75em) { /* 540px */
|
||||
@media only screen and (min-width: 33.75em) {
|
||||
/* 540px */
|
||||
.container {
|
||||
width: 80%;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 45em) { /* 720px */
|
||||
@media only screen and (min-width: 45em) {
|
||||
/* 720px */
|
||||
.col-1 {
|
||||
width: 4.33%;
|
||||
}
|
||||
@@ -155,14 +157,14 @@ body,
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 60em) { /* 960px */
|
||||
@media only screen and (min-width: 60em) {
|
||||
/* 960px */
|
||||
.container {
|
||||
width: 75%;
|
||||
max-width: 60rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* Forms */
|
||||
|
||||
label {
|
||||
@@ -286,7 +288,7 @@ button.primary,
|
||||
left: 0;
|
||||
right: 0;
|
||||
display: flex;
|
||||
flex-flow: row;
|
||||
flex-flow: row;
|
||||
border-top: var(--custom-border);
|
||||
background-color: var(--custom-bg-color);
|
||||
}
|
||||
@@ -300,23 +302,23 @@ button.primary,
|
||||
height: 20px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
.footer > div:first-child {
|
||||
.footer > div:first-child {
|
||||
display: none;
|
||||
}
|
||||
.footer > div:nth-child(2) {
|
||||
.footer > div:nth-child(2) {
|
||||
justify-content: left;
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 60em) { /* 960px */
|
||||
.footer > div:first-child {
|
||||
@media only screen and (min-width: 60em) {
|
||||
/* 960px */
|
||||
.footer > div:first-child {
|
||||
display: flex;
|
||||
}
|
||||
.footer > div:nth-child(2) {
|
||||
.footer > div:nth-child(2) {
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@keyframes spin {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
@@ -345,7 +347,6 @@ button.primary,
|
||||
|
||||
/* Auth */
|
||||
|
||||
|
||||
.auth-widget {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
@@ -1,13 +1,13 @@
|
||||
import { supabase } from '../../utils/initSupabase';
|
||||
import { supabase } from '../../utils/initSupabase'
|
||||
|
||||
// Example of how to verify and get user data server-side.
|
||||
const getUser = async (req, res) => {
|
||||
const token = req.headers.token;
|
||||
const token = req.headers.token
|
||||
|
||||
const { data: user, error } = await supabase.auth.api.getUser(token);
|
||||
const { data: user, error } = await supabase.auth.api.getUser(token)
|
||||
|
||||
if (error) return res.status(401).json({ error: error.message });
|
||||
return res.status(200).json(user);
|
||||
};
|
||||
if (error) return res.status(401).json({ error: error.message })
|
||||
return res.status(200).json(user)
|
||||
}
|
||||
|
||||
export default getUser;
|
||||
export default getUser
|
||||
@@ -1,7 +1,6 @@
|
||||
# Supabase Nuxt.js User Management
|
||||
|
||||
|
||||
This is a WIP!
|
||||
This is a WIP!
|
||||
|
||||
## Build Setup
|
||||
|
||||
|
||||
@@ -151,7 +151,7 @@ button.primary,
|
||||
left: 0;
|
||||
right: 0;
|
||||
display: flex;
|
||||
flex-flow: row;
|
||||
flex-flow: row;
|
||||
border-top: var(--custom-border);
|
||||
}
|
||||
.footer div {
|
||||
|
||||
@@ -13,7 +13,7 @@ production unless you're ok with all your tasks being publicly available
|
||||
|
||||
## Required env vars
|
||||
|
||||
Make a `.env` in this folder with the following,
|
||||
Make a `.env` in this folder with the following,
|
||||
you can get these values from your project dashboard at [app.supabase.io](app.supabase.io):
|
||||
|
||||
```bash
|
||||
|
||||
@@ -1,8 +1,7 @@
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
|
||||
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
|
||||
sans-serif;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu',
|
||||
'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
background-color: rgb(250, 217, 246);
|
||||
@@ -30,7 +29,7 @@ h1 {
|
||||
display: block;
|
||||
}
|
||||
|
||||
@media screen and (max-width : 600px) {
|
||||
@media screen and (max-width: 600px) {
|
||||
.build {
|
||||
width: 300px;
|
||||
}
|
||||
|
||||
+4
-1
@@ -43,7 +43,10 @@ const Home = (props) => {
|
||||
<a href="https://dev.to/awalias/howto-build-collaborative-realtime-task-lists-in-react-4k52">
|
||||
Tutorial
|
||||
</a>{' '}
|
||||
| <a href="https://github.com/supabase/supabase/tree/master/examples/react-todo-list">Github</a>
|
||||
|{' '}
|
||||
<a href="https://github.com/supabase/supabase/tree/master/examples/react-todo-list">
|
||||
Github
|
||||
</a>
|
||||
</h3>
|
||||
<a href="https://dev.to/awalias/howto-build-collaborative-realtime-task-lists-in-react-4k52">
|
||||
<img
|
||||
|
||||
+36
-40
@@ -15,28 +15,26 @@ const isLocalhost = Boolean(
|
||||
// [::1] is the IPv6 localhost address.
|
||||
window.location.hostname === '[::1]' ||
|
||||
// 127.0.0.0/8 are considered localhost for IPv4.
|
||||
window.location.hostname.match(
|
||||
/^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
|
||||
)
|
||||
);
|
||||
window.location.hostname.match(/^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/)
|
||||
)
|
||||
|
||||
export function register(config) {
|
||||
if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
|
||||
// The URL constructor is available in all browsers that support SW.
|
||||
const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href);
|
||||
const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href)
|
||||
if (publicUrl.origin !== window.location.origin) {
|
||||
// Our service worker won't work if PUBLIC_URL is on a different origin
|
||||
// from what our page is served on. This might happen if a CDN is used to
|
||||
// serve assets; see https://github.com/facebook/create-react-app/issues/2374
|
||||
return;
|
||||
return
|
||||
}
|
||||
|
||||
window.addEventListener('load', () => {
|
||||
const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
|
||||
const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`
|
||||
|
||||
if (isLocalhost) {
|
||||
// This is running on localhost. Let's check if a service worker still exists or not.
|
||||
checkValidServiceWorker(swUrl, config);
|
||||
checkValidServiceWorker(swUrl, config)
|
||||
|
||||
// Add some additional logging to localhost, pointing developers to the
|
||||
// service worker/PWA documentation.
|
||||
@@ -44,24 +42,24 @@ export function register(config) {
|
||||
console.log(
|
||||
'This web app is being served cache-first by a service ' +
|
||||
'worker. To learn more, visit https://bit.ly/CRA-PWA'
|
||||
);
|
||||
});
|
||||
)
|
||||
})
|
||||
} else {
|
||||
// Is not localhost. Just register service worker
|
||||
registerValidSW(swUrl, config);
|
||||
registerValidSW(swUrl, config)
|
||||
}
|
||||
});
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
function registerValidSW(swUrl, config) {
|
||||
navigator.serviceWorker
|
||||
.register(swUrl)
|
||||
.then(registration => {
|
||||
.then((registration) => {
|
||||
registration.onupdatefound = () => {
|
||||
const installingWorker = registration.installing;
|
||||
const installingWorker = registration.installing
|
||||
if (installingWorker == null) {
|
||||
return;
|
||||
return
|
||||
}
|
||||
installingWorker.onstatechange = () => {
|
||||
if (installingWorker.state === 'installed') {
|
||||
@@ -72,30 +70,30 @@ function registerValidSW(swUrl, config) {
|
||||
console.log(
|
||||
'New content is available and will be used when all ' +
|
||||
'tabs for this page are closed. See https://bit.ly/CRA-PWA.'
|
||||
);
|
||||
)
|
||||
|
||||
// Execute callback
|
||||
if (config && config.onUpdate) {
|
||||
config.onUpdate(registration);
|
||||
config.onUpdate(registration)
|
||||
}
|
||||
} else {
|
||||
// At this point, everything has been precached.
|
||||
// It's the perfect time to display a
|
||||
// "Content is cached for offline use." message.
|
||||
console.log('Content is cached for offline use.');
|
||||
console.log('Content is cached for offline use.')
|
||||
|
||||
// Execute callback
|
||||
if (config && config.onSuccess) {
|
||||
config.onSuccess(registration);
|
||||
config.onSuccess(registration)
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
};
|
||||
}
|
||||
}
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error('Error during service worker registration:', error)
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error during service worker registration:', error);
|
||||
});
|
||||
}
|
||||
|
||||
function checkValidServiceWorker(swUrl, config) {
|
||||
@@ -103,39 +101,37 @@ function checkValidServiceWorker(swUrl, config) {
|
||||
fetch(swUrl, {
|
||||
headers: { 'Service-Worker': 'script' },
|
||||
})
|
||||
.then(response => {
|
||||
.then((response) => {
|
||||
// Ensure service worker exists, and that we really are getting a JS file.
|
||||
const contentType = response.headers.get('content-type');
|
||||
const contentType = response.headers.get('content-type')
|
||||
if (
|
||||
response.status === 404 ||
|
||||
(contentType != null && contentType.indexOf('javascript') === -1)
|
||||
) {
|
||||
// No service worker found. Probably a different app. Reload the page.
|
||||
navigator.serviceWorker.ready.then(registration => {
|
||||
navigator.serviceWorker.ready.then((registration) => {
|
||||
registration.unregister().then(() => {
|
||||
window.location.reload();
|
||||
});
|
||||
});
|
||||
window.location.reload()
|
||||
})
|
||||
})
|
||||
} else {
|
||||
// Service worker found. Proceed as normal.
|
||||
registerValidSW(swUrl, config);
|
||||
registerValidSW(swUrl, config)
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
console.log(
|
||||
'No internet connection found. App is running in offline mode.'
|
||||
);
|
||||
});
|
||||
console.log('No internet connection found. App is running in offline mode.')
|
||||
})
|
||||
}
|
||||
|
||||
export function unregister() {
|
||||
if ('serviceWorker' in navigator) {
|
||||
navigator.serviceWorker.ready
|
||||
.then(registration => {
|
||||
registration.unregister();
|
||||
.then((registration) => {
|
||||
registration.unregister()
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error(error.message)
|
||||
})
|
||||
.catch(error => {
|
||||
console.error(error.message);
|
||||
});
|
||||
}
|
||||
}
|
||||
@@ -1,12 +1,11 @@
|
||||
# Todo example using Supabase
|
||||
|
||||
- Frontend:
|
||||
- [create-react-app](https://reactjs.org/docs/create-a-new-react-app.html). React Framework for building single-page applications.
|
||||
- [Tailwind](https://tailwindcss.com/) for styling and layout.
|
||||
- [Supabase.js](https://supabase.io/docs/library/getting-started) for user management and realtime data syncing.
|
||||
- Backend:
|
||||
- [app.supabase.io/](https://app.supabase.io/): hosted Postgres database with restful API for usage with Supabase.js.
|
||||
|
||||
- Frontend:
|
||||
- [create-react-app](https://reactjs.org/docs/create-a-new-react-app.html). React Framework for building single-page applications.
|
||||
- [Tailwind](https://tailwindcss.com/) for styling and layout.
|
||||
- [Supabase.js](https://supabase.io/docs/library/getting-started) for user management and realtime data syncing.
|
||||
- Backend:
|
||||
- [app.supabase.io/](https://app.supabase.io/): hosted Postgres database with restful API for usage with Supabase.js.
|
||||
|
||||
## Demo
|
||||
|
||||
@@ -24,7 +23,7 @@ Sign up to Supabase - [https://app.supabase.io](https://app.supabase.io) and cre
|
||||
|
||||
### 2. Run "Todo List" Quickstart
|
||||
|
||||
Once your database has started, run the "Todo List" quickstart. Inside of your project, enter the `SQL editor` tab and scroll down until you see `TODO LIST: Build a basic todo list with Row Level Security`
|
||||
Once your database has started, run the "Todo List" quickstart. Inside of your project, enter the `SQL editor` tab and scroll down until you see `TODO LIST: Build a basic todo list with Row Level Security`
|
||||
|
||||
### 3. Get the URL and Key
|
||||
|
||||
@@ -36,7 +35,6 @@ The `anon` key is your client-side API key. It allows "anonymous access" to your
|
||||
|
||||
**_NOTE_**: The `service_role` key has full access to your data, bypassing any security policies. These keys have to be kept secret and are meant to be used in server environments and never on a client or browser.
|
||||
|
||||
|
||||
You will be asked for a `REACT_APP_SUPABASE_URL` and `REACT_APP_SUPABASE_KEY`. Use the API URL and `anon` key from [step 3](#3.-get-the-url-and-key).
|
||||
|
||||
## Supabase details
|
||||
@@ -76,6 +74,6 @@ create policy "Individuals can delete their own todos." on todos for
|
||||
|
||||
## Authors
|
||||
|
||||
- [Supabase](https://supabase.io)
|
||||
- [Supabase](https://supabase.io)
|
||||
|
||||
Supabase is open source, we'd love for you to follow along and get involved at https://github.com/supabase/supabase
|
||||
@@ -1,10 +1,7 @@
|
||||
module.exports = {
|
||||
style: {
|
||||
postcss: {
|
||||
plugins: [
|
||||
require('tailwindcss'),
|
||||
require('autoprefixer'),
|
||||
],
|
||||
},
|
||||
},
|
||||
}
|
||||
module.exports = {
|
||||
style: {
|
||||
postcss: {
|
||||
plugins: [require("tailwindcss"), require("autoprefixer")],
|
||||
},
|
||||
},
|
||||
};
|
||||
@@ -1,44 +1,44 @@
|
||||
{
|
||||
"name": "cra-todo-list-auth",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"@craco/craco": "^6.0.0",
|
||||
"@supabase/supabase-js": "^1.2.1",
|
||||
"@tailwindcss/postcss7-compat": "^2.0.2",
|
||||
"@testing-library/jest-dom": "^5.11.4",
|
||||
"@testing-library/react": "^11.1.0",
|
||||
"@testing-library/user-event": "^12.1.10",
|
||||
"autoprefixer": "9",
|
||||
"postcss": "8",
|
||||
"react": "^17.0.1",
|
||||
"react-dom": "^17.0.1",
|
||||
"react-scripts": "4.0.1",
|
||||
"tailwindcss": "npm:@tailwindcss/postcss7-compat",
|
||||
"web-vitals": "^0.2.4"
|
||||
},
|
||||
"scripts": {
|
||||
"start": "craco start",
|
||||
"build": "craco build",
|
||||
"test": "craco test",
|
||||
"eject": "react-scripts eject"
|
||||
},
|
||||
"eslintConfig": {
|
||||
"extends": [
|
||||
"react-app",
|
||||
"react-app/jest"
|
||||
]
|
||||
},
|
||||
"browserslist": {
|
||||
"production": [
|
||||
">0.2%",
|
||||
"not dead",
|
||||
"not op_mini all"
|
||||
],
|
||||
"development": [
|
||||
"last 1 chrome version",
|
||||
"last 1 firefox version",
|
||||
"last 1 safari version"
|
||||
]
|
||||
}
|
||||
"name": "cra-todo-list-auth",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"@craco/craco": "^6.0.0",
|
||||
"@supabase/supabase-js": "^1.2.1",
|
||||
"@tailwindcss/postcss7-compat": "^2.0.2",
|
||||
"@testing-library/jest-dom": "^5.11.4",
|
||||
"@testing-library/react": "^11.1.0",
|
||||
"@testing-library/user-event": "^12.1.10",
|
||||
"autoprefixer": "9",
|
||||
"postcss": "8",
|
||||
"react": "^17.0.1",
|
||||
"react-dom": "^17.0.1",
|
||||
"react-scripts": "4.0.1",
|
||||
"tailwindcss": "npm:@tailwindcss/postcss7-compat",
|
||||
"web-vitals": "^0.2.4"
|
||||
},
|
||||
"scripts": {
|
||||
"start": "craco start",
|
||||
"build": "craco build",
|
||||
"test": "craco test",
|
||||
"eject": "react-scripts eject"
|
||||
},
|
||||
"eslintConfig": {
|
||||
"extends": [
|
||||
"react-app",
|
||||
"react-app/jest"
|
||||
]
|
||||
},
|
||||
"browserslist": {
|
||||
"production": [
|
||||
">0.2%",
|
||||
"not dead",
|
||||
"not op_mini all"
|
||||
],
|
||||
"development": [
|
||||
"last 1 chrome version",
|
||||
"last 1 firefox version",
|
||||
"last 1 safari version"
|
||||
]
|
||||
}
|
||||
}
|
||||
@@ -1,15 +1,15 @@
|
||||
{
|
||||
"short_name": "CRA Supabase TodoList Example",
|
||||
"name": "Create React App Supabase TodoList Example",
|
||||
"icons": [
|
||||
{
|
||||
"src": "favicon.ico",
|
||||
"sizes": "64x64 32x32 24x24 16x16",
|
||||
"type": "image/x-icon"
|
||||
}
|
||||
],
|
||||
"start_url": ".",
|
||||
"display": "standalone",
|
||||
"theme_color": "#000000",
|
||||
"background_color": "#ffffff"
|
||||
"short_name": "CRA Supabase TodoList Example",
|
||||
"name": "Create React App Supabase TodoList Example",
|
||||
"icons": [
|
||||
{
|
||||
"src": "favicon.ico",
|
||||
"sizes": "64x64 32x32 24x24 16x16",
|
||||
"type": "image/x-icon"
|
||||
}
|
||||
],
|
||||
"start_url": ".",
|
||||
"display": "standalone",
|
||||
"theme_color": "#000000",
|
||||
"background_color": "#ffffff"
|
||||
}
|
||||
@@ -3,11 +3,11 @@
|
||||
@tailwind utilities;
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
|
||||
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
|
||||
sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
|
||||
"Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans",
|
||||
"Helvetica Neue", sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
+9
-9
@@ -1,14 +1,14 @@
|
||||
import React from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
import './index.css';
|
||||
import App from './App';
|
||||
import reportWebVitals from './reportWebVitals';
|
||||
import React from "react";
|
||||
import ReactDOM from "react-dom";
|
||||
import "./index.css";
|
||||
import App from "./App";
|
||||
import reportWebVitals from "./reportWebVitals";
|
||||
|
||||
ReactDOM.render(
|
||||
<React.StrictMode>
|
||||
<App />
|
||||
</React.StrictMode>,
|
||||
document.getElementById('root')
|
||||
<React.StrictMode>
|
||||
<App />
|
||||
</React.StrictMode>,
|
||||
document.getElementById("root")
|
||||
);
|
||||
|
||||
// If you want to start measuring performance in your app, pass a function
|
||||
|
||||
+7
-5
@@ -1,5 +1,7 @@
|
||||
import { createClient } from '@supabase/supabase-js';
|
||||
import { REACT_APP_SUPABASE_URL, REACT_APP_SUPABASE_KEY } from './constants';
|
||||
|
||||
export const supabase = createClient(REACT_APP_SUPABASE_URL, REACT_APP_SUPABASE_KEY);
|
||||
|
||||
import { createClient } from "@supabase/supabase-js";
|
||||
import { REACT_APP_SUPABASE_URL, REACT_APP_SUPABASE_KEY } from "./constants";
|
||||
|
||||
export const supabase = createClient(
|
||||
REACT_APP_SUPABASE_URL,
|
||||
REACT_APP_SUPABASE_KEY
|
||||
);
|
||||
+2
-2
@@ -1,2 +1,2 @@
|
||||
export const REACT_APP_SUPABASE_URL=process.env.REACT_APP_SUPABASE_URL
|
||||
export const REACT_APP_SUPABASE_KEY=process.env.REACT_APP_SUPABASE_KEY
|
||||
export const REACT_APP_SUPABASE_URL = process.env.REACT_APP_SUPABASE_URL;
|
||||
export const REACT_APP_SUPABASE_KEY = process.env.REACT_APP_SUPABASE_KEY;
|
||||
+12
-10
@@ -1,13 +1,15 @@
|
||||
const reportWebVitals = onPerfEntry => {
|
||||
if (onPerfEntry && onPerfEntry instanceof Function) {
|
||||
import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
|
||||
getCLS(onPerfEntry);
|
||||
getFID(onPerfEntry);
|
||||
getFCP(onPerfEntry);
|
||||
getLCP(onPerfEntry);
|
||||
getTTFB(onPerfEntry);
|
||||
});
|
||||
}
|
||||
const reportWebVitals = (onPerfEntry) => {
|
||||
if (onPerfEntry && onPerfEntry instanceof Function) {
|
||||
import("web-vitals").then(
|
||||
({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
|
||||
getCLS(onPerfEntry);
|
||||
getFID(onPerfEntry);
|
||||
getFCP(onPerfEntry);
|
||||
getLCP(onPerfEntry);
|
||||
getTTFB(onPerfEntry);
|
||||
}
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
export default reportWebVitals;
|
||||
+1
-1
@@ -2,4 +2,4 @@
|
||||
// allows you to do things like:
|
||||
// expect(element).toHaveTextContent(/react/i)
|
||||
// learn more: https://github.com/testing-library/jest-dom
|
||||
import '@testing-library/jest-dom';
|
||||
import "@testing-library/jest-dom";
|
||||
@@ -1,11 +1,11 @@
|
||||
module.exports = {
|
||||
purge: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],
|
||||
darkMode: false, // or 'media' or 'class'
|
||||
theme: {
|
||||
extend: {},
|
||||
},
|
||||
variants: {
|
||||
extend: {},
|
||||
},
|
||||
plugins: [],
|
||||
}
|
||||
purge: ["./src/**/*.{js,jsx,ts,tsx}", "./public/index.html"],
|
||||
darkMode: false, // or 'media' or 'class'
|
||||
theme: {
|
||||
extend: {},
|
||||
},
|
||||
variants: {
|
||||
extend: {},
|
||||
},
|
||||
plugins: [],
|
||||
};
|
||||
@@ -9,7 +9,10 @@ const {
|
||||
const supabase = Supabase.createClient(SNOWPACK_PUBLIC_SUPABASE_URL, SNOWPACK_PUBLIC_SUPABASE_KEY)
|
||||
async function login() {
|
||||
try {
|
||||
const res = await supabase.auth.signIn({email: SNOWPACK_PUBLIC_USER, password:SNOWPACK_PUBLIC_PASSWORD})
|
||||
const res = await supabase.auth.signIn({
|
||||
email: SNOWPACK_PUBLIC_USER,
|
||||
password: SNOWPACK_PUBLIC_PASSWORD,
|
||||
})
|
||||
console.log({ res })
|
||||
return res
|
||||
} catch (error) {
|
||||
|
||||
@@ -9,6 +9,9 @@ const {
|
||||
// const [SNOWPACK_PUBLIC_SUPABASE_URL,SNOWPACK_PUBLIC_SUPABASE_KEY] =
|
||||
const supabase = Supabase.createClient(SNOWPACK_PUBLIC_SUPABASE_URL, SNOWPACK_PUBLIC_SUPABASE_KEY)
|
||||
;(async () => {
|
||||
let { data, user, error } = await supabase.auth.signUp({email: SNOWPACK_PUBLIC_USER, password:SNOWPACK_PUBLIC_PASSWORD})
|
||||
let { data, user, error } = await supabase.auth.signUp({
|
||||
email: SNOWPACK_PUBLIC_USER,
|
||||
password: SNOWPACK_PUBLIC_PASSWORD,
|
||||
})
|
||||
console.log({ data, user, error })
|
||||
})()
|
||||
@@ -1,14 +1,14 @@
|
||||
import run from '@rollup/plugin-run'
|
||||
import svelte from 'rollup-plugin-svelte'
|
||||
// import { skypackResolver } from '@vinicius73/rollup-plugin-skypack-resolver'
|
||||
import resolve from '@rollup/plugin-node-resolve';
|
||||
import commonjs from '@rollup/plugin-commonjs';
|
||||
import resolve from '@rollup/plugin-node-resolve'
|
||||
import commonjs from '@rollup/plugin-commonjs'
|
||||
|
||||
import json from '@rollup/plugin-json';
|
||||
import injectProcessEnv from 'rollup-plugin-inject-process-env';
|
||||
import json from '@rollup/plugin-json'
|
||||
import injectProcessEnv from 'rollup-plugin-inject-process-env'
|
||||
// env can also be done by replacing strings -> '@rollup/plugin-replace'
|
||||
// import replace from '@rollup/plugin-replace'
|
||||
import dotenv from "dotenv"
|
||||
import dotenv from 'dotenv'
|
||||
dotenv.config()
|
||||
|
||||
export default {
|
||||
@@ -19,8 +19,8 @@ export default {
|
||||
format: 'iife',
|
||||
// format: 'es',
|
||||
name: 'app',
|
||||
file: 'public/build/bundle.js'
|
||||
// file: 'bin/dist/prerender.js',
|
||||
file: 'public/build/bundle.js',
|
||||
// file: 'bin/dist/prerender.js',
|
||||
},
|
||||
plugins: [
|
||||
// skypackResolver({
|
||||
@@ -28,12 +28,11 @@ export default {
|
||||
// cdnHost: "https://cdn.skypack.dev"
|
||||
// }),
|
||||
json(),
|
||||
svelte({
|
||||
}),
|
||||
svelte({}),
|
||||
resolve({
|
||||
browser: true,
|
||||
dedupe: ['svelte'] // '@supabase/supabase-js','cypress-svelte-unit-test'
|
||||
}),
|
||||
browser: true,
|
||||
dedupe: ['svelte'], // '@supabase/supabase-js','cypress-svelte-unit-test'
|
||||
}),
|
||||
commonjs({
|
||||
include: 'node_modules/**',
|
||||
}),
|
||||
@@ -46,8 +45,8 @@ export default {
|
||||
injectProcessEnv(process.env),
|
||||
run(),
|
||||
],
|
||||
onwarn (warning, warn) {
|
||||
if (warning.code === "UNRESOLVED_IMPORT") return;
|
||||
warn(warning);
|
||||
}
|
||||
}
|
||||
onwarn(warning, warn) {
|
||||
if (warning.code === 'UNRESOLVED_IMPORT') return
|
||||
warn(warning)
|
||||
},
|
||||
}
|
||||
@@ -1,12 +1,12 @@
|
||||
{
|
||||
"extends": "@snowpack/app-scripts-svelte",
|
||||
"install": ["@vinicius73/rollup-plugin-skypack-resolver","@supabase/supabase-js"],
|
||||
"install": ["@vinicius73/rollup-plugin-skypack-resolver", "@supabase/supabase-js"],
|
||||
"scripts": {
|
||||
"mount:src": "mount src --to /_dist_",
|
||||
"mount:public": "mount public --to /"
|
||||
},
|
||||
"plugins": [
|
||||
"@snowpack/plugin-dotenv",
|
||||
["@snowpack/plugin-svelte", {"compilerOptions":{ "hydratable": true, "css": false }}]
|
||||
["@snowpack/plugin-svelte", { "compilerOptions": { "hydratable": true, "css": false } }]
|
||||
]
|
||||
}
|
||||
@@ -1,8 +1,8 @@
|
||||
import { render } from "@testing-library/svelte";
|
||||
import App from "./App";
|
||||
import { render } from '@testing-library/svelte'
|
||||
import App from './App'
|
||||
|
||||
test("renders learn svelte link", () => {
|
||||
const { getByText } = render(App);
|
||||
const linkElement = getByText(/learn svelte/i);
|
||||
expect(linkElement).toBeInTheDocument();
|
||||
});
|
||||
test('renders learn svelte link', () => {
|
||||
const { getByText } = render(App)
|
||||
const linkElement = getByText(/learn svelte/i)
|
||||
expect(linkElement).toBeInTheDocument()
|
||||
})
|
||||
@@ -1,6 +1,6 @@
|
||||
// BUG: https://github.com/pikapkg/snowpack/pull/444
|
||||
// adding "namedExports": ["@supabase/supabase-js"], to snowPack config doesn't work
|
||||
import {createClient} from '@supabase/supabase-js'
|
||||
import { createClient } from '@supabase/supabase-js'
|
||||
// import { Socket } = '@supabase/realtime-js'
|
||||
|
||||
// var socket = new Socket(process.env.REALTIME_URL)
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import {createClient} from '@supabase/supabase-js'
|
||||
import { createClient } from '@supabase/supabase-js'
|
||||
|
||||
let importEnv = true
|
||||
try {
|
||||
|
||||
@@ -1,12 +1,10 @@
|
||||
describe('New todo', () => {
|
||||
it('it should create new todo', () => {
|
||||
cy.visit('/');
|
||||
cy.contains('h1', 'todos');
|
||||
cy.visit('/')
|
||||
cy.contains('h1', 'todos')
|
||||
|
||||
cy.get('.new-todo')
|
||||
.type('Demo')
|
||||
.type('{enter}');
|
||||
cy.get('.new-todo').type('Demo').type('{enter}')
|
||||
|
||||
cy.get('.main .todo-list .view').contains('Demo');
|
||||
});
|
||||
});
|
||||
cy.get('.main .todo-list .view').contains('Demo')
|
||||
})
|
||||
})
|
||||
@@ -12,14 +12,11 @@
|
||||
// This function is called when a project is opened or re-opened (e.g. due to
|
||||
// the project's config changing)
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* @type {Cypress.PluginConfig}
|
||||
*/
|
||||
module.exports = (on, config) => {
|
||||
|
||||
// @bahmutov/cy-rollup is already a dependency of cypress-svelte-unit-test
|
||||
const filePreprocessor = require('@bahmutov/cy-rollup');
|
||||
on('file:preprocessor', filePreprocessor());
|
||||
};
|
||||
const filePreprocessor = require('@bahmutov/cy-rollup')
|
||||
on('file:preprocessor', filePreprocessor())
|
||||
}
|
||||
@@ -14,7 +14,7 @@
|
||||
// ***********************************************************
|
||||
|
||||
// Import commands.js using ES2015 syntax:
|
||||
import './commands';
|
||||
import './commands'
|
||||
|
||||
// Alternatively you can use CommonJS syntax:
|
||||
// require('./commands')
|
||||
@@ -85,23 +85,26 @@ create policy "Individuals can delete their own todos." on todos for
|
||||
|
||||
Supabase is open source, we'd love for you to follow along and get involved at https://github.com/supabase/supabase
|
||||
|
||||
## Local development
|
||||
|
||||
## Local development
|
||||
```
|
||||
npm install
|
||||
```
|
||||
|
||||
### Compiles and hot-reloads for development
|
||||
|
||||
```
|
||||
npm run serve
|
||||
```
|
||||
|
||||
### Compiles and minifies for production
|
||||
|
||||
```
|
||||
npm run build
|
||||
```
|
||||
|
||||
### Lints and fixes files
|
||||
|
||||
```
|
||||
npm run lint
|
||||
```
|
||||
@@ -6,22 +6,24 @@
|
||||
|
||||
/* Write your own custom component styles here */
|
||||
.btn-black {
|
||||
@apply border border-black bg-black text-white font-bold py-2 px-4 rounded text-center;
|
||||
};
|
||||
@apply border border-black bg-black text-white font-bold py-2 px-4 rounded text-center;
|
||||
}
|
||||
|
||||
.btn-black:hover {
|
||||
@apply transition duration-150 bg-white text-black;
|
||||
@apply transition duration-150 bg-white text-black;
|
||||
}
|
||||
|
||||
.btn-black-outline {
|
||||
@apply border border-black text-black py-2 px-4 rounded font-bold text-center;
|
||||
@apply border border-black text-black py-2 px-4 rounded font-bold text-center;
|
||||
}
|
||||
|
||||
.btn-black-outline:hover {
|
||||
@apply transition duration-150 bg-black text-white;
|
||||
@apply transition duration-150 bg-black text-white;
|
||||
}
|
||||
|
||||
html, body, #app {
|
||||
height: 100vh;
|
||||
min-height: 100vh;
|
||||
}
|
||||
html,
|
||||
body,
|
||||
#app {
|
||||
height: 100vh;
|
||||
min-height: 100vh;
|
||||
}
|
||||
@@ -7,4 +7,4 @@ export function getParameterByName(name: string, url?: string) {
|
||||
if (!results) return null
|
||||
if (!results[2]) return ''
|
||||
return decodeURIComponent(results[2].replace(/\+/g, ' '))
|
||||
}
|
||||
}
|
||||
@@ -9,10 +9,7 @@ const allTodos = ref<Todo[]>([])
|
||||
*/
|
||||
async function fetchTodos() {
|
||||
try {
|
||||
const { data: todos, error } = await supabase
|
||||
.from('todos')
|
||||
.select('*')
|
||||
.order('id')
|
||||
const { data: todos, error } = await supabase.from('todos').select('*').order('id')
|
||||
|
||||
if (error) {
|
||||
console.log('error', error)
|
||||
@@ -36,10 +33,7 @@ async function fetchTodos() {
|
||||
*/
|
||||
async function addTodo(todo: Todo): Promise<null | Todo> {
|
||||
try {
|
||||
const { data, error } = await supabase
|
||||
.from('todos')
|
||||
.insert(todo)
|
||||
.single()
|
||||
const { data, error } = await supabase.from('todos').insert(todo).single()
|
||||
|
||||
if (error) {
|
||||
alert(error.message)
|
||||
@@ -85,10 +79,7 @@ async function updateTaskCompletion(todo: Todo, isCompleted: boolean) {
|
||||
*/
|
||||
async function deleteTodo(todo: Todo) {
|
||||
try {
|
||||
await supabase
|
||||
.from('todos')
|
||||
.delete()
|
||||
.eq('id', todo.id)
|
||||
await supabase.from('todos').delete().eq('id', todo.id)
|
||||
console.log('deleted todo', todo.id)
|
||||
} catch (error) {
|
||||
console.error('error', error)
|
||||
|
||||
@@ -11,29 +11,12 @@
|
||||
"allowSyntheticDefaultImports": true,
|
||||
"sourceMap": true,
|
||||
"baseUrl": ".",
|
||||
"types": [
|
||||
"webpack-env"
|
||||
],
|
||||
"types": ["webpack-env"],
|
||||
"paths": {
|
||||
"@/*": [
|
||||
"src/*"
|
||||
]
|
||||
"@/*": ["src/*"]
|
||||
},
|
||||
"lib": [
|
||||
"esnext",
|
||||
"dom",
|
||||
"dom.iterable",
|
||||
"scripthost"
|
||||
]
|
||||
"lib": ["esnext", "dom", "dom.iterable", "scripthost"]
|
||||
},
|
||||
"include": [
|
||||
"src/**/*.ts",
|
||||
"src/**/*.tsx",
|
||||
"src/**/*.vue",
|
||||
"tests/**/*.ts",
|
||||
"tests/**/*.tsx"
|
||||
],
|
||||
"exclude": [
|
||||
"node_modules"
|
||||
]
|
||||
"include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue", "tests/**/*.ts", "tests/**/*.tsx"],
|
||||
"exclude": ["node_modules"]
|
||||
}
|
||||
@@ -2,11 +2,10 @@
|
||||
|
||||
Cloudflare Workers does not support `XMLHttpRequest` object and only support native `fetch`. This means this `supabase-js` client does not work on Cloudflare Workers. Supabase JS Client internally uses `cross-fetch` package to polyfill `fetch` which relies on `XMLHttpRequest`.
|
||||
|
||||
To resolve this, we can use `patch-package` to patch `cross-fetch` package as minimal as possible.
|
||||
To resolve this, we can use `patch-package` to patch `cross-fetch` package as minimal as possible.
|
||||
|
||||
This repo contains minimal Cloudflare Workers project with the patch automatically applied.
|
||||
|
||||
|
||||
### Credits
|
||||
|
||||
This example was [originally](https://github.com/nascode/cloudflare-workers-supabase-fix) created by [@nascode](https://github.com/nascode).
|
||||
This example was [originally](https://github.com/nascode/cloudflare-workers-supabase-fix) created by [@nascode](https://github.com/nascode).
|
||||
@@ -1,11 +1,11 @@
|
||||
import { createClient } from "@supabase/supabase-js";
|
||||
import { createClient } from '@supabase/supabase-js'
|
||||
|
||||
// Fill you client credential here.
|
||||
const db = createClient("YOUR_SUPABASE_URL", "YOUR_SUPABASE_KEY");
|
||||
const db = createClient('YOUR_SUPABASE_URL', 'YOUR_SUPABASE_KEY')
|
||||
|
||||
addEventListener("fetch", (event) => {
|
||||
event.respondWith(handleRequest(event.request));
|
||||
});
|
||||
addEventListener('fetch', (event) => {
|
||||
event.respondWith(handleRequest(event.request))
|
||||
})
|
||||
|
||||
async function handleRequest(request) {
|
||||
try {
|
||||
@@ -16,10 +16,10 @@ async function handleRequest(request) {
|
||||
// .select("name");
|
||||
// console.log(JSON.stringify(data, null, 2));
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
console.log(error)
|
||||
}
|
||||
|
||||
return new Response("Hello worker!", {
|
||||
headers: { "content-type": "text/plain" },
|
||||
});
|
||||
return new Response('Hello worker!', {
|
||||
headers: { 'content-type': 'text/plain' },
|
||||
})
|
||||
}
|
||||
@@ -2,9 +2,7 @@
|
||||
"parserOptions": {
|
||||
"project": "./tsconfig.json"
|
||||
},
|
||||
"extends": [
|
||||
"plugin:@stencil/recommended"
|
||||
],
|
||||
"extends": ["plugin:@stencil/recommended"],
|
||||
"rules": {
|
||||
"@stencil/async-methods": "error",
|
||||
"@stencil/ban-prefix": ["error", ["stencil", "stnl", "st"]],
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
# Stencil & Supabase Starter
|
||||
|
||||
This is a boilerplate for creating a WebApp using [Stencil](https://github.com/ionic-team/stencil) + [Supabase](https://supabase.io/) + [Stencil Store](https://stenciljs.com/docs/stencil-store).
|
||||
This is a boilerplate for creating a WebApp using [Stencil](https://github.com/ionic-team/stencil) + [Supabase](https://supabase.io/) + [Stencil Store](https://stenciljs.com/docs/stencil-store).
|
||||
|
||||
<img src="./login-page.png" alt="Login Page">
|
||||
|
||||
@@ -38,13 +38,14 @@ src -> config -> config.ts
|
||||
```js
|
||||
const supabaseConfig = {
|
||||
supabaseUrl: '',
|
||||
supabaseKey: ''
|
||||
supabaseKey: '',
|
||||
};
|
||||
```
|
||||
|
||||
You can find more about _Supabase Client_ config [on the official documentation page](https://supabase.io/docs/reference/javascript/initializing).
|
||||
|
||||
To start a project, run:
|
||||
|
||||
```sh
|
||||
npm run start
|
||||
```
|
||||
@@ -72,7 +73,9 @@ npm run test.watch
|
||||
You can check the details of the [structure of our project through this file](./STRUCTURE.md)
|
||||
|
||||
## Contributing 👏
|
||||
|
||||
- [Pull requests](https://github.com/ftonato/stencil-supabase/pulls) and 🌟 stars are always welcome.
|
||||
|
||||
## License
|
||||
|
||||
[MIT ©](LICENSE)
|
||||
@@ -1,46 +1,63 @@
|
||||
## Project structure 🗄️
|
||||
|
||||
### Service
|
||||
|
||||
This class will handle application authenticate features to supabase.
|
||||
|
||||
```
|
||||
src -> services -> auth.service.ts -> Class SupabaseAuthService
|
||||
```
|
||||
|
||||
You can create more classes to group a functionality.
|
||||
|
||||
### Store
|
||||
|
||||
Application store
|
||||
|
||||
```
|
||||
src -> store -> app.store.ts
|
||||
```
|
||||
|
||||
### Interfaces
|
||||
|
||||
Interfaces used in the application
|
||||
|
||||
```
|
||||
src -> interface -> interface.ts
|
||||
```
|
||||
|
||||
### Utility
|
||||
|
||||
Utility for parsing application messages and holding form configurations
|
||||
|
||||
```
|
||||
src -> util -> util.ts
|
||||
```
|
||||
|
||||
### Configuration
|
||||
|
||||
Application level configurations
|
||||
|
||||
```
|
||||
src -> config -> config.ts
|
||||
```
|
||||
|
||||
### Assets
|
||||
|
||||
Application level assets
|
||||
|
||||
```
|
||||
src -> assets
|
||||
```
|
||||
|
||||
### Components
|
||||
|
||||
Application level components
|
||||
|
||||
```
|
||||
src -> components ->
|
||||
1. <app-flash-message> for showing alert messages
|
||||
2. <app-home> Dashboard
|
||||
2. <app-home> Dashboard
|
||||
3. <app-root> entry component of the application
|
||||
5. <page> for showing pages
|
||||
6. <auth> -> having login/register components
|
||||
@@ -48,4 +65,4 @@ src -> components ->
|
||||
|
||||
### Styling 💀
|
||||
|
||||
I have used `scss` for styling components. Ths boilerplate have a basic design i.e it focus more on configuring and using supabase in stencil web app along with stencil store. You can customize the looks as per your needs.
|
||||
I have used `scss` for styling components. Ths boilerplate have a basic design i.e it focus more on configuring and using supabase in stencil web app along with stencil store. You can customize the looks as per your needs.
|
||||
+126
-136
@@ -4,148 +4,138 @@
|
||||
* This is an autogenerated file created by the Stencil compiler.
|
||||
* It contains typing information for all components that exist in this project.
|
||||
*/
|
||||
import { HTMLStencilElement, JSXBase } from "@stencil/core/internal";
|
||||
import { RouterHistory } from "@stencil/router";
|
||||
import { HTMLStencilElement, JSXBase } from '@stencil/core/internal';
|
||||
import { RouterHistory } from '@stencil/router';
|
||||
export namespace Components {
|
||||
interface AppAuthLogin {
|
||||
/**
|
||||
* history instance.
|
||||
*/
|
||||
"history": RouterHistory;
|
||||
}
|
||||
interface AppAuthRegister {
|
||||
/**
|
||||
* history instance.
|
||||
*/
|
||||
"history": RouterHistory;
|
||||
}
|
||||
interface AppFlashMessage {
|
||||
/**
|
||||
* alert closable.
|
||||
*/
|
||||
"closable": boolean;
|
||||
/**
|
||||
* Show/hide alert message
|
||||
*/
|
||||
"show": boolean;
|
||||
/**
|
||||
* Message type
|
||||
*/
|
||||
"type": string;
|
||||
}
|
||||
interface AppHome {
|
||||
}
|
||||
interface AppPageHome {
|
||||
}
|
||||
interface AppRoot {
|
||||
/**
|
||||
* history instance.
|
||||
*/
|
||||
"history": RouterHistory;
|
||||
}
|
||||
interface AppAuthLogin {
|
||||
/**
|
||||
* history instance.
|
||||
*/
|
||||
history: RouterHistory;
|
||||
}
|
||||
interface AppAuthRegister {
|
||||
/**
|
||||
* history instance.
|
||||
*/
|
||||
history: RouterHistory;
|
||||
}
|
||||
interface AppFlashMessage {
|
||||
/**
|
||||
* alert closable.
|
||||
*/
|
||||
closable: boolean;
|
||||
/**
|
||||
* Show/hide alert message
|
||||
*/
|
||||
show: boolean;
|
||||
/**
|
||||
* Message type
|
||||
*/
|
||||
type: string;
|
||||
}
|
||||
interface AppHome {}
|
||||
interface AppPageHome {}
|
||||
interface AppRoot {
|
||||
/**
|
||||
* history instance.
|
||||
*/
|
||||
history: RouterHistory;
|
||||
}
|
||||
}
|
||||
declare global {
|
||||
interface HTMLAppAuthLoginElement extends Components.AppAuthLogin, HTMLStencilElement {
|
||||
}
|
||||
var HTMLAppAuthLoginElement: {
|
||||
prototype: HTMLAppAuthLoginElement;
|
||||
new (): HTMLAppAuthLoginElement;
|
||||
};
|
||||
interface HTMLAppAuthRegisterElement extends Components.AppAuthRegister, HTMLStencilElement {
|
||||
}
|
||||
var HTMLAppAuthRegisterElement: {
|
||||
prototype: HTMLAppAuthRegisterElement;
|
||||
new (): HTMLAppAuthRegisterElement;
|
||||
};
|
||||
interface HTMLAppFlashMessageElement extends Components.AppFlashMessage, HTMLStencilElement {
|
||||
}
|
||||
var HTMLAppFlashMessageElement: {
|
||||
prototype: HTMLAppFlashMessageElement;
|
||||
new (): HTMLAppFlashMessageElement;
|
||||
};
|
||||
interface HTMLAppHomeElement extends Components.AppHome, HTMLStencilElement {
|
||||
}
|
||||
var HTMLAppHomeElement: {
|
||||
prototype: HTMLAppHomeElement;
|
||||
new (): HTMLAppHomeElement;
|
||||
};
|
||||
interface HTMLAppPageHomeElement extends Components.AppPageHome, HTMLStencilElement {
|
||||
}
|
||||
var HTMLAppPageHomeElement: {
|
||||
prototype: HTMLAppPageHomeElement;
|
||||
new (): HTMLAppPageHomeElement;
|
||||
};
|
||||
interface HTMLAppRootElement extends Components.AppRoot, HTMLStencilElement {
|
||||
}
|
||||
var HTMLAppRootElement: {
|
||||
prototype: HTMLAppRootElement;
|
||||
new (): HTMLAppRootElement;
|
||||
};
|
||||
interface HTMLElementTagNameMap {
|
||||
"app-auth-login": HTMLAppAuthLoginElement;
|
||||
"app-auth-register": HTMLAppAuthRegisterElement;
|
||||
"app-flash-message": HTMLAppFlashMessageElement;
|
||||
"app-home": HTMLAppHomeElement;
|
||||
"app-page-home": HTMLAppPageHomeElement;
|
||||
"app-root": HTMLAppRootElement;
|
||||
}
|
||||
interface HTMLAppAuthLoginElement extends Components.AppAuthLogin, HTMLStencilElement {}
|
||||
var HTMLAppAuthLoginElement: {
|
||||
prototype: HTMLAppAuthLoginElement;
|
||||
new (): HTMLAppAuthLoginElement;
|
||||
};
|
||||
interface HTMLAppAuthRegisterElement extends Components.AppAuthRegister, HTMLStencilElement {}
|
||||
var HTMLAppAuthRegisterElement: {
|
||||
prototype: HTMLAppAuthRegisterElement;
|
||||
new (): HTMLAppAuthRegisterElement;
|
||||
};
|
||||
interface HTMLAppFlashMessageElement extends Components.AppFlashMessage, HTMLStencilElement {}
|
||||
var HTMLAppFlashMessageElement: {
|
||||
prototype: HTMLAppFlashMessageElement;
|
||||
new (): HTMLAppFlashMessageElement;
|
||||
};
|
||||
interface HTMLAppHomeElement extends Components.AppHome, HTMLStencilElement {}
|
||||
var HTMLAppHomeElement: {
|
||||
prototype: HTMLAppHomeElement;
|
||||
new (): HTMLAppHomeElement;
|
||||
};
|
||||
interface HTMLAppPageHomeElement extends Components.AppPageHome, HTMLStencilElement {}
|
||||
var HTMLAppPageHomeElement: {
|
||||
prototype: HTMLAppPageHomeElement;
|
||||
new (): HTMLAppPageHomeElement;
|
||||
};
|
||||
interface HTMLAppRootElement extends Components.AppRoot, HTMLStencilElement {}
|
||||
var HTMLAppRootElement: {
|
||||
prototype: HTMLAppRootElement;
|
||||
new (): HTMLAppRootElement;
|
||||
};
|
||||
interface HTMLElementTagNameMap {
|
||||
'app-auth-login': HTMLAppAuthLoginElement;
|
||||
'app-auth-register': HTMLAppAuthRegisterElement;
|
||||
'app-flash-message': HTMLAppFlashMessageElement;
|
||||
'app-home': HTMLAppHomeElement;
|
||||
'app-page-home': HTMLAppPageHomeElement;
|
||||
'app-root': HTMLAppRootElement;
|
||||
}
|
||||
}
|
||||
declare namespace LocalJSX {
|
||||
interface AppAuthLogin {
|
||||
/**
|
||||
* history instance.
|
||||
*/
|
||||
"history"?: RouterHistory;
|
||||
}
|
||||
interface AppAuthRegister {
|
||||
/**
|
||||
* history instance.
|
||||
*/
|
||||
"history"?: RouterHistory;
|
||||
}
|
||||
interface AppFlashMessage {
|
||||
/**
|
||||
* alert closable.
|
||||
*/
|
||||
"closable"?: boolean;
|
||||
/**
|
||||
* Show/hide alert message
|
||||
*/
|
||||
"show"?: boolean;
|
||||
/**
|
||||
* Message type
|
||||
*/
|
||||
"type"?: string;
|
||||
}
|
||||
interface AppHome {
|
||||
}
|
||||
interface AppPageHome {
|
||||
}
|
||||
interface AppRoot {
|
||||
/**
|
||||
* history instance.
|
||||
*/
|
||||
"history"?: RouterHistory;
|
||||
}
|
||||
interface IntrinsicElements {
|
||||
"app-auth-login": AppAuthLogin;
|
||||
"app-auth-register": AppAuthRegister;
|
||||
"app-flash-message": AppFlashMessage;
|
||||
"app-home": AppHome;
|
||||
"app-page-home": AppPageHome;
|
||||
"app-root": AppRoot;
|
||||
}
|
||||
interface AppAuthLogin {
|
||||
/**
|
||||
* history instance.
|
||||
*/
|
||||
history?: RouterHistory;
|
||||
}
|
||||
interface AppAuthRegister {
|
||||
/**
|
||||
* history instance.
|
||||
*/
|
||||
history?: RouterHistory;
|
||||
}
|
||||
interface AppFlashMessage {
|
||||
/**
|
||||
* alert closable.
|
||||
*/
|
||||
closable?: boolean;
|
||||
/**
|
||||
* Show/hide alert message
|
||||
*/
|
||||
show?: boolean;
|
||||
/**
|
||||
* Message type
|
||||
*/
|
||||
type?: string;
|
||||
}
|
||||
interface AppHome {}
|
||||
interface AppPageHome {}
|
||||
interface AppRoot {
|
||||
/**
|
||||
* history instance.
|
||||
*/
|
||||
history?: RouterHistory;
|
||||
}
|
||||
interface IntrinsicElements {
|
||||
'app-auth-login': AppAuthLogin;
|
||||
'app-auth-register': AppAuthRegister;
|
||||
'app-flash-message': AppFlashMessage;
|
||||
'app-home': AppHome;
|
||||
'app-page-home': AppPageHome;
|
||||
'app-root': AppRoot;
|
||||
}
|
||||
}
|
||||
export { LocalJSX as JSX };
|
||||
declare module "@stencil/core" {
|
||||
export namespace JSX {
|
||||
interface IntrinsicElements {
|
||||
"app-auth-login": LocalJSX.AppAuthLogin & JSXBase.HTMLAttributes<HTMLAppAuthLoginElement>;
|
||||
"app-auth-register": LocalJSX.AppAuthRegister & JSXBase.HTMLAttributes<HTMLAppAuthRegisterElement>;
|
||||
"app-flash-message": LocalJSX.AppFlashMessage & JSXBase.HTMLAttributes<HTMLAppFlashMessageElement>;
|
||||
"app-home": LocalJSX.AppHome & JSXBase.HTMLAttributes<HTMLAppHomeElement>;
|
||||
"app-page-home": LocalJSX.AppPageHome & JSXBase.HTMLAttributes<HTMLAppPageHomeElement>;
|
||||
"app-root": LocalJSX.AppRoot & JSXBase.HTMLAttributes<HTMLAppRootElement>;
|
||||
}
|
||||
declare module '@stencil/core' {
|
||||
export namespace JSX {
|
||||
interface IntrinsicElements {
|
||||
'app-auth-login': LocalJSX.AppAuthLogin & JSXBase.HTMLAttributes<HTMLAppAuthLoginElement>;
|
||||
'app-auth-register': LocalJSX.AppAuthRegister & JSXBase.HTMLAttributes<HTMLAppAuthRegisterElement>;
|
||||
'app-flash-message': LocalJSX.AppFlashMessage & JSXBase.HTMLAttributes<HTMLAppFlashMessageElement>;
|
||||
'app-home': LocalJSX.AppHome & JSXBase.HTMLAttributes<HTMLAppHomeElement>;
|
||||
'app-page-home': LocalJSX.AppPageHome & JSXBase.HTMLAttributes<HTMLAppPageHomeElement>;
|
||||
'app-root': LocalJSX.AppRoot & JSXBase.HTMLAttributes<HTMLAppRootElement>;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -6,26 +6,24 @@
|
||||
|
||||
import { Component, h, Prop, Watch } from '@stencil/core';
|
||||
|
||||
|
||||
@Component({
|
||||
tag: 'app-flash-message',
|
||||
styleUrl: 'app-flash-message.scss'
|
||||
styleUrl: 'app-flash-message.scss',
|
||||
})
|
||||
export class AppFlashMessage {
|
||||
|
||||
/**
|
||||
* Message type
|
||||
*/
|
||||
* Message type
|
||||
*/
|
||||
@Prop() type: string = '';
|
||||
|
||||
/**
|
||||
* alert closable.
|
||||
*/
|
||||
*/
|
||||
@Prop() closable: boolean = true;
|
||||
|
||||
/**
|
||||
* Show/hide alert message
|
||||
*/
|
||||
* Show/hide alert message
|
||||
*/
|
||||
@Prop({ mutable: true, reflect: true }) show = true;
|
||||
|
||||
@Watch('show')
|
||||
@@ -38,10 +36,10 @@ export class AppFlashMessage {
|
||||
}
|
||||
|
||||
/**
|
||||
* Hide message
|
||||
*
|
||||
* @returns {(null | void)}
|
||||
*/
|
||||
* Hide message
|
||||
*
|
||||
* @returns {(null | void)}
|
||||
*/
|
||||
async hideMessage() {
|
||||
if (!this.show) {
|
||||
return null;
|
||||
@@ -50,10 +48,10 @@ export class AppFlashMessage {
|
||||
}
|
||||
|
||||
/**
|
||||
* Show message
|
||||
*
|
||||
* @returns {(null | void)}
|
||||
*/
|
||||
* Show message
|
||||
*
|
||||
* @returns {(null | void)}
|
||||
*/
|
||||
async showMessage() {
|
||||
if (this.show) {
|
||||
return null;
|
||||
@@ -69,22 +67,26 @@ export class AppFlashMessage {
|
||||
}
|
||||
|
||||
/**
|
||||
* Render component <app-flash-message>
|
||||
*
|
||||
* @returns {void}
|
||||
*/
|
||||
* Render component <app-flash-message>
|
||||
*
|
||||
* @returns {void}
|
||||
*/
|
||||
render() {
|
||||
return (
|
||||
<div
|
||||
class={{
|
||||
'app-alert': true,
|
||||
'success': this.type === 'success',
|
||||
'hidden': this.show == false
|
||||
'hidden': this.show == false,
|
||||
}}
|
||||
role="alert"
|
||||
aria-hidden={this.show == false ? true : false}
|
||||
>
|
||||
{this.closable && (<span class="app-close-btn" onClick={() => this.hideMessage()}>×</span>)}
|
||||
{this.closable && (
|
||||
<span class="app-close-btn" onClick={() => this.hideMessage()}>
|
||||
×
|
||||
</span>
|
||||
)}
|
||||
<slot></slot>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -11,48 +11,67 @@ import { appConfig } from '../../config/config';
|
||||
@Component({
|
||||
tag: 'app-home',
|
||||
styleUrl: 'app-home.scss',
|
||||
|
||||
})
|
||||
export class AppHome {
|
||||
|
||||
/**
|
||||
* Render component <app-home>
|
||||
*
|
||||
* @returns {void}
|
||||
*/
|
||||
* Render component <app-home>
|
||||
*
|
||||
* @returns {void}
|
||||
*/
|
||||
render() {
|
||||
return (
|
||||
<section class='app-home'>
|
||||
<section class="app-home">
|
||||
<stencil-route-title pageTitle={appConfig.pageTitle.dashboard} />
|
||||
|
||||
<div class="home-box">
|
||||
<div class="home-box-subbox">
|
||||
<div class="home-box-container">
|
||||
<h1>Welcome to the <span class="stencil">Stencil</span> & <span class="supabase">Supabase</span> dashboard</h1>
|
||||
<h1>
|
||||
Welcome to the <span class="stencil">Stencil</span> & <span class="supabase">Supabase</span> dashboard
|
||||
</h1>
|
||||
|
||||
<div class="home-box-image">
|
||||
<img src="./assets/images/supabase.png" />
|
||||
</div>
|
||||
|
||||
<h2>Hi{' '}
|
||||
<span class="user-name">
|
||||
{AppState.user ? AppState.user.email : null}
|
||||
</span>,
|
||||
<h2>
|
||||
Hi <span class="user-name">{AppState.user ? AppState.user.email : null}</span>,
|
||||
</h2>
|
||||
|
||||
<p>Welcome to the {appConfig.name} dashboard.
|
||||
<br />
|
||||
This app demonstrate <strong>Login</strong>, <strong>Register</strong>, <strong>Logout</strong> features using Supabase + Stencil + Stencil Store as state management tool.</p>
|
||||
<p>
|
||||
You can read more about the technologies used here: <a rel="external" href="https://github.com/ionic-team/stencil" target="_blank">Stencil</a>{', '}
|
||||
<a rel="external" href="https://stenciljs.com/docs/stencil-store" target="_blank">Stencil Store</a>{', and '}
|
||||
<a rel="external" href="https://supabase.io" target="_blank">Supabase</a>.</p>
|
||||
<br />
|
||||
|
||||
<p>
|
||||
Created by: <a href="https://github.com/ftonato" rel="author" target="_blank">Ademílson F. Tonato</a> - <a href="https://twitter.com/ftonato" rel="author" target="_blank">@ftonato</a>.
|
||||
Welcome to the {appConfig.name} dashboard.
|
||||
<br />
|
||||
This app demonstrate <strong>Login</strong>, <strong>Register</strong>, <strong>Logout</strong> features using Supabase + Stencil + Stencil Store as state
|
||||
management tool.
|
||||
</p>
|
||||
<p>
|
||||
You can read more about the technologies used here:{' '}
|
||||
<a rel="external" href="https://github.com/ionic-team/stencil" target="_blank">
|
||||
Stencil
|
||||
</a>
|
||||
{', '}
|
||||
<a rel="external" href="https://stenciljs.com/docs/stencil-store" target="_blank">
|
||||
Stencil Store
|
||||
</a>
|
||||
{', and '}
|
||||
<a rel="external" href="https://supabase.io" target="_blank">
|
||||
Supabase
|
||||
</a>
|
||||
.
|
||||
</p>
|
||||
<br />
|
||||
|
||||
<p>
|
||||
Created by:{' '}
|
||||
<a href="https://github.com/ftonato" rel="author" target="_blank">
|
||||
Ademílson F. Tonato
|
||||
</a>{' '}
|
||||
-{' '}
|
||||
<a href="https://twitter.com/ftonato" rel="author" target="_blank">
|
||||
@ftonato
|
||||
</a>
|
||||
.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -7,8 +7,8 @@
|
||||
|
||||
import { Component, h, Prop } from '@stencil/core';
|
||||
import { RouterHistory } from '@stencil/router';
|
||||
import { AppState } from "../../store/app.store";
|
||||
import { AuthService } from "../../services/auth.service";
|
||||
import { AppState } from '../../store/app.store';
|
||||
import { AuthService } from '../../services/auth.service';
|
||||
import { appConfig } from '../../config/config';
|
||||
|
||||
/**
|
||||
@@ -24,83 +24,79 @@ const PrivateRoute = ({ component, ...props }: { [key: string]: any }) => {
|
||||
const Component = component;
|
||||
|
||||
return (
|
||||
<stencil-route {...props} routeRender={
|
||||
(props: { [key: string]: any }) => {
|
||||
<stencil-route
|
||||
{...props}
|
||||
routeRender={(props: { [key: string]: any }) => {
|
||||
if (AppState.isAuthenticated) {
|
||||
return <Component {...props} {...props.componentProps}></Component>;
|
||||
}
|
||||
return <stencil-router-redirect url="/login"></stencil-router-redirect>
|
||||
}
|
||||
} />
|
||||
return <stencil-router-redirect url="/login"></stencil-router-redirect>;
|
||||
}}
|
||||
/>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
@Component({
|
||||
tag: 'app-root',
|
||||
styleUrl: 'app-root.scss',
|
||||
|
||||
})
|
||||
export class AppRoot {
|
||||
/**
|
||||
* AuthService instance.
|
||||
* @name authService
|
||||
* @type {Object}
|
||||
*/
|
||||
* AuthService instance.
|
||||
* @name authService
|
||||
* @type {Object}
|
||||
*/
|
||||
private authService = AuthService;
|
||||
|
||||
/**
|
||||
* history instance.
|
||||
*/
|
||||
* history instance.
|
||||
*/
|
||||
@Prop() history: RouterHistory;
|
||||
|
||||
/**
|
||||
* handle logout
|
||||
*
|
||||
* @returns {void}
|
||||
*/
|
||||
* handle logout
|
||||
*
|
||||
* @returns {void}
|
||||
*/
|
||||
async logout() {
|
||||
await this.authService.logOut();
|
||||
}
|
||||
|
||||
/**
|
||||
* Render component <app-root>
|
||||
*
|
||||
* @returns {void}
|
||||
*/
|
||||
* Render component <app-root>
|
||||
*
|
||||
* @returns {void}
|
||||
*/
|
||||
render() {
|
||||
if (AppState.appInit === true) {
|
||||
return (<div>Loading...</div>);
|
||||
return <div>Loading...</div>;
|
||||
}
|
||||
if (AppState.appInitError != '') {
|
||||
return (<app-flash-message closable={false}>{AppState.appInitError}</app-flash-message>);
|
||||
return <app-flash-message closable={false}>{AppState.appInitError}</app-flash-message>;
|
||||
}
|
||||
const titleSuffix = ` | ${appConfig.pageTitlePrefix}`
|
||||
const titleSuffix = ` | ${appConfig.pageTitlePrefix}`;
|
||||
return (
|
||||
<div>
|
||||
{
|
||||
AppState.isAuthenticated &&
|
||||
{AppState.isAuthenticated && (
|
||||
<header>
|
||||
{
|
||||
AppState.user
|
||||
&& (
|
||||
<div>
|
||||
<span>
|
||||
Welcome <span class="username">{' ' + AppState.user.email + ' '}</span>
|
||||
</span>
|
||||
<a href="#" onClick={() => this.logout()}>
|
||||
Logout
|
||||
</a>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
{AppState.user && (
|
||||
<div>
|
||||
<span>
|
||||
Welcome <span class="username">{' ' + AppState.user.email + ' '}</span>
|
||||
</span>
|
||||
<a href="#" onClick={() => this.logout()}>
|
||||
Logout
|
||||
</a>
|
||||
</div>
|
||||
)}
|
||||
</header>
|
||||
}
|
||||
)}
|
||||
<main>
|
||||
<stencil-router titleSuffix={titleSuffix}>
|
||||
<stencil-route-switch scrollTopOffset={0}>
|
||||
<PrivateRoute url="/" component="app-home" exact={true} />
|
||||
<stencil-route url='/login' component='app-auth-login' />
|
||||
<stencil-route url='/register' component='app-auth-register' />
|
||||
<stencil-route url="/login" component="app-auth-login" />
|
||||
<stencil-route url="/register" component="app-auth-register" />
|
||||
<stencil-route component="app-page-home" />
|
||||
</stencil-route-switch>
|
||||
</stencil-router>
|
||||
|
||||
@@ -6,8 +6,8 @@
|
||||
|
||||
import { Component, h, Prop, State } from '@stencil/core';
|
||||
import { RouterHistory } from '@stencil/router';
|
||||
import { AppState } from "../../../store/app.store";
|
||||
import { AuthService } from "../../../services/auth.service";
|
||||
import { AppState } from '../../../store/app.store';
|
||||
import { AuthService } from '../../../services/auth.service';
|
||||
import { httpCode, appConfig } from '../../../config/config';
|
||||
import { getFormValidations } from '../../../util/util';
|
||||
|
||||
@@ -16,7 +16,6 @@ import { getFormValidations } from '../../../util/util';
|
||||
styleUrl: '../shared/app-auth-shared.scss',
|
||||
})
|
||||
export class AppLogin {
|
||||
|
||||
/**
|
||||
* AuthService instance.
|
||||
* @name authService
|
||||
@@ -25,15 +24,15 @@ export class AppLogin {
|
||||
private authService = AuthService;
|
||||
|
||||
/**
|
||||
* history instance.
|
||||
*/
|
||||
* history instance.
|
||||
*/
|
||||
@Prop() history: RouterHistory;
|
||||
|
||||
/**
|
||||
* Register form inputs and validations
|
||||
* @name formControls
|
||||
* @type {Object}
|
||||
*/
|
||||
* Register form inputs and validations
|
||||
* @name formControls
|
||||
* @type {Object}
|
||||
*/
|
||||
@State() formControls = getFormValidations('login');
|
||||
|
||||
/**
|
||||
@@ -44,45 +43,45 @@ export class AppLogin {
|
||||
@State() submitted = false;
|
||||
|
||||
/**
|
||||
* Form loading state
|
||||
* @name formLoader
|
||||
* @type {boolean}
|
||||
*/
|
||||
* Form loading state
|
||||
* @name formLoader
|
||||
* @type {boolean}
|
||||
*/
|
||||
@State() formLoader = false;
|
||||
|
||||
/**
|
||||
* Form error state
|
||||
* @name loginError
|
||||
* @type {string}
|
||||
*/
|
||||
@State() loginError: string = "";
|
||||
* Form error state
|
||||
* @name loginError
|
||||
* @type {string}
|
||||
*/
|
||||
@State() loginError: string = '';
|
||||
|
||||
/**
|
||||
* handle form values and do the validation work
|
||||
* @param {string} controlName Control name for register form
|
||||
* @param {any} value Control value for register form
|
||||
*
|
||||
* @returns {void}
|
||||
*/
|
||||
* handle form values and do the validation work
|
||||
* @param {string} controlName Control name for register form
|
||||
* @param {any} value Control value for register form
|
||||
*
|
||||
* @returns {void}
|
||||
*/
|
||||
changeFormValue(controlName, value) {
|
||||
this.formControls = {
|
||||
...this.formControls,
|
||||
[controlName]: {
|
||||
...this.formControls[controlName],
|
||||
value: value,
|
||||
isValid: this.formControls[controlName].validate(value)
|
||||
}
|
||||
isValid: this.formControls[controlName].validate(value),
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Handle login form
|
||||
* Check user in supabase
|
||||
* Redirect user to dashboard
|
||||
* @param {event} e Form submit event
|
||||
*
|
||||
* @returns {void}
|
||||
*/
|
||||
* Handle login form
|
||||
* Check user in supabase
|
||||
* Redirect user to dashboard
|
||||
* @param {event} e Form submit event
|
||||
*
|
||||
* @returns {void}
|
||||
*/
|
||||
async handleLogin(e) {
|
||||
e.preventDefault();
|
||||
this.submitted = true;
|
||||
@@ -110,13 +109,13 @@ export class AppLogin {
|
||||
}
|
||||
|
||||
/**
|
||||
* Render component <app-auth-login>
|
||||
*
|
||||
* @returns {void}
|
||||
*/
|
||||
* Render component <app-auth-login>
|
||||
*
|
||||
* @returns {void}
|
||||
*/
|
||||
render() {
|
||||
if (AppState.isAuthenticated) {
|
||||
return <stencil-router-redirect url="/" />
|
||||
return <stencil-router-redirect url="/" />;
|
||||
}
|
||||
return (
|
||||
<section class="app-section">
|
||||
@@ -128,40 +127,40 @@ export class AppLogin {
|
||||
Don't have an account? <a href="/register">Register</a>
|
||||
</div>
|
||||
<div class="auth-box-login">
|
||||
<h1>Welcome to <span class="stencil">Stencil</span> & <span class="supabase">Supabase</span> starter App</h1>
|
||||
<p>
|
||||
Insert your auth data to navigate through the app
|
||||
</p>
|
||||
<h1>
|
||||
Welcome to <span class="stencil">Stencil</span> & <span class="supabase">Supabase</span> starter App
|
||||
</h1>
|
||||
<p>Insert your auth data to navigate through the app</p>
|
||||
<form onSubmit={e => this.handleLogin(e)} novalidate>
|
||||
<div>
|
||||
<label htmlFor="email"> E-Mail</label>
|
||||
<input type="email" name="email" class="input-email" autocomplete="off"
|
||||
<input
|
||||
type="email"
|
||||
name="email"
|
||||
class="input-email"
|
||||
autocomplete="off"
|
||||
value={this.formControls.email.value}
|
||||
onInput={(ev: any) => this.changeFormValue("email", ev.target.value)} />
|
||||
|
||||
{
|
||||
(!this.formControls.email.isValid &&
|
||||
this.submitted === true) &&
|
||||
<span class="text-danger">Please enter your email</span>
|
||||
}
|
||||
onInput={(ev: any) => this.changeFormValue('email', ev.target.value)}
|
||||
/>
|
||||
|
||||
{!this.formControls.email.isValid && this.submitted === true && <span class="text-danger">Please enter your email</span>}
|
||||
</div>
|
||||
<div>
|
||||
<label htmlFor="password"> Password</label>
|
||||
<input type="password" name="password" class="input-password"
|
||||
<input
|
||||
type="password"
|
||||
name="password"
|
||||
class="input-password"
|
||||
value={this.formControls.password.value}
|
||||
onInput={(ev: any) => this.changeFormValue("password", ev.target.value)}
|
||||
onInput={(ev: any) => this.changeFormValue('password', ev.target.value)}
|
||||
/>
|
||||
|
||||
{
|
||||
(!this.formControls.password.isValid &&
|
||||
this.submitted === true) &&
|
||||
<span class="text-danger">Please enter your password</span>
|
||||
}
|
||||
|
||||
{!this.formControls.password.isValid && this.submitted === true && <span class="text-danger">Please enter your password</span>}
|
||||
</div>
|
||||
<div>
|
||||
<button type="submit" class="btn" disabled={this.formLoader}>{this.formLoader ? appConfig.loadingBtnTxt : 'Login to account'}</button>
|
||||
<button type="submit" class="btn" disabled={this.formLoader}>
|
||||
{this.formLoader ? appConfig.loadingBtnTxt : 'Login to account'}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
@@ -200,9 +199,7 @@ export class AppLogin {
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
||||
<path
|
||||
d="M7 10v4h3v7h4v-7h3l1 -4h-4v-2a1 1 0 0 1 1 -1h3v-4h-3a5 5 0 0 0 -5 5v2h-3"
|
||||
></path>
|
||||
<path d="M7 10v4h3v7h4v-7h3l1 -4h-4v-2a1 1 0 0 1 1 -1h3v-4h-3a5 5 0 0 0 -5 5v2h-3"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="alternate-box">
|
||||
@@ -219,9 +216,7 @@ export class AppLogin {
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
||||
<path
|
||||
d="M9 7c-3 0 -4 3 -4 5.5c0 3 2 7.5 4 7.5c1.088 -.046 1.679 -.5 3 -.5c1.312 0 1.5 .5 3 .5s4 -3 4 -5c-.028 -.01 -2.472 -.403 -2.5 -3c-.019 -2.17 2.416 -2.954 2.5 -3c-1.023 -1.492 -2.951 -1.963 -3.5 -2c-1.433 -.111 -2.83 1 -3.5 1c-.68 0 -1.9 -1 -3 -1z"
|
||||
></path>
|
||||
<path d="M9 7c-3 0 -4 3 -4 5.5c0 3 2 7.5 4 7.5c1.088 -.046 1.679 -.5 3 -.5c1.312 0 1.5 .5 3 .5s4 -3 4 -5c-.028 -.01 -2.472 -.403 -2.5 -3c-.019 -2.17 2.416 -2.954 2.5 -3c-1.023 -1.492 -2.951 -1.963 -3.5 -2c-1.433 -.111 -2.83 1 -3.5 1c-.68 0 -1.9 -1 -3 -1z"></path>
|
||||
<path d="M12 4a2 2 0 0 0 2 -2a2 2 0 0 0 -2 2"></path>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
@@ -6,7 +6,7 @@
|
||||
|
||||
import { Component, State, h, Prop } from '@stencil/core';
|
||||
import { RouterHistory } from '@stencil/router';
|
||||
import { AuthService } from "../../../services/auth.service";
|
||||
import { AuthService } from '../../../services/auth.service';
|
||||
import { AppState } from '../../../store/app.store';
|
||||
import { httpCode, appConfig } from '../../../config/config';
|
||||
import { getFormValidations } from '../../../util/util';
|
||||
@@ -16,66 +16,64 @@ import { getFormValidations } from '../../../util/util';
|
||||
styleUrl: '../shared/app-auth-shared.scss',
|
||||
})
|
||||
export class AppAuthRegister {
|
||||
|
||||
/**
|
||||
* AuthService instance.
|
||||
* @name authService
|
||||
* @type {Object}
|
||||
*/
|
||||
* AuthService instance.
|
||||
* @name authService
|
||||
* @type {Object}
|
||||
*/
|
||||
private authService = AuthService;
|
||||
|
||||
/**
|
||||
* history instance.
|
||||
*/
|
||||
* history instance.
|
||||
*/
|
||||
@Prop() history: RouterHistory;
|
||||
|
||||
/**
|
||||
* Register form inputs and validations
|
||||
*/
|
||||
* Register form inputs and validations
|
||||
*/
|
||||
@State() formControls = getFormValidations('register');
|
||||
|
||||
/**
|
||||
* Form submission state
|
||||
*/
|
||||
* Form submission state
|
||||
*/
|
||||
@State() submitted = false;
|
||||
|
||||
/**
|
||||
* Form loading state
|
||||
*/
|
||||
* Form loading state
|
||||
*/
|
||||
@State() formLoader = false;
|
||||
|
||||
/**
|
||||
* Form error state
|
||||
*/
|
||||
* Form error state
|
||||
*/
|
||||
@State() registerError: string = '';
|
||||
|
||||
|
||||
/**
|
||||
* handle form values and do the validation work
|
||||
* @param {string} controlName Control name for register form
|
||||
* @param {any} value Control value for register form
|
||||
*
|
||||
* @returns {void}
|
||||
*/
|
||||
* handle form values and do the validation work
|
||||
* @param {string} controlName Control name for register form
|
||||
* @param {any} value Control value for register form
|
||||
*
|
||||
* @returns {void}
|
||||
*/
|
||||
changeFormValue(controlName, value) {
|
||||
this.formControls = {
|
||||
...this.formControls,
|
||||
[controlName]: {
|
||||
...this.formControls[controlName],
|
||||
value: value,
|
||||
isValid: this.formControls[controlName].validate(value)
|
||||
}
|
||||
isValid: this.formControls[controlName].validate(value),
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Handle register form
|
||||
* Save user in supabase and update username
|
||||
* Redirect user to dashboard
|
||||
* @param {event} e Form submit event
|
||||
*
|
||||
* @returns {void}
|
||||
*/
|
||||
* Handle register form
|
||||
* Save user in supabase and update username
|
||||
* Redirect user to dashboard
|
||||
* @param {event} e Form submit event
|
||||
*
|
||||
* @returns {void}
|
||||
*/
|
||||
async handleRegister(e) {
|
||||
e.preventDefault();
|
||||
this.submitted = true;
|
||||
@@ -89,7 +87,7 @@ export class AppAuthRegister {
|
||||
}
|
||||
}
|
||||
if (isFormValid) {
|
||||
this.formLoader = true
|
||||
this.formLoader = true;
|
||||
this.registerError = '';
|
||||
const registerRes = await this.authService.register({ email: this.formControls.email.value, password: this.formControls.password.value });
|
||||
if (registerRes.status == httpCode.success) {
|
||||
@@ -103,13 +101,13 @@ export class AppAuthRegister {
|
||||
}
|
||||
|
||||
/**
|
||||
* Render component <app-auth-register>
|
||||
*
|
||||
* @returns {void}
|
||||
*/
|
||||
* Render component <app-auth-register>
|
||||
*
|
||||
* @returns {void}
|
||||
*/
|
||||
render() {
|
||||
if (AppState.isAuthenticated) {
|
||||
return <stencil-router-redirect url="/" />
|
||||
return <stencil-router-redirect url="/" />;
|
||||
}
|
||||
return (
|
||||
<section class="app-section">
|
||||
@@ -121,41 +119,40 @@ export class AppAuthRegister {
|
||||
Do you have an account? <a href="/login">Login</a>
|
||||
</div>
|
||||
<div class="auth-box-register">
|
||||
<h1>Welcome to <span class="stencil">Stencil</span> & <span class="supabase">Supabase</span> starter App</h1>
|
||||
<p>
|
||||
Insert your profile data to be able to navigate through the app
|
||||
</p>
|
||||
<h1>
|
||||
Welcome to <span class="stencil">Stencil</span> & <span class="supabase">Supabase</span> starter App
|
||||
</h1>
|
||||
<p>Insert your profile data to be able to navigate through the app</p>
|
||||
<form onSubmit={e => this.handleRegister(e)} novalidate>
|
||||
|
||||
<div>
|
||||
<label htmlFor="email"> E-Mail</label>
|
||||
<input type="email" name="email" class="input-email" autocomplete="off"
|
||||
<input
|
||||
type="email"
|
||||
name="email"
|
||||
class="input-email"
|
||||
autocomplete="off"
|
||||
value={this.formControls.email.value}
|
||||
onInput={(ev: any) => this.changeFormValue("email", ev.target.value)} />
|
||||
|
||||
{
|
||||
(!this.formControls.email.isValid &&
|
||||
this.submitted === true) &&
|
||||
<span class="text-danger">Please enter your email</span>
|
||||
}
|
||||
onInput={(ev: any) => this.changeFormValue('email', ev.target.value)}
|
||||
/>
|
||||
|
||||
{!this.formControls.email.isValid && this.submitted === true && <span class="text-danger">Please enter your email</span>}
|
||||
</div>
|
||||
<div>
|
||||
<label htmlFor="password"> Password</label>
|
||||
<input type="password" name="password" class="input-password"
|
||||
<input
|
||||
type="password"
|
||||
name="password"
|
||||
class="input-password"
|
||||
value={this.formControls.password.value}
|
||||
onInput={(ev: any) => this.changeFormValue("password", ev.target.value)}
|
||||
onInput={(ev: any) => this.changeFormValue('password', ev.target.value)}
|
||||
/>
|
||||
|
||||
{
|
||||
(!this.formControls.password.isValid &&
|
||||
this.submitted === true) &&
|
||||
<span class="text-danger">Please enter your password</span>
|
||||
}
|
||||
|
||||
{!this.formControls.password.isValid && this.submitted === true && <span class="text-danger">Please enter your password</span>}
|
||||
</div>
|
||||
<div>
|
||||
<button type="submit" class="btn" disabled={this.formLoader}>{this.formLoader ? appConfig.loadingBtnTxt : 'Register now'}</button>
|
||||
<button type="submit" class="btn" disabled={this.formLoader}>
|
||||
{this.formLoader ? appConfig.loadingBtnTxt : 'Register now'}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
|
||||
@@ -3,17 +3,15 @@ import { Component, h } from '@stencil/core';
|
||||
@Component({
|
||||
tag: 'app-page-home',
|
||||
styleUrl: 'app-page-home.scss',
|
||||
|
||||
})
|
||||
export class AppPageHome {
|
||||
|
||||
render() {
|
||||
return (
|
||||
<section class="wrapper_404 home-box">
|
||||
<div>
|
||||
<h1>Page not found ~ 404</h1>
|
||||
<p>The page you are requested is not found.</p>
|
||||
<stencil-route-link url='/'>
|
||||
<stencil-route-link url="/">
|
||||
<div class="buttons">Back to Home</div>
|
||||
</stencil-route-link>
|
||||
</div>
|
||||
|
||||
@@ -1,13 +1,12 @@
|
||||
|
||||
const supabaseConfig = {
|
||||
supabaseUrl: 'https://akakxshwrukpetyzjnyi.supabase.co',
|
||||
supabaseKey: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJyb2xlIjoiYW5vbiIsImlhdCI6MTYxMDk3ODA4OSwiZXhwIjoxOTI2NTU0MDg5fQ.xQTiGKgZ0p7Ch1paDP2KCExiVhFeqZicLm4s36XFUIk'
|
||||
supabaseKey: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJyb2xlIjoiYW5vbiIsImlhdCI6MTYxMDk3ODA4OSwiZXhwIjoxOTI2NTU0MDg5fQ.xQTiGKgZ0p7Ch1paDP2KCExiVhFeqZicLm4s36XFUIk',
|
||||
};
|
||||
|
||||
const httpCode = {
|
||||
success: 200,
|
||||
notFound: 404,
|
||||
serverError: 504
|
||||
serverError: 504,
|
||||
};
|
||||
|
||||
const appName: string = 'Stencil & Supabase';
|
||||
@@ -19,13 +18,9 @@ const appConfig = {
|
||||
login: 'Login',
|
||||
register: 'Register',
|
||||
dashboard: 'Dashboard',
|
||||
password: 'Update Password'
|
||||
password: 'Update Password',
|
||||
},
|
||||
loadingBtnTxt: 'Loading...'
|
||||
loadingBtnTxt: 'Loading...',
|
||||
};
|
||||
|
||||
export {
|
||||
supabaseConfig,
|
||||
httpCode,
|
||||
appConfig
|
||||
}
|
||||
export { supabaseConfig, httpCode, appConfig };
|
||||
@@ -1,29 +1,24 @@
|
||||
interface ICM {
|
||||
[key: string]: any
|
||||
[key: string]: any;
|
||||
}
|
||||
interface IBaseRes {
|
||||
status: number;
|
||||
data: any,
|
||||
message: string;
|
||||
errors?: ICM
|
||||
status: number;
|
||||
data: any;
|
||||
message: string;
|
||||
errors?: ICM;
|
||||
}
|
||||
interface IUserBase {
|
||||
email: string;
|
||||
password: string;
|
||||
email: string;
|
||||
password: string;
|
||||
}
|
||||
interface IUserRegister extends IUserBase {
|
||||
name?: string
|
||||
name?: string;
|
||||
}
|
||||
interface IUserLogin extends IUserBase {
|
||||
stayLoggedIn?: boolean
|
||||
stayLoggedIn?: boolean;
|
||||
}
|
||||
interface IErrorRes {
|
||||
code: string;
|
||||
message: any
|
||||
}
|
||||
export {
|
||||
IBaseRes,
|
||||
IUserRegister,
|
||||
IUserLogin,
|
||||
IErrorRes
|
||||
code: string;
|
||||
message: any;
|
||||
}
|
||||
export { IBaseRes, IUserRegister, IUserLogin, IErrorRes };
|
||||
@@ -3,11 +3,13 @@
|
||||
"short_name": "Stencil Supabase",
|
||||
"start_url": "/",
|
||||
"display": "standalone",
|
||||
"icons": [{
|
||||
"src": "assets/icon/icon.png",
|
||||
"sizes": "512x512",
|
||||
"type": "image/png"
|
||||
}],
|
||||
"icons": [
|
||||
{
|
||||
"src": "assets/icon/icon.png",
|
||||
"sizes": "512x512",
|
||||
"type": "image/png"
|
||||
}
|
||||
],
|
||||
"background_color": "#16161d",
|
||||
"theme_color": "#16161d"
|
||||
}
|
||||
@@ -6,37 +6,36 @@
|
||||
*
|
||||
*/
|
||||
|
||||
import SupabaseService from './supabase.service'
|
||||
import { supabaseConfig, httpCode } from "../config/config";
|
||||
import { AppState, setStateProp } from "../store/app.store";
|
||||
import { IBaseRes, IUserRegister, IUserLogin } from "../interface/interface";
|
||||
import { appMsg } from "../util/util";
|
||||
import SupabaseService from './supabase.service';
|
||||
import { supabaseConfig, httpCode } from '../config/config';
|
||||
import { AppState, setStateProp } from '../store/app.store';
|
||||
import { IBaseRes, IUserRegister, IUserLogin } from '../interface/interface';
|
||||
import { appMsg } from '../util/util';
|
||||
|
||||
class SupabaseAuthService {
|
||||
supabase: any;
|
||||
|
||||
/**
|
||||
* @constructor
|
||||
*/
|
||||
* @constructor
|
||||
*/
|
||||
constructor() {
|
||||
const connection = new SupabaseService(supabaseConfig.supabaseUrl, supabaseConfig.supabaseKey);
|
||||
this.supabase = connection.supabase;
|
||||
this.init()
|
||||
this.init();
|
||||
}
|
||||
|
||||
/**
|
||||
* Initialize supabase instance
|
||||
* If user is already login set user state
|
||||
* @name init
|
||||
*
|
||||
* @returns {void}
|
||||
*/
|
||||
* Initialize supabase instance
|
||||
* If user is already login set user state
|
||||
* @name init
|
||||
*
|
||||
* @returns {void}
|
||||
*/
|
||||
private init(): void {
|
||||
setStateProp('appInit', true)
|
||||
setStateProp('appInit', true);
|
||||
|
||||
try {
|
||||
this.supabase.auth.onAuthStateChange((_event, session) => {
|
||||
|
||||
if (session) {
|
||||
AppState.user = session.user;
|
||||
AppState.isAuthenticated = true;
|
||||
@@ -44,10 +43,9 @@ class SupabaseAuthService {
|
||||
AppState.user = undefined;
|
||||
AppState.isAuthenticated = false;
|
||||
}
|
||||
})
|
||||
});
|
||||
|
||||
AppState.appInit = false;
|
||||
|
||||
} catch (error) {
|
||||
const errorRes = this.buildErrorRes(httpCode.serverError, error);
|
||||
AppState.appInit = false;
|
||||
@@ -56,55 +54,55 @@ class SupabaseAuthService {
|
||||
}
|
||||
|
||||
/**
|
||||
* Build success response
|
||||
* @name buildRes
|
||||
*
|
||||
* @param {number} status status code
|
||||
* @param {any} data response data
|
||||
* @param {string} message message to show
|
||||
* @param {any} errors errors object if any
|
||||
*
|
||||
* @returns {IBaseRes}
|
||||
*/
|
||||
* Build success response
|
||||
* @name buildRes
|
||||
*
|
||||
* @param {number} status status code
|
||||
* @param {any} data response data
|
||||
* @param {string} message message to show
|
||||
* @param {any} errors errors object if any
|
||||
*
|
||||
* @returns {IBaseRes}
|
||||
*/
|
||||
private buildRes(status: number, data?: any, message?: string, errors?: any): IBaseRes {
|
||||
return {
|
||||
status,
|
||||
data,
|
||||
errors,
|
||||
message
|
||||
}
|
||||
message,
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Build error response
|
||||
* @name buildErrorRes
|
||||
*
|
||||
* @param {number} status status code
|
||||
* @param {any} errors errors object if any
|
||||
*
|
||||
* @returns {IBaseRes}
|
||||
*/
|
||||
* Build error response
|
||||
* @name buildErrorRes
|
||||
*
|
||||
* @param {number} status status code
|
||||
* @param {any} errors errors object if any
|
||||
*
|
||||
* @returns {IBaseRes}
|
||||
*/
|
||||
private buildErrorRes(status: number, errors?: any): IBaseRes {
|
||||
return {
|
||||
status: status,
|
||||
data: null,
|
||||
errors: {},
|
||||
message: errors.error_description ? errors.error_description : errors
|
||||
}
|
||||
message: errors.error_description ? errors.error_description : errors,
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Handle supabase login
|
||||
* @name login
|
||||
*
|
||||
* @param {IUserLogin} userData
|
||||
*
|
||||
* @returns {IBaseRes} Promise that represents <IBaseRes> object
|
||||
*/
|
||||
async login({email, password}: IUserLogin): Promise<IBaseRes> {
|
||||
let _error = null
|
||||
* Handle supabase login
|
||||
* @name login
|
||||
*
|
||||
* @param {IUserLogin} userData
|
||||
*
|
||||
* @returns {IBaseRes} Promise that represents <IBaseRes> object
|
||||
*/
|
||||
async login({ email, password }: IUserLogin): Promise<IBaseRes> {
|
||||
let _error = null;
|
||||
try {
|
||||
const { error, data } = await this.supabase.auth.signIn({ email, password});
|
||||
const { error, data } = await this.supabase.auth.signIn({ email, password });
|
||||
|
||||
if (error) {
|
||||
_error = error.message;
|
||||
@@ -113,20 +111,20 @@ class SupabaseAuthService {
|
||||
|
||||
return this.buildRes(httpCode.success, data);
|
||||
} catch (er) {
|
||||
alert('x')
|
||||
alert('x');
|
||||
return this.buildErrorRes(httpCode.serverError, _error);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Handle supabase registration
|
||||
* @name register
|
||||
*
|
||||
* @param {IUserRegister} userData
|
||||
*
|
||||
*
|
||||
*/
|
||||
// @returns {IBaseRes} Promise that represents <IBaseRes> object
|
||||
* Handle supabase registration
|
||||
* @name register
|
||||
*
|
||||
* @param {IUserRegister} userData
|
||||
*
|
||||
*
|
||||
*/
|
||||
// @returns {IBaseRes} Promise that represents <IBaseRes> object
|
||||
async register(userData: IUserRegister) /* Promise<IBaseRes> */ {
|
||||
try {
|
||||
const { error, data } = await this.supabase.auth.signUp({ email: userData.email, password: userData.password });
|
||||
@@ -141,11 +139,11 @@ class SupabaseAuthService {
|
||||
}
|
||||
|
||||
/**
|
||||
* Handle supabase logout
|
||||
* @name logOut
|
||||
*
|
||||
* @returns {IBaseRes} Promise that represents <IBaseRes> object
|
||||
*/
|
||||
* Handle supabase logout
|
||||
* @name logOut
|
||||
*
|
||||
* @returns {IBaseRes} Promise that represents <IBaseRes> object
|
||||
*/
|
||||
async logOut(): Promise<IBaseRes> {
|
||||
try {
|
||||
if (AppState.isAuthenticated) {
|
||||
@@ -164,20 +162,20 @@ class SupabaseAuthService {
|
||||
}
|
||||
|
||||
/**
|
||||
* Handle supabase update user profile
|
||||
* @name updateProfile
|
||||
*
|
||||
* @param {string} email
|
||||
*
|
||||
* @returns {IBaseRes} Promise that represents <IBaseRes> object
|
||||
*/
|
||||
* Handle supabase update user profile
|
||||
* @name updateProfile
|
||||
*
|
||||
* @param {string} email
|
||||
*
|
||||
* @returns {IBaseRes} Promise that represents <IBaseRes> object
|
||||
*/
|
||||
async updateProfile(email: string): Promise<IBaseRes> {
|
||||
try {
|
||||
AppState.user = {
|
||||
...AppState.user,
|
||||
email,
|
||||
};
|
||||
AppState.isAuthenticated = true
|
||||
AppState.isAuthenticated = true;
|
||||
|
||||
return this.buildRes(httpCode.success, {}, appMsg('update-profile'));
|
||||
} catch (error) {
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import { createClient } from '@supabase/supabase-js'
|
||||
import { createClient } from '@supabase/supabase-js';
|
||||
|
||||
let instance = null
|
||||
let instance = null;
|
||||
|
||||
/**
|
||||
* This class is a singleton service to handle Supabase connection.
|
||||
@@ -11,22 +11,21 @@ let instance = null
|
||||
*
|
||||
*/
|
||||
export default class SupabaseService {
|
||||
supabase: any
|
||||
supabase: any;
|
||||
constructor(supabaseUrl: string, supabaseKey: string) {
|
||||
|
||||
if (!supabaseUrl) throw new Error(`${SupabaseService.getClassName()} => supabaseUrl is required.`)
|
||||
if (!supabaseKey) throw new Error(`${SupabaseService.getClassName()} => supabaseKey is required.`)
|
||||
if (!supabaseUrl) throw new Error(`${SupabaseService.getClassName()} => supabaseUrl is required.`);
|
||||
if (!supabaseKey) throw new Error(`${SupabaseService.getClassName()} => supabaseKey is required.`);
|
||||
|
||||
if (!instance) {
|
||||
instance = this
|
||||
instance = this;
|
||||
}
|
||||
|
||||
this.supabase = createClient(supabaseUrl, supabaseKey)
|
||||
this.supabase = createClient(supabaseUrl, supabaseKey);
|
||||
|
||||
return instance
|
||||
return instance;
|
||||
}
|
||||
|
||||
static getClassName(): string {
|
||||
return SupabaseService.name
|
||||
return SupabaseService.name;
|
||||
}
|
||||
}
|
||||
@@ -6,20 +6,20 @@ const store = createStore({
|
||||
appInitError: '',
|
||||
appInit: false,
|
||||
registerLoader: false,
|
||||
loginLoader: false
|
||||
loginLoader: false,
|
||||
});
|
||||
|
||||
store.onChange('isAuthenticated', (value) => {
|
||||
AppState.isAuthenticated = value;
|
||||
store.onChange('isAuthenticated', value => {
|
||||
AppState.isAuthenticated = value;
|
||||
});
|
||||
store.onChange('user', (value) => {
|
||||
AppState.user = value;
|
||||
store.onChange('user', value => {
|
||||
AppState.user = value;
|
||||
});
|
||||
store.onChange('appInitError', (value) => {
|
||||
AppState.appInitError = value;
|
||||
store.onChange('appInitError', value => {
|
||||
AppState.appInitError = value;
|
||||
});
|
||||
store.onChange('appInit', (value) => {
|
||||
AppState.appInit = value;
|
||||
store.onChange('appInit', value => {
|
||||
AppState.appInit = value;
|
||||
});
|
||||
|
||||
export const AppState = store.state;
|
||||
|
||||
@@ -9,38 +9,35 @@ const appMsg = (key: string): string => {
|
||||
};
|
||||
const checkEmpty = (value: any): boolean => {
|
||||
return value;
|
||||
}
|
||||
};
|
||||
const getFormValidations = (key, values = {}) => {
|
||||
const validations = {
|
||||
login: {
|
||||
email: {
|
||||
value: values['email'] ? values['email'] : null,
|
||||
validate: checkEmpty,
|
||||
isValid: values['email'] ? true : false
|
||||
isValid: values['email'] ? true : false,
|
||||
},
|
||||
password: {
|
||||
value: values['password'] ? values['password'] : null,
|
||||
validate: checkEmpty,
|
||||
isValid: values['password'] ? true : false
|
||||
}
|
||||
isValid: values['password'] ? true : false,
|
||||
},
|
||||
},
|
||||
register: {
|
||||
email: {
|
||||
value: values['email'] ? values['email'] : null,
|
||||
validate: checkEmpty,
|
||||
isValid: values['email'] ? true : false
|
||||
isValid: values['email'] ? true : false,
|
||||
},
|
||||
password: {
|
||||
value: values['password'] ? values['password'] : null,
|
||||
validate: checkEmpty,
|
||||
isValid: values['password'] ? true : false
|
||||
}
|
||||
isValid: values['password'] ? true : false,
|
||||
},
|
||||
},
|
||||
};
|
||||
return validations[key] ? validations[key] : {}
|
||||
}
|
||||
return validations[key] ? validations[key] : {};
|
||||
};
|
||||
|
||||
export {
|
||||
appMsg,
|
||||
getFormValidations
|
||||
}
|
||||
export { appMsg, getFormValidations };
|
||||
@@ -12,13 +12,7 @@ export const config: Config = {
|
||||
// Comment the following line to disable service workers in production
|
||||
serviceWorker: null,
|
||||
baseUrl: 'https://stencil-supabase.local/',
|
||||
}
|
||||
},
|
||||
],
|
||||
plugins: [
|
||||
sass(
|
||||
{injectGlobalPaths: [
|
||||
'src/assets/scss/helpers/variables.scss'
|
||||
]}
|
||||
)
|
||||
]
|
||||
plugins: [sass({ injectGlobalPaths: ['src/assets/scss/helpers/variables.scss'] })],
|
||||
};
|
||||
@@ -4,10 +4,7 @@
|
||||
"allowUnreachableCode": false,
|
||||
"declaration": false,
|
||||
"experimentalDecorators": true,
|
||||
"lib": [
|
||||
"dom",
|
||||
"es2015"
|
||||
],
|
||||
"lib": ["dom", "es2015"],
|
||||
"moduleResolution": "node",
|
||||
"module": "esnext",
|
||||
"target": "es2017",
|
||||
@@ -16,10 +13,6 @@
|
||||
"jsx": "react",
|
||||
"jsxFactory": "h"
|
||||
},
|
||||
"include": [
|
||||
"src"
|
||||
],
|
||||
"exclude": [
|
||||
"node_modules"
|
||||
]
|
||||
"include": ["src"],
|
||||
"exclude": ["node_modules"]
|
||||
}
|
||||
+8
-7
@@ -41,7 +41,7 @@ Vi er i øjeblikket i Offentlig beta. Hold øje med udgivelser på denne side fo
|
||||
|
||||
## Hvordan virker det
|
||||
|
||||
Supabase er en kombination af open source værktøjer. Vi bygger Firebase fuktioner med open source produkter der er egnede til anvendelse i virksomheder. Hvis der allerede eksisterer værktøjer med MIT, Apache 2 eller en tilsvarende open source license, så vil vi anvende og støtte dette værktøj. Hvis sådan et værktøj ikke findes, så bygger vi det og udgiver det som open source. Supabase er ikke en en til en mapning af Firebase. Vores mål er at give udviklere en Firebase-lignende udvikleroplevelse ved hjælp af open source værktøjer.
|
||||
Supabase er en kombination af open source værktøjer. Vi bygger Firebase fuktioner med open source produkter der er egnede til anvendelse i virksomheder. Hvis der allerede eksisterer værktøjer med MIT, Apache 2 eller en tilsvarende open source license, så vil vi anvende og støtte dette værktøj. Hvis sådan et værktøj ikke findes, så bygger vi det og udgiver det som open source. Supabase er ikke en en til en mapning af Firebase. Vores mål er at give udviklere en Firebase-lignende udvikleroplevelse ved hjælp af open source værktøjer.
|
||||
|
||||
**Nuværende arkitektur**
|
||||
|
||||
@@ -66,17 +66,18 @@ Vores klientbibliotek er opbygget modulært. Hvert underbibliotek er en selvstæ
|
||||
- `realtime-{lang}`: Klientbibliotek til at arbejde med [Realtime](https://github.com/supabase/realtime)
|
||||
- `gotrue-{lang}`: Klientbibliotek til at arbejde med [GoTrue](https://github.com/netlify/gotrue)
|
||||
|
||||
| Repo | Officielt | Fællesskab |
|
||||
| --------------------- | ------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| **`supabase-{lang}`** | [`JS`](https://github.com/supabase/supabase-js) | [`C#`](https://github.com/supabase/supabase-csharp) \| [`Dart`](https://github.com/supabase/supabase-dart) \| [`Python`](https://github.com/supabase/supabase-py) \| `Rust` \| [`Ruby`](https://github.com/supabase/supabase-rb)
|
||||
| `postgrest-{lang}` | [`JS`](https://github.com/supabase/postgrest-js) | [`C#`](https://github.com/supabase/postgrest-csharp) \| [`Dart`](https://github.com/supabase/postgrest-dart) \| [`Python`](https://github.com/supabase/postgrest-py) \| [`Rust`](https://github.com/supabase/postgrest-rs) \| [`Ruby`](https://github.com/supabase/postgrest-rb)
|
||||
| `realtime-{lang}` | [`JS`](https://github.com/supabase/realtime-js) | [`C#`](https://github.com/supabase/realtime-csharp) \| [`Dart`](https://github.com/supabase/realtime-dart) \| [`Python`](https://github.com/supabase/realtime-py) \| `Rust` \| `Ruby` |
|
||||
| `gotrue-{lang}` | [`JS`](https://github.com/supabase/gotrue-js) | [`C#`](https://github.com/supabase/gotrue-csharp) \| [`Dart`](https://github.com/supabase/gotrue-dart) \| [`Python`](https://github.com/supabase/gotrue-py) \| `Rust` \| `Ruby` |
|
||||
| Repo | Officielt | Fællesskab |
|
||||
| --------------------- | ------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| **`supabase-{lang}`** | [`JS`](https://github.com/supabase/supabase-js) | [`C#`](https://github.com/supabase/supabase-csharp) \| [`Dart`](https://github.com/supabase/supabase-dart) \| [`Python`](https://github.com/supabase/supabase-py) \| `Rust` \| [`Ruby`](https://github.com/supabase/supabase-rb) |
|
||||
| `postgrest-{lang}` | [`JS`](https://github.com/supabase/postgrest-js) | [`C#`](https://github.com/supabase/postgrest-csharp) \| [`Dart`](https://github.com/supabase/postgrest-dart) \| [`Python`](https://github.com/supabase/postgrest-py) \| [`Rust`](https://github.com/supabase/postgrest-rs) \| [`Ruby`](https://github.com/supabase/postgrest-rb) |
|
||||
| `realtime-{lang}` | [`JS`](https://github.com/supabase/realtime-js) | [`C#`](https://github.com/supabase/realtime-csharp) \| [`Dart`](https://github.com/supabase/realtime-dart) \| [`Python`](https://github.com/supabase/realtime-py) \| `Rust` \| `Ruby` |
|
||||
| `gotrue-{lang}` | [`JS`](https://github.com/supabase/gotrue-js) | [`C#`](https://github.com/supabase/gotrue-csharp) \| [`Dart`](https://github.com/supabase/gotrue-dart) \| [`Python`](https://github.com/supabase/gotrue-py) \| `Rust` \| `Ruby` |
|
||||
|
||||
<!--- Remove this list if you're traslating to another language, it's hard to keep updated across multiple files-->
|
||||
<!--- Keep only the link to the list of translation files-->
|
||||
|
||||
## Oversættelser
|
||||
|
||||
- [Liste med oversættelser](/i18n/languages.md) <!--- Keep only this -->
|
||||
|
||||
---
|
||||
|
||||
+3
-2
@@ -9,7 +9,7 @@
|
||||
[Supabase](https://supabase.io) es una alternativa de código abierto a Firebase. Estamos construyendo las funcionalidades de Firebase usando herramientas de código abierto de nivel empresarial.
|
||||
|
||||
- [x] Alojamiento de base de datos Postgres
|
||||
- [x] Suscripciones en tiempo real
|
||||
- [x] Suscripciones en tiempo real
|
||||
- [x] Autenticación y autorización
|
||||
- [x] API autogenerada
|
||||
- [x] Panel de control
|
||||
@@ -66,7 +66,7 @@ Nuestra librería de cliente es modular. Cada sub-librería es una implementaci
|
||||
- `realtime-{lang}`: Librería de cliente para trabajar con [Realtime](https://github.com/supabase/realtime)
|
||||
- `gotrue-{lang}`: Librería de cliente para trabajar con [GoTrue](https://github.com/netlify/gotrue)
|
||||
|
||||
| Repo | Oficial | Comunidad |
|
||||
| Repo | Oficial | Comunidad |
|
||||
| --------------------- | ------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| **`supabase-{lang}`** | [`JS`](https://github.com/supabase/supabase-js) | [`C#`](https://github.com/supabase/supabase-csharp) \| [`Dart`](https://github.com/supabase/supabase-dart) \| [`Python`](https://github.com/supabase/supabase-py) \| `Rust` |
|
||||
| `postgrest-{lang}` | [`JS`](https://github.com/supabase/postgrest-js) | [`C#`](https://github.com/supabase/postgrest-csharp) \| [`Dart`](https://github.com/supabase/postgrest-dart) \| [`Python`](https://github.com/supabase/postgrest-py) \| [`Rust`](https://github.com/supabase/postgrest-rs) |
|
||||
@@ -75,6 +75,7 @@ Nuestra librería de cliente es modular. Cada sub-librería es una implementaci
|
||||
|
||||
<!--- Remove this list if you're traslating to another language, it's hard to keep updated across multiple files-->
|
||||
<!--- Keep only the link to the list of translation files-->
|
||||
|
||||
## Traducciones
|
||||
|
||||
- [Lista de traducciones](/i18n/languages.md) <!--- Keep only the this-->
|
||||
|
||||
+4
-7
@@ -31,7 +31,7 @@
|
||||
- [x] آلفا: در حال تست Supabase با گروه محدود از کاربران هستیم.
|
||||
- [x] آلفای عمومی: همه میتواند برای استفاده از طریق [app.supabase.io](https://app.supabase.io) ثبتنام کنند. اما سخت نگیرید، ممکن است مشکلات معدودی وجود داشته باشد.
|
||||
- [x] بتای عمومی: قابل اتکا برای اکثر استفادههای غیر-تجاری میباشد.
|
||||
- [ ] عمومی: آماده برای استفاده تجاری.
|
||||
- [ ] عمومی: آماده برای استفاده تجاری.
|
||||
|
||||
در حال حاظر در مرحله بتای عمومی هستیم. "releases" این مخزن را دنبال کنید تا در جریان بهروزسانیها قرار بگیرید.
|
||||
|
||||
@@ -41,8 +41,7 @@
|
||||
|
||||
## چطور کار میکند
|
||||
|
||||
|
||||
Supabase ترکیبی از ابزارهای اپنسورس است. ما امکانات Firebase را با استفاده از محصولات اپنسورس و کلاس تجاری میسازیم. اگر ابزار و جامعهی آن وجود داشته باشد، با استفاده از گواهینامه MIT, Apache 2 یا هر گواهینامهی معادلی، ما از آن ابزار استفاده و پشتیبانی میکنیم. اگر ابزاری وجود نداشته باشد، ما خودمان آن را میسازیم و اپنسورس میکنیم. Supabase یک محصول دقیقا شبیه و معادل یکبهیک Firebase نیست. ما سعی داریم با استفاده از ابزارهای اپنسورس تجربه شبیه به Firebase به توسعهدهندگان ارائه دهیم.
|
||||
Supabase ترکیبی از ابزارهای اپنسورس است. ما امکانات Firebase را با استفاده از محصولات اپنسورس و کلاس تجاری میسازیم. اگر ابزار و جامعهی آن وجود داشته باشد، با استفاده از گواهینامه MIT, Apache 2 یا هر گواهینامهی معادلی، ما از آن ابزار استفاده و پشتیبانی میکنیم. اگر ابزاری وجود نداشته باشد، ما خودمان آن را میسازیم و اپنسورس میکنیم. Supabase یک محصول دقیقا شبیه و معادل یکبهیک Firebase نیست. ما سعی داریم با استفاده از ابزارهای اپنسورس تجربه شبیه به Firebase به توسعهدهندگان ارائه دهیم.
|
||||
|
||||
**معماری فعلی**
|
||||
|
||||
@@ -59,25 +58,23 @@
|
||||
- [Kong](https://github.com/Kong/kong) یک gateway ابری-بومی میباشد.
|
||||
|
||||
#### کتابخانههای کلاینت
|
||||
کتابخانهی کلاینت ما چند-تیکه است. هر زیر-کتابخانه یک پیادهسازی جداگانه برای یک سیستم خارجی واحد دارد. این یکی از روشهای ما برای پشتیانی از ابزارهای موجود است.
|
||||
|
||||
کتابخانهی کلاینت ما چند-تیکه است. هر زیر-کتابخانه یک پیادهسازی جداگانه برای یک سیستم خارجی واحد دارد. این یکی از روشهای ما برای پشتیانی از ابزارهای موجود است.
|
||||
|
||||
- **`supabase-{lang}`**: کتابخانهها را ترکیب میکند و تکمیلتر خواهد بود.
|
||||
- `postgrest-{lang}`: کتابخانه کلاینت برای کارکردن با [PostgREST](https://github.com/postgrest/postgrest)
|
||||
- `realtime-{lang}`: کتابخانه کلاینت برای کارکردن با [Realtime](https://github.com/supabase/realtime)
|
||||
- `gotrue-{lang}`: کتابخانه کلاینت برای کارکردن با [GoTrue](https://github.com/netlify/gotrue)
|
||||
|
||||
| مخزن | رسمی | جامعه |
|
||||
| مخزن | رسمی | جامعه |
|
||||
| --------------------- | ------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| **`supabase-{lang}`** | [`JS`](https://github.com/supabase/supabase-js) | [`C#`](https://github.com/supabase/supabase-csharp) \| [`Dart`](https://github.com/supabase/supabase-dart) \| [`Python`](https://github.com/supabase/supabase-py) \| `Rust` |
|
||||
| `postgrest-{lang}` | [`JS`](https://github.com/supabase/postgrest-js) | [`C#`](https://github.com/supabase/postgrest-csharp) \| [`Dart`](https://github.com/supabase/postgrest-dart) \| [`Python`](https://github.com/supabase/postgrest-py) \| [`Rust`](https://github.com/supabase/postgrest-rs) |
|
||||
| `realtime-{lang}` | [`JS`](https://github.com/supabase/realtime-js) | [`C#`](https://github.com/supabase/realtime-csharp) \| [`Dart`](https://github.com/supabase/realtime-dart) \| [`Python`](https://github.com/supabase/realtime-py) \| `Rust` |
|
||||
| `gotrue-{lang}` | [`JS`](https://github.com/supabase/gotrue-js) | [`C#`](https://github.com/supabase/gotrue-csharp) \| [`Dart`](https://github.com/supabase/gotrue-dart) \| [`Python`](https://github.com/supabase/gotrue-py) \| `Rust` |
|
||||
|
||||
|
||||
## ترجمهها
|
||||
|
||||
|
||||
- [لیست ترجمهها](/i18n/languages.md)
|
||||
|
||||
---
|
||||
|
||||
+3
-2
@@ -29,7 +29,7 @@ Pour une documentation complète, visitez [supabase.io/docs](https://supabase.io
|
||||
## Statut
|
||||
|
||||
- [x] Alpha : Nous testons Supabase avec un groupe fermé de clients.
|
||||
- [X] Alpha publique : Tout le monde peut s'inscrire sur [app.supabase.io]((https://app.supabase.io)). Mais allez-y doucement, il y a quelques problèmes.
|
||||
- [x] Alpha publique : Tout le monde peut s'inscrire sur [app.supabase.io](<(https://app.supabase.io)>). Mais allez-y doucement, il y a quelques problèmes.
|
||||
- [x] Bêta publique : Assez stable pour la plupart des cas d'utilisation hors entreprise
|
||||
- [ ] Public : Prêt pour la production
|
||||
|
||||
@@ -66,7 +66,7 @@ Notre bibliothèque client est modulaire. Chaque sous-bibliothèque est une impl
|
||||
- `realtime-{lang}`: Bibliothèque client pour travailler avec [Realtime](https://github.com/supabase/realtime)
|
||||
- `gotrue-{lang}`: Bibliothèque client pour travailler avec [GoTrue](https://github.com/netlify/gotrue)
|
||||
|
||||
| Repo | Officiel | Communauté |
|
||||
| Repo | Officiel | Communauté |
|
||||
| --------------------- | ------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| **`supabase-{lang}`** | [`JS`](https://github.com/supabase/supabase-js) | [`C#`](https://github.com/supabase/supabase-csharp) \| [`Dart`](https://github.com/supabase/supabase-dart) \| [`Python`](https://github.com/supabase/supabase-py) \| `Rust` |
|
||||
| `postgrest-{lang}` | [`JS`](https://github.com/supabase/postgrest-js) | [`C#`](https://github.com/supabase/postgrest-csharp) \| [`Dart`](https://github.com/supabase/postgrest-dart) \| [`Python`](https://github.com/supabase/postgrest-py) \| [`Rust`](https://github.com/supabase/postgrest-rs) |
|
||||
@@ -75,6 +75,7 @@ Notre bibliothèque client est modulaire. Chaque sous-bibliothèque est une impl
|
||||
|
||||
<!--- Remove this list if you're traslating to another language, it's hard to keep updated across multiple files-->
|
||||
<!--- Keep only the link to the list of translation files-->
|
||||
|
||||
## Traductions
|
||||
|
||||
- [Liste des traductions](/i18n/languages.md) <!--- Keep only the this-->
|
||||
|
||||
+7
-7
@@ -66,12 +66,12 @@ Our client library is modular. Each sub-library is a standalone implementation f
|
||||
- `realtime-{lang}`: Client library to work with [Realtime](https://github.com/supabase/realtime)
|
||||
- `gotrue-{lang}`: Client library to work with [GoTrue](https://github.com/netlify/gotrue)
|
||||
|
||||
| Repo | Official | Community |
|
||||
| --------------------- | ------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| **`supabase-{lang}`** | [`JS`](https://github.com/supabase/supabase-js) | [`C#`](https://github.com/supabase/supabase-csharp) \| [`Dart`](https://github.com/supabase/supabase-dart) \| [`Python`](https://github.com/supabase/supabase-py) \| `Rust` \| [`Ruby`](https://github.com/supabase/supabase-rb)
|
||||
| `postgrest-{lang}` | [`JS`](https://github.com/supabase/postgrest-js) | [`C#`](https://github.com/supabase/postgrest-csharp) \| [`Dart`](https://github.com/supabase/postgrest-dart) \| [`Python`](https://github.com/supabase/postgrest-py) \| [`Rust`](https://github.com/supabase/postgrest-rs) \| [`Ruby`](https://github.com/supabase/postgrest-rb)
|
||||
| `realtime-{lang}` | [`JS`](https://github.com/supabase/realtime-js) | [`C#`](https://github.com/supabase/realtime-csharp) \| [`Dart`](https://github.com/supabase/realtime-dart) \| [`Python`](https://github.com/supabase/realtime-py) \| `Rust` \| `Ruby` |
|
||||
| `gotrue-{lang}` | [`JS`](https://github.com/supabase/gotrue-js) | [`C#`](https://github.com/supabase/gotrue-csharp) \| [`Dart`](https://github.com/supabase/gotrue-dart) \| [`Python`](https://github.com/supabase/gotrue-py) \| `Rust` \| `Ruby` |
|
||||
| Repo | Official | Community |
|
||||
| --------------------- | ------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| **`supabase-{lang}`** | [`JS`](https://github.com/supabase/supabase-js) | [`C#`](https://github.com/supabase/supabase-csharp) \| [`Dart`](https://github.com/supabase/supabase-dart) \| [`Python`](https://github.com/supabase/supabase-py) \| `Rust` \| [`Ruby`](https://github.com/supabase/supabase-rb) |
|
||||
| `postgrest-{lang}` | [`JS`](https://github.com/supabase/postgrest-js) | [`C#`](https://github.com/supabase/postgrest-csharp) \| [`Dart`](https://github.com/supabase/postgrest-dart) \| [`Python`](https://github.com/supabase/postgrest-py) \| [`Rust`](https://github.com/supabase/postgrest-rs) \| [`Ruby`](https://github.com/supabase/postgrest-rb) |
|
||||
| `realtime-{lang}` | [`JS`](https://github.com/supabase/realtime-js) | [`C#`](https://github.com/supabase/realtime-csharp) \| [`Dart`](https://github.com/supabase/realtime-dart) \| [`Python`](https://github.com/supabase/realtime-py) \| `Rust` \| `Ruby` |
|
||||
| `gotrue-{lang}` | [`JS`](https://github.com/supabase/gotrue-js) | [`C#`](https://github.com/supabase/gotrue-csharp) \| [`Dart`](https://github.com/supabase/gotrue-dart) \| [`Python`](https://github.com/supabase/gotrue-py) \| `Rust` \| `Ruby` |
|
||||
|
||||
<!--- Remove this list if you're traslating to another language, it's hard to keep updated across multiple files-->
|
||||
<!--- Keep only the link to the list of translation files-->
|
||||
@@ -84,4 +84,4 @@ Our client library is modular. Each sub-library is a standalone implementation f
|
||||
|
||||
## Χορηγοί
|
||||
|
||||
[](https://github.com/sponsors/supabase)
|
||||
[](https://github.com/sponsors/supabase)
|
||||
+3
-2
@@ -18,7 +18,7 @@
|
||||
|
||||
## प्रलेखन
|
||||
|
||||
पूर्ण प्रलेखन के लिए, [supabase.io/docs](https://supabase.io/docs) पर जाएँ
|
||||
पूर्ण प्रलेखन के लिए, [supabase.io/docs](https://supabase.io/docs) पर जाएँ
|
||||
|
||||
## सामुदायिक तथा सहयोग
|
||||
|
||||
@@ -66,7 +66,7 @@
|
||||
- `realtime-{lang}`: ग्राहक पुस्तकालय के साथ काम करने के लिए [Realtime](https://github.com/supabase/realtime)
|
||||
- `gotrue-{lang}`: ग्राहक पुस्तकालय के साथ काम करने के लिए [GoTrue](https://github.com/netlify/gotrue)
|
||||
|
||||
| Repo | आधिकारिक | समुदाय |
|
||||
| Repo | आधिकारिक | समुदाय |
|
||||
| --------------------- | ------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| **`supabase-{lang}`** | [`JS`](https://github.com/supabase/supabase-js) | [`C#`](https://github.com/supabase/supabase-csharp) \| [`Dart`](https://github.com/supabase/supabase-dart) \| [`Python`](https://github.com/supabase/supabase-py) \| `Rust` |
|
||||
| `postgrest-{lang}` | [`JS`](https://github.com/supabase/postgrest-js) | [`C#`](https://github.com/supabase/postgrest-csharp) \| [`Dart`](https://github.com/supabase/postgrest-dart) \| [`Python`](https://github.com/supabase/postgrest-py) \| [`Rust`](https://github.com/supabase/postgrest-rs) |
|
||||
@@ -75,6 +75,7 @@
|
||||
|
||||
<!--- Remove this list if you're traslating to another language, it's hard to keep updated across multiple files-->
|
||||
<!--- Keep only the link to the list of translation files-->
|
||||
|
||||
## अनुवाद
|
||||
|
||||
- [अनुवाद की सूची](/i18n/languages.md) <!--- Keep only the this-->
|
||||
|
||||
+7
-7
@@ -41,7 +41,7 @@ Kami saat ini dalam Public Beta. Amati "releases" dari repositori ini untuk pemb
|
||||
|
||||
## Cara kerjanya
|
||||
|
||||
Supabase adalah kombinasi dari alat-alat sumber terbuka. Kami membangun fitur-fitur Firebase menggunakan produk-produk sumber terbuka tingkat perusahaan. Jika ada alat dan komunitas, dengan MIT, Apache 2, atau lisensi terbuka yang setara, kami akan menggunakan dan mendukung alat tersebut. Jika alat tersebut tidak ada, kami akan membuat dan membuka sumbernya sendiri. Supabase bukanlah salinan persis dari Firebase. Tujuan kami adalah memberi pengguna kemampuan untuk menggunakan produk yang mirip dengan Firebase, tetapi sepenuhnya bersumber terbuka.
|
||||
Supabase adalah kombinasi dari alat-alat sumber terbuka. Kami membangun fitur-fitur Firebase menggunakan produk-produk sumber terbuka tingkat perusahaan. Jika ada alat dan komunitas, dengan MIT, Apache 2, atau lisensi terbuka yang setara, kami akan menggunakan dan mendukung alat tersebut. Jika alat tersebut tidak ada, kami akan membuat dan membuka sumbernya sendiri. Supabase bukanlah salinan persis dari Firebase. Tujuan kami adalah memberi pengguna kemampuan untuk menggunakan produk yang mirip dengan Firebase, tetapi sepenuhnya bersumber terbuka.
|
||||
|
||||
**Arsitektur saat ini**
|
||||
|
||||
@@ -66,12 +66,12 @@ Library klien kami bersifat modular. Setiap sub-library adalah sebuah implementa
|
||||
- `realtime-{lang}`: Library klien untuk bekerja dengan [Realtime](https://github.com/supabase/realtime)
|
||||
- `gotrue-{lang}`: Library klien untuk bekerja dengan [GoTrue](https://github.com/netlify/gotrue)
|
||||
|
||||
| Repo | Resmi | Komunitas |
|
||||
| --------------------- | ------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| **`supabase-{lang}`** | [`JS`](https://github.com/supabase/supabase-js) | [`C#`](https://github.com/supabase/supabase-csharp) \| [`Dart`](https://github.com/supabase/supabase-dart) \| [`Python`](https://github.com/supabase/supabase-py) \| `Rust` \| [`Ruby`](https://github.com/supabase/supabase-rb)
|
||||
| `postgrest-{lang}` | [`JS`](https://github.com/supabase/postgrest-js) | [`C#`](https://github.com/supabase/postgrest-csharp) \| [`Dart`](https://github.com/supabase/postgrest-dart) \| [`Python`](https://github.com/supabase/postgrest-py) \| [`Rust`](https://github.com/supabase/postgrest-rs) \| [`Ruby`](https://github.com/supabase/postgrest-rb)
|
||||
| `realtime-{lang}` | [`JS`](https://github.com/supabase/realtime-js) | [`C#`](https://github.com/supabase/realtime-csharp) \| [`Dart`](https://github.com/supabase/realtime-dart) \| [`Python`](https://github.com/supabase/realtime-py) \| `Rust` \| `Ruby` |
|
||||
| `gotrue-{lang}` | [`JS`](https://github.com/supabase/gotrue-js) | [`C#`](https://github.com/supabase/gotrue-csharp) \| [`Dart`](https://github.com/supabase/gotrue-dart) \| [`Python`](https://github.com/supabase/gotrue-py) \| `Rust` \| `Ruby` |
|
||||
| Repo | Resmi | Komunitas |
|
||||
| --------------------- | ------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| **`supabase-{lang}`** | [`JS`](https://github.com/supabase/supabase-js) | [`C#`](https://github.com/supabase/supabase-csharp) \| [`Dart`](https://github.com/supabase/supabase-dart) \| [`Python`](https://github.com/supabase/supabase-py) \| `Rust` \| [`Ruby`](https://github.com/supabase/supabase-rb) |
|
||||
| `postgrest-{lang}` | [`JS`](https://github.com/supabase/postgrest-js) | [`C#`](https://github.com/supabase/postgrest-csharp) \| [`Dart`](https://github.com/supabase/postgrest-dart) \| [`Python`](https://github.com/supabase/postgrest-py) \| [`Rust`](https://github.com/supabase/postgrest-rs) \| [`Ruby`](https://github.com/supabase/postgrest-rb) |
|
||||
| `realtime-{lang}` | [`JS`](https://github.com/supabase/realtime-js) | [`C#`](https://github.com/supabase/realtime-csharp) \| [`Dart`](https://github.com/supabase/realtime-dart) \| [`Python`](https://github.com/supabase/realtime-py) \| `Rust` \| `Ruby` |
|
||||
| `gotrue-{lang}` | [`JS`](https://github.com/supabase/gotrue-js) | [`C#`](https://github.com/supabase/gotrue-csharp) \| [`Dart`](https://github.com/supabase/gotrue-dart) \| [`Python`](https://github.com/supabase/gotrue-py) \| `Rust` \| `Ruby` |
|
||||
|
||||
## Terjemahan
|
||||
|
||||
|
||||
+3
-4
@@ -6,7 +6,7 @@
|
||||
|
||||
# Supabase
|
||||
|
||||
[Supabase](https://supabase.io) è una alternativa a Firebase con codice sorgente aperto. Stiamo sviluppando le funzionalità offerte da Firebase utilizzando strumenti con sorgente aperto a livello professionale.
|
||||
[Supabase](https://supabase.io) è una alternativa a Firebase con codice sorgente aperto. Stiamo sviluppando le funzionalità offerte da Firebase utilizzando strumenti con sorgente aperto a livello professionale.
|
||||
|
||||
- [x] Database Postgres ospitato
|
||||
- [x] Sottoscrizioni in tempo reale
|
||||
@@ -52,7 +52,7 @@ Supabase è una [piattaforma ospitata](https://app.supabase.io). Ci si può iscr
|
||||
- [PostgreSQL](https://www.postgresql.org/) è un sistema di database relazionali ad oggetti, con oltre 30 anni di sviluppo all'attivo che gli hanno permesso di ottenere una ottima reputazione in termini di affidabilità, robustezza delle funzionalità e prestazioni.
|
||||
- [Realtime](https://github.com/supabase/realtime) è un server Elixir che consente di ascoltare eventi PostreSQL quali inserimento, aggiornamenti e rimozioni utilizzando i websocket. Supabase rimane in ascolto della funzionalità incorporata di replicazione di Postgres, convertendo il flusso di byte replicato in JSON, dopodichè diffondendo il JSON attraverso i websocket.
|
||||
- [PostgREST](http://postgrest.org/) è un web server che trasforma il database PostreSQL direttamente in API di tipo RESTful.
|
||||
- [Storage](https://github.com/supabase/storage-api) fornisce un'interfaccia RESTful per gestire i File archiviati in S3, utilizzando Postgres per la gestione dei permessi.
|
||||
- [Storage](https://github.com/supabase/storage-api) fornisce un'interfaccia RESTful per gestire i File archiviati in S3, utilizzando Postgres per la gestione dei permessi.
|
||||
- [postgres-meta](https://github.com/supabase/postgres-meta) è una API RESTful per gestire Postgres, permettendo di recuperare tabelle, aggiungere ruoli, lanciare interrogazioni ecc.
|
||||
- [GoTrue](https://github.com/netlify/gotrue) è una API basata su SWT per la gestione delle utenze e per generare token SWT.
|
||||
- [Kong](https://github.com/Kong/kong) è una porta per le API nativa del cloud.
|
||||
@@ -66,14 +66,13 @@ La nostra libreria utente è modulare. Ogni sotto-libreria è una implementazion
|
||||
- `realtime-{lang}`: Libreria utente per lavorare con [Realtime](https://github.com/supabase/realtime)
|
||||
- `gotrue-{lang}`: Libreria utente per lavorare con [GoTrue](https://github.com/netlify/gotrue)
|
||||
|
||||
| Repository | Ufficiale | Comunità |
|
||||
| Repository | Ufficiale | Comunità |
|
||||
| --------------------- | ------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| **`supabase-{lang}`** | [`JS`](https://github.com/supabase/supabase-js) | [`C#`](https://github.com/supabase/supabase-csharp) \| [`Dart`](https://github.com/supabase/supabase-dart) \| [`Python`](https://github.com/supabase/supabase-py) \| `Rust` |
|
||||
| `postgrest-{lang}` | [`JS`](https://github.com/supabase/postgrest-js) | [`C#`](https://github.com/supabase/postgrest-csharp) \| [`Dart`](https://github.com/supabase/postgrest-dart) \| [`Python`](https://github.com/supabase/postgrest-py) \| [`Rust`](https://github.com/supabase/postgrest-rs) |
|
||||
| `realtime-{lang}` | [`JS`](https://github.com/supabase/realtime-js) | [`C#`](https://github.com/supabase/realtime-csharp) \| [`Dart`](https://github.com/supabase/realtime-dart) \| [`Python`](https://github.com/supabase/realtime-py) \| `Rust` |
|
||||
| `gotrue-{lang}` | [`JS`](https://github.com/supabase/gotrue-js) | [`C#`](https://github.com/supabase/gotrue-csharp) \| [`Dart`](https://github.com/supabase/gotrue-dart) \| [`Python`](https://github.com/supabase/gotrue-py) \| `Rust` |
|
||||
|
||||
|
||||
- [Lista delle Traduzioni](/i18n/languages.md)
|
||||
|
||||
---
|
||||
|
||||
+20
-19
@@ -6,12 +6,12 @@
|
||||
|
||||
# Supabase
|
||||
|
||||
[Supabase](https://supabase.io)は、オープンソースのFirebase代替製品です。エンタープライズグレードのオープンソースツールを使って、Firebaseの機能を構築しています。
|
||||
[Supabase](https://supabase.io)は、オープンソースの Firebase 代替製品です。エンタープライズグレードのオープンソースツールを使って、Firebase の機能を構築しています。
|
||||
|
||||
- [x] ホスティングされたPostgresデータベース
|
||||
- [x] ホスティングされた Postgres データベース
|
||||
- [x] リアルタイムサブスクリプション
|
||||
- [x] 認証・認可
|
||||
- [x] APIを自動生成
|
||||
- [x] API を自動生成
|
||||
- [x] ダッシュボード
|
||||
- [x] ストレージ
|
||||
- [ ] 関数 (近日公開)
|
||||
@@ -23,51 +23,51 @@
|
||||
## コミュニティとサポート
|
||||
|
||||
- [コミュニティフォーラム](https://github.com/supabase/supabase/discussions) どんな時に使うか：構築の手助け、データベースのベストプラクティスに関する議論など
|
||||
- [GitHub Issue](https://github.com/supabase/supabase/issues) どんな時に使うか: Supabaseで起こったバグやエラーについて
|
||||
- [Emailサポート](https://supabase.io/docs/support#business-support) どんな時に使うか: ユーザー自身のデータベースやインフラに何か問題が発生した場合
|
||||
- [GitHub Issue](https://github.com/supabase/supabase/issues) どんな時に使うか: Supabase で起こったバグやエラーについて
|
||||
- [Email サポート](https://supabase.io/docs/support#business-support) どんな時に使うか: ユーザー自身のデータベースやインフラに何か問題が発生した場合
|
||||
|
||||
## ステータス
|
||||
|
||||
- [x] Alpha: 限られたユーザーでSupabaseをテストしています。
|
||||
- [x] Alpha: 限られたユーザーで Supabase をテストしています。
|
||||
- [x] Public Alpha: 誰でも[app.supabase.io](https://app.supabase.io)から登録ができます。ただし、バグなどがある可能性がありますので、ご容赦ください。
|
||||
- [x] Public Beta: 企業以外のほとんどのユースケースに耐えうる十分な安定性を確保。
|
||||
- [ ] Public: 実用的な用途に対応
|
||||
|
||||
現在、Public Betaを実施しています。このリポジトリの"release"にてメジャーアップデートに関する情報を発信しています。
|
||||
現在、Public Beta を実施しています。このリポジトリの"release"にてメジャーアップデートに関する情報を発信しています。
|
||||
|
||||
<kbd><img src="https://gitcdn.link/repo/supabase/supabase/master/web/static/watch-repo.gif" alt="Watch this repo"/></kbd>
|
||||
|
||||
---
|
||||
|
||||
## Supabaseの仕組み
|
||||
## Supabase の仕組み
|
||||
|
||||
Supabaseは、オープンソースのツールを組み合わせてできています。私たちはFirebaseの機能を、エンタープライズグレードのオープンソース製品を使って構築しています。ツールやコミュニティが存在し、MIT、Apache 2、または同等のオープンライセンスであれば、私たちはそのツールを使用し、サポートします。ツールが存在しない場合は、自分たちで構築してオープンソース化します。SupabaseはFirebaseを1対1でマッピングしたものではありません。Supabaseの目的は、オープンソースのツールを使って、Firebaseのような開発体験を提供することです。
|
||||
Supabase は、オープンソースのツールを組み合わせてできています。私たちは Firebase の機能を、エンタープライズグレードのオープンソース製品を使って構築しています。ツールやコミュニティが存在し、MIT、Apache 2、または同等のオープンライセンスであれば、私たちはそのツールを使用し、サポートします。ツールが存在しない場合は、自分たちで構築してオープンソース化します。Supabase は Firebase を 1 対 1 でマッピングしたものではありません。Supabase の目的は、オープンソースのツールを使って、Firebase のような開発体験を提供することです。
|
||||
|
||||
**現在のアーキテクチャ**
|
||||
|
||||
Supabaseは[ホスティングされたプラットフォーム](https://app.supabase.io)です。登録するだけで、何もインストールせずに使い始めることができます。
|
||||
Supabase は[ホスティングされたプラットフォーム](https://app.supabase.io)です。登録するだけで、何もインストールせずに使い始めることができます。
|
||||
更に現在ローカルでの開発環境を整えており、これはプラットフォームの安定性と並んで今最優先で進めているプロジェクトになります。
|
||||
|
||||
|
||||
|
||||
- [PostgreSQL](https://www.postgresql.org/)は、30年以上にわたって開発・改善されてきたオブジェクトリレーショナルデータベースシステムで、信頼性、機能の堅牢性、パフォーマンスの面で高い評価を得ています。
|
||||
- [Realtime](https://github.com/supabase/realtime)は、PostgreSQLのinsert、update、deleteの情報をWebSocketで受信できるElixirサーバです。SupabaseはPostgresに組み込まれたレプリケーション機能をリッスンし、レプリケーションのバイトストリームをJSONに変換し、そのJSONをWebSocketでブロードキャストします。
|
||||
- [PostgREST](http://postgrest.org/)は、PostgreSQLデータベースをRESTful APIに直接変換するウェブサーバです。
|
||||
- [Storage](https://github.com/supabase/storage-api)は、S3に保存されたファイルを管理するためのRESTfulなインターフェイスで、パーミッションの管理にはPostgresを使用しています。
|
||||
- [postgres-meta](https://github.com/supabase/postgres-meta) は、Postgresを管理するためのRESTful APIで、テーブルの取得、ロールの追加、クエリの実行などを行うことができます。
|
||||
- [GoTrue](https://github.com/netlify/gotrue) は、ユーザー管理とSWTトークン発行のためのSWTベースのAPIです。
|
||||
- [Kong](https://github.com/Kong/kong) は、クラウドネイティブなAPIゲートウェイです。
|
||||
- [PostgreSQL](https://www.postgresql.org/)は、30 年以上にわたって開発・改善されてきたオブジェクトリレーショナルデータベースシステムで、信頼性、機能の堅牢性、パフォーマンスの面で高い評価を得ています。
|
||||
- [Realtime](https://github.com/supabase/realtime)は、PostgreSQL の insert、update、delete の情報を WebSocket で受信できる Elixir サーバです。Supabase は Postgres に組み込まれたレプリケーション機能をリッスンし、レプリケーションのバイトストリームを JSON に変換し、その JSON を WebSocket でブロードキャストします。
|
||||
- [PostgREST](http://postgrest.org/)は、PostgreSQL データベースを RESTful API に直接変換するウェブサーバです。
|
||||
- [Storage](https://github.com/supabase/storage-api)は、S3 に保存されたファイルを管理するための RESTful なインターフェイスで、パーミッションの管理には Postgres を使用しています。
|
||||
- [postgres-meta](https://github.com/supabase/postgres-meta) は、Postgres を管理するための RESTful API で、テーブルの取得、ロールの追加、クエリの実行などを行うことができます。
|
||||
- [GoTrue](https://github.com/netlify/gotrue) は、ユーザー管理と SWT トークン発行のための SWT ベースの API です。
|
||||
- [Kong](https://github.com/Kong/kong) は、クラウドネイティブな API ゲートウェイです。
|
||||
|
||||
#### クライアント・ライブラリ
|
||||
|
||||
Supabaseクライアントライブラリはモジュール化されています。それぞれのサブライブラリが、一つの外部システムのための独立した実装となっています。こうすることで、既存のツールをサポートしています。
|
||||
Supabase クライアントライブラリはモジュール化されています。それぞれのサブライブラリが、一つの外部システムのための独立した実装となっています。こうすることで、既存のツールをサポートしています。
|
||||
|
||||
- **`supabase-{lang}`**: 下記全てのライブラリを内包したクライアントライブラリ
|
||||
- `postgrest-{lang}`: [PostgREST](https://github.com/postgrest/postgrest)用のクライアントライブラリ
|
||||
- `realtime-{lang}`: [Realtime](https://github.com/supabase/realtime)用のクライアントライブラリ
|
||||
- `gotrue-{lang}`: [GoTrue](https://github.com/netlify/gotrue)用のクライアントライブラリ
|
||||
|
||||
| レポジトリ | 公式 | コミュニティ |
|
||||
| レポジトリ | 公式 | コミュニティ |
|
||||
| --------------------- | ------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| **`supabase-{lang}`** | [`JS`](https://github.com/supabase/supabase-js) | [`C#`](https://github.com/supabase/supabase-csharp) \| [`Dart`](https://github.com/supabase/supabase-dart) \| [`Python`](https://github.com/supabase/supabase-py) \| `Rust` |
|
||||
| `postgrest-{lang}` | [`JS`](https://github.com/supabase/postgrest-js) | [`C#`](https://github.com/supabase/postgrest-csharp) \| [`Dart`](https://github.com/supabase/postgrest-dart) \| [`Python`](https://github.com/supabase/postgrest-py) \| [`Rust`](https://github.com/supabase/postgrest-rs) |
|
||||
@@ -76,6 +76,7 @@ Supabaseクライアントライブラリはモジュール化されています
|
||||
|
||||
<!--- Remove this list if you're traslating to another language, it's hard to keep updated across multiple files-->
|
||||
<!--- Keep only the link to the list of translation files-->
|
||||
|
||||
## 翻訳
|
||||
|
||||
- [翻訳](/i18n/languages.md) <!--- Keep only the this-->
|
||||
|
||||
+2
-1
@@ -67,7 +67,7 @@ Supabase 클라이언트 라이브러리는 모듈식 입니다. 각 하위 라
|
||||
- `realtime-{lang}`: [Realtime](https://github.com/supabase/realtime)용 클라이언트 라이브러리
|
||||
- `gotrue-{lang}`: [GoTrue](https://github.com/netlify/gotrue)용 클라이언트 라이브러리
|
||||
|
||||
| 저장소 | 공식 | 커뮤니티 |
|
||||
| 저장소 | 공식 | 커뮤니티 |
|
||||
| --------------------- | ------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| **`supabase-{lang}`** | [`JS`](https://github.com/supabase/supabase-js) | [`C#`](https://github.com/supabase/supabase-csharp) \| [`Dart`](https://github.com/supabase/supabase-dart) \| [`Python`](https://github.com/supabase/supabase-py) \| `Rust` |
|
||||
| `postgrest-{lang}` | [`JS`](https://github.com/supabase/postgrest-js) | [`C#`](https://github.com/supabase/postgrest-csharp) \| [`Dart`](https://github.com/supabase/postgrest-dart) \| [`Python`](https://github.com/supabase/postgrest-py) \| [`Rust`](https://github.com/supabase/postgrest-rs) |
|
||||
@@ -76,6 +76,7 @@ Supabase 클라이언트 라이브러리는 모듈식 입니다. 각 하위 라
|
||||
|
||||
<!--- Remove this list if you're traslating to another language, it's hard to keep updated across multiple files-->
|
||||
<!--- Keep only the link to the list of translation files-->
|
||||
|
||||
## 번역
|
||||
|
||||
- [번역](/i18n/languages.md) <!--- Keep only the this-->
|
||||
|
||||
@@ -66,15 +66,16 @@ Nossa biblioteca de cliente é modular. Cada sub-biblioteca é uma implementaç
|
||||
- `realtime-{lang}`: Biblioteca de cliente para trabalhar com [Realtime](https://github.com/supabase/realtime)
|
||||
- `gotrue-{lang}`: Biblioteca de cliente para trabalhar com [GoTrue](https://github.com/netlify/gotrue)
|
||||
|
||||
| Repo | Oficial | Comunidade |
|
||||
| --------------------- | ------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| **`supabase-{lang}`** | [`JS`](https://github.com/supabase/supabase-js) | [`C#`](https://github.com/supabase/supabase-csharp) \| [`Dart`](https://github.com/supabase/supabase-dart) \| [`Python`](https://github.com/supabase/supabase-py) \| `Rust` \| [`Ruby`](https://github.com/supabase/supabase-rb)
|
||||
| `postgrest-{lang}` | [`JS`](https://github.com/supabase/postgrest-js) | [`C#`](https://github.com/supabase/postgrest-csharp) \| [`Dart`](https://github.com/supabase/postgrest-dart) \| [`Python`](https://github.com/supabase/postgrest-py) \| [`Rust`](https://github.com/supabase/postgrest-rs) \| [`Ruby`](https://github.com/supabase/postgrest-rb)
|
||||
| `realtime-{lang}` | [`JS`](https://github.com/supabase/realtime-js) | [`C#`](https://github.com/supabase/realtime-csharp) \| [`Dart`](https://github.com/supabase/realtime-dart) \| [`Python`](https://github.com/supabase/realtime-py) \| `Rust` \| `Ruby` |
|
||||
| `gotrue-{lang}` | [`JS`](https://github.com/supabase/gotrue-js) | [`C#`](https://github.com/supabase/gotrue-csharp) \| [`Dart`](https://github.com/supabase/gotrue-dart) \| [`Python`](https://github.com/supabase/gotrue-py) \| `Rust` \| `Ruby` |
|
||||
| Repo | Oficial | Comunidade |
|
||||
| --------------------- | ------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| **`supabase-{lang}`** | [`JS`](https://github.com/supabase/supabase-js) | [`C#`](https://github.com/supabase/supabase-csharp) \| [`Dart`](https://github.com/supabase/supabase-dart) \| [`Python`](https://github.com/supabase/supabase-py) \| `Rust` \| [`Ruby`](https://github.com/supabase/supabase-rb) |
|
||||
| `postgrest-{lang}` | [`JS`](https://github.com/supabase/postgrest-js) | [`C#`](https://github.com/supabase/postgrest-csharp) \| [`Dart`](https://github.com/supabase/postgrest-dart) \| [`Python`](https://github.com/supabase/postgrest-py) \| [`Rust`](https://github.com/supabase/postgrest-rs) \| [`Ruby`](https://github.com/supabase/postgrest-rb) |
|
||||
| `realtime-{lang}` | [`JS`](https://github.com/supabase/realtime-js) | [`C#`](https://github.com/supabase/realtime-csharp) \| [`Dart`](https://github.com/supabase/realtime-dart) \| [`Python`](https://github.com/supabase/realtime-py) \| `Rust` \| `Ruby` |
|
||||
| `gotrue-{lang}` | [`JS`](https://github.com/supabase/gotrue-js) | [`C#`](https://github.com/supabase/gotrue-csharp) \| [`Dart`](https://github.com/supabase/gotrue-dart) \| [`Python`](https://github.com/supabase/gotrue-py) \| `Rust` \| `Ruby` |
|
||||
|
||||
<!--- Remove this list if you're traslating to another language, it's hard to keep updated across multiple files-->
|
||||
<!--- Keep only the link to the list of translation files-->
|
||||
|
||||
## Traduções
|
||||
|
||||
- [Traduções](/i18n/languages.md) <!--- Keep only the this-->
|
||||
|
||||
+4
-5
@@ -8,7 +8,6 @@
|
||||
|
||||
[Supabase](https://supabase.io) é uma alternativa de código aberto ao Firebase. Estamos reproduzindo as funcionalidades do Firebase usando ferramentas de código aberto de nível empresarial.
|
||||
|
||||
|
||||
- [x] Base de dados Postgres hospedada
|
||||
- [x] Subscrições em tempo real
|
||||
- [x] Autenticação e autorização
|
||||
@@ -27,7 +26,6 @@ Para ver a documentação completa, visite [supabase.io/docs](https://supabase.i
|
||||
- [Problemas do GitHub](https://github.com/supabase/supabase/issues). Indicado para: bugs e erros que tu encontrares ao usar o Supabase.
|
||||
- [Suporte por e-mail](https://supabase.io/docs/support#business-support). Indicado para: problemas com a tua base de dados ou infraestrutura.
|
||||
|
||||
|
||||
## Status
|
||||
|
||||
- [x] Alpha: estamos a testar o Supabase com um grupo fechado de clientes
|
||||
@@ -64,9 +62,9 @@ Supabase é uma [plataforma hospedada](https://app.supabase.io). Podes-te inscre
|
||||
Nossa biblioteca cliente é modular. Cada sub-biblioteca é uma implementação independente para um único sistema externo. Esta é uma das maneiras pelas quais oferecemos suporte às ferramentas existentes.
|
||||
|
||||
- **`supabase-{lang}`**: Combina bibliotecas e adiciona funcionalidades.
|
||||
- `postgrest-{lang}`: Biblioteca cliente para trabalhar com [PostgREST](https://github.com/postgrest/postgrest)
|
||||
- `realtime-{lang}`: Biblioteca cliente para trabalhar com [Realtime](https://github.com/supabase/realtime)
|
||||
- `gotrue-{lang}`: Biblioteca cliente para trabalhar com [GoTrue](https://github.com/netlify/gotrue)
|
||||
- `postgrest-{lang}`: Biblioteca cliente para trabalhar com [PostgREST](https://github.com/postgrest/postgrest)
|
||||
- `realtime-{lang}`: Biblioteca cliente para trabalhar com [Realtime](https://github.com/supabase/realtime)
|
||||
- `gotrue-{lang}`: Biblioteca cliente para trabalhar com [GoTrue](https://github.com/netlify/gotrue)
|
||||
|
||||
| Repositório | Oficial | Comunidade |
|
||||
| --------------------- | ------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
@@ -77,6 +75,7 @@ Nossa biblioteca cliente é modular. Cada sub-biblioteca é uma implementação
|
||||
|
||||
<!--- Remove this list if you're traslating to another language, it's hard to keep updated across multiple files-->
|
||||
<!--- Keep only the link to the list of translation files-->
|
||||
|
||||
## Traduções
|
||||
|
||||
- [Traduções](/i18n/languages.md) <!--- Keep only the this-->
|
||||
|
||||
@@ -75,6 +75,7 @@ Supabase – это [облачная платформа](https://app.supabase.i
|
||||
|
||||
<!--- Remove this list if you're traslating to another language, it's hard to keep updated across multiple files-->
|
||||
<!--- Keep only the link to the list of translation files-->
|
||||
|
||||
## Переводы
|
||||
|
||||
- [Переводы](/i18n/languages.md) <!--- Keep only the this-->
|
||||
|
||||
+8
-9
@@ -49,8 +49,6 @@ Supabase är en [hostad plattform](https://app.supabase.io). Du kan registrera d
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
- [PostgreSQL](https://www.postgresql.org/) är en objektrelationsdatabas med över 30 års aktiv utveckling , vilket har gett den ett gott rykte som pålitlig, robust och högpresterande.
|
||||
- [Realtime](https://github.com/supabase/realtime) är en Elexir-server som låter dig lyssna på skapande, uppdateringar och borttagningar i PostgreSQL med hjälp av websockets. Supabase lyssnar på PostgreSQL´s inbyggda replikeringsfunktionalitet, konverterar replikerings-byte-strömmen till JSON och sänder sedan JSON via websockets.
|
||||
- [PostgREST](http://postgrest.org/) är en webbserver som omvandlar din PostgreSQL-databas direkt till ett REST-API.
|
||||
@@ -68,21 +66,22 @@ Vårt klientbibliotek är modulärt. Varje underbibliotek är en fristående imp
|
||||
- `realtime-{lang}`: Klientbibliotek för att arbeta med [Realtime](https://github.com/supabase/realtime)
|
||||
- `gotrue-{lang}`: Klientbibliotek för att arbeta med [GoTrue](https://github.com/netlify/gotrue)
|
||||
|
||||
| Repo | Officiellt | Community |
|
||||
| --------------------- | ------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| **`supabase-{lang}`** | [`JS`](https://github.com/supabase/supabase-js) | [`C#`](https://github.com/supabase/supabase-csharp) \| [`Dart`](https://github.com/supabase/supabase-dart) \| [`Python`](https://github.com/supabase/supabase-py) \| `Rust` \| [`Ruby`](https://github.com/supabase/supabase-rb)
|
||||
| `postgrest-{lang}` | [`JS`](https://github.com/supabase/postgrest-js) | [`C#`](https://github.com/supabase/postgrest-csharp) \| [`Dart`](https://github.com/supabase/postgrest-dart) \| [`Python`](https://github.com/supabase/postgrest-py) \| [`Rust`](https://github.com/supabase/postgrest-rs) \| [`Ruby`](https://github.com/supabase/postgrest-rb)
|
||||
| `realtime-{lang}` | [`JS`](https://github.com/supabase/realtime-js) | [`C#`](https://github.com/supabase/realtime-csharp) \| [`Dart`](https://github.com/supabase/realtime-dart) \| [`Python`](https://github.com/supabase/realtime-py) \| `Rust` \| `Ruby` |
|
||||
| `gotrue-{lang}` | [`JS`](https://github.com/supabase/gotrue-js) | [`C#`](https://github.com/supabase/gotrue-csharp) \| [`Dart`](https://github.com/supabase/gotrue-dart) \| [`Python`](https://github.com/supabase/gotrue-py) \| `Rust` \| `Ruby` |
|
||||
| Repo | Officiellt | Community |
|
||||
| --------------------- | ------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| **`supabase-{lang}`** | [`JS`](https://github.com/supabase/supabase-js) | [`C#`](https://github.com/supabase/supabase-csharp) \| [`Dart`](https://github.com/supabase/supabase-dart) \| [`Python`](https://github.com/supabase/supabase-py) \| `Rust` \| [`Ruby`](https://github.com/supabase/supabase-rb) |
|
||||
| `postgrest-{lang}` | [`JS`](https://github.com/supabase/postgrest-js) | [`C#`](https://github.com/supabase/postgrest-csharp) \| [`Dart`](https://github.com/supabase/postgrest-dart) \| [`Python`](https://github.com/supabase/postgrest-py) \| [`Rust`](https://github.com/supabase/postgrest-rs) \| [`Ruby`](https://github.com/supabase/postgrest-rb) |
|
||||
| `realtime-{lang}` | [`JS`](https://github.com/supabase/realtime-js) | [`C#`](https://github.com/supabase/realtime-csharp) \| [`Dart`](https://github.com/supabase/realtime-dart) \| [`Python`](https://github.com/supabase/realtime-py) \| `Rust` \| `Ruby` |
|
||||
| `gotrue-{lang}` | [`JS`](https://github.com/supabase/gotrue-js) | [`C#`](https://github.com/supabase/gotrue-csharp) \| [`Dart`](https://github.com/supabase/gotrue-dart) \| [`Python`](https://github.com/supabase/gotrue-py) \| `Rust` \| `Ruby` |
|
||||
|
||||
<!--- Remove this list if you're traslating to another language, it's hard to keep updated across multiple files-->
|
||||
<!--- Keep only the link to the list of translation files-->
|
||||
|
||||
## Översättningar
|
||||
|
||||
- [Lista med översättningar](/i18n/languages.md) <!--- Keep only this -->
|
||||
|
||||
---
|
||||
|
||||
## Sponsorer
|
||||
|
||||
[](https://github.com/sponsors/supabase)
|
||||
[](https://github.com/sponsors/supabase)
|
||||
+7
-6
@@ -25,7 +25,7 @@ Tam dokümantasyon için, ziyaret et [supabase.io/docs](https://supabase.io/docs
|
||||
- [Topluluk Forumu](https://github.com/supabase/supabase/discussions). Şunun için en iyisi: yapı ile ilgili yardım, veritabanı için en iyi pratikleri tartışmak.
|
||||
- [GitHub Issues](https://github.com/supabase/supabase/issues). Şunun için en iyisi: Supabase kullanırken karşılaştığınız problem ve hatalar.
|
||||
- [Email Desteği](https://supabase.io/docs/support#business-support). Şunun için en iyisi:
|
||||
veritabanınız veya altyapınızla ilgili sorunlar.
|
||||
veritabanınız veya altyapınızla ilgili sorunlar.
|
||||
|
||||
## Durum
|
||||
|
||||
@@ -50,13 +50,13 @@ Supabase [barındırılan bir platformdur](https://app.supabase.io). Hiçbir şe
|
||||
|
||||
|
||||
|
||||
- [PostgreSQL](https://www.postgresql.org/) güvenilirlik, özellik sağlamlığı ve performans açısından güçlü bir üne kavuşan 30 yılı aşkın aktif geliştirmeye sahip bir nesne ilişkisel veritabanı sistemidir.
|
||||
- [PostgreSQL](https://www.postgresql.org/) güvenilirlik, özellik sağlamlığı ve performans açısından güçlü bir üne kavuşan 30 yılı aşkın aktif geliştirmeye sahip bir nesne ilişkisel veritabanı sistemidir.
|
||||
- [Realtime](https://github.com/supabase/realtime) Web soketleri kullanarak PostgreSQL eklerini, güncellemelerini ve silmelerini dinlemenizi sağlayan bir Elixir sunucusudur. Supabase, Postgres'in yerleşik çoğaltma işlevini dinler, çoğaltma bayt akışını JSON'a dönüştürür ve ardından JSON'yi web yuvaları üzerinden yayınlar.
|
||||
- [PostgREST](http://postgrest.org/) PostgreSQL veritabanınızı doğrudan bir RESTful API'ye dönüştüren bir web sunucusudur.
|
||||
- [PostgREST](http://postgrest.org/) PostgreSQL veritabanınızı doğrudan bir RESTful API'ye dönüştüren bir web sunucusudur.
|
||||
- [Storage](https://github.com/supabase/storage-api) , izinleri yönetmek için Postgres kullanarak S3'te depolanan Dosyaları yönetmek için RESTful bir arayüz sağlar.
|
||||
- [postgres-meta](https://github.com/supabase/postgres-meta) Postgres'inizi yönetmeye yarayan RESTful bir API'dir ve tabloları getirmenize, roller eklemenize ve sorgu çalıştırmanıza vb. izin verir.
|
||||
- [GoTrue](https://github.com/netlify/gotrue) kullanıcıları yönetmek ve SWT belirteçleri vermek için SWT tabanlı bir API'dir.
|
||||
- [Kong](https://github.com/Kong/kong) bulutta yerel bir API ağ geçididir.
|
||||
- [GoTrue](https://github.com/netlify/gotrue) kullanıcıları yönetmek ve SWT belirteçleri vermek için SWT tabanlı bir API'dir.
|
||||
- [Kong](https://github.com/Kong/kong) bulutta yerel bir API ağ geçididir.
|
||||
|
||||
#### İstemci kitaplıkları
|
||||
|
||||
@@ -67,7 +67,7 @@ Müşteri kitaplığımız modülerdir. Her bir alt kütüphane, tek bir harici
|
||||
- `realtime-{lang}`: [Realtime](https://github.com/supabase/realtime) ile çalışmak için istemci kitaplığı
|
||||
- `gotrue-{lang}`: [GoTrue](https://github.com/netlify/gotrue) ile çalışmak için istemci kitaplığı
|
||||
|
||||
| Depo | Resmi | Topluluk |
|
||||
| Depo | Resmi | Topluluk |
|
||||
| --------------------- | ------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| **`supabase-{lang}`** | [`JS`](https://github.com/supabase/supabase-js) | [`C#`](https://github.com/supabase/supabase-csharp) \| [`Dart`](https://github.com/supabase/supabase-dart) \| [`Python`](https://github.com/supabase/supabase-py) \| `Rust` |
|
||||
| `postgrest-{lang}` | [`JS`](https://github.com/supabase/postgrest-js) | [`C#`](https://github.com/supabase/postgrest-csharp) \| [`Dart`](https://github.com/supabase/postgrest-dart) \| [`Python`](https://github.com/supabase/postgrest-py) \| [`Rust`](https://github.com/supabase/postgrest-rs) |
|
||||
@@ -76,6 +76,7 @@ Müşteri kitaplığımız modülerdir. Her bir alt kütüphane, tek bir harici
|
||||
|
||||
<!--- Remove this list if you're traslating to another language, it's hard to keep updated across multiple files-->
|
||||
<!--- Keep only the link to the list of translation files-->
|
||||
|
||||
## Çeviriler
|
||||
|
||||
- [Çeviriler](/i18n/languages.md) <!--- Keep only the this-->
|
||||
|
||||
+4
-3
@@ -62,9 +62,9 @@ Supabase – це [хмарна платформа](https://app.supabase.io). В
|
||||
Наша клієнтська бібліотека модульна. Кожна підбібліотека є окремою реалізацією для однієї зовнішньої системи. Це один зі способів, за допомогою якого ми підтримуємо наявні інструменти.
|
||||
|
||||
- **`supabase-{lang}`**: Об'єднує бібліотеки та збільшує функціонал.
|
||||
- `postgrest-{lang}`: Клієнтська бібліотека для роботи з [PostgREST](https://github.com/postgrest/postgrest)
|
||||
- `realtime-{lang}`: Клієнтська бібліотека для роботи з [Realtime](https://github.com/supabase/realtime)
|
||||
- `gotrue-{lang}`: Клієнтська бібліотека для роботи з [GoTrue](https://github.com/netlify/gotrue)
|
||||
- `postgrest-{lang}`: Клієнтська бібліотека для роботи з [PostgREST](https://github.com/postgrest/postgrest)
|
||||
- `realtime-{lang}`: Клієнтська бібліотека для роботи з [Realtime](https://github.com/supabase/realtime)
|
||||
- `gotrue-{lang}`: Клієнтська бібліотека для роботи з [GoTrue](https://github.com/netlify/gotrue)
|
||||
|
||||
| Repo | Офіційні | Спільноти |
|
||||
| --------------------- | ------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
@@ -75,6 +75,7 @@ Supabase – це [хмарна платформа](https://app.supabase.io). В
|
||||
|
||||
<!--- Remove this list if you're traslating to another language, it's hard to keep updated across multiple files-->
|
||||
<!--- Keep only the link to the list of translation files-->
|
||||
|
||||
## Переклади
|
||||
|
||||
- [Переклади](/i18n/languages.md) <!--- Keep only the this-->
|
||||
|
||||
@@ -66,7 +66,7 @@ Supabase 是一个[托管平台](https://app.supabase.io)。你可以注册并
|
||||
- `realtime-{lang}`：与 [Realtime](https://github.com/supabase/realtime) 交互的客户端库
|
||||
- `gotrue-{lang}`：与 [GoTrue](https://github.com/netlify/gotrue) 交互的客户端库
|
||||
|
||||
| 代码存储库 | 官方 | 社区 |
|
||||
| 代码存储库 | 官方 | 社区 |
|
||||
| --------------------- | ------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| **`supabase-{lang}`** | [`JS`](https://github.com/supabase/supabase-js) | [`C#`](https://github.com/supabase/supabase-csharp) \| [`Dart`](https://github.com/supabase/supabase-dart) \| [`Python`](https://github.com/supabase/supabase-py) \| `Rust` |
|
||||
| `postgrest-{lang}` | [`JS`](https://github.com/supabase/postgrest-js) | [`C#`](https://github.com/supabase/postgrest-csharp) \| [`Dart`](https://github.com/supabase/postgrest-dart) \| [`Python`](https://github.com/supabase/postgrest-py) \| [`Rust`](https://github.com/supabase/postgrest-rs) |
|
||||
|
||||
Loaded 100 of 204 files, more files were not shown because too many files have changed in this diff.
Show more
Reference in new issue
Block a user