├── ForgotPassword.svelte
├── Login.svelte
├── LoginWindow.svelte
├── Logout.svelte
├── README.md
├── Signup.svelte
├── package.js
├── state.js
├── svelte-accounts-ui-tests.js
└── svelte-accounts-ui.js


/ForgotPassword.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 |   import { Accounts } from "meteor/accounts-base";
 3 |   import { Meteor } from "meteor/meteor";
 4 |   import { error } from "./state";
 5 | 
 6 |   export let heading = "Forgot Password";
 7 | 
 8 |   let email = "";
 9 |   let isSent = false;
10 | 
11 |   function onSubmit() {
12 |     Accounts.forgotPassword(
13 |       {
14 |         email
15 |       },
16 |       err => {
17 |         if (!err) {
18 |           isSent = true;
19 |           email = "";
20 |           return;
21 |         }
22 |         error.set(err.reason);
23 |       }
24 |     );
25 |   }
26 | </script>
27 | 
28 | <h3>{heading}</h3>
29 | 
30 | <form on:submit|preventDefault={onSubmit}>
31 |   <div>
32 |     <label>
33 |       Email
34 |       <input placeholder="test@yo.com" type="email" bind:value={email} />
35 |     </label>
36 |   </div>
37 |   <button>Send Request</button>
38 | </form>
39 | 


--------------------------------------------------------------------------------
/Login.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 |   // import { Accounts } from "meteor/accounts-base";
 3 |   // import { Meteor } from "meteor/meteor";
 4 |   import { error } from "./state";
 5 | 
 6 |   export let heading = "Login";
 7 | 
 8 |   let email = "";
 9 |   let password = "";
10 | 
11 |   function onSubmit() {
12 |     Meteor.loginWithPassword(email, password, err => {
13 |       if (!err) {
14 |         isSent = true;
15 |         email = "";
16 |         return;
17 |       }
18 |       error.set(err.reason);
19 |     });
20 |   }
21 | </script>
22 | 
23 | <h3>{heading}</h3>
24 | 
25 | <form on:submit|preventDefault={onSubmit}>
26 |   <div>
27 |     <label>
28 |       Email
29 |       <input placeholder="test@yo.com" type="email" bind:value={email} />
30 |     </label>
31 |   </div>
32 |   <div>
33 |     <label>
34 |       Password
35 |       <input placeholder="1234" type="password" bind:value={password} />
36 |     </label>
37 |   </div>
38 |   <button>Login</button>
39 | </form>
40 | 


--------------------------------------------------------------------------------
/LoginWindow.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 |   import Login from "./Login.svelte";
 3 |   import Signup from "./Signup.svelte";
 4 |   import ForgotPassword from "./ForgotPassword.svelte";
 5 |   import { error } from "./state";
 6 | 
 7 |   let loginHeading = "Login";
 8 |   let signupHeading = "Sign Up";
 9 |   let windowType = "LOGIN";
10 | </script>
11 | 
12 | <style>
13 |   .error {
14 |     color: red;
15 |   }
16 | </style>
17 | 
18 | {#if windowType === 'LOGIN'}
19 |   <Login heading={loginHeading} />
20 |   <p>Need an account?</p>
21 | 
22 |   <button
23 |     on:click={() => {
24 |       windowType = 'SIGNUP';
25 |     }}>
26 |     Signup
27 |   </button>
28 | {:else if windowType === 'SIGNUP'}
29 |   <Signup heading={signupHeading} />
30 |   <p>I already have an account.</p>
31 |   <button
32 |     on:click={() => {
33 |       windowType = 'LOGIN';
34 |     }}>
35 |     Login
36 |   </button>
37 | {:else}
38 |   <ForgotPassword />
39 |   <p>I know my password</p>
40 |   <button
41 |     on:click={() => {
42 |       windowType = 'LOGIN';
43 |     }}>
44 |     Login
45 |   </button>
46 | {/if}
47 | 
48 | {#if $error}
49 |   <p class="error">{$error}</p>
50 | {/if}
51 | 
52 | <button
53 |   on:click={() => {
54 |     windowType = 'FORGOT_PASSWORD';
55 |   }}>
56 |   Forgot Password
57 | </button>
58 | 


--------------------------------------------------------------------------------
/Logout.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 |   // import { Meteor } from "meteor/meteor";
 3 | 
 4 |   let text = "Logout";
 5 | </script>
 6 | 
 7 | <button
 8 |   on:click={() => {
 9 |     Meteor.logout();
10 |   }}>
11 |   {text}
12 | </button>
13 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # levelup:svelte-accounts-ui
 2 | 
 3 | > A word or warning. This is super rough rn. I'm publishing to allow for community involvement and to get feedback. That said... it's totally usable.
 4 | 
 5 | > Currently email & password is the only supported means of logging in.
 6 | 
 7 | ## Basic
 8 | 
 9 | ```js
10 | <script>
11 | import { LoginWindow } from 'meteor/levelup:svelte-accounts-ui'
12 | </script>
13 | 
14 | <LoginWindow />
15 | ```
16 | 
17 | ## You can also
18 | 
19 | ```js
20 | <script>
21 | import { Login, Signup, Logout } from 'meteor/levelup:svelte-accounts-ui'
22 | </script>
23 | 
24 | <Signup heading="Create User" />
25 | <Login />
26 | <Logout />
27 | ```
28 | 
29 | ## Components
30 | 
31 | ### LoginWindow
32 | 
33 | Easy UI for Logins
34 | 
35 | | Prop          | Type   | Default   | Description |
36 | | ------------- | ------ | --------- | ----------- |
37 | | signupHeading | string | "Sign Up" |             |
38 | | loginHeading  | string | "Login"   |             |
39 | 
40 | ### Login
41 | 
42 | Login Form
43 | 
44 | | Prop    | Type   | Default | Description |
45 | | ------- | ------ | ------- | ----------- |
46 | | heading | string | "Login" |             |
47 | 
48 | ### Signup
49 | 
50 | Sign Up Form
51 | 
52 | | Prop          | Type   | Default   | Description |
53 | | ------------- | ------ | --------- | ----------- |
54 | | signupHeading | string | "Sign Up" |             |
55 | 
56 | ### Logout
57 | 
58 | A button that logs the user out
59 | 
60 | | Prop | Type   | Default  | Description |
61 | | ---- | ------ | -------- | ----------- |
62 | | text | string | "Logout" |             |
63 | 
64 | ### Todo
65 | 
66 | - Reset Password
67 | - Forgot Password Link
68 | - Config options
69 | - Default window view
70 | - Style Wrapper Component
71 | - Text as props
72 | - Oauth Services
73 | - 😅 Long way to go huh?
74 | 


--------------------------------------------------------------------------------
/Signup.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 |   // import { Accounts } from "meteor/accounts-base";
 3 |   import { error } from "./state";
 4 | 
 5 |   // Props
 6 |   export let heading = "Login";
 7 | 
 8 |   // State
 9 |   let email = "";
10 |   let password = "";
11 | 
12 |   // Actions
13 |   function onSubmit() {
14 |     Accounts.createUser(
15 |       {
16 |         password,
17 |         email
18 |       },
19 |       err => {
20 |         if (!err) {
21 |           isSent = true;
22 |           email = "";
23 |           return;
24 |         }
25 |         error.set(err.reason);
26 |       }
27 |     );
28 |   }
29 | </script>
30 | 
31 | <h3>{heading}</h3>
32 | 
33 | <form on:submit|preventDefault={onSubmit}>
34 |   <div>
35 |     <label>
36 |       Email
37 |       <input placeholder="test@yo.com" type="email" bind:value={email} />
38 |     </label>
39 |   </div>
40 |   <div>
41 |     <label>
42 |       Password
43 |       <input placeholder="1234" type="password" bind:value={password} />
44 |     </label>
45 |   </div>
46 |   <button>Signup</button>
47 | </form>
48 | 


--------------------------------------------------------------------------------
/package.js:
--------------------------------------------------------------------------------
 1 | Package.describe({
 2 |   name: "levelup:svelte-accounts-ui",
 3 |   version: "0.0.6",
 4 |   summary: "The simplicity of Blaze drop in ui, but in Svelte",
 5 |   // URL to the Git repository containing the source code for this package.
 6 |   git: "https://github.com/leveluptuts/svelte-accounts-ui",
 7 |   // By default, Meteor will default to using README.md for documentation.
 8 |   // To avoid submitting documentation, set this field to null.
 9 |   documentation: "README.md",
10 | });
11 | 
12 | Package.onUse(function (api) {
13 |   api.use("ecmascript@0.14.3");
14 |   api.use("svelte:compiler@3.16.4_1");
15 |   api.use("accounts-base@1.6.0");
16 |   api.use("accounts-password@1.6.0");
17 |   api.mainModule("svelte-accounts-ui.js");
18 | });
19 | 
20 | // Package.onTest(function (api) {
21 | //   api.use("ecmascript");
22 | //   api.use("tinytest");
23 | //   api.use("svelte-accounts-ui");
24 | //   api.mainModule("svelte-accounts-ui-tests.js");
25 | // });
26 | 


--------------------------------------------------------------------------------
/state.js:
--------------------------------------------------------------------------------
1 | import { writable } from "svelte/store";
2 | 
3 | export const error = writable("");
4 | 


--------------------------------------------------------------------------------
/svelte-accounts-ui-tests.js:
--------------------------------------------------------------------------------
 1 | // Import Tinytest from the tinytest Meteor package.
 2 | import { Tinytest } from "meteor/tinytest";
 3 | 
 4 | // Import and rename a variable exported by svelte-accounts-ui.js.
 5 | import { name as packageName } from "meteor/svelte-accounts-ui";
 6 | 
 7 | // Write your tests here!
 8 | // Here is an example.
 9 | Tinytest.add('svelte-accounts-ui - example', function (test) {
10 |   test.equal(packageName, "svelte-accounts-ui");
11 | });
12 | 


--------------------------------------------------------------------------------
/svelte-accounts-ui.js:
--------------------------------------------------------------------------------
 1 | // Write your package code here!
 2 | 
 3 | import Login from "./Login.svelte";
 4 | import LoginWindow from "./LoginWindow.svelte";
 5 | import Signup from "./Signup.svelte";
 6 | import Logout from "./Logout.svelte";
 7 | 
 8 | // Variables exported by this module can be imported by other packages and
 9 | // applications. See svelte-accounts-ui-tests.js for an example of importing.
10 | export const name = "svelte-accounts-ui";
11 | 
12 | export { Login, Signup, LoginWindow, Logout };
13 | 


--------------------------------------------------------------------------------